chore: update sidebar button styles to match notion

bin.mjs

@@ -174,36 +174,16 @@ try {
       ["remove", "Restore Notion desktop to its pre-enhanced state."],
       ["check", "Report Notion desktop's enhancement state."],
     ],
+    // prettier-ignore
     options = [
       // ["alias, option=example", [type, "description"]]
-      [
-        "--path=</path/to/notion/resources>",
-        [String, "Manually provide a Notion installation location."],
-      ],
-      [
-        "--no-backup",
-        [Boolean, "Skip backup; enhancement will be irreversible."],
-      ],
-      [
-        "--json",
-        [Boolean, "Output JSON from the `check` and `--version` commands."],
-      ],
-      [
-        "-y, --yes",
-        [Boolean, 'Skip prompts; assume "yes" and run non-interactively.'],
-      ],
-      [
-        "-n, --no",
-        [Boolean, 'Skip prompts; assume "no" and run non-interactively.'],
-      ],
-      [
-        "-q, --quiet",
-        [Boolean, 'Skip prompts; assume "no" unless -y and hide all output.'],
-      ],
-      [
-        "-d, --debug",
-        [Boolean, "Show detailed error messages and keep extracted files."],
-      ],
+      ["--path=</path/to/notion/resources>", [String, "Manually provide a Notion installation location."]],
+      ["--no-backup", [Boolean, "Skip backup; enhancement will be irreversible."]],
+      ["--json", [Boolean, "Output JSON from the `check` and `--version` commands."]],
+      ["-y, --yes", [Boolean, 'Skip prompts; assume "yes" and run non-interactively.']],
+      ["-n, --no", [Boolean, 'Skip prompts; assume "no" and run non-interactively.']],
+      ["-q, --quiet", [Boolean, 'Skip prompts; assume "no" unless -y and hide all output.']],
+      ["-d, --debug", [Boolean, "Show detailed error messages and keep extracted files."]],
       ["-h, --help", [Boolean, "Display usage information for this CLI."]],
       ["-v, --version", [Boolean, "Display this CLI's version number."]],
     ];

package.json

@@ -26,6 +26,7 @@
     "extensions",
     "themes",
     "integrations",
+    "addons",
     "mod",
     "mods",
     "mod-loader",

src/core/islands/MenuButton.mjs

@@ -12,10 +12,10 @@ function MenuButton(
   extendProps(props, {
     tabindex: 0,
     role: "button",
-    class: `notion-enhancer--menu-button
-    flex select-none cursor-pointer rounded-[3px]
-    text-[14px] my-px mx-[4px] py-[2px] px-[10px]
-    transition hover:bg-[color:var(--theme--bg-hover)]`,
+    class: `notion-enhancer--menu-button flex select-none
+    cursor-pointer rounded-[6px] text-[14px] font-medium
+    transition hover:bg-[color:var(--theme--bg-hover)]
+    w-full h-[30px] px-[8px] py-[4px] items-center`,
   });
   return html`<div ...${props}>
     <div class="flex items-center justify-center size-[22px] mr-[8px]">

src/core/menu/islands/Sidebar.mjs

@@ -20,10 +20,9 @@ function SidebarHeading({}, ...children) {
 function SidebarButton({ id, icon, ...props }, ...children) {
   const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
     $btn = html`<${props["href"] ? "a" : "button"}
-      class="flex items-center select-none text-[14px]
-      min-h-[27px] px-[12px] my-px last:mb-[12px] w-full
-      transition hover:bg-[color:var(--theme--bg-hover)]
-      disabled:hidden rounded-[3px]"
+      class="flex items-center select-none cursor-pointer text-[14px]
+      transition hover:bg-[color:var(--theme--bg-hover)] disabled:hidden
+      min-h-[27px] w-full my-px last:mb-[12px] px-[12px] rounded-[4px]"
       ...${props}
     >
       ${icon

src/core/menu/menu.mjs

@@ -37,14 +37,14 @@ const categories = [
       description: `Extensions add to the functionality and layout of the Notion
         client, interacting with and modifying existing interfaces.`,
     },
-    {
-      icon: "plug",
-      id: "integrations",
-      title: "Integrations",
-      description: `<span class="text-[color:var(--theme--fg-red)]">
-        Integrations access and modify Notion content. They interact directly with
-        <mark>https://www.notion.so/api/v3</mark>. Use at your own risk.</span>`,
-    },
+    // {
+    //   icon: "plug",
+    //   id: "integrations",
+    //   title: "Integrations",
+    //   description: `<span class="text-[color:var(--theme--fg-red)]">
+    //     Integrations access and modify Notion content. They interact directly with
+    //     <mark>https://www.notion.so/api/v3</mark>. Use at your own risk.</span>`,
+    // },
   ],
   sidebar = [
     "notion-enhancer",