feat(menu): add sponsorship buttons & perks to banner

src/api/interface.js

@@ -86,6 +86,14 @@ twind.install({
     ["\\[.+]", (match) => "&" + match.input],
     ["([a-z-]+):", ({ 1: $1 }) => "&::" + $1],
   ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "brand-gradient":
+          "linear-gradient(225deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%)",
+      },
+    },
+  },
 });
 
 // https://developer.mozilla.org/en-US/docs/Web/SVG/Element

src/core/menu/components/Button.mjs

@@ -11,8 +11,8 @@ function Button({ icon, variant, tagName, ...props }, ...children) {
   extendProps(props, {
     class: `notion-enhancer--menu-button shrink-0
     flex gap-[8px] items-center px-[12px] rounded-[4px]
-    h-[${variant === "sm" ? "28" : "32"}px] transition
+    h-[${variant === "sm" ? "28" : "32"}px] select-none
-    duration-[20ms] ${
+    transition duration-[20ms] ${
       variant === "primary"
         ? `text-[color:var(--theme--accent-primary\\_contrast)]
            font-medium bg-[color:var(--theme--accent-primary)]
@@ -21,10 +21,15 @@ function Button({ icon, variant, tagName, ...props }, ...children) {
         ? `text-[color:var(--theme--accent-secondary)]
            border-(& [color:var(--theme--accent-secondary)])
            hover:bg-[color:var(--theme--accent-secondary\\_hover)]`
+        : variant === "brand"
+        ? `text-white border-(& purple-400)
+           bg-purple-500 hover:(from-white/20 to-transparent
+           bg-[linear-gradient(225deg,var(--tw-gradient-stops))])`
         : `border-(& [color:var(--theme--fg-border)])
            hover:bg-[color:var(--theme--bg-hover)]`
     }`,
   });
+  if (props["href"]) tagName ??= "a";
   return html`<${tagName ?? "button"} tabindex="0" ...${props}>
     ${icon
       ? html`<i

src/core/menu/components/Checkbox.mjs

@@ -10,7 +10,7 @@ function Checkbox({ _get, _set, ...props }) {
   const { html } = globalThis.__enhancerApi,
     $input = html`<input
       type="checkbox"
-      class="hidden checked:sibling:(px-[1px]
+      class="hidden checked:sibling:(px-px
       bg-[color:var(--theme--accent-primary)])
       not-checked:sibling:(children:text-transparent
         border-(& [color:var(--theme--fg-primary)])

src/core/menu/islands/Banner.mjs

@@ -4,7 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-import { setState, useState } from "../state.mjs";
+import { Button } from "../components/Button.mjs";
+import { Description } from "../components/Description.mjs";
 
 const rectToStyle = (rect) =>
   ["width", "height", "top", "bottom", "left", "right"]
@@ -55,49 +56,86 @@ function Star({ from, ...rect }) {
 function Circle(rect) {
   const { html } = globalThis.__enhancerApi;
   return html`<div
-    class="absolute bg-[color:#c084fc]
+    class="absolute rounded-full
-    border-(& [color:#a855f7]) rounded-full"
+    border-(& purple-500) bg-purple-400"
     style=${rectToStyle(rect)}
   ></div>`;
 }
 
 function Banner({ version }) {
   const { html } = globalThis.__enhancerApi;
-  // gradient bg?
+  return html`<section class="notion-enhancer--menu-banner">
-  // brand font? links?
+    <div
-  return html`<div
+      class="relative flex overflow-hidden h-[192px] rounded-t-[4px]
-    class="notion-enhancer--menu-banner relative flex
+      border-(& purple-400) bg-purple-500 from-white/20 to-transparent
-    overflow-hidden h-[192px] rounded-[4px] border-(& [color:#c084fc]"
+      text-white bg-[linear-gradient(225deg,var(--tw-gradient-stops))]"
-    style="background: linear-gradient(225deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%), #a855f7;"
-  >
-    <${Circle} width="128px" height="128px" bottom="-64px" left="-64px" />
-    <${Circle} width="144px" height="144px" top="-108px" left="80px" />
-    <${Circle} width="208px" height="208px" bottom="-64px" right="-16px" />
-    <${Circle} width="144px" height="144px" bottom="-72px" right="144px" />
-    <${Star} width="36px" height="36px" top="136px" left="190px" />
-    <${Star} width="48px" height="48px" top="32px" left="336px" />
-    <${Star} width="64px" height="64px" top="90px" left="448px" from="lg" />
-
-    <h1
-      class="z-10 pl-[32px] md:pl-[48px] lg:pl-[64px] pb-[24px]
-      font-bold leading-tight tracking-tight my-auto"
     >
-      <span class="text-[26px]">Welcome to</span><br />
+      <${Circle} width="128px" height="128px" bottom="-64px" left="-64px" />
-      <span class="text-[28px]">the notion-enhancer</span>
+      <${Circle} width="144px" height="144px" top="-108px" left="80px" />
-    </h1>
+      <${Circle} width="208px" height="208px" bottom="-64px" right="-16px" />
+      <${Circle} width="144px" height="144px" bottom="-72px" right="144px" />
+      <${Star} width="36px" height="36px" top="136px" left="190px" />
+      <${Star} width="48px" height="48px" top="32px" left="336px" />
+      <${Star} width="64px" height="64px" top="90px" left="448px" from="lg" />
+
+      <h1
+        class="z-10 pl-[32px] md:pl-[48px] lg:pl-[64px]
+        font-bold leading-tight tracking-tight my-auto"
+      >
+        <span class="text-[26px]">Welcome to</span><br />
+        <span class="text-[28px]">the notion-enhancer</span>
+      </h1>
+
+      <div
+        class="flex flex-col absolute bottom-0 right-0
+        pr-[32px] md:pr-[48px] lg:pr-[64px] pb-[24px]"
+      >
+        <i class="i-notion-enhancer text-[42px] mx-auto mb-[8px]"></i>
+        <span
+          class="text-[12px] py-[2px] px-[6px]
+          font-medium leading-tight tracking-wide"
+          >v${version}
+        </span>
+      </div>
+    </div>
 
     <div
-      class="absolute flex bottom-0 right-0
+      class="py-[18px] px-[16px] rounded-b-[4px]
-      flex-col pr-[32px] md:pr-[48px] lg:pr-[64px] pb-[24px]"
+      border-(& [color:var(--theme--fg-border)]) bg-[color:var(--theme--bg-secondary)]"
     >
-      <i class="i-notion-enhancer text-[42px] mx-auto mb-[8px]"></i>
+      <div class="flex items-center gap-[16px]">
-      <span
+        <p class="text-[14px] font-semibold">
-        class="text-[12px] py-[2px] px-[6px]
+          Enjoying the notion-enhancer?<br />
-        font-medium leading-tight tracking-wide"
+          Support future development:
-        >v${version}
+        </p>
-      </span>
+        <${Button}
+          icon="coffee"
+          variant="brand"
+          class="grow justify-center"
+          href="https://www.buymeacoffee.com/dragonwocky"
+        >
+          Buy me a coffee
+        <//>
+        <${Button}
+          icon="calendar-heart"
+          variant="brand"
+          class="grow justify-center"
+          href="https://github.com/sponsors/dragonwocky"
+        >
+          Sponsor me
+        <//>
+      </div>
+      <!-- Disclaimer: these perks are only a draft, for anyone reading this.
+      This information may change at any time. -->
+      <${Description} class="mt-[6px]">
+        Sponsors receive access to priority support channels, private developer
+        previews, and role cosmetics on Discord. A one-time donation is
+        equivalent to 1 month of sponsorship perks. To claim your Discord role,
+        join the server <a href="https://discord.gg/sFWPXtA">here</a> and follow
+        the instructions in the <b>#welcome</b> channel.
+      <//>
     </div>
-  </div> `;
+  </section>`;
 }
 
 export { Banner };

src/core/menu/islands/Profiles.mjs

@@ -31,6 +31,7 @@ function Profile({ id }) {
       return id === (await getProfile());
     },
     setActive = async () => {
+      if (await isActive()) return;
       await db.set("activeProfile", id);
       setState({ rerender: true, databaseUpdated: true });
     };

src/core/menu/menu.mjs

@@ -67,11 +67,6 @@ const categories = [
       title: "Source Code",
       href: "https://github.com/notion-enhancer",
     },
-    {
-      icon: "coffee",
-      title: "Sponsor",
-      href: "https://github.com/sponsors/dragonwocky",
-    },
     "Settings",
     {
       id: "core",