@cowwo/dsh-icon-custom 0.2.1 → 0.5.0

package/README.md

@@ -29,6 +29,16 @@ When the site is installed as an app, the browser's install dialog picks the cus
 
 ![PWA install dialog](./docs/install-dialog.png)
 
+## Page logo mark
+
+Tick **同时替换页面 Logo 图标** to also replace the whale mark at the top-left of the DSH page — the mark beside the `deepseek HARNESS` brand name. The brand **text is untouched**; the mark falls back to the official whale while the option is off. The change applies instantly and persists across reloads/restarts.
+
+Notes:
+
+- The option is **off by default**.
+- It can be toggled at any time after upload — no re-upload needed.
+- This only affects the sidebar brand mark (the one next to `deepseek HARNESS`); PWA/installed-app icons are a separate option above.
+
 Notes:
 
 - The option is **off by default**: without it, behavior is identical to before and the platform manifest is served verbatim.

package/README.zh.md

@@ -29,6 +29,16 @@ dsh plugin --profile web add dsh-icon-custom
 
 ![PWA 安装对话框](./docs/install-dialog.png)
 
+## 页面 Logo 图标
+
+勾选**同时替换页面 Logo 图标**,网页左上角品牌 logo 里的**鲸鱼图标**就会换成你上传的这张——`deepseek HARNESS` 文字不受影响。选项关闭时显示官方鲸鱼;改动立即生效,刷新/重启都保留。
+
+说明:
+
+- 该选项**默认不勾选**。
+- 上传后随时可以勾选/取消,不用重新上传文件。
+- 只影响侧边栏的品牌图标(deepseek HARNESS 旁边那只);PWA 安装图标是上面的另一个选项。
+
 说明:
 
 - 该选项**默认不勾选**:不勾选时行为与之前完全一致,平台 manifest 原样透传。

package/client/client.js

@@ -28,6 +28,9 @@ window.__ModuleLoader__.load({
 			pwa: "同时替换 PWA 安装图标",
 			pwaHint: "安装为应用(添加到主屏幕)后,桌面上的图标也换成这张;已安装的应用可能需要重新安装才会更新。",
 			successPwa: "PWA 图标设置已更新",
+			logo: "同时替换页面 Logo 图标",
+			logoHint: "把网页左上角品牌 logo 里的鲸鱼图标换成这张(不影响 deepseek HARNESS 文字)。",
+			successLogo: "页面 Logo 已更新",
 			fail: "操作失败",
 			noFile: "请先选择图标文件"
 		};
@@ -50,6 +53,9 @@ window.__ModuleLoader__.load({
 			pwa: "Also replace the PWA app icon",
 			pwaHint: "The icon used after installing the site as an app (add to home screen). Already-installed apps may need a reinstall to pick it up.",
 			successPwa: "PWA icon setting updated",
+			logo: "Also replace the page logo mark",
+			logoHint: "Replaces the whale mark beside the brand name in the top-left (the deepseek HARNESS text stays).",
+			successLogo: "Page logo updated",
 			fail: "Operation failed",
 			noFile: "Choose a file first"
 		};
@@ -72,14 +78,60 @@ window.__ModuleLoader__.load({
 				return new Date(ms).toLocaleString();
 			} catch { return "—"; }
 		}
+		// In-package brand-mark bridge: the settings section pushes the current
+		// logo state here; the sidebar brand-mark component subscribes to it.
+		// Both live in this same module — no RPC loop, no cross-package events.
+		const logoListeners = new Set();
+		function emitLogo(value) {
+			logoListeners.forEach((fn) => { try { fn(value); } catch {} });
+		}
+		function subscribeLogo(fn) {
+			logoListeners.add(fn);
+			return () => { logoListeners.delete(fn); };
+		}
+		function syncLogo(status) {
+			emitLogo({
+				enabled: status !== null && typeof status === "object" && status.active === true && status.logo === true,
+				rev: status && status.rev ? status.rev : null
+			});
+		}
 		//#endregion
 
-		//#region component
+		//#region components
+		/**
+		 * Sidebar brand-mark occupant (registered on the official
+		 * `sidebar.brand.mark` single seat). Shows the custom icon when the
+		 * logo option is on; otherwise falls back to the platform favicon mark
+		 * (/favicon.svg is the same official whale). The brand NAME text is not
+		 * touched — this seat is only the mark.
+		 */
+		function BrandMark(props) {
+			const [state, setState] = React.useState(null);
+			React.useEffect(() => {
+				const unsubscribe = subscribeLogo(setState);
+				// Pull the current state on mount too, so the mark is correct
+				// even when the settings panel was never opened this session.
+				props.rpc.call("/api", "iconCustom/getStatus", { args: {} })
+					.then((resp) => { if (resp && resp.ok === true) syncLogo(resp.value); })
+					.catch(() => {});
+				return unsubscribe;
+			}, [props.rpc]);
+			const size = (props && props.size) || 24;
+			const custom = state && state.enabled === true && state.rev;
+			const style = { width: size, height: size, objectFit: "contain", display: "block" };
+			return React.createElement("img", {
+				src: custom ? `/icon-custom.svg?v=${state.rev}` : "/favicon.svg",
+				alt: "",
+				style
+			});
+		}
+
 		function FaviconSection(props) {
 			const t = props.t;
 			const rpc = props.rpc;
 			const [status, setStatus] = React.useState(null);
 			const [pwaEnabled, setPwaEnabled] = React.useState(false);
+			const [logoEnabled, setLogoEnabled] = React.useState(false);
 			const [busy, setBusy] = React.useState(false);
 			const [error, setError] = React.useState("");
 			const [notice, setNotice] = React.useState("");
@@ -91,6 +143,8 @@ window.__ModuleLoader__.load({
 					if (resp && resp.ok === true) {
 						setStatus(resp.value);
 						setPwaEnabled(resp.value.pwa === true);
+						setLogoEnabled(resp.value.logo === true);
+						syncLogo(resp.value);
 					} else setError(reason(resp, t("fail")));
 				} catch (e) {
 					setError(String((e && e.message) || e || t("fail")));
@@ -147,13 +201,15 @@ window.__ModuleLoader__.load({
 					setBusy(true);
 					try {
 						const resp = await rpc.call("/api", "iconCustom/setIcon", {
-							args: { request: { mime: file.type || "image/svg+xml", name: file.name, pwa: pwaEnabled, data } }
+							args: { request: { mime: file.type || "image/svg+xml", name: file.name, pwa: pwaEnabled, logo: logoEnabled, data } }
 						});
 						if (resp && resp.ok === true) {
 							setStatus(resp.value);
 							setPwaEnabled(resp.value.pwa === true);
+							setLogoEnabled(resp.value.logo === true);
 							setNotice(t("successUpload"));
 							applyLive(resp.value);
+							syncLogo(resp.value);
 						} else {
 							setError(reason(resp, t("fail")));
 						}
@@ -165,7 +221,7 @@ window.__ModuleLoader__.load({
 				};
 				reader.onerror = () => setError(t("fail"));
 				reader.readAsDataURL(file);
-			}, [rpc, t, pwaEnabled, applyLive]);
+			}, [rpc, t, pwaEnabled, logoEnabled, applyLive]);
 
 			const onReset = React.useCallback(async () => {
 				setError("");
@@ -176,8 +232,10 @@ window.__ModuleLoader__.load({
 					if (resp && resp.ok === true) {
 						setStatus(resp.value);
 						setPwaEnabled(false);
+						setLogoEnabled(false);
 						setNotice(t("successReset"));
 						applyDefault();
+						syncLogo(resp.value);
 					} else {
 						setError(reason(resp, t("fail")));
 					}
@@ -214,6 +272,32 @@ window.__ModuleLoader__.load({
 				}
 			}, [rpc, t, applyLive]);
 
+			const onToggleLogo = React.useCallback(async (event) => {
+				const enabled = event.target.checked === true;
+				setError("");
+				setNotice("");
+				setBusy(true);
+				try {
+					const resp = await rpc.call("/api", "iconCustom/setLogo", {
+						args: { request: { enabled } }
+					});
+					if (resp && resp.ok === true) {
+						setStatus(resp.value);
+						setLogoEnabled(resp.value.logo === true);
+						setNotice(t("successLogo"));
+						syncLogo(resp.value);
+					} else {
+						setLogoEnabled(!enabled);
+						setError(reason(resp, t("fail")));
+					}
+				} catch (e) {
+					setLogoEnabled(!enabled);
+					setError(String((e && e.message) || e || t("fail")));
+				} finally {
+					setBusy(false);
+				}
+			}, [rpc, t]);
+
 			const active = status && status.active === true;
 			const previewSrc = active ? `/icon-custom.svg?v=${status.rev}` : "/favicon.svg";
 
@@ -258,6 +342,11 @@ window.__ModuleLoader__.load({
 					React.createElement("span", null, t("pwa"))
 				),
 				React.createElement("div", { style: style.hint }, t("pwaHint")),
+				React.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 0 0", fontSize: 12, color: "var(--dsw-alias-label-primary)", cursor: busy ? "default" : "pointer" } },
+					React.createElement("input", { type: "checkbox", checked: logoEnabled, disabled: busy || !active, onChange: onToggleLogo, style: { cursor: busy ? "default" : "pointer" } }),
+					React.createElement("span", null, t("logo"))
+				),
+				React.createElement("div", { style: style.hint }, t("logoHint")),
 				React.createElement("div", { style: style.hint }, t("uploadHint")),
 				React.createElement("div", { style: style.hint }, t("resetHint")),
 				notice ? React.createElement("div", { style: style.notice }, notice) : null,
@@ -271,6 +360,11 @@ window.__ModuleLoader__.load({
 			ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-icon-custom: dictionaries");
 			const t = ctx.locale.bind(NS);
 			const rpc = ctx.connection.rpc;
+			// Brand-mark seat: replaces only the whale mark (verified: a
+			// third-party registration wins over the official occupant and the
+			// official package's mark steps aside). The brand NAME text is a
+			// separate seat and is left untouched.
+			ctx.slots.inject("sidebar.brand.mark", () => ctx.slots.register({ name: "sidebar.brand.mark" }, (props) => React.createElement(BrandMark, { ...props, rpc })));
 			ctx.slots.inject("settings.section", () => ctx.slots.register({
 				name: "settings.section",
 				id: "favicon",

package/lib/index.js

@@ -218,9 +218,9 @@ export class FaviconCustomService extends TypertRemoteService {
 		this.storageDir = join(resolveHome(), 'custom-favicon')
 		this.libraryDir = join(this.storageDir, 'library')
 		this.indexPath = join(this.storageDir, 'library.json')
-		// { activeId, icons: { [id]: { id, mime, ext, name, size, savedAt, rev, pwa } } }
+		// { activeId, icons: { [id]: { id, mime, ext, name, size, savedAt, rev, pwa, logo } } }
 		this.library = { activeId: null, icons: {} }
-		// The active icon's loaded state: { rev, mime, ext, name, size, savedAt, pwa, bytes } | null
+		// The active icon's loaded state: { rev, mime, ext, name, size, savedAt, pwa, logo, bytes } | null
 		this.current = null
 		// Platform PWA manifest (raw + parsed), read once at startup.
 		this.baseManifest = loadBaseManifest()
@@ -268,8 +268,8 @@ export class FaviconCustomService extends TypertRemoteService {
 	status() {
 		const c = this.current
 		return c === null
-			? { active: false, pwa: false, rev: null, mime: null, ext: null, name: null, size: null, savedAt: null }
-			: { active: true, pwa: c.pwa === true, rev: c.rev, mime: c.mime, ext: c.ext, name: c.name, size: c.size, savedAt: c.savedAt }
+			? { active: false, pwa: false, logo: false, rev: null, mime: null, ext: null, name: null, size: null, savedAt: null }
+			: { active: true, pwa: c.pwa === true, logo: c.logo === true, rev: c.rev, mime: c.mime, ext: c.ext, name: c.name, size: c.size, savedAt: c.savedAt }
 	}
 
 	/** typert endpoint: read current status. */
@@ -282,6 +282,8 @@ export class FaviconCustomService extends TypertRemoteService {
 		if (request === null || typeof request !== 'object') throw new Error('缺少图标参数')
 		// `pwa`: whether this icon also replaces the PWA install icon (opt-in).
 		const pwa = request.pwa === true
+		// `logo`: whether this icon also replaces the in-app sidebar brand mark (opt-in).
+		const logo = request.logo === true
 		const { name, data } = request
 		if (typeof data !== 'string' || data.length === 0) throw new Error('缺少图标数据')
 		const { bytes } = base64Body(data)
@@ -299,7 +301,7 @@ export class FaviconCustomService extends TypertRemoteService {
 		const rec = {
 			id,
 			mime, ext,
-			pwa,
+			pwa, logo,
 			name: typeof name === 'string' && name.trim().length > 0 ? name.trim().slice(0, 128) : null,
 			size: bytes.length, savedAt: now, rev
 		}
@@ -325,6 +327,21 @@ export class FaviconCustomService extends TypertRemoteService {
 		return this.status()
 	}
 
+	/** typert endpoint: toggle the brand-mark flag on the active icon (no re-upload). */
+	async setLogo(request) {
+		if (request === null || typeof request !== 'object' || typeof request.enabled !== 'boolean') {
+			throw new Error('缺少 enabled 参数')
+		}
+		const id = this.library.activeId
+		if (id === null || this.current === null) throw new Error('当前没有自定义图标')
+		const rec = this.library.icons[id]
+		if (rec === null || typeof rec !== 'object') throw new Error('图标记录不存在')
+		rec.logo = request.enabled === true
+		this.current.logo = rec.logo
+		await this._saveLibrary().catch(() => {}) // index is advisory
+		return this.status()
+	}
+
 	/** typert endpoint: clear the active marker so the platform icon is used.
 	 *  Icon files stay on disk for the future icon-library UI. */
 	async resetIcon() {

package/lib/typert.host.js

@@ -4,6 +4,7 @@ import { z } from 'zod'
 const statusSchema = z.object({
 	active: z.boolean(),
 	pwa: z.boolean(),
+	logo: z.boolean(),
 	rev: z.string().nullable(),
 	mime: z.string().nullable(),
 	ext: z.string().nullable(),
@@ -16,6 +17,7 @@ const setIconRequestSchema = z.object({
 	mime: z.string().min(1),
 	name: z.string().max(128).optional(),
 	pwa: z.boolean().optional(),
+	logo: z.boolean().optional(),
 	data: z.string().min(1)
 })
 
@@ -23,6 +25,10 @@ const setPwaRequestSchema = z.object({
 	enabled: z.boolean()
 })
 
+const setLogoRequestSchema = z.object({
+	enabled: z.boolean()
+})
+
 const setIconResultSchema = statusSchema
 
 export const TYPERT = {
@@ -94,6 +100,31 @@ export const TYPERT = {
 			},
 			sourceLocation: { file: 'lib/index.js', line: 1, column: 1 }
 		},
+		{
+			id: 'dsh-icon-custom#iconCustom/setLogo',
+			service: 'iconCustom',
+			namespace: 'iconCustom',
+			method: 'setLogo',
+			invocation: { kind: 'direct' },
+			parameters: [
+				{
+					name: 'request',
+					wire: 'request',
+					source: 'json',
+					codec: {
+						mode: 'strict',
+						typeSymbol: 'dsh-icon-custom#iconCustom/setLogo:request',
+						schema: setLogoRequestSchema
+					}
+				}
+			],
+			result: {
+				mode: 'strict',
+				typeSymbol: 'dsh-icon-custom#iconCustom/setLogo:result',
+				schema: statusSchema
+			},
+			sourceLocation: { file: 'lib/index.js', line: 1, column: 1 }
+		},
 		{
 			id: 'dsh-icon-custom#iconCustom/resetIcon',
 			service: 'iconCustom',
@@ -122,7 +153,7 @@ export const TYPERT = {
 					{
 						kind: 'method',
 						name: 'getStatus',
-						signature: 'async getStatus(): Promise<{ active: boolean; pwa: boolean; rev: string | null; mime: string | null; ext: string | null; name: string | null; size: number | null; savedAt: number | null }>',
+						signature: 'async getStatus(): Promise<{ active: boolean; pwa: boolean; logo: boolean; rev: string | null; mime: string | null; ext: string | null; name: string | null; size: number | null; savedAt: number | null }>',
 						description: "Read the current favicon status.",
 						summary: "Read the current favicon status.",
 						jsDoc: "/** Read the current favicon status. */",
@@ -131,7 +162,7 @@ export const TYPERT = {
 					{
 						kind: 'method',
 						name: 'setIcon',
-						signature: 'async setIcon(request: { mime: string; name?: string; pwa?: boolean; data: string }): Promise<{ active: boolean; pwa: boolean; rev: string | null; mime: string | null; ext: string | null; name: string | null; size: number | null; savedAt: number | null }>',
+						signature: 'async setIcon(request: { mime: string; name?: string; pwa?: boolean; logo?: boolean; data: string }): Promise<{ active: boolean; pwa: boolean; logo: boolean; rev: string | null; mime: string | null; ext: string | null; name: string | null; size: number | null; savedAt: number | null }>',
 						description: "Store a new favicon uploaded as a data URL.",
 						summary: "Store a new favicon.",
 						jsDoc: "/** Store a new favicon. */",
@@ -140,16 +171,25 @@ export const TYPERT = {
 					{
 						kind: 'method',
 						name: 'setPwa',
-						signature: 'async setPwa(request: { enabled: boolean }): Promise<{ active: boolean; pwa: boolean; rev: string | null; mime: string | null; ext: string | null; name: string | null; size: number | null; savedAt: number | null }>',
+						signature: 'async setPwa(request: { enabled: boolean }): Promise<{ active: boolean; pwa: boolean; logo: boolean; rev: string | null; mime: string | null; ext: string | null; name: string | null; size: number | null; savedAt: number | null }>',
 						description: "Toggle whether the active custom icon also replaces the PWA install icon.",
 						summary: "Toggle the PWA-icon option.",
 						jsDoc: "/** Toggle the PWA-icon option. */",
 						tags: []
 					},
+					{
+						kind: 'method',
+						name: 'setLogo',
+						signature: 'async setLogo(request: { enabled: boolean }): Promise<{ active: boolean; pwa: boolean; logo: boolean; rev: string | null; mime: string | null; ext: string | null; name: string | null; size: number | null; savedAt: number | null }>',
+						description: "Toggle whether the active custom icon also replaces the in-app sidebar brand mark.",
+						summary: "Toggle the brand-mark option.",
+						jsDoc: "/** Toggle the brand-mark option. */",
+						tags: []
+					},
 					{
 						kind: 'method',
 						name: 'resetIcon',
-						signature: 'async resetIcon(): Promise<{ active: boolean; pwa: boolean; rev: string | null; mime: string | null; ext: string | null; name: string | null; size: number | null; savedAt: number | null }>',
+						signature: 'async resetIcon(): Promise<{ active: boolean; pwa: boolean; logo: boolean; rev: string | null; mime: string | null; ext: string | null; name: string | null; size: number | null; savedAt: number | null }>',
 						description: "Clear the active custom favicon marker so the platform icon is used; stored icon files are kept.",
 						summary: "Clear the custom favicon.",
 						jsDoc: "/** Clear the custom favicon. */",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowwo/dsh-icon-custom",
-  "version": "0.2.1",
+  "version": "0.5.0",
   "description": "自定义浏览器标签页图标:在设置页上传 SVG/PNG/ICO,立即生效并持久保存。· Custom browser tab favicon: upload SVG/PNG/ICO from the settings page, applies instantly and persists.",
   "type": "module",
   "main": "lib/index.js",