panel: work without right-sidebar pre-existing

+ smaller tweaks inc. icon pos, default uuid gen, clickthrough hover area to topbar

api/components/_.mjs

@@ -29,7 +29,7 @@ export { feather } from './feather.mjs';
 /**
  * adds a view to the enhancer's side panel
  * @param {object} panel - information used to construct and render the panel
- * @param {string} panel.id - a uuid, used to restore the last open view on reload
+ * @param {string} [panel.id] - a uuid, used to restore the last open view on reload
  * @param {string} panel.icon - an svg string
  * @param {string} panel.title - the name of the view
  * @param {Element} panel.$content - an element containing the content of the view

api/components/panel.css

@@ -15,7 +15,7 @@
   max-height: 100%;
   z-index: 999;
   position: absolute;
-  top: 0;
+  top: 45px;
   right: 0;
   flex-grow: 0;
   flex-shrink: 0;
@@ -23,22 +23,24 @@
 }
 #enhancer--panel-hover-trigger[data-enhancer-panel-pinned] {
   /* taking up the physical space of the panel to move topbar buttons */
+  top: 0;
   position: relative;
   width: var(--component--panel-width);
 }
 
-.notion-cursor-listener > div[style*='flex-end'] {
-  transition: margin-right 300ms ease-in-out;
-}
-.notion-cursor-listener > div[style*='flex-end'][data-enhancer-panel-pinned] {
-  margin-right: var(--component--panel-width);
-}
 .notion-frame {
   transition: padding-right 300ms ease-in-out;
 }
 .notion-frame[data-enhancer-panel-pinned] {
   padding-right: var(--component--panel-width);
 }
+.notion-cursor-listener > div[style*='flex-end'] {
+  transition: margin-right 300ms ease-in-out;
+}
+.notion-cursor-listener > div[style*='flex-end'][data-enhancer-panel-pinned],
+#enhancer--panel[data-enhancer-panel-pinned] + div[style*='flex-end'] {
+  margin-right: var(--component--panel-width);
+}
 
 #enhancer--panel {
   z-index: 999;
@@ -85,6 +87,9 @@
   height: 1em;
   width: 1em;
 }
+.enhancer--panel-view-icon {
+  margin-bottom: -2px;
+}
 .enhancer--panel-view-title .enhancer--panel-view-title-text {
   font-size: 0.9em;
   margin: 0 0 0 0.75em;

api/components/panel.mjs

@@ -12,7 +12,7 @@
  * @module notion-enhancer/api/components/side-panel
  */
 
-import { web, components, registry } from '../_.mjs';
+import { fmt, web, components, registry } from '../_.mjs';
 const db = await registry.db('36a2ffc9-27ff-480e-84a7-c7700a7d232d');
 
 web.loadStylesheet('api/components/panel.css');
@@ -47,7 +47,9 @@ const $panel = web.html`<div id="enhancer--panel"></div>`,
   panelPinnedAttr = 'data-enhancer-panel-pinned',
   isPinned = () => $panel.hasAttribute(panelPinnedAttr),
   togglePanel = () => {
-    const $elems = [$notionRightSidebar, $notionFrame, $hoverTrigger, $panel];
+    const $elems = [$notionFrame, $notionRightSidebar, $hoverTrigger, $panel].filter(
+      ($el) => $el
+    );
     if (isPinned()) {
       closeSwitcher();
       for (const $elem of $elems) $elem.removeAttribute(panelPinnedAttr);
@@ -180,10 +182,20 @@ const $panel = web.html`<div id="enhancer--panel"></div>`,
   };
 
 async function createPanel() {
-  const notionRightSidebarSelector = '.notion-cursor-listener > div[style*="flex-end"]';
-  await web.whenReady([notionRightSidebarSelector]);
   $notionFrame = document.querySelector('.notion-frame');
+
+  const notionRightSidebarSelector = '.notion-cursor-listener > div[style*="flex-end"]',
+    detectRightSidebar = () => {
+      if (!document.contains($notionRightSidebar)) {
+        $notionRightSidebar = document.querySelector(notionRightSidebarSelector);
+        if (isPinned() && $notionRightSidebar) {
+          $notionRightSidebar.setAttribute(panelPinnedAttr, 'true');
+        }
+      }
+    };
   $notionRightSidebar = document.querySelector(notionRightSidebarSelector);
+  web.addDocumentObserver(detectRightSidebar, [notionRightSidebarSelector]);
+
   if (await db.get(['panel.pinned'])) togglePanel();
   web.addHotkeyListener(await db.get(['panel.hotkey']), togglePanel);
   $pinnedToggle.addEventListener('click', (event) => {
@@ -200,7 +212,10 @@ async function createPanel() {
   await enablePanelResize();
   await createViews();
 
-  $notionRightSidebar.after($hoverTrigger, $panel);
+  const cursorListenerSelector =
+    '.notion-cursor-listener > :last-child[style^="position: absolute"]';
+  await web.whenReady([cursorListenerSelector]);
+  document.querySelector(cursorListenerSelector).before($hoverTrigger, $panel);
 }
 
 async function enablePanelResize() {
@@ -224,12 +239,12 @@ async function createViews() {
 /**
  * adds a view to the enhancer's side panel
  * @param {object} panel - information used to construct and render the panel
- * @param {string} panel.id - a uuid, used to restore the last open view on reload
+ * @param {string} [panel.id] - a uuid, used to restore the last open view on reload
  * @param {string} panel.icon - an svg string
  * @param {string} panel.title - the name of the view
  * @param {Element} panel.$content - an element containing the content of the view
  */
-export const addPanelView = async ({ id, icon, title, $content }) => {
+export const addPanelView = async ({ id = fmt.uuidv4(), icon, title, $content }) => {
   const view = {
     id,
     $icon: web.html`<span class="enhancer--panel-view-title-icon">

api/components/tooltip.css

@@ -5,6 +5,7 @@
  */
 
 #enhancer--tooltip {
+  font-family: var(--theme--font_sans);
   background: var(--theme--ui_tooltip);
   border-radius: 3px;
   box-shadow: var(--theme--ui_shadow) 0px 1px 4px;
@@ -15,8 +16,9 @@
   line-height: 1.4;
   max-width: 20rem;
   overflow: hidden;
-  padding: 4px 8px;
+  padding: 2px 8px 4px 8px;
   position: absolute;
+  z-index: 999999999999999999;
 }
 #enhancer--tooltip p {
   margin: 0.25rem 0;