diff --git a/src/core/menu/components.mjs b/src/core/menu/components.mjs index 088a7cf..bfdfcdb 100644 --- a/src/core/menu/components.mjs +++ b/src/core/menu/components.mjs @@ -69,6 +69,92 @@ function View({ id }, ...children) { return $el; } +function List({}, ...children) { + const { html } = globalThis.__enhancerApi; + return html`
${children}
`; +} + +function Mod({ + id, + name, + version, + description, + thumbnail, + tags = [], + authors, + options = [], + enabled, + _update, + _src, +}) { + const { html, enhancerUrl } = globalThis.__enhancerApi, + $thumbnail = thumbnail + ? html`` + : "", + $options = options.length + ? html`` + : ""; + return html``; +} + function Option({ type, value, description, _update, ...props }) { const { html } = globalThis.__enhancerApi, camelToSentenceCase = (string) => @@ -80,13 +166,13 @@ function Option({ type, value, description, _update, ...props }) { onchange = (event) => _update(event.target.value); switch (type) { case "heading": - return html`

${label} -

`; + `; case "text": $input = html`<${TextInput} ...${{ value, onchange }} />`; break; @@ -127,7 +213,7 @@ function Option({ type, value, description, _update, ...props }) { class="notion-enhancer--menu-option flex items-center justify-between mb-[18px] ${type === "toggle" ? "cursor-pointer" : ""}" >
-

${label}

+
${label}
${type === "text" ? $input : ""}

{ const { html, platform, getProfile } = globalThis.__enhancerApi, { optionDefaults, initDatabase } = globalThis.__enhancerApi, profile = await getProfile(); - const db = initDatabase([profile, mod.id], await optionDefaults(mod.id)), - options = mod.options.reduce((options, opt, i) => { - if (!opt.key && (opt.type !== "heading" || !opt.label)) return options; - if (opt.targets && !opt.targets.includes(platform)) return options; - const prevOpt = options[options.length - 1]; - // no consective headings - if (opt.type === "heading" && prevOpt?.type === opt.type) { - options[options.length - 1] = opt; - } else options.push(opt); - return options; - }, []); + const db = initDatabase([profile, mod.id], await optionDefaults(mod.id)); + let options = mod.options.reduce((options, opt, i) => { + if (!opt.key && (opt.type !== "heading" || !opt.label)) return options; + if (opt.targets && !opt.targets.includes(platform)) return options; + const prevOpt = options[options.length - 1]; + // no consective headings + if (opt.type === "heading" && prevOpt?.type === opt.type) { + options[options.length - 1] = opt; + } else options.push(opt); + return options; + }, []); // no empty/end headings e.g. if section is platform-specific if (options[options.length - 1]?.type === "heading") options.pop(); - return Promise.all( - options.map(async (opt) => { - if (opt.type === "heading") return html`<${Option} ...${opt} />`; - const value = await db.get(opt.key), - _update = (value) => db.set(opt.key, value); - return html`<${Option} ...${{ ...opt, value, _update }} />`; - }) - ); + options = options.map(async (opt) => { + if (opt.type === "heading") return html`<${Option} ...${opt} />`; + const value = await db.get(opt.key), + _update = (value) => db.set(opt.key, value); + return html`<${Option} ...${{ ...opt, value, _update }} />`; + }); + return Promise.all(options); +}; + +const renderList = async (mods) => { + const { html, platform, getProfile } = globalThis.__enhancerApi, + { isEnabled, initDatabase } = globalThis.__enhancerApi, + enabledMods = initDatabase([await getProfile(), "enabledMods"]); + mods = mods + .filter((mod) => !mod.platforms || mod.platforms.includes(platform)) + .map(async (mod) => { + const enabled = await isEnabled(mod.id), + _update = (enabled) => enabledMods.set(mod.id, enabled); + return html`<${Mod} ...${{ ...mod, enabled, _update }} />`; + }); + return html`<${List}>${await Promise.all(mods)}`; }; let renderStarted; @@ -96,9 +111,13 @@ const render = async (iconStyle) => { $views = [ html`<${View} id="welcome">welcome`, html`<${View} id="core">${await renderOptions(await getCore())}`, - html`<${View} id="themes">themes`, - html`<${View} id="extensions">extensions`, - html`<${View} id="integrations">integrations`, + html`<${View} id="themes">${await renderList(await getThemes())}`, + html`<${View} id="extensions"> + ${await renderList(await getExtensions())} + `, + html`<${View} id="integrations"> + ${await renderList(await getIntegrations())} + `, ]; document.body.append($sidebar, ...$views); }; diff --git a/src/core/variables.css b/src/core/variables.css index 25a1478..2abf99f 100644 --- a/src/core/variables.css +++ b/src/core/variables.css @@ -1,6 +1,6 @@ /** * notion-enhancer - * (c) 2022 dragonwocky (https://dragonwocky.me/) + * (c) 2023 dragonwocky (https://dragonwocky.me/) * (https://notion-enhancer.github.io/) under the MIT license */ diff --git a/src/registry.json b/src/registry.json index adb8370..1f3d22e 100644 --- a/src/registry.json +++ b/src/registry.json @@ -1 +1 @@ -["core"] +["core", "themes/classic-dark"] diff --git a/src/themes/classic-dark/classic-dark.png b/src/themes/classic-dark/classic-dark.png new file mode 100644 index 0000000..e9989aa Binary files /dev/null and b/src/themes/classic-dark/classic-dark.png differ diff --git a/src/themes/classic-dark/client.css b/src/themes/classic-dark/client.css new file mode 100644 index 0000000..16afb43 --- /dev/null +++ b/src/themes/classic-dark/client.css @@ -0,0 +1,60 @@ +/** + * notion-enhancer + * (c) 2023 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +body.dark { + --theme--fg-primary: rgba(255, 255, 255, 0.9); + --theme--fg-secondary: rgba(255, 255, 255, 0.6); + --theme--fg-border: rgb(255, 255, 255, 0.07); + --theme--fg-gray: rgba(159, 164, 169, 1); + --theme--fg-brown: rgba(212, 150, 117, 1); + --theme--fg-orange: rgba(217, 133, 56, 1); + --theme--fg-yellow: rgba(201, 145, 38, 1); + --theme--fg-green: rgba(113, 178, 131, 1); + --theme--fg-blue: rgba(102, 170, 218, 1); + --theme--fg-purple: rgba(176, 152, 217, 1); + --theme--fg-pink: rgba(223, 132, 209, 1); + --theme--fg-red: rgba(234, 135, 140, 1); + + --theme--bg-primary: rgb(47, 52, 55); + --theme--bg-secondary: rgb(55, 60, 63); + --theme--bg-hover: rgba(255, 255, 255, 0.1); + --theme--bg-light_gray: rgba(71, 76, 80, 0.7); + --theme--bg-gray: rgb(71, 76, 80); + --theme--bg-brown: rgb(92, 71, 61); + --theme--bg-orange: rgb(136, 84, 44); + --theme--bg-yellow: rgb(146, 118, 63); + --theme--bg-green: rgb(50, 82, 65); + --theme--bg-blue: rgb(42, 78, 107); + --theme--bg-purple: rgb(83, 68, 116); + --theme--bg-pink: rgb(106, 59, 99); + --theme--bg-red: rgb(122, 54, 59); + + --theme--dim-light_gray: rgb(63, 68, 71); + --theme--dim-gray: rgb(60, 65, 68); + --theme--dim-brown: rgb(76, 61, 53); + --theme--dim-orange: rgb(85, 59, 41); + --theme--dim-yellow: rgb(79, 64, 41); + --theme--dim-green: rgb(46, 68, 58); + --theme--dim-blue: rgb(45, 66, 86); + --theme--dim-purple: rgb(69, 58, 91); + --theme--dim-pink: rgb(81, 56, 77); + --theme--dim-red: rgb(94, 52, 54); + + --theme--accent-primary: rgb(46, 170, 220); + --theme--accent-primary_hover: rgb(6, 156, 205); + --theme--accent-primary_contrast: #fff; + --theme--accent-primary_transparent: rgb(46, 170, 220, 0.25); + --theme--accent-secondary: #eb5757; + --theme--accent-secondary_contrast: #fff; + --theme--accent-secondary_transparent: rgba(235, 87, 87, 0.1); + + --theme--scrollbar-track: rgba(202, 204, 206, 0.04); + --theme--scrollbar-thumb: #474c50; + --theme--scrollbar-thumb_hover: rgba(202, 204, 206, 0.3); + + --theme--code-block_fg: rgba(255, 255, 255, 0.9); + --theme--code-block_bg: rgb(63, 68, 71); +} diff --git a/src/themes/classic-dark/mod.json b/src/themes/classic-dark/mod.json new file mode 100644 index 0000000..e8a62c6 --- /dev/null +++ b/src/themes/classic-dark/mod.json @@ -0,0 +1,16 @@ +{ + "id": "fe0f4498-df34-4dd8-8470-27b6fcec9acd", + "name": "Classic Dark", + "version": "1.0.0", + "description": "The original Notion dark theme from pre-2022.", + "thumbnail": "classic-dark.png", + "tags": ["dark"], + "authors": [ + { + "name": "dragonwocky", + "homepage": "https://dragonwocky.me/", + "avatar": "https://dragonwocky.me/avatar.jpg" + } + ], + "clientStyles": ["client.css"] +}