@cowwo/dsh-icon-custom 0.8.1 → 0.9.0

package/client/client.js

@@ -300,6 +300,32 @@ window.__ModuleLoader__.load({
 			}
 			return changed;
 		}
+		/**
+		 * The session the main view is showing.
+		 *
+		 * DSH 0.2.x carries NO `current` field in the session-list snapshot — it is
+		 * written with exactly `ids` / `byId` / `phase` / `projectionsBySession`. The
+		 * official signal is the row's `retainedBy.mainView` retention count, the same
+		 * one ui-layout's DocumentTitle, ui-cordis, ui-open-in-app and ui-session read.
+		 * Reading `list.current` here made `noteSeen()` a no-op, so the seen watermark
+		 * never advanced and an unread dot could never be cleared by opening the
+		 * session. Runtimes that do expose `current` are still honoured first.
+		 * @param list - the session list snapshot (may be absent).
+		 * @returns the id being viewed, or undefined.
+		 */
+		function currentSessionId(list) {
+			if (list === null || typeof list !== "object") return undefined;
+			if (typeof list.current === "string" && list.current !== "") return list.current;
+			const byId = list.byId;
+			if (byId === null || typeof byId !== "object") return undefined;
+			for (const session of Object.values(byId)) {
+				if (session === null || typeof session !== "object") continue;
+				const retainedBy = session.retainedBy;
+				const count = retainedBy !== null && typeof retainedBy === "object" ? retainedBy.mainView : undefined;
+				if (typeof count === "number" && count > 0) return session.id;
+			}
+			return undefined;
+		}
 		/**
 		 * How many sessions deserve the badge right now: endings whose reason is
 		 * enabled and that this browser has not seen since, plus sessions waiting
@@ -318,7 +344,7 @@ window.__ModuleLoader__.load({
 			/** { id, title, waiting, kind, at } — newest first, "in wait" ahead of "ended". */
 			const hits = [];
 			const ids = new Set();
-			const current = list !== null && typeof list === "object" ? list.current : undefined;
+			const current = currentSessionId(list);
 			const byId = list !== null && typeof list === "object" && list.byId !== null && typeof list.byId === "object" ? list.byId : {};
 			const titleOf = (id, entry) => (entry !== null && typeof entry === "object" && typeof entry.displayTitle === "string" && entry.displayTitle !== "" ? entry.displayTitle : id);
 			// Which workspace the session lives in. The sidebar's own workspace rows are
@@ -456,16 +482,66 @@ window.__ModuleLoader__.load({
 			if (iconState.active !== true) return "image/svg+xml";
 			return iconState.png === true ? "image/png" : (iconState.mime || "image/svg+xml");
 		}
-		function iconLink() {
-			let link = document.querySelector('link[rel="icon"]');
-			if (!link) {
-				link = document.createElement("link");
-				link.rel = "icon";
-				link.type = "image/svg+xml";
-				link.href = "/favicon.svg";
-				document.head.appendChild(link);
+		/**
+		 * Every `<link rel="icon">` the document carries, creating one if the page
+		 * has none.
+		 *
+		 * DSH 0.2.x ships TWO of them — a dark and a light one, each behind a
+		 * `media` query. Touching only `querySelector`'s first match left the light
+		 * one pointing at the shipped favicon, and the browser honours the LAST
+		 * suitable candidate, so a custom icon silently failed to apply in light
+		 * mode (the tab kept the platform whale and the feature looked dead).
+		 * Every write below therefore goes to all of them.
+		 */
+		function iconLinks() {
+			const links = Array.from(document.querySelectorAll('link[rel="icon"]'));
+			if (links.length > 0) return links;
+			const link = document.createElement("link");
+			link.rel = "icon";
+			link.type = "image/svg+xml";
+			link.href = "/favicon.svg";
+			document.head.appendChild(link);
+			return [link];
+		}
+		/** Authored href/type, remembered before the first write so a reset can put the shipped pair back. */
+		const ICON_ORIGINALS = new WeakMap();
+		function rememberIcon(link) {
+			if (ICON_ORIGINALS.has(link)) return;
+			ICON_ORIGINALS.set(link, { href: link.getAttribute("href"), type: link.getAttribute("type") });
+		}
+		/**
+		 * Point every icon link at one image, so no scheme-specific sibling is left stale.
+		 * Writes only on change: the head MutationObserver feeds `reconcileFavicon`,
+		 * so a redundant write would re-arm the watchdog on every tick.
+		 */
+		function setIconEverywhere(href, type) {
+			for (const link of iconLinks()) {
+				rememberIcon(link);
+				if (link.getAttribute("href") !== href) link.setAttribute("href", href);
+				if (typeof type === "string" && type !== "") {
+					if (link.getAttribute("type") !== type) link.setAttribute("type", type);
+				} else if (link.getAttribute("type") !== null) link.removeAttribute("type");
+			}
+		}
+		/**
+		 * Put the authored hrefs back; a link this plugin created falls back to the
+		 * platform default. Idempotent for the same watchdog reason as above, and a
+		 * no-op for any link the plugin never touched — which is what keeps the
+		 * documented "zero side effects while no custom icon is set" true.
+		 */
+		function restoreShippedIcons() {
+			for (const link of iconLinks()) {
+				const original = ICON_ORIGINALS.get(link);
+				if (original === undefined) continue; // never touched → leave the shipped tag alone
+				const href = original.href === null ? "/favicon.svg" : original.href;
+				if (link.getAttribute("href") !== href) link.setAttribute("href", href);
+				if (original.type === null) {
+					if (link.getAttribute("type") !== null) link.removeAttribute("type");
+				} else if (link.getAttribute("type") !== original.type) link.setAttribute("type", original.type);
 			}
-			return link;
+		}
+		function iconLink() {
+			return iconLinks()[0];
 		}
 		function roundRect(c2d, x, y, w, h) {
 			const r = Math.min(h / 2, w / 2);
@@ -509,15 +585,14 @@ window.__ModuleLoader__.load({
 			});
 		}
 		async function applyBadgeToFavicon(count, size) {
-			const link = iconLink();
 			const base = desiredIconHref();
 			if (count <= 0) {
-				// Nothing to show: make sure the page carries the plugin's own icon
-				// (this also repairs a stale/proxied link that still points elsewhere).
-				if (link.getAttribute("href") !== base) {
-					link.setAttribute("href", base);
-					link.setAttribute("type", desiredIconType());
-				}
+				// No badge to draw. With a custom icon active the page must carry it on
+				// EVERY link (a stale scheme-specific sibling outranks the one we set);
+				// with none, the shipped dark/light pair goes back untouched — the
+				// plugin promises zero side effects while it has no icon of its own.
+				if (iconState.active === true) setIconEverywhere(base, desiredIconType());
+				else restoreShippedIcons();
 				faviconBase = null;
 				return;
 			}
@@ -540,8 +615,7 @@ window.__ModuleLoader__.load({
 				const dh = ih * scale;
 				c2d.drawImage(img, (FAVICON_SIZE - dw) / 2, (FAVICON_SIZE - dh) / 2, dw, dh);
 				drawFaviconBadge(c2d, FAVICON_SIZE, count, badgeScale(size));
-				link.setAttribute("href", canvas.toDataURL("image/png"));
-				link.setAttribute("type", "image/png");
+				setIconEverywhere(canvas.toDataURL("image/png"), "image/png");
 			} catch (error) {
 				// Never silent: a failure here is invisible in the UI (the tab simply
 				// keeps its previous icon), which once cost a whole debugging session.
@@ -562,13 +636,16 @@ window.__ModuleLoader__.load({
 		 * composite was replaced and has to be rebuilt from the new base.
 		 */
 		function reconcileFavicon() {
-			const link = document.querySelector('link[rel="icon"]');
-			const href = link === null ? null : link.getAttribute("href");
-			const ours = typeof href === "string" && href.slice(0, 5) === "data:";
-			const wanted = desiredIconHref();
+			// Inspect EVERY icon link: 0.2.x ships two (dark/light), and a sibling
+			// left stale by anything outside the plugin must be repaired too — that
+			// stale sibling is exactly what used to outrank the icon we set.
+			const hrefs = iconLinks().map((candidate) => candidate.getAttribute("href"));
+			const ours = hrefs.length > 0 && hrefs.every((value) => typeof value === "string" && value.slice(0, 5) === "data:");
 			if (effectiveCount() <= 0) {
-				// No badge to draw, but the page must still carry the plugin's icon.
-				if (ours || href !== wanted) applyBadgeToFavicon(0);
+				// Carries the custom icon, or puts the shipped pair back. Both writers
+				// only touch a link that actually differs, so this stays a no-op once
+				// the page is correct and cannot re-arm the head observer.
+				applyBadgeToFavicon(0);
 				return;
 			}
 			if (ours || faviconComposing) return; // already showing, or a build is running
@@ -875,11 +952,28 @@ window.__ModuleLoader__.load({
 		 * count simply drops back to 0.
 		 */
 		function BadgeSource(props) {
-			// Both hooks are official root-scope standard props: the session list
-			// (which carries every session's `lastTurnEnd` projection value) and the
-			// pending-interaction registry the sidebar row marker already uses.
+			// The hooks below are official root-scope standard props: the session list
+			// (which carries every session's `lastTurnEnd` projection value), the
+			// session-status map the sidebar row marker already uses, and the workspace
+			// snapshot that names each row.
 			const list = typeof props.useSessions === "function" ? props.useSessions((state) => state) : undefined;
-			const pending = typeof props.useSessionPendingInteraction === "function" ? props.useSessionPendingInteraction((map) => map) : undefined;
+			// 0.2.x has no `useSessionPendingInteraction` — the string occurs nowhere in
+			// the runtime, so this half used to contribute nothing at all. The official
+			// replacement is the session-status map, whose rows carry `pendingInteraction`
+			// (alongside `completionUnread`, which the shipped sidebar reads too). Reshape
+			// it into the `id → { kind }` map `collectUnread` expects.
+			const status = typeof props.useSessionStatus === "function" ? props.useSessionStatus((map) => map) : undefined;
+			const pending = React.useMemo(() => {
+				const out = new Map();
+				if (status === null || status === undefined || typeof status.forEach !== "function") return out;
+				status.forEach((value, id) => {
+					const interaction = value !== null && typeof value === "object" ? value.pendingInteraction : undefined;
+					if (interaction === null || interaction === undefined) return;
+					const kind = typeof interaction === "object" && typeof interaction.kind === "string" ? interaction.kind : "";
+					out.set(id, { kind });
+				});
+				return out;
+			}, [status]);
 			const workspaces = typeof props.useWorkspaces === "function" ? props.useWorkspaces((state) => state) : undefined;
 			const [config, setConfig] = React.useState(unreadConfig);
 			React.useEffect(() => subscribeUnreadConfig(setConfig), []);
@@ -891,7 +985,7 @@ window.__ModuleLoader__.load({
 				saveSeenState();
 			}, [list]);
 			// Looking at a session marks it seen; the count also excludes it outright.
-			const currentId = list !== null && typeof list === "object" ? list.current : undefined;
+			const currentId = currentSessionId(list);
 			React.useEffect(() => {
 				if (noteSeen(currentId)) saveSeenState();
 			}, [currentId]);
@@ -1126,30 +1220,18 @@ window.__ModuleLoader__.load({
 			// visible in this very tab; other tabs pick it up on their next render.
 			const applyLive = React.useCallback((s) => {
 				if (!s || s.active !== true) return;
-				const link = document.querySelector('link[rel="icon"]');
 				const href = s.png === true ? `/icon-custom-192.png?v=${s.rev}` : `/icon-custom.svg?v=${s.rev}`;
 				const type = s.png === true ? "image/png" : (s.mime || "image/svg+xml");
-				if (link) {
-					link.setAttribute("href", href);
-					link.setAttribute("type", type);
-				} else {
-					const el = document.createElement("link");
-					el.rel = "icon";
-					el.type = type;
-					el.href = href;
-					document.head.appendChild(el);
-				}
+				setIconEverywhere(href, type);
 				// The base icon just changed: rebuild the composite from it.
 				refreshFaviconBase();
 			}, []);
 
-			// When cleared, point the icon back at the platform default.
+			// When cleared, put the shipped dark/light pair back. Restoring the
+			// authored hrefs (rather than forcing one href on every link) keeps the
+			// platform's scheme-aware icons working after a reset.
 			const applyDefault = React.useCallback(() => {
-				const link = document.querySelector('link[rel="icon"]');
-				if (link) {
-					link.setAttribute("href", "/favicon.svg");
-					link.setAttribute("type", "image/svg+xml");
-				}
+				restoreShippedIcons();
 				refreshFaviconBase();
 			}, []);
 
@@ -1447,7 +1529,10 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 
-		const inject = ["slots", "locale", "connection", "sessions"];
+		// `sessions` is gone from this list: its only use was the removed
+		// `ctx.sessions.open(id)`. Navigation now goes through an optional
+		// `ctx.get("uiWorkspace")` lookup instead of a hard dependency.
+		const inject = ["slots", "locale", "connection"];
 		function apply(ctx) {
 			ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-icon-custom: dictionaries");
 			const t = ctx.locale.bind(NS);
@@ -1495,8 +1580,15 @@ window.__ModuleLoader__.load({
 			// Additive seats for "where exactly?" — a foot entry beside the shipped
 			// Settings/Cordis buttons, and the frame-wide overlay for its list. A fresh
 			// id is added beside the others; nothing shipped is shadowed.
+			//
+			// 0.2.x has no `ctx.sessions.open(id)` (the ClientSessions service exposes
+			// retain/using/retainInfo/refreshProjections/search/fork/scope/binding — no
+			// navigation). Official code jumps to a session with
+			// `ctx.uiWorkspace.openSession(id)` (ui-chat does exactly this), so the entry
+			// is looked up optionally: navigation is best effort and must never make the
+			// favicon half depend on the workspace UI being mounted.
 			const openSession = (id) => {
-				try { ctx.sessions.open(id); } catch { /* navigation is best effort */ }
+				try { ctx.get("uiWorkspace")?.openSession(id); } catch { /* navigation is best effort */ }
 			};
 			ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register(
 				{ name: "sidebar.footer.action", id: "icon-custom-unread", order: 20, label: () => t("unreadPanelShort") },

package/lib/index.js

@@ -302,6 +302,20 @@ async function deriveSizes(source) {
 	return out
 }
 
+/**
+ * Insert markup immediately after the document's opening `<head …>` tag.
+ *
+ * Tolerates attributes on `<head>` (a bare `/<head>/` test silently missed those,
+ * which would drop the icon tag entirely). Returns the input unchanged when the
+ * document has no head to anchor to.
+ * @param html - full document source.
+ * @param markup - tag(s) to inject.
+ * @returns the rewritten document.
+ */
+function insertAfterHead(html, markup) {
+	return html.replace(/<head[^>]*>/i, (open) => `${open}${markup}`)
+}
+
 /**
  * 图标替换服务:保存/读取用户上传的 favicon,并通过 webServer 提供
  * `/icon-custom.svg` 路由与 index 头部改写。通过 typert
@@ -718,12 +732,16 @@ export class FaviconCustomService extends TypertRemoteService {
 			: `/icon-custom.svg?v=${c.rev}`
 		const favType = c.pngBaseline !== null ? 'image/png' : c.mime
 		const tag = `<link rel="icon" type="${favType}" href="${favHref}" />`
-		const re = /<link\s+rel="icon"[^>]*\/?>/i
-		out = re.test(out) ? out.replace(re, tag) : out.replace(/<head>/i, `<head>${tag}`)
+		// DSH 0.2.x ships TWO `<link rel="icon">` tags — a dark and a light one, each
+		// behind a `media` query. Replacing only the first left the light one still
+		// serving the platform favicon, and the browser honours the LAST suitable
+		// candidate, so a custom icon silently failed to apply in light mode (the tab
+		// kept the whale) while looking fine in dark mode. Drop every icon link and
+		// insert one scheme-agnostic tag, which wins under either `prefers-color-scheme`.
+		out = insertAfterHead(out.replace(/<link\s+rel="icon"[^>]*\/?>/gi, ''), tag)
 		if (c.pwa === true && c.pngBaseline !== null) {
 			const tag2 = `<link rel="apple-touch-icon" href="/icon-custom-apple-180.png?v=${c.rev}" />`
-			const re2 = /<link\s+rel="apple-touch-icon"[^>]*\/?>/i
-			out = re2.test(out) ? out.replace(re2, tag2) : out.replace(/<head>/i, `<head>${tag2}`)
+			out = insertAfterHead(out.replace(/<link\s+rel="apple-touch-icon"[^>]*\/?>/gi, ''), tag2)
 		}
 		return out
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowwo/dsh-icon-custom",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "自定义浏览器标签页图标:在设置页上传 SVG/PNG/ICO,立即生效并持久保存,自动适配安卓/iOS/平板 PWA 图标。· Custom browser tab favicon: upload SVG/PNG/ICO from the settings page, applies instantly and persists, auto-sizes PWA icons for Android/iOS/tablets.",
   "type": "module",
   "main": "lib/index.js",