wallpaper-engine-dsh 2.1.2 → 2.1.4

package/README.md

@@ -2,7 +2,7 @@
 
 [English](README.md) | [中文](README.zh.md)
 
-A DSH bundle that turns your local **Wallpaper Engine** library into the live background of the DSH web GUI (`dsh web`). Video wallpapers play behind the chat, web wallpapers render in place, and everything in between — crossfade transitions, liquid-glass panels, a legibility veil that adapts to any wallpaper, manual framing, rotation lists, search, and a bilingual UI — is controlled from a single settings row.
+A DSH bundle that turns your local **Wallpaper Engine** library into the live background of the DSH web GUI (`dsh web`). Video wallpapers play behind the chat, web wallpapers render in place, and everything in between — crossfade transitions, liquid-glass panels, a legibility veil that adapts to any wallpaper, manual framing, rotation lists, search, and a bilingual UI — is controlled from its own dedicated settings section.
 
 ## Features
 
@@ -35,7 +35,7 @@ git clone https://github.com/Weilv-D/wallpaper-engine-dsh.git
 dsh plugin --profile web add link:<absolute path to the cloned folder>
 ```
 
-Restart `dsh web`, then open **Settings → General → Wallpaper Engine**.
+Restart `dsh web`, open **Settings** from the sidebar, and pick **Wallpaper**.
 
 ## Usage
 

package/README.zh.md

@@ -2,7 +2,7 @@
 
 [English](README.md) | [中文](README.zh.md)
 
-一个 DSH bundle:把本机 **Wallpaper Engine** 壁纸库变成 DSH web GUI(`dsh web`)的动态背景。视频壁纸在聊天界面背后播放,网页壁纸直接渲染。交叉淡入、液态玻璃面板、随壁纸自适应的可读性遮罩、手动取景、轮播列表、搜索与中英双语界面,全部集中在一个设置行里。
+一个 DSH bundle:把本机 **Wallpaper Engine** 壁纸库变成 DSH web GUI(`dsh web`)的动态背景。视频壁纸在聊天界面背后播放,网页壁纸直接渲染。交叉淡入、液态玻璃面板、随壁纸自适应的可读性遮罩、手动取景、轮播列表、搜索与中英双语界面,集中在一个专门的设置分区里。
 
 ## 功能
 
@@ -35,7 +35,7 @@ git clone https://github.com/Weilv-D/wallpaper-engine-dsh.git
 dsh plugin --profile web add link:<克隆文件夹的绝对路径>
 ```
 
-重启 `dsh web`,打开 **设置 → 通用 → 壁纸背景 (Wallpaper Engine)**。
+重启 `dsh web`,在左侧会话列表点「设置」,侧栏选 **壁纸背景**。
 
 ## 使用
 

package/lib/client.js

@@ -37,6 +37,7 @@ window.__ModuleLoader__.load({
 		const STRINGS = {
 		  zh: {
 		    settingsLabel: "壁纸背景 (Wallpaper Engine)",
+		    navLabel: "壁纸背景",
 		    scanning: "正在扫描 Wallpaper Engine…",
 		    connError: "未能连接 Wallpaper Engine:",
 		    retry: "重试",
@@ -122,6 +123,7 @@ window.__ModuleLoader__.load({
 		  },
 		  en: {
 		    settingsLabel: "Wallpaper Engine",
+		    navLabel: "Wallpaper",
 		    scanning: "Scanning Wallpaper Engine…",
 		    connError: "Could not reach Wallpaper Engine: ",
 		    retry: "Retry",
@@ -1869,6 +1871,7 @@ window.__ModuleLoader__.load({
 		  const editing = sel.editing;
 
 		  return React.createElement("div", { className: "webg-picker" },
+		    React.createElement("h2", { className: "webg-heading" }, t.settingsLabel),
 		    SearchRow(t, sel, query, setQuery, filteredList.length, usableList.length),
 		    WallpaperGrid(t, sel, usableList, filteredList, q),
 		    ActionRow(t, sel),
@@ -2108,7 +2111,11 @@ window.__ModuleLoader__.load({
 		  /* padding-top lifts the first row off the settings-section divider so the
 		     search/language row breathes; gap keeps every row evenly spaced.
 		     Type scale follows the shell: 14px body → 13px controls → 12px hints. */
-		  .webg-picker { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
+		  .webg-picker { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; max-width: 900px; }
+		  /* Page heading mirrors the shell's own section headings (18px/600, no
+		     margins) — the sidebar label is the short nav name, this carries the
+		     full product name. */
+		  .webg-heading { margin: 0; font-size: 18px; font-weight: 600; color: var(--dsw-alias-label-primary, inherit); }
 		  .webg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
 		  .webg-hint { font-size: 12px; opacity: 0.7; color: var(--dsw-alias-label-tertiary, inherit); }
 		  .webg-error {
@@ -2330,7 +2337,7 @@ window.__ModuleLoader__.load({
 
 		// ── Plugin exports ──────────────────────────────────────────────────────────
 		// The client runner (dsh-cordis-client-runner) rejects ctx.get() of any
-		// service this plugin does not declare. slots registers the settings row,
+		// service this plugin does not declare. slots registers the settings section,
 		// locale drives the bilingual UI, theme drives the veil/scheme reactions.
 		const inject = ["slots", "locale", "theme"];
 
@@ -2535,16 +2542,62 @@ window.__ModuleLoader__.load({
 		    });
 		  }
 
-		  // 4. Settings row (this slot is NOT the overlay; safe to register into).
+		  // Nav icon: the settings sidebar hardcodes icons by section id
+		  // (account/models/plugins/...) and falls back to a gear for every
+		  // plugin-registered section; nav rows expose no per-row hook (no
+		  // data-id, class names are module-suffixed), so the icon is swapped
+		  // in place: watch for nav rows whose label text is ours and replace
+		  // the default gear SVG with the plugin wallpaper glyph. The gear's
+		  // class attribute is copied so the shell's sizing styles still apply,
+		  // and a dataset guard keeps the swap idempotent across re-renders.
+		  const NAV_ICON_SVG =
+		    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">' +
+		    '<rect x="2" y="2" width="12" height="12" rx="2"/>' +
+		    '<circle cx="5.8" cy="5.8" r="1.1"/>' +
+		    '<path d="M14 10l-3.33-3.33L3.33 14"/></svg>';
+		  const styleNavIcon = () => {
+		    if (typeof document.querySelectorAll !== "function") return;
+		    for (const row of document.querySelectorAll('button[class*="navCell"]')) {
+		      if (row.dataset && row.dataset.webgNavIcon) continue;
+		      if (row.textContent !== S().navLabel) continue;
+		      const gear = row.querySelector("svg");
+		      if (!gear) continue;
+		      row.dataset.webgNavIcon = "1";
+		      const tpl = document.createElement("span");
+		      tpl.innerHTML = NAV_ICON_SVG;
+		      const svg = tpl.firstChild;
+		      const cls = gear.getAttribute && gear.getAttribute("class");
+		      if (cls) svg.setAttribute("class", cls);
+		      gear.replaceWith(svg);
+		    }
+		  };
+		  // 4. Own settings section — NOT a row inside General. The settings dialog
+		  //    enumerates every registered settings.section slot for its nav
+		  //    (settings-general and settings-plugins register theirs the same way),
+		  //    so the picker renders as a full page with its own sidebar entry,
+		  //    ordered after the built-in sections (general 0, plugins 15).
 		  if (ctx.slots) {
-		    ctx.slots.inject("settings.general.item", () =>
+		    ctx.slots.inject("settings.section", () =>
 		      ctx.slots.register(
-		        { name: "settings.general.item", id: "we-background", order: 500, label: () => S().settingsLabel },
+		        { name: "settings.section", id: "we-background", order: 20, label: () => S().navLabel },
 		        () => React.createElement(WallpaperPicker),
 		      ),
 		    );
 		  }
 
+		  // 4b. Drive the nav icon swap (defined above): the settings dialog mounts
+		  //     its nav only while open, so the observer just sweeps on mutation
+		  //     batches and early-exits when no nav rows exist. Disposed with the
+		  //     plugin fiber.
+		  if (ctx.effect && typeof MutationObserver === "function" && typeof document !== "undefined") {
+		    ctx.effect(() => {
+		      const mo = new MutationObserver(styleNavIcon);
+		      mo.observe(document.body, { childList: true, subtree: true });
+		      styleNavIcon();
+		      return () => mo.disconnect();
+		    });
+		  }
+
 		  loadInventory(false);
 		}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallpaper-engine-dsh",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "Wallpaper Engine library as the DSH web GUI background — video/web/still wallpapers, rotation lists, search, resource monitor, bilingual UI.",
   "type": "module",
   "main": "lib/index.js",