diff --git a/src/api/interface.js b/src/api/interface.js index 8748e95..b80814a 100644 --- a/src/api/interface.js +++ b/src/api/interface.js @@ -72,6 +72,7 @@ const encodeSvg = (svg) => }; }; twind.install({ + darkMode: "class", rules: [[/^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/, presetIcons]], variants: [ // https://github.com/tw-in-js/twind/blob/main/packages/preset-ext/src/variants.ts @@ -558,5 +559,22 @@ const h = (type, props, ...children) => { }, html = htm.bind(h); +const extendProps = (props, extend) => { + for (const key in extend) { + const { [key]: userProvided } = props; + if (typeof extend[key] === "function") { + props[key] = (...args) => { + extend[key](...args); + userProvided?.(...args); + }; + } else if (key === "class") { + if (userProvided) props[key] += " "; + if (!userProvided) props[key] = ""; + props[key] += extend[key]; + } else props[key] = extend[key] ?? userProvided; + } + return props; +}; + globalThis.__enhancerApi ??= {}; -Object.assign(globalThis.__enhancerApi, { html }); +Object.assign(globalThis.__enhancerApi, { html, extendProps }); diff --git a/src/core/client.mjs b/src/core/client.mjs index 024a05b..bd4542e 100644 --- a/src/core/client.mjs +++ b/src/core/client.mjs @@ -4,8 +4,46 @@ * (https://notion-enhancer.github.io/) under the MIT license */ +import { checkForUpdate } from "./update.mjs"; + const notionSidebar = `.notion-sidebar-container .notion-sidebar > :nth-child(3) > div > :nth-child(2)`; +function SidebarButton( + { icon, notifications, themeOverridesLoaded, ...props }, + ...children +) { + const { html } = globalThis.__enhancerApi; + return html`
`; +} + export default async (api, db) => { const { html, @@ -109,24 +147,14 @@ export default async (api, db) => { `; document.body.append($menuModal); - const $menuButton = html` `; + notifications=${(await checkForUpdate()) ? 1 : 0} + icon="notion-enhancer${menuButtonIconStyle === "Monochrome" + ? "?mask" + : " text-[16px]"}" + >notion-enhancer + />`; addMutationListener(notionSidebar, () => { if (document.contains($menuButton)) return; document.querySelector(notionSidebar)?.append($menuButton); diff --git a/src/core/menu/components/Button.mjs b/src/core/menu/components/Button.mjs index c1b1bf5..42ac31d 100644 --- a/src/core/menu/components/Button.mjs +++ b/src/core/menu/components/Button.mjs @@ -4,10 +4,8 @@ * (https://notion-enhancer.github.io/) under the MIT license */ -import { extendProps } from "../state.mjs"; - function Button({ icon, variant, tagName, ...props }, ...children) { - const { html } = globalThis.__enhancerApi; + const { html, extendProps } = globalThis.__enhancerApi; extendProps(props, { class: `notion-enhancer--menu-button shrink-0 flex gap-[8px] items-center px-[12px] rounded-[4px] diff --git a/src/core/menu/components/Checkbox.mjs b/src/core/menu/components/Checkbox.mjs index 3b00b09..8b49dba 100644 --- a/src/core/menu/components/Checkbox.mjs +++ b/src/core/menu/components/Checkbox.mjs @@ -4,10 +4,10 @@ * (https://notion-enhancer.github.io/) under the MIT license */ -import { useState, extendProps } from "../state.mjs"; +import { useState } from "../state.mjs"; function Checkbox({ _get, _set, ...props }) { - const { html } = globalThis.__enhancerApi, + const { html, extendProps } = globalThis.__enhancerApi, $input = html` { const keys = []; @@ -75,7 +75,7 @@ function Input({ ...props }) { let $filename, $clear; - const { html } = globalThis.__enhancerApi; + const { html, extendProps } = globalThis.__enhancerApi; Coloris({ format: "rgb" }); type ??= "text"; diff --git a/src/core/menu/components/Popup.mjs b/src/core/menu/components/Popup.mjs index f67a1c2..d6d74ea 100644 --- a/src/core/menu/components/Popup.mjs +++ b/src/core/menu/components/Popup.mjs @@ -4,15 +4,15 @@ * (https://notion-enhancer.github.io/) under the MIT license */ -import { setState, useState, extendProps } from "../state.mjs"; +import { setState, useState } from "../state.mjs"; function Popup({ trigger, onopen, onclose, onbeforeclose }, ...children) { - const { html } = globalThis.__enhancerApi, + const { html, extendProps } = globalThis.__enhancerApi, $popup = html`