feat(menu): apply menuButtonIconStyle to icon in menu sidebar

src/core/client.mjs

@@ -53,6 +53,7 @@ export default async (api, db) => {
       _notionTheme = notionTheme;
       const msg = {
         namespace: "notion-enhancer",
+        iconStyle: menuButtonIconStyle,
         mode: notionTheme,
       };
       $menuFrame?.contentWindow.postMessage(msg, "*");

src/core/menu/components.mjs

@@ -29,10 +29,9 @@ function SidebarSection({}, ...children) {
 
 function SidebarButton({ icon, ...props }, ...children) {
   const { html } = globalThis.__enhancerApi,
-    iconSize =
-      icon === "notion-enhancer"
-        ? "w-[16px] h-[16px] ml-[2px] mr-[10px]"
-        : "w-[18px] h-[18px] ml-px mr-[9px]",
+    iconSize = icon.startsWith("notion-enhancer")
+      ? "w-[17px] h-[17px] ml-[1.5px] mr-[9.5px]"
+      : "w-[18px] h-[18px] ml-px mr-[9px]",
     $el = html`<${props.href ? "a" : "button"}
       class="flex select-none cursor-pointer w-full
       items-center py-[5px] px-[15px] text-[14px] last:mb-[12px]

src/core/menu/menu.mjs

@@ -14,7 +14,7 @@ import {
 } from "./components.mjs";
 
 let renderStarted;
-const render = async () => {
+const render = async (iconStyle) => {
   const { html, getCore } = globalThis.__enhancerApi;
   if (!html || !getCore || renderStarted) return;
   renderStarted = true;
@@ -24,7 +24,10 @@ const render = async () => {
   const $sidebar = html`<${Sidebar}>
       ${[
         "notion-enhancer",
-        { icon: "notion-enhancer", title: "Welcome" },
+        {
+          icon: `notion-enhancer${iconStyle === "Monochrome" ? "?mask" : ""}`,
+          title: "Welcome",
+        },
         {
           icon: "message-circle",
           title: "Community",
@@ -94,7 +97,7 @@ window.addEventListener("message", async (event) => {
   // load stylesheets from enabled themes
   await import("../../load.mjs");
   // wait for api globals to be available
-  requestIdleCallback(render);
+  requestIdleCallback(() => render(event.data?.iconStyle));
 });
 useState(["theme"], ([mode]) => {
   if (mode === "dark") document.body.classList.add("dark");