From 319db044032e170c92374ec1b394169f258a27cf Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 16 Aug 2023 00:22:20 +1000
Subject: [PATCH] feat(panel): disable panel if no views available

---
 src/core/client.mjs        |  5 ++++-
 src/core/islands/Panel.mjs | 11 +++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/core/client.mjs b/src/core/client.mjs
index 707151b..f154ee7 100644
--- a/src/core/client.mjs
+++ b/src/core/client.mjs
@@ -123,7 +123,7 @@ const insertPanel = async (api, db) => {
   const notionFrame = ".notion-frame",
     notionTopbarBtn = ".notion-topbar-more-button",
     togglePanelHotkey = await db.get("togglePanelHotkey"),
-    { html, setState, addPanelView } = api;
+    { html, setState } = api;
 
   const $panel = html`<${Panel}
       ...${Object.assign(
@@ -162,6 +162,9 @@ const insertPanel = async (api, db) => {
     if (panelOpen) $panelTopbarBtn.setAttribute("data-active", true);
     else $panelTopbarBtn.removeAttribute("data-active");
   });
+  api.useState(["panelViews"], ([panelViews = []]) => {
+    $panelTopbarBtn.style.display = panelViews.length ? "" : "none";
+  });
   appendToDom();
 
   api.addKeyListener(togglePanelHotkey, (event) => {
diff --git a/src/core/islands/Panel.mjs b/src/core/islands/Panel.mjs
index 8142976..e37c8fd 100644
--- a/src/core/islands/Panel.mjs
+++ b/src/core/islands/Panel.mjs
@@ -58,7 +58,7 @@ function Switcher({ _get, _set, minWidth, maxWidth }) {
       _set?.(view);
       setState({ activePanelView: view });
     };
-  useState(["panelViews"], ([panelViews]) => {
+  useState(["panelViews"], ([panelViews = []]) => {
     const values = panelViews.map(([{ title, $icon }]) => {
       // panel switcher internally uses the select island,
       // which expects an option value rather than a title
@@ -100,6 +100,7 @@ function Panel({
         .notion-frame {
           flex-direction: row !important;
         }
+        /* prevent page load skeletons overlapping with panel */
         .notion-frame [role="progressbar"] {
           padding-right: var(--panel--width);
         }
@@ -212,6 +213,7 @@ function Panel({
     repositionHelp(width);
   };
   $panel.open = () => {
+    if (!panelViews.length) return;
     $panel.setAttribute("open", true);
     $panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = 0));
     setState({ panelOpen: true });
@@ -227,14 +229,15 @@ function Panel({
     $panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = -1));
     $panel.resize();
     setState({ panelOpen: false });
-    _setOpen(false);
+    if (panelViews.length) _setOpen(false);
     setTimeout(() => {
       $panel.style.pointerEvents = "";
       $panel.onclose?.();
     }, transitionDuration);
   };
-  _getOpen().then((open) => {
-    if (open) $panel.open();
+  useState(["panelViews"], async ([panelViews = []]) => {
+    if (panelViews.length && (await _getOpen())) $panel.open();
+    else $panel.close();
   });
   return $panel;
 }