From 4df00ca8708aa5b750e1317be231c4e6a4ef946f Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 24 Jan 2024 15:08:56 +1100
Subject: [PATCH] feat(titlebar): customisable window control button icons

---
 src/core/islands/TopbarButton.mjs   |  2 +-
 src/core/menu/islands/Input.mjs     |  2 +-
 src/extensions/titlebar/buttons.mjs | 20 ++++++++++++++++----
 src/extensions/titlebar/client.mjs  |  7 +++++--
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/core/islands/TopbarButton.mjs b/src/core/islands/TopbarButton.mjs
index 9e28298..af12002 100644
--- a/src/core/islands/TopbarButton.mjs
+++ b/src/core/islands/TopbarButton.mjs
@@ -20,7 +20,7 @@ function TopbarButton({ icon, ...props }, ...children) {
   });
 
   return html`<button ...${props}>
-    ${children.length
+    ${props.innerHTML || children.length
       ? children
       : html`<i class="i-${icon} w-[20px] h-[20px]" />`}
   </button>`;
diff --git a/src/core/menu/islands/Input.mjs b/src/core/menu/islands/Input.mjs
index b5ba1d7..abf911e 100644
--- a/src/core/menu/islands/Input.mjs
+++ b/src/core/menu/islands/Input.mjs
@@ -92,7 +92,7 @@ function Input({
     $clear = html`<button
       style="display: none"
       class="h-[14px] transition duration-[20ms]
-      text-[color:var(--theme--fg-secondary)]
+      flex text-[color:var(--theme--fg-secondary)]
       hover:text-[color:var(--theme--fg-primary)]"
       onclick=${() => _set?.({ filename: "", content: "" })}
     >
diff --git a/src/extensions/titlebar/buttons.mjs b/src/extensions/titlebar/buttons.mjs
index cefa051..bded463 100644
--- a/src/extensions/titlebar/buttons.mjs
+++ b/src/extensions/titlebar/buttons.mjs
@@ -14,27 +14,38 @@ const minimizeLabel = "Minimize window",
   unmaximizeLabel = "Unmaximize window",
   closeLabel = "Close window";
 
-const createWindowButtons = () => {
+const createWindowButtons = async () => {
+  const { modDatabase } = globalThis.__enhancerApi,
+    db = await modDatabase("a5658d03-21c6-4088-bade-fa4780459133"),
+    minimizeIcon = await db.get("minimizeIcon"),
+    maximizeIcon = await db.get("maximizeIcon"),
+    unmaximizeIcon = await db.get("unmaximizeIcon"),
+    closeIcon = await db.get("closeIcon");
+
   const { html, sendMessage, invokeInWorker } = globalThis.__enhancerApi,
     $minimize = html`<${TopbarButton}
       onclick=${() => sendMessage("notion-enhancer:titlebar", "minimize")}
       aria-label="${minimizeLabel}"
+      innerHTML="${minimizeIcon?.content}"
       icon="minus"
     />`,
     $maximize = html`<${TopbarButton}
       onclick=${() => sendMessage("notion-enhancer:titlebar", "maximize")}
       aria-label="${maximizeLabel}"
+      innerHTML="${maximizeIcon?.content}"
       icon="maximize"
     />`,
     $unmaximize = html`<${TopbarButton}
       onclick=${() => sendMessage("notion-enhancer:titlebar", "unmaximize")}
       aria-label="${unmaximizeLabel}"
+      innerHTML="${unmaximizeIcon?.content}"
       icon="minimize"
     />`,
     $close = html`<${TopbarButton}
       onclick=${() => sendMessage("notion-enhancer:titlebar", "close")}
       class="!hover:(bg-red-600 text-white)"
       aria-label="${closeLabel}"
+      innerHTML="${closeIcon?.content}"
       icon="x"
     />`;
   html`<${Tooltip}><b>${minimizeLabel}</b><//>`.attach($minimize, "bottom");
@@ -56,9 +67,10 @@ const createWindowButtons = () => {
 };
 
 if (globalThis.IS_TABS) {
-  const appendAfter = ".hide-scrollbar",
-    $buttons = createWindowButtons();
-  document.querySelector(appendAfter)?.after($buttons);
+  const appendAfter = ".hide-scrollbar";
+  createWindowButtons().then(($buttons) => {
+    document.querySelector(appendAfter)?.after($buttons);
+  });
 }
 
 export { createWindowButtons };
diff --git a/src/extensions/titlebar/client.mjs b/src/extensions/titlebar/client.mjs
index 41cfda7..11a8c9d 100644
--- a/src/extensions/titlebar/client.mjs
+++ b/src/extensions/titlebar/client.mjs
@@ -8,9 +8,12 @@
 
 import { createWindowButtons } from "./buttons.mjs";
 
-export default (api, db) => {
+export default async (api, db) => {
+  const titlebarStyle = await db.get("titlebarStyle");
+  if (titlebarStyle === "Disabled") return;
+
   const { onMessage, addMutationListener } = api,
-    $buttons = createWindowButtons(),
+    $buttons = await createWindowButtons(),
     topbarMore = ".notion-topbar-more-button",
     addToTopbar = () => document.querySelector(topbarMore)?.after($buttons),
     showIfNoTabBar = async () => {