feat(panel): peek panel on hover near edge of screen

- regular toggle animation now slightly messed up
- todo make this configurable

scripts/vendor-dependencies.mjs

@@ -12,11 +12,11 @@ import { fileURLToPath } from "node:url";
 const dependencies = {
   "htm.min.js": "https://unpkg.com/htm@3.1.1/mini/index.js",
   "twind.min.js": "https://unpkg.com/@twind/cdn@1.0.8/cdn.global.js",
-  "lucide.min.js": "https://unpkg.com/lucide@0.264.0/dist/umd/lucide.min.js",
+  "lucide.min.js": "https://unpkg.com/lucide@0.309.0/dist/umd/lucide.min.js",
   "coloris.min.js":
-    "https://cdn.jsdelivr.net/gh/mdbassit/Coloris@v0.21.0/dist/coloris.min.js",
+    "https://cdn.jsdelivr.net/gh/mdbassit/Coloris@v0.22.0/dist/coloris.min.js",
   "coloris.min.css":
-    "https://cdn.jsdelivr.net/gh/mdbassit/Coloris@v0.21.0/dist/coloris.min.css",
+    "https://cdn.jsdelivr.net/gh/mdbassit/Coloris@v0.22.0/dist/coloris.min.css",
 };
 
 const output = fileURLToPath(new URL("../src/vendor", import.meta.url)),

src/core/client.mjs

@@ -123,28 +123,49 @@ const insertPanel = async (api, db) => {
   const notionFrame = ".notion-frame",
     notionTopbarBtn = ".notion-topbar-more-button",
     togglePanelHotkey = await db.get("togglePanelHotkey"),
-    { html, setState } = api;
+    { html, setState, addPanelView } = api;
 
   const $panel = html`<${Panel}
-      ...${Object.assign(
+    ...${Object.assign(
-        ...["Width", "Open", "View"].map((key) => ({
+      ...["Width", "Open", "View"].map((key) => ({
-          [`_get${key}`]: () => db.get(`sidePanel${key}`),
+        [`_get${key}`]: () => db.get(`sidePanel${key}`),
-          [`_set${key}`]: async (value) => {
+        [`_set${key}`]: async (value) => {
-            await db.set(`sidePanel${key}`, value);
+          await db.set(`sidePanel${key}`, value);
-            setState({ rerender: true });
+          setState({ rerender: true });
-          },
+        },
-        }))
+      }))
-      )}
+    )}
-    />`,
+  />`;
-    togglePanel = () => {
+
-      if ($panel.hasAttribute("open")) $panel.close();
+  const $helloThere = html`<div class="p-[16px]">hello there</div>`,
-      else $panel.open();
+    $generalKenobi = html`<div class="p-[16px]">general kenobi</div>`;
-    };
+  addPanelView({
+    title: "outliner",
+    // prettier-ignore
+    $icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+      <circle cx="5" cy="7" r="2.8"/>
+      <circle cx="5" cy="17" r="2.79"/>
+      <path d="M21,5.95H11c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0C22,5.5,21.55,5.95,21,5.95z"/>
+      <path d="M17,10.05h-6c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6c0.55,0,1,0.45,1,1v0C18,9.6,17.55,10.05,17,10.05z"/>
+      <path d="M21,15.95H11c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0C22,15.5,21.55,15.95,21,15.95z" />
+      <path d="M17,20.05h-6c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6c0.55,0,1,0.45,1,1v0C18,19.6,17.55,20.05,17,20.05z"/>
+    </svg>`,
+    $view: $helloThere,
+  });
+  addPanelView({
+    title: "word counter",
+    $icon: "type",
+    $view: $generalKenobi,
+  });
+  // setTimeout(() => {
+  //   removePanelView($helloThere);
+  //   removePanelView($generalKenobi);
+  // }, 5000);
 
   const $panelTopbarBtn = html`<${TopbarButton}
       aria-label="Open side panel"
       icon="panel-right"
-      onclick=${togglePanel}
+      onclick=${$panel.toggle}
     />`,
     appendToDom = () => {
       const $frame = document.querySelector(notionFrame);
@@ -170,7 +191,7 @@ const insertPanel = async (api, db) => {
   api.addKeyListener(togglePanelHotkey, (event) => {
     event.preventDefault();
     event.stopPropagation();
-    togglePanel();
+    $panel.toggle();
   });
 };
 

src/core/islands/Modal.mjs

@@ -42,11 +42,10 @@ function Modal(props, ...children) {
     _openQueued = false;
     $modal.onbeforeclose?.();
     $modal.removeAttribute("open");
-    $modal.style.pointerEvents = "auto";
+    if ($modal.contains(document.activeElement)) {
-    setTimeout(() => {
+      document.activeElement.blur();
-      $modal.style.pointerEvents = "";
+    }
-      $modal.onclose?.();
+    setTimeout(() => $modal.onclose?.(), 200);
-    }, 200);
   };
   addKeyListener("Escape", () => {
     if (document.activeElement?.nodeName === "INPUT") return;
@@ -58,7 +57,7 @@ function Modal(props, ...children) {
 function Frame(props) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {
-    class: `rounded-[5px] w-[1150px] h-[calc(100vh-100px)] opacity-0
+    class: `rounded-[12px] w-[1150px] h-[calc(100vh-100px)] opacity-0
     max-w-[calc(100vw-100px)] max-h-[715px] overflow-hidden scale-95
     bg-[color:var(--theme--bg-primary)] drop-shadow-xl transition
     group-open/modal:(pointer-events-auto opacity-100 scale-100)`,

src/core/islands/Panel.mjs

@@ -30,7 +30,7 @@ let panelViews = [],
   };
 
 function View({ _get }) {
-  const { html, setState, useState } = globalThis.__enhancerApi,
+  const { html, useState } = globalThis.__enhancerApi,
     $container = html`<div
       class="overflow-(y-auto x-hidden)
       h-full min-w-[var(--panel--width)]"
@@ -50,7 +50,7 @@ function View({ _get }) {
 }
 
 function Switcher({ _get, _set, minWidth, maxWidth }) {
-  const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
+  const { html, setState, useState } = globalThis.__enhancerApi,
     $switcher = html`<div
       class="relative flex items-center grow
       font-medium p-[8.5px] ml-[4px] select-none"
@@ -84,18 +84,15 @@ function Panel({
   _setOpen,
   _getView,
   _setView,
-  minWidth = 250,
+  minWidth = 256,
   maxWidth = 640,
   transitionDuration = 300,
 }) {
   const { html, setState, useState } = globalThis.__enhancerApi,
     { addMutationListener, removeMutationListener } = globalThis.__enhancerApi,
     $panel = html`<aside
-      class="notion-enhancer--panel relative order-2
+      class="notion-enhancer--panel group/panel
-      shrink-0 bg-[color:var(--theme--bg-primary)]
+      order-2 shrink-0 [open]:w-[var(--panel--width,0)]"
-      border-(l-1 [color:var(--theme--fg-border)])
-      transition-[width] w-[var(--panel--width,0)]
-      duration-[${transitionDuration}ms] group/panel"
     >
       <style>
         .notion-frame {
@@ -110,46 +107,64 @@ function Panel({
         }
       </style>
       <div
-        class="flex justify-between items-center
+        class="absolute right-0 bottom-0 bg-[color:var(--theme--bg-primary)]
-        border-(b [color:var(--theme--fg-border)])"
+        z-20 border-(l-1 [color:var(--theme--fg-border)]) w-[var(--panel--width,0)]
+        transition-[width,bottom,top,border-radius] duration-[${transitionDuration}ms]
+        hover:transition-[height,width,bottom,top,border-radius] h-[calc(100vh-45px)]
+        group-not-[open]/panel:(bottom-[60px] h-[calc(100vh-120px)] rounded-l-[8px] border-(t-1 b-1)
+        shadow-[rgba(15,15,15,0.1)_0px_0px_0px_1px,rgba(15,15,15,0.2)_0px_3px_6px,rgba(15,15,15,0.4)_0px_9px_24px])"
       >
-        <${Switcher}
+        <div
-          ...${{ _get: _getView, _set: _setView, minWidth, maxWidth }}
+          class="flex justify-between items-center
-        />
+          border-(b [color:var(--theme--fg-border)])"
-        <button
-          aria-label="Close side panel"
-          class="user-select-none h-[24px] w-[24px] duration-[20ms]
-          transition inline-flex items-center justify-center mr-[10px]
-          rounded-[3px] hover:bg-[color:var(--theme--bg-hover)]"
-          onclick=${() => $panel.close()}
         >
-          <i
+          <${Switcher}
-            class="i-chevrons-right w-[20px] h-[20px]
+            ...${{ _get: _getView, _set: _setView, minWidth, maxWidth }}
-            text-[color:var(--theme--fg-secondary)]"
           />
-        </button>
+          <button
+            aria-label="Toggle side panel"
+            class="user-select-none h-[24px] w-[24px] duration-[20ms]
+            transition inline-flex items-center justify-center mr-[10px]
+            rounded-[3px] hover:bg-[color:var(--theme--bg-hover)]"
+            onclick=${() => $panel.toggle()}
+          >
+            <i
+              class="i-chevrons-left w-[20px] h-[20px]
+              group-[open]/panel:rotate-180 duration-[${transitionDuration}ms]
+              transition-transform text-[color:var(--theme--fg-secondary)]"
+            />
+          </button>
+        </div>
+        <${View} ...${{ _get: _getView }} />
       </div>
-      <${View} ...${{ _get: _getView }} />
     </aside>`;
 
   let preDragWidth,
     dragStartX = 0;
   const $resizeHandle = html`<div
-      class="absolute h-full w-[3px] left-[-3px]
+      class="absolute h-full w-[3px] left-[-2px]
-      z-10 transition duration-300 hover:(cursor-col-resize
+      z-20 active:cursor-text transition duration-300
-      shadow-[var(--theme--fg-border)_-2px_0px_0px_0px_inset])
+      bg-[color:var(--theme--fg-border)] opacity-0
-      active:cursor-text group-not-[open]/panel:hidden"
+      group-not-[open]/panel:(w-[8px] left-[-1px] rounded-l-[7px])
-    ></div>`,
+      hover:(cursor-col-resize opacity-100)"
+    >
+      <div
+        class="ml-[2px] bg-[color:var(--theme--bg-primary)]
+        group-not-[open]/panel:(my-px h-[calc(100%-2px)] rounded-l-[6px])"
+      ></div>
+    </div>`,
+    $onResizeClick = html`<span>close</span>`,
     $resizeTooltip = html`<${Tooltip}>
-      <span>Drag</span> to resize<br />
+      <b>Drag</b> to resize<br />
-      <span>Click</span> to closed
+      <b>Click</b> to ${$onResizeClick}
     <//>`,
     showTooltip = (event) => {
       setTimeout(() => {
+        const handleHovered = $resizeHandle.matches(":hover");
+        if (!handleHovered) return;
         const panelOpen = $panel.hasAttribute("open"),
-          handleHovered = $resizeHandle.matches(":hover");
+          { x } = $resizeHandle.getBoundingClientRect();
-        if (!panelOpen || !handleHovered) return;
+        $onResizeClick.innerText = panelOpen ? "close" : "lock open";
-        const { x } = $resizeHandle.getBoundingClientRect();
         $resizeTooltip.show(x, event.clientY);
       }, 200);
     },
@@ -170,14 +185,25 @@ function Panel({
       document.removeEventListener("mouseup", endDrag);
       $panel.style.transitionDuration = "";
       $panel.resize(preDragWidth + (dragStartX - event.clientX));
-      // trigger panel close if not resized
+      // toggle panel if not resized
-      if (dragStartX - event.clientX === 0) $panel.close();
+      if (dragStartX - event.clientX === 0) $panel.toggle();
     };
   $resizeHandle.addEventListener("mouseout", $resizeTooltip.hide);
   $resizeHandle.addEventListener("mousedown", startDrag);
   $resizeHandle.addEventListener("mouseover", showTooltip);
   $panel.prepend($resizeHandle);
 
+  // pop out panel preview when hovering near the right edge
+  // of the screen, otherwise collapse panel when closed
+  const $hoverTrigger = html`<div
+    class="z-10 absolute right-0 bottom-[60px] h-[calc(100vh-120px)]
+    w-[64px] transition-[width] duration-[${transitionDuration}ms]"
+  ></div>`;
+  $hoverTrigger.addEventListener("mouseover", () => $panel.resize(0, true));
+  $panel.addEventListener("mouseenter", () => $panel.resize());
+  $panel.addEventListener("mouseout", () => $panel.resize());
+  $panel.append($hoverTrigger);
+
   // normally would place outside of an island, but in
   // this case is necessary for syncing up animations
   const notionHelp = ".notion-help-button",
@@ -200,15 +226,20 @@ function Panel({
     };
   addMutationListener(notionHelp, repositionHelp);
 
-  $panel.resize = async (width) => {
+  $panel.resize = async (width, peek = false) => {
     $resizeTooltip.hide();
-    if (width) {
+    if (width && !isNaN(width)) {
       width = Math.max(width, minWidth);
       width = Math.min(width, maxWidth);
       _setWidth?.(width);
     } else width = await _getWidth?.();
     if (isNaN(width)) width = minWidth;
-    if (!$panel.hasAttribute("open")) width = 0;
+    const panelOpen = $panel.hasAttribute("open"),
+      panelHovered = $panel.matches(":hover");
+    if (panelOpen) {
+    } else {
+      if (!panelHovered && !peek) width = 0;
+    }
     const $cssVarTarget = $panel.parentElement || $panel;
     $cssVarTarget.style.setProperty("--panel--width", `${width}px`);
     if ($cssVarTarget !== $panel) $panel.style.removeProperty("--panel--width");
@@ -217,7 +248,7 @@ function Panel({
   $panel.open = () => {
     if (!panelViews.length) return;
     $panel.setAttribute("open", true);
-    $panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = 0));
+    $panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = 1));
     setState({ panelOpen: true });
     $panel.onopen?.();
     _setOpen(true);
@@ -237,6 +268,10 @@ function Panel({
       $panel.onclose?.();
     }, transitionDuration);
   };
+  $panel.toggle = () => {
+    if ($panel.hasAttribute("open")) $panel.close();
+    else $panel.open();
+  };
   useState(["panelViews"], async ([panelViews = []]) => {
     if (panelViews.length && (await _getOpen())) $panel.open();
     else $panel.close();

src/core/islands/Tooltip.mjs

@@ -19,7 +19,7 @@ function Tooltip(props, ...children) {
         leading-[1.4] font-medium py-[4px] px-[8px] rounded-[4px]
         drop-shadow-md transition duration-200 opacity-0
         group-open/tooltip:(pointer-events-auto opacity-100)
-        children:text-([color:var(--theme--fg-primary)]"
+        &>b:text-[color:var(--theme--fg-primary)]"
       >
         ${children}
       </div>

src/core/menu/islands/Input.mjs

@@ -105,7 +105,11 @@ function Input({
       class="h-full w-full pb-px text-[14px] leading-[1.2]
       ${variant === "lg" ? "pl-[12px] pr-[40px]" : "pl-[8px] pr-[32px]"}
       appearance-none bg-transparent ${type === "file" ? "hidden" : ""}
-      ${type === "color" ? "font-medium" : ""}"
+      ${type === "color"
+        ? "font-medium"
+        : type === "hotkey"
+        ? "text-[color:var(--theme--fg-secondary)] border-(& [color:var(--theme--fg-border)])"
+        : ""}"
       data-coloris=${type === "color"}
       ...${props}
     />`,

src/core/menu/menu.css

@@ -42,7 +42,7 @@
 body {
   display: grid;
   grid-template-rows: 1fr;
-  grid-template-columns: 224.14px auto;
+  grid-template-columns: 240px auto;
   width: 100vw;
   height: 100vh;
   color: var(--theme--fg-primary);

src/core/mod.json

@@ -22,6 +22,12 @@
       "description": "Opens the notion-enhancer menu from within Notion.",
       "value": "Ctrl+Shift+,"
     },
+    {
+      "type": "hotkey",
+      "key": "toggleWindowHotkey",
+      "description": "Toggles focus of the Notion window anywhere, even when your Notion app isn't active.",
+      "value": "Ctrl+Shift+A"
+    },
     {
       "type": "hotkey",
       "key": "togglePanelHotkey",

src/shared/markup.js

@@ -93,9 +93,8 @@ twind.install({
     ["children", "&>*"],
     ["siblings", "&~*"],
     ["sibling", "&+*"],
-    ["override", "&&"],
     ["\\[.+]", (match) => "&" + match.input],
-    ["([a-z-]+):", ({ 1: $1 }) => "&::" + $1],
+    [/^&/, (match) => match.input],
   ],
 });
 

src/shared/registry.js

@@ -7,7 +7,8 @@
 "use strict";
 
 const _isManifestValid = (modManifest) => {
-  const hasRequiredFields =
+  const { platform } = globalThis.__enhancerApi,
+    hasRequiredFields =
       modManifest.id &&
       modManifest.name &&
       modManifest.version &&