feat(titlebar): customisable window control button icons

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>`;

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: "" })}
     >

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 };

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 () => {