From bb5853e866fda82cae6b1e4e27db36e1027d3f05 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Sat, 5 Aug 2023 01:09:01 +1000
Subject: [PATCH] feat(panel): add open/close gui buttons

---
 src/core/client.mjs           |   5 +-
 src/core/islands/Panel.mjs    | 135 +++++++++++++++++++++++++---------
 src/{api => shared}/notion.js |   0
 3 files changed, 102 insertions(+), 38 deletions(-)
 rename src/{api => shared}/notion.js (100%)

diff --git a/src/core/client.mjs b/src/core/client.mjs
index 82a4585..27efa60 100644
--- a/src/core/client.mjs
+++ b/src/core/client.mjs
@@ -142,9 +142,8 @@ const insertPanel = async (db) => {
   addKeyListener(togglePanelHotkey, (event) => {
     event.preventDefault();
     event.stopPropagation();
-    if ($panel.hasAttribute("open")) {
-      $panel.close();
-    } else $panel.open();
+    if ($panel.hasAttribute("open")) $panel.close();
+    else $panel.open();
   });
 };
 
diff --git a/src/core/islands/Panel.mjs b/src/core/islands/Panel.mjs
index e335b79..446b45a 100644
--- a/src/core/islands/Panel.mjs
+++ b/src/core/islands/Panel.mjs
@@ -17,6 +17,16 @@
 
 import { Tooltip } from "./Tooltip.mjs";
 
+function PanelView(props) {
+  const { html } = globalThis.__enhancerApi;
+  return html``;
+}
+
+function PanelSwitcher(props) {
+  const { html } = globalThis.__enhancerApi;
+  return html``;
+}
+
 function Panel({
   _getWidth,
   _setWidth,
@@ -26,7 +36,8 @@ function Panel({
   maxWidth = 640,
   ...props
 }) {
-  const { html, extendProps } = globalThis.__enhancerApi;
+  const { html, extendProps } = globalThis.__enhancerApi,
+    { addMutationListener, removeMutationListener } = globalThis.__enhancerApi;
   extendProps(props, {
     class: `notion-enhancer--side-panel order-2 shrink-0
     transition-[width] open:w-[var(--side\\_panel--width)]
@@ -40,11 +51,61 @@ function Panel({
       shadow-[var(--theme--fg-border)_-2px_0px_0px_0px_inset])
       active:cursor-text group-not-[open]:hidden"
     ></div>`,
+    $chevronClose = html`<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)]"
+    >
+      <svg
+        viewBox="0 0 16 16"
+        class="w-[16px] h-[16px] fill-[color:var(--theme--fg-secondary)]"
+      >
+        <path
+          d="M2.25781 14.1211C2.47656 14.1211 2.66797 14.0391 2.81836 13.8887L8.14355 8.67969C8.32812 8.49512 8.41699 8.29688 8.41699 8.06445C8.41699 7.8252 8.32812 7.62012 8.14355 7.44922L2.81836 2.24023C2.66797 2.08984 2.4834 2.00781 2.25781 2.00781C1.81348 2.00781 1.46484 2.35645 1.46484 2.80078C1.46484 3.0127 1.55371 3.21777 1.7041 3.375L6.50977 8.05762L1.7041 12.7539C1.55371 12.9043 1.46484 13.1094 1.46484 13.3281C1.46484 13.7725 1.81348 14.1211 2.25781 14.1211ZM8.36914 14.1211C8.58789 14.1211 8.77246 14.0391 8.92285 13.8887L14.2549 8.67969C14.4395 8.49512 14.5283 8.29688 14.5283 8.06445C14.5283 7.8252 14.4326 7.62012 14.2549 7.44922L8.92285 2.24023C8.77246 2.08984 8.58789 2.00781 8.36914 2.00781C7.9248 2.00781 7.56934 2.35645 7.56934 2.80078C7.56934 3.0127 7.66504 3.21777 7.81543 3.375L12.6211 8.05762L7.81543 12.7539C7.66504 12.9043 7.56934 13.1094 7.56934 13.3281C7.56934 13.7725 7.9248 14.1211 8.36914 14.1211Z"
+        ></path>
+      </svg>
+    </div>`,
     $panel = html`<aside ...${props}>
       ${$resizeHandle}
-      <div>Hello world.</div>
+      <div
+        class="flex justify-between items-center
+        border-(b [color:var(--theme--fg-border)])"
+      >
+        <div
+          style="font-size: 14px; color: rgba(255, 255, 255, 0.81); font-weight: 500; display: flex; align-items: center; padding: 12px 12px 12px 16px;"
+        >
+          Comments
+        </div>
+        ${$chevronClose}
+      </div>
     </aside>`;
 
+  let preDragWidth,
+    userDragActive,
+    dragStartX = 0;
+  const startDrag = async (event) => {
+      userDragActive = true;
+      dragStartX = event.clientX;
+      preDragWidth = await _getWidth?.();
+      if (isNaN(preDragWidth)) preDragWidth = minWidth;
+      document.addEventListener("mousemove", onDrag);
+      document.addEventListener("mouseup", endDrag);
+      $panel.style.transitionDuration = "0ms";
+    },
+    onDrag = (event) => {
+      event.preventDefault();
+      $panel.resize(preDragWidth + (dragStartX - event.clientX));
+    },
+    endDrag = (event) => {
+      userDragActive = false;
+      document.removeEventListener("mousemove", onDrag);
+      document.removeEventListener("mouseup", endDrag);
+      $panel.resize(preDragWidth + (dragStartX - event.clientX));
+      $panel.style.transitionDuration = "";
+    };
+  $resizeHandle.addEventListener("mousedown", startDrag);
+
   const $tooltip = html`<${Tooltip}>
       <span>Drag</span> to resize<br />
       <span>Click</span> to closed
@@ -59,40 +120,16 @@ function Panel({
       }, 200);
     };
   $resizeHandle.addEventListener("mouseover", showTooltip);
-  $resizeHandle.addEventListener("mouseout", $tooltip.hide);
-  $resizeHandle.addEventListener("click", $panel.close);
-
-  let preDragWidth,
-    dragStartX = 0;
-  const startDrag = async (event) => {
-      dragStartX = event.clientX;
-      preDragWidth = await _getWidth?.();
-      if (isNaN(preDragWidth)) preDragWidth = minWidth;
-      document.addEventListener("mousemove", onDrag);
-      document.addEventListener("mouseup", endDrag);
-      $panel.style.transitionDuration = "0ms";
-    },
-    onDrag = (event) => {
-      event.preventDefault();
-      const newWidth = preDragWidth + (dragStartX - event.clientX);
-      $panel.resize(newWidth, true);
-    },
-    endDrag = (event) => {
-      document.removeEventListener("mousemove", onDrag);
-      document.removeEventListener("mouseup", endDrag);
-      const finalWidth = preDragWidth + (dragStartX - event.clientX);
-      $panel.style.transitionDuration = "";
-      $panel.resize(finalWidth);
-    };
-  $resizeHandle.addEventListener("mousedown", startDrag);
+  $resizeHandle.addEventListener("mouseout", () => $tooltip.hide());
+  $resizeHandle.addEventListener("click", () => {
+    if (!userDragActive) $panel.close();
+  });
+  $chevronClose.addEventListener("click", () => $panel.close());
 
   const notionHelp = ".notion-help-button",
-    repositionHelp = async (attempts = 0) => {
+    repositionHelp = async () => {
       const $notionHelp = document.querySelector(notionHelp);
-      if (!$notionHelp) {
-        if (attempts < 20) setTimeout(() => repositionHelp(attempts + 1), 150);
-        return;
-      }
+      if (!$notionHelp) return;
       let width = await _getWidth?.();
       if (isNaN(width)) width = minWidth;
       if (!$panel.hasAttribute("open")) width = 0;
@@ -102,14 +139,40 @@ function Panel({
         options = { duration: 150, easing: "cubic-bezier(0.4, 0, 0.2, 1)" };
       $notionHelp.style.setProperty("right", destination);
       $notionHelp.animate(keyframes, options);
+      removeMutationListener(repositionHelp);
     };
+  addMutationListener(notionHelp, repositionHelp);
 
-  $panel.resize = async (width, dragActive = false) => {
+  const notionTopbarMore = ".notion-topbar-more-button",
+    $topbarPanelButton = html`<button
+      aria-label="Open side panel"
+      class="user-select-none h-[28px] w-[33px] duration-[20ms]
+      transition inline-flex items-center justify-center mr-[2px]
+      rounded-[3px] hover:bg-[color:var(--theme--bg-hover)]
+      [data-active]:bg-[color:var(--theme--bg-hover)]"
+    >
+      <i
+        class="i-panel-right w-[20px] h-[20px] fill-[color:var(--theme--fg-secondary)]"
+      />
+    </button>`,
+    appendToDom = () => {
+      if (document.contains($topbarPanelButton)) return;
+      const $notionTopbarMore = document.querySelector(notionTopbarMore);
+      $notionTopbarMore?.before($topbarPanelButton);
+    };
+  $topbarPanelButton.addEventListener("click", () => {
+    if ($panel.hasAttribute("open")) $panel.close();
+    else $panel.open();
+  });
+  addMutationListener(notionTopbarMore, appendToDom);
+  appendToDom();
+
+  $panel.resize = async (width) => {
     $tooltip.hide();
     if (width) {
       width = Math.max(width, minWidth);
       width = Math.min(width, maxWidth);
-      if (!dragActive) _setWidth?.(width);
+      if (!userDragActive) _setWidth?.(width);
     } else width = await _getWidth?.();
     if (isNaN(width)) width = minWidth;
     $panel.style.setProperty("--side_panel--width", `${width}px`);
@@ -118,6 +181,7 @@ function Panel({
   $panel.open = () => {
     $panel.setAttribute("open", true);
     $panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = 0));
+    $topbarPanelButton.setAttribute("data-active", true);
     $panel.onopen?.();
     _setOpen(true);
     $panel.resize();
@@ -127,6 +191,7 @@ function Panel({
     $panel.onbeforeclose?.();
     $panel.removeAttribute("open");
     $panel.style.pointerEvents = "auto";
+    $topbarPanelButton.removeAttribute("data-active");
     $panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = -1));
     repositionHelp();
     _setOpen(false);
diff --git a/src/api/notion.js b/src/shared/notion.js
similarity index 100%
rename from src/api/notion.js
rename to src/shared/notion.js