@nsnanocat/preference-panes 0.8.1 → 0.9.1

package/src/browser/panel.css

@@ -1,12 +1,12 @@
 /* 分组列表沿用 Bilibili 设置页的行结构，样式限定在面板内。
  * Grouped rows follow the Bilibili settings layout, scoped to the panel. */
 .pp-panel {
-    --pp-text: #18191c;
-    --pp-background: #f6f7f8;
-    --pp-surface: #fff;
-    --pp-border: #e3e5e7;
-    --pp-muted: #9499a0;
-    --pp-accent: #fb7299;
+    --pp-text: var(--text1);
+    --pp-background: var(--bg2);
+    --pp-surface: var(--bg1);
+    --pp-border: var(--line_regular);
+    --pp-muted: var(--text3);
+    --pp-accent: var(--brand_pink);
     font:
         15px / 1.5 -apple-system,
         BlinkMacSystemFont,
@@ -67,7 +67,7 @@
     width: 44px;
     flex: none;
 }
-.pp-panel button {
+.pp-panel button:not(.v-toggle) {
     font: inherit;
     cursor: pointer;
     border: 0;
@@ -111,60 +111,10 @@
     position: absolute;
     inset: 0;
     overflow: auto;
-    padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom));
+    padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom) + var(--pp-keyboard-height, 0px));
+    scroll-padding-bottom: var(--pp-keyboard-height, 0px);
     background: var(--pp-background);
 }
-.pp-panel .form-group {
-    margin: 0 0 12px;
-}
-.pp-panel .form-group__title {
-    font-size: 12px;
-    line-height: 17px;
-    font-weight: 400;
-    color: var(--pp-muted);
-    padding-left: 12px;
-    margin: 12px 0 6px;
-}
-.pp-panel .form-group__row {
-    border-radius: 8px;
-    overflow: hidden;
-    background: var(--pp-surface);
-}
-.pp-panel .form-row {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: 46px;
-    padding: 12px;
-    border: 0;
-    border-bottom: 1px solid var(--pp-border);
-    background: var(--pp-surface);
-    gap: 12px;
-}
-.pp-panel .form-row:last-child {
-    border-bottom: 0;
-}
-.pp-panel .form-row__text {
-    flex: 1;
-    min-width: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-}
-.pp-panel .form-row__title {
-    font-size: 15px;
-    line-height: 22px;
-    color: var(--pp-text);
-    text-align: left;
-}
-.pp-panel .form-row__subtitle {
-    font-size: 12px;
-    line-height: 18px;
-    color: var(--pp-muted);
-    overflow-wrap: anywhere;
-    margin-top: 2px;
-}
 .pp-choice-link {
     display: flex;
     align-items: center;
@@ -192,60 +142,29 @@
     font-size: 22px;
     flex: none;
 }
-.pp-input {
-    font: inherit;
-    color: var(--pp-text);
-    background: var(--pp-surface);
-    border: 1px solid var(--pp-border);
-    border-radius: 6px;
-    padding: 8px;
-    min-width: 0;
-    max-width: 45%;
+.pp-editor {
+    flex: none;
     width: 45%;
+    min-width: 0;
 }
-select.pp-input {
-    text-overflow: ellipsis;
-    font-size: 13px;
+.pp-search {
+    width: 100%;
+    margin-bottom: 12px;
 }
 .pp-panel .pp-multiline {
     display: block;
 }
-.pp-multiline .pp-input {
-    max-width: 100%;
+.pp-multiline .pp-editor {
     width: 100%;
     margin-top: 10px;
 }
-.pp-switch {
-    appearance: none;
-    -webkit-appearance: none;
-    position: relative;
-    flex: none;
-    width: 32px;
-    height: 20px;
-    max-width: none;
+.pp-panel [hidden] {
+    display: none !important;
+}
+.pp-panel .v-toggle {
     border: 0;
-    border-radius: 15px;
     padding: 0;
-    background: #c9ccd0;
-    cursor: pointer;
-    transition: background 0.2s;
-}
-.pp-switch::before {
-    content: "";
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background: white;
-    transition: transform 0.2s;
-}
-.pp-switch:checked {
-    background: var(--pp-accent);
-}
-.pp-switch:checked::before {
-    transform: translateX(12px);
+    flex: none;
 }
 .pp-choice {
     justify-content: space-between;
@@ -315,29 +234,3 @@ select.pp-input {
     outline: 2px solid var(--pp-accent);
     outline-offset: -2px;
 }
-@media (prefers-color-scheme: dark) {
-    .pp-panel {
-        --pp-text: #e3e5e7;
-        --pp-background: #17181a;
-        --pp-surface: #232427;
-        --pp-border: #343538;
-    }
-}
-:root[data-theme="dark"] .pp-panel {
-    --pp-text: #e3e5e7;
-    --pp-background: #17181a;
-    --pp-surface: #232427;
-    --pp-border: #343538;
-}
-:root[data-theme="light"] .pp-panel {
-    --pp-text: #18191c;
-    --pp-background: #f6f7f8;
-    --pp-surface: #fff;
-    --pp-border: #e3e5e7;
-}
-@media (prefers-reduced-motion: reduce) {
-    .pp-panel .pp-switch,
-    .pp-panel .pp-switch::before {
-        transition: none;
-    }
-}

package/src/browser/panel.mjs

@@ -1,6 +1,6 @@
 import { ActionMenu } from "./ActionMenu.mjs";
 import { createPreferencesClient } from "./client.mjs";
-import { errorView, icon, element as node, resourceURL } from "./components.mjs";
+import { errorView, fieldControl, icon, element as node, requestConfirmation, resourceURL } from "./components.mjs";
 import { Navigation } from "./Navigation.mjs";
 
 /**
@@ -27,7 +27,7 @@ export function mountPanel(root, catalog) {
         { id: "clearCaches", label: "清空缓存", destructive: true },
         { id: "reset", label: "重置模块", destructive: true },
     ];
-    const menu = new ActionMenu(id => handlers.get(id)());
+    const menu = new ActionMenu(id => runAction(id));
     const trailing = node("span", "pp-nav-spacer");
     trailing.append(menu.element);
     const brand = node("div", "pp-brand");
@@ -57,7 +57,7 @@ export function mountPanel(root, catalog) {
         );
     };
     const onAction = event => {
-        if (!saving && handlers.has(event.detail)) handlers.get(event.detail)();
+        if (!saving && handlers.has(event.detail)) runAction(event.detail);
     };
     window.frameElement?.addEventListener("preferencepanes:action", onAction);
     let timer,
@@ -99,6 +99,19 @@ export function mountPanel(root, catalog) {
         }, 2400);
     };
     const client = createPreferencesClient({ catalog, notify });
+    /**
+     * 两种菜单入口共用异步错误处理，包含宿主确认框错误。
+     * Share async error handling between both menus, including host-dialog errors.
+     * @param {string} id 操作标识 / Action identifier.
+     * @returns {Promise<void>} 操作已处理 / Action handled.
+     */
+    async function runAction(id) {
+        try {
+            await handlers.get(id)();
+        } catch (error) {
+            notify({ kind: "error", message: error.message });
+        }
+    }
     /**
      * 打开模块并忽略已过期的异步结果。
      * Open a module and ignore stale asynchronous results.
@@ -130,6 +143,14 @@ export function mountPanel(root, catalog) {
         const { definition, values } = client.snapshot(active);
         heading.textContent = definition.metadata?.name || active;
         const view = node("section", "pp-fields");
+        const search = node("input", "");
+        search.type = "search";
+        search.placeholder = "搜索设置项";
+        search.setAttribute("aria-label", "搜索设置");
+        const searchField = fieldControl(search);
+        searchField.classList.add("pp-search");
+        view.append(searchField);
+        const searchRows = [];
         /**
          * 挂载后执行的多行高度更新
          * Textarea sizing callbacks run after mounting.
@@ -204,7 +225,7 @@ export function mountPanel(root, catalog) {
             const match = /^\[([^\]]+)\]\s*(.*)$/.exec(field.name);
             const group = match?.[1] ?? "通用";
             if (!groups.has(group)) {
-                const section = node("section", "form-group");
+                const section = node("section", "form-group form-group--has-title");
                 const rows = node("div", "form-group__row");
                 section.append(node("h2", "form-group__title", group), rows);
                 groups.set(group, rows);
@@ -232,7 +253,7 @@ export function mountPanel(root, catalog) {
             let eventName = "change";
             switch (true) {
                 case Boolean(field.options) && field.type !== "array": {
-                    const select = node("select", "pp-input");
+                    const select = node("select", "");
                     select.setAttribute("aria-label", field.name);
                     field.options.forEach((option, index) => {
                         const item = node("option", "", option.label);
@@ -242,7 +263,7 @@ export function mountPanel(root, catalog) {
                     write = value => {
                         select.selectedIndex = field.options.findIndex(option => option.key === value);
                     };
-                    row.append(select);
+                    row.append(fieldControl(select));
                     read = () => field.options[select.selectedIndex]?.key;
                     break;
                 }
@@ -288,9 +309,27 @@ export function mountPanel(root, catalog) {
                     };
                     break;
                 }
+                case field.type === "boolean": {
+                    const toggle = node("button", "v-toggle v-toggle--small form-row__toggle");
+                    toggle.type = "button";
+                    toggle.setAttribute("role", "switch");
+                    toggle.setAttribute("aria-label", field.name);
+                    toggle.append(node("span", "v-toggle__circle"));
+                    write = value => {
+                        toggle.setAttribute("aria-checked", String(value === true));
+                        toggle.classList.toggle("v-toggle--closed", value !== true);
+                    };
+                    read = () => toggle.getAttribute("aria-checked") === "true";
+                    toggle.onclick = () => {
+                        write(!read());
+                        toggle.dispatchEvent(new window.Event("change", { bubbles: true }));
+                    };
+                    row.append(toggle);
+                    break;
+                }
                 default: {
                     const multiline = field.control === "textarea" || field.type === "array";
-                    const input = node(multiline ? "textarea" : "input", "pp-input");
+                    const input = node(multiline ? "textarea" : "input", "");
                     if (multiline) row.classList.add("pp-multiline");
                     input.setAttribute("aria-label", field.name);
                     if (field.placeholder) input.placeholder = field.placeholder;
@@ -312,33 +351,23 @@ export function mountPanel(root, catalog) {
                         input.addEventListener("input", grow);
                         growingInputs.push(grow);
                     }
-                    if (field.type === "boolean") {
-                        input.type = "checkbox";
-                        input.classList.add("pp-switch");
-                        input.setAttribute("role", "switch");
-                        write = value => {
-                            input.checked = value === true;
-                        };
-                        read = () => input.checked;
-                    } else {
-                        eventName = "input";
-                        if (!multiline) input.type = field.type === "number" ? "number" : "text";
-                        write = value => {
-                            input.value = field.type === "array" ? JSON.stringify(value ?? []) : (value ?? "");
-                            grow();
-                        };
-                        read = () => {
-                            switch (field.type) {
-                                case "array":
-                                    return JSON.parse(input.value);
-                                case "number":
-                                    return input.value === "" ? Number.NaN : Number(input.value);
-                                default:
-                                    return input.value;
-                            }
-                        };
-                    }
-                    row.append(input);
+                    eventName = "input";
+                    if (!multiline) input.type = field.type === "number" ? "number" : "text";
+                    write = value => {
+                        input.value = field.type === "array" ? JSON.stringify(value ?? []) : (value ?? "");
+                        grow();
+                    };
+                    read = () => {
+                        switch (field.type) {
+                            case "array":
+                                return JSON.parse(input.value);
+                            case "number":
+                                return input.value === "" ? Number.NaN : Number(input.value);
+                            default:
+                                return input.value;
+                        }
+                    };
+                    row.append(fieldControl(input, multiline));
                     break;
                 }
             }
@@ -368,7 +397,18 @@ export function mountPanel(root, catalog) {
             });
             if (eventName === "input") inputContainer.addEventListener("compositionend", event => event.target.dispatchEvent(new window.Event("input", { bubbles: true })));
             groups.get(group).append(row);
+            searchRows.push({ row, text: [field.name, field.key, field.description, ...(field.options ?? []).map(option => option.label)].join(" ").toLocaleLowerCase() });
         }
+        const empty = node("p", "pp-description", "没有匹配的设置项");
+        empty.hidden = true;
+        empty.setAttribute("role", "status");
+        view.append(empty);
+        search.oninput = () => {
+            const words = search.value.trim().toLocaleLowerCase().split(/\s+/);
+            for (const { row, text } of searchRows) row.hidden = !words.every(word => text.includes(word));
+            for (const rows of groups.values()) rows.parentElement.hidden = [...rows.children].every(row => row.hidden);
+            empty.hidden = searchRows.some(({ row }) => !row.hidden);
+        };
         const cachePage = node("section", "pp-cache-page");
         const output = node("pre", "pp-cache");
         output.textContent = "暂无缓存";
@@ -393,9 +433,9 @@ export function mountPanel(root, catalog) {
                 },
             );
         });
-        handlers.set("clearCaches", () => {
+        handlers.set("clearCaches", async () => {
             if (saving) return;
-            if (!window.confirm(`清空 ${active} 的全部 Caches？`)) return;
+            if (!(await requestConfirmation(window, `清空 ${active} 的全部 Caches？`)) || destroyed || saving) return;
             return perform(
                 () => client.clearCaches(active),
                 () => {
@@ -403,9 +443,9 @@ export function mountPanel(root, catalog) {
                 },
             );
         });
-        handlers.set("reset", () => {
+        handlers.set("reset", async () => {
             if (saving) return;
-            if (!window.confirm(`重置 ${active}？这将删除该模块的 Settings、Caches 和其它持久化数据。`)) return;
+            if (!(await requestConfirmation(window, `重置 ${active}？这将删除该模块的 Settings、Caches 和其它持久化数据。`)) || destroyed || saving) return;
             return perform(() => client.reset(active), controls);
         });
         navigation?.destroy();