From d156d810ba1f641c8356e83c7c2bf4cc1f8ab0c6 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Fri, 9 Feb 2024 13:46:10 +1100
Subject: [PATCH] feat: make peak panel on hover configurable

---
 src/core/islands/Panel.mjs | 17 +++++++++++------
 src/core/mod.json          |  6 ++++++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/core/islands/Panel.mjs b/src/core/islands/Panel.mjs
index 93382f3..8a98bed 100644
--- a/src/core/islands/Panel.mjs
+++ b/src/core/islands/Panel.mjs
@@ -280,13 +280,17 @@ function Panel({
 
   // hovering over the peek trigger will temporarily
   // pop out an interactive preview of the panel
-  let _peekDebounce;
-  const $peekTrigger = html`<div
-    class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
+  let _peekDebounce, _peekPanelOnHover;
+  const coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
+    $peekTrigger = html`<div
+      class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
     group-&[data-peeked]/panel:(w-[calc(var(--panel--width,0)+8px)])
     group-&[data-pinned]/panel:(w-[calc(var(--panel--width,0)+8px)])"
-  ></div>`;
-  $panel.prepend($peekTrigger);
+    ></div>`;
+  modDatabase(coreId).then(async (db) => {
+    _peekPanelOnHover = await db.get("peekPanelOnHover");
+    if (_peekPanelOnHover) $panel.prepend($peekTrigger);
+  });
   $panel.addEventListener("mouseout", () => {
     if (isDragging() || isAnimated() || isPinned()) return;
     if (!$panel.matches(":hover")) $panel.close();
@@ -331,6 +335,7 @@ function Panel({
     $panel.resize();
   };
   $panel.peek = () => {
+    if (!_peekPanelOnHover) return;
     if (isPeeked() || !panelViews.length) return;
     if (isClosed()) Object.assign(animationState, peekAnimation);
     animatePanel({ ...openWidth, ...peekAnimation });
@@ -353,7 +358,7 @@ function Panel({
     // only animate container close if it is actually taking up space,
     // otherwise will unnaturally grow + retrigger peek on peek mouseout
     if (isPinned()) animate($panel, [{ width }, closedWidth]);
-    if (!$panel.matches(":hover")) {
+    if (!$panel.matches(":hover") || !_peekPanelOnHover) {
       $panel.removeAttribute("data-pinned");
       $panel.removeAttribute("data-peeked");
       animatePanel(closedWidth);
diff --git a/src/core/mod.json b/src/core/mod.json
index acb0fc2..ceb9010 100644
--- a/src/core/mod.json
+++ b/src/core/mod.json
@@ -50,6 +50,12 @@
       "description": "Sets whether the notion-enhancer icon added to Notion's sidebar should be coloured or monochrome. The latter style will match the theme's icon colour for users who would like the icon to be less noticeable.",
       "values": ["Colour", "Monochrome"]
     },
+    {
+      "type": "toggle",
+      "key": "peekPanelOnHover",
+      "description": "Pops the side panel out to preview its content when hovering near the right edge of the window, in the same way that Notion's left-hand sidebar will slide out on hover. Disable this if you prefer to view the panel only by pinning it.",
+      "value": true
+    },
     { "type": "heading", "label": "Experimental" },
     {
       "type": "toggle",