@cowwo/dsh-icon-custom 0.8.2 → 0.9.1

package/client/client.js

@@ -426,6 +426,9 @@ window.__ModuleLoader__.load({
 		function notifyBadge() {
 			const snapshot = badgeSnapshot();
 			badgeListeners.forEach((fn) => { try { fn(snapshot); } catch {} });
+			// The header badge is a DOM node, not a listener, so it is reconciled
+			// here as well as from the mutation watchdog. Idempotent either way.
+			paintHeaderBadge();
 		}
 		/** Manual test input. */
 		function emitBadge(value) {
@@ -482,16 +485,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");
 			}
-			return link;
+		}
+		/**
+		 * 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);
+			}
+		}
+		function iconLink() {
+			return iconLinks()[0];
 		}
 		function roundRect(c2d, x, y, w, h) {
 			const r = Math.min(h / 2, w / 2);
@@ -535,15 +588,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;
 			}
@@ -566,8 +618,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.
@@ -588,13 +639,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
@@ -961,48 +1015,218 @@ window.__ModuleLoader__.load({
 		}
 
 		/**
-		 * The sidebar-foot entry: a bell carrying the unread count, beside the
-		 * shipped Settings and Cordis buttons. Both that seat and the overlay list
-		 * are additive (`replaceRisk: none`) — a fresh id is added beside the others,
-		 * nothing shipped is shadowed.
+		 * The unread badge, injected into the sidebar's section header.
+		 *
+		 * There is no slot to register into: `sidebar.workspaces` is a SINGLE slot
+		 * owned by ui-workspace that covers the whole browsing region *including* its
+		 * header, and shadowing it would mean reimplementing the shipped browser. So
+		 * the badge is injected into the DOM — the same technique, the same contract,
+		 * and the same failure posture as the workspace-row dots: decorative, never
+		 * throws, and after repeated failures it gives up on its own with one warning.
+		 *
+		 * Placement is measured, not inherited, because the shipped CSS forbids the
+		 * obvious approach: `.sectionHeader` is 36px tall with `overflow:hidden`, the
+		 * label inside it is a 20px line box that is ALSO `overflow:hidden`, so a badge
+		 * parented to the label and raised clear of the glyph is clipped to a sliver by
+		 * the label's own overflow. The badge is therefore a SIBLING of the label,
+		 * absolutely positioned over the label's top-right corner from its measured
+		 * rect, and clamped so it never leaves the header's 36px box.
+		 *
+		 * The count is shown for EVERY value including zero: a grey 0 keeps the
+		 * position from jumping, and doubles as the only way back to the panel once
+		 * the old sidebar-foot button is gone.
+		 */
+		const HEAD_BADGE_ATTR = "data-icon-custom-unreadbadge";
+		const HEAD_BADGE_STYLE_ID = "dsh-icon-custom-unreadbadge-css";
+		const HEAD_BADGE_WIRED = "data-icon-custom-unreadbadge-wired";
+		const HEAD_BADGE_MAX_FAILURES = 40;
+		/** How many ancestors to walk up looking for the header row. */
+		const HEAD_BADGE_MAX_STEPS = 6;
+		/** Raise above the label's top edge; the header only leaves 8px of headroom. */
+		const HEAD_BADGE_RAISE = 7;
+		/** Overhang past the label's right edge. */
+		const HEAD_BADGE_OVERHANG = 9;
+		let headerBadgeHost = null;
+		let headerBadgeHostPosition = "";
+		let headerBadgeObserved = null;
+		let headerBadgeObserver = null;
+		let headerBadgeFailures = 0;
+		let headerBadgeGivenUp = false;
+		/** Locale binder, installed by `apply()` so the injected node can label itself. */
+		let badgeT = null;
+
+		/**
+		 * Rules for the injected badge. A stylesheet rather than inline styles because
+		 * hover and the theme-following ring cannot be expressed inline. Colours come
+		 * from the official tokens wherever one exists:
+		 *   * the red is the one this plugin has always drawn;
+		 *   * the "nothing pending" grey is the official idle-state colour, so it
+		 *     follows light/dark without naming either;
+		 *   * the ring is the sidebar's own fill — that is what makes a badge sitting
+		 *     on top of a glyph read as a badge instead of a smudge.
+		 * The hit area grows sideways and downward only: there are just 8px above the
+		 * label, so anything reaching further up is clipped by the header's overflow.
+		 */
+		const HEAD_BADGE_CSS = [
+			`[${HEAD_BADGE_ATTR}]{position:absolute;display:none;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3.5px;box-sizing:border-box;border:0;border-radius:999px;background:#e5484d;color:#fff;font:inherit;font-size:9.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;cursor:pointer;z-index:3;box-shadow:0 0 0 1.5px var(--dsw-specific-sidebar-fill,#fff)}`,
+			`[${HEAD_BADGE_ATTR}]::after{content:"";position:absolute;inset:0 -5px -5px -5px;border-radius:999px}`,
+			`[${HEAD_BADGE_ATTR}]:hover{filter:brightness(1.12)}`,
+			`[${HEAD_BADGE_ATTR}][data-zero="1"]{background:var(--dsw-alias-state-idle-primary,#b6bcc4)}`
+		].join("");
+
+		/** Install the badge rules once per page. */
+		function ensureHeaderBadgeStyle() {
+			try {
+				if (document.getElementById(HEAD_BADGE_STYLE_ID) !== null) return;
+				const style = document.createElement("style");
+				style.id = HEAD_BADGE_STYLE_ID;
+				style.textContent = HEAD_BADGE_CSS;
+				document.head.appendChild(style);
+			} catch { /* styling is cosmetic; never let it reach a render tree */ }
+		}
+
+		/**
+		 * The section-header row and the label inside it.
+		 *
+		 * The title TEXT is deliberately not matched: it flips between 工作区 and 会话
+		 * with the group-by mode and is localized, so any string table would be both
+		 * incomplete and wrong half the time. Structure is stable instead —
+		 * `sidebar.workspaces` is a slot root (the official renderer stamps
+		 * `data-slot` on those), the header row's first button is the search control,
+		 * and the label is the row's first text-bearing child that owns no button.
+		 * @param container - the browsing region root.
+		 * @returns `{ row, label }`, or null when this build's DOM is not recognised.
 		 */
-		function UnreadFooterButton(props) {
-			const [snapshot, setSnapshot] = React.useState(badgeSnapshot);
-			const [open, setOpen] = React.useState(unreadPanelOpen);
-			const ref = React.useRef(null);
-			React.useEffect(() => subscribeBadge(setSnapshot), []);
-			React.useEffect(() => subscribeUnreadPanel(() => setOpen(unreadPanelOpen)), []);
-			const t = props.t;
-			const count = snapshot.count;
-			const wide = props.wide !== false;
-			const label = count > 0 ? t("unreadPanelCount").replace("{n}", String(count)) : t("unreadPanelNone");
-			const onClick = () => {
-				const node = ref.current;
-				const rect = node !== null && typeof node.getBoundingClientRect === "function" ? node.getBoundingClientRect() : null;
-				toggleUnreadPanel(rect === null ? null : { left: rect.left, top: rect.top });
-			};
-			return React.createElement("button", {
-				ref, type: "button", onClick, title: label, "aria-label": label, "aria-expanded": open,
-				style: {
-					position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "6px",
-					height: "32px", width: wide ? "auto" : "32px", padding: wide ? "0 10px" : "0",
-					border: "1px solid var(--dsw-alias-border-l2)", borderRadius: "8px", background: "transparent",
-					color: "var(--dsw-alias-label-primary)", cursor: "pointer", font: "inherit", fontSize: "12px",
-					opacity: count > 0 ? 1 : 0.55
+		function sectionHeaderParts(container) {
+			// Our own badge is a button too; never let it stand in for the search
+			// control, or the row anchor would resolve to the wrong element.
+			let firstButton = null;
+			for (const candidate of container.querySelectorAll("button")) {
+				if (candidate.getAttribute(HEAD_BADGE_ATTR) !== null) continue;
+				firstButton = candidate;
+				break;
+			}
+			if (firstButton === null) return null;
+			let row = firstButton.parentElement;
+			for (let step = 0; step < HEAD_BADGE_MAX_STEPS && row !== null && row !== container; step++) {
+				for (const child of row.children) {
+					if (child === firstButton || child.contains(firstButton)) continue;
+					if (child.tagName === "BUTTON") continue;
+					if (child.querySelector("button") !== null) continue;
+					if ((child.textContent ?? "").trim() !== "") return { row, label: child };
 				}
-			},
-				React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: { flex: "none" } },
-					React.createElement("path", { d: "M8 2.2a3.6 3.6 0 0 0-3.6 3.6v2.4L3.2 11h9.6l-1.2-2.8V5.8A3.6 3.6 0 0 0 8 2.2Z", stroke: "currentColor", strokeWidth: 1.3, strokeLinejoin: "round" }),
-					React.createElement("path", { d: "M6.4 12.8a1.6 1.6 0 0 0 3.2 0", stroke: "currentColor", strokeWidth: 1.3, strokeLinecap: "round" })
-				),
-				wide ? React.createElement("span", null, t("unreadPanelShort")) : null,
-				count > 0 ? React.createElement("span", {
-					"aria-hidden": "true",
-					style: { position: "absolute", top: "-6px", right: "-6px", minWidth: "16px", height: "16px", padding: "0 4px", boxSizing: "border-box", borderRadius: "999px", background: "#e5484d", color: "#fff", fontSize: "10px", fontWeight: 700, lineHeight: 1, display: "flex", alignItems: "center", justifyContent: "center", fontVariantNumeric: "tabular-nums", pointerEvents: "none" }
-				}, badgeLabel(count)) : null
-			);
+				row = row.parentElement;
+			}
+			return null;
+		}
+
+		/** Warn once, then give up for this page — the row dots' exact posture. */
+		function noteHeaderBadgeFailure(why) {
+			headerBadgeFailures++;
+			if (headerBadgeFailures === 1) {
+				try { console.warn("dsh-icon-custom: 工作区标题红点定位失败,已降级(不影响其他功能):", why); } catch {}
+				return;
+			}
+			if (headerBadgeFailures < HEAD_BADGE_MAX_FAILURES || headerBadgeGivenUp) return;
+			headerBadgeGivenUp = true;
+			try { console.warn("dsh-icon-custom: 工作区标题红点连续失败,本次会话内已自动关闭。"); } catch {}
 		}
 
+		/**
+		 * Reconcile the header badge with the current count and the label's position.
+		 *
+		 * Driven by the same mutation watchdog as the row dots, so it must be
+		 * idempotent: it writes only what actually differs, or the observer that
+		 * called it would re-arm on its own output. Geometry is read from the live
+		 * rects, so the badge follows a sidebar resize, a locale change and the
+		 * label's own collapse animation without any hardcoded offsets.
+		 */
+		function paintHeaderBadge() {
+			if (headerBadgeGivenUp) return;
+			const container = workspaceDotContainer();
+			if (container === null) return; // start-up race, not a failure
+			const parts = sectionHeaderParts(container);
+			if (parts === null) { noteHeaderBadgeFailure("找不到分区标题"); return; }
+			const row = parts.row;
+			const label = parts.label;
+			ensureHeaderBadgeStyle();
+			if (headerBadgeHost !== row) {
+				if (headerBadgeHost !== null) { try { headerBadgeHost.style.position = headerBadgeHostPosition; } catch {} }
+				headerBadgeHost = row;
+				headerBadgeHostPosition = row.style.position;
+				try { if (window.getComputedStyle(row).position === "static") row.style.position = "relative"; } catch {}
+			}
+			let node = row.querySelector(`[${HEAD_BADGE_ATTR}]`);
+			if (node === null) {
+				node = document.createElement("button");
+				node.type = "button";
+				node.setAttribute(HEAD_BADGE_ATTR, "1");
+				// Appended AFTER the shipped controls, so it can never be mistaken for
+				// the header's first button.
+				row.appendChild(node);
+			}
+			if (node.getAttribute(HEAD_BADGE_WIRED) !== "1") {
+				node.setAttribute(HEAD_BADGE_WIRED, "1");
+				node.addEventListener("click", (event) => {
+					// The row belongs to the sidebar; keep the click to ourselves.
+					event.preventDefault();
+					event.stopPropagation();
+					const rect = node.getBoundingClientRect();
+					toggleUnreadPanel({ left: rect.left, top: rect.top });
+				});
+			}
+			const count = effectiveCount();
+			const text = badgeLabel(count);
+			const zero = count > 0 ? "0" : "1";
+			if (node.getAttribute("data-zero") !== zero) node.setAttribute("data-zero", zero);
+			if (typeof badgeT === "function") {
+				const spoken = count > 0 ? badgeT("unreadPanelCount").replace("{n}", String(count)) : badgeT("unreadPanelNone");
+				if (node.getAttribute("aria-label") !== spoken) {
+					node.setAttribute("aria-label", spoken);
+					node.setAttribute("title", spoken);
+				}
+			}
+			if (node.textContent !== text) node.textContent = text;
+			// The label collapses to nothing while the search box is open; the badge
+			// has no meaning then, and the label's own visibility cannot hide it
+			// because it is a sibling.
+			const rowRect = row.getBoundingClientRect();
+			const labelRect = label.getBoundingClientRect();
+			if (labelRect.width < 8) {
+				if (node.style.display !== "none") node.style.display = "none";
+			} else {
+				const width = typeof node.offsetWidth === "number" && node.offsetWidth > 0 ? node.offsetWidth : 15;
+				const left = Math.round(labelRect.right - rowRect.left - width + HEAD_BADGE_OVERHANG);
+				// Clamped: the header clips its overflow, and only ~8px sit above the label.
+				const top = Math.max(0, Math.round(labelRect.top - rowRect.top - HEAD_BADGE_RAISE));
+				if (node.style.left !== `${left}px`) node.style.left = `${left}px`;
+				if (node.style.top !== `${top}px`) node.style.top = `${top}px`;
+				if (node.style.display !== "flex") node.style.display = "flex";
+			}
+			// The label animates its own width; follow it instead of waiting for the
+			// next mutation, which a CSS transition never produces.
+			if (typeof window.ResizeObserver === "function") {
+				if (headerBadgeObserver === null) headerBadgeObserver = new window.ResizeObserver(() => { paintHeaderBadge(); });
+				if (headerBadgeObserved !== label) {
+					try { headerBadgeObserver.disconnect(); headerBadgeObserver.observe(label); headerBadgeObserved = label; } catch {}
+				}
+			}
+		}
+
+		/** Take the badge back out and restore the row's own positioning. */
+		function clearHeaderBadge() {
+			try { document.querySelectorAll(`[${HEAD_BADGE_ATTR}]`).forEach((node) => node.remove()); } catch {}
+			if (headerBadgeObserver !== null) {
+				try { headerBadgeObserver.disconnect(); } catch {}
+				headerBadgeObserver = null;
+				headerBadgeObserved = null;
+			}
+			if (headerBadgeHost !== null) {
+				try { headerBadgeHost.style.position = headerBadgeHostPosition; } catch {}
+			}
+			headerBadgeHost = null;
+			headerBadgeHostPosition = "";
+		}
 		/**
 		 * The list behind that number, in the frame-wide overlay layer so it escapes
 		 * the sidebar's clipping and scroll container. Clicking a row opens that
@@ -1169,30 +1393,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();
 			}, []);
 
@@ -1538,9 +1750,11 @@ window.__ModuleLoader__.load({
 				inject: () => ({ t })
 			}, (props) => React.createElement(FaviconSection, { ...props, t, rpc })));
 
-			// 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.
+			// The badge itself is NOT a slot occupant: it is injected into the
+			// sidebar's section header by `paintHeaderBadge()` (see above), because
+			// `sidebar.workspaces` is a single slot covering the whole region. Only
+			// the list it opens still rides a slot — the frame-wide overlay, which
+			// escapes the sidebar's clipping.
 			//
 			// 0.2.x has no `ctx.sessions.open(id)` (the ClientSessions service exposes
 			// retain/using/retainInfo/refreshProjections/search/fork/scope/binding — no
@@ -1551,10 +1765,9 @@ window.__ModuleLoader__.load({
 			const openSession = (id) => {
 				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") },
-				(props) => React.createElement(UnreadFooterButton, { ...props, t, onOpen: openSession })
-			));
+			// The injected node labels itself for screen readers, so it needs the
+			// locale binder that only exists inside `apply()`.
+			badgeT = t;
 			ctx.slots.inject("shell.overlay", () => ctx.slots.register(
 				{ name: "shell.overlay", id: "icon-custom-unread-popup", order: 30 },
 				() => React.createElement(UnreadPopup, { t, onOpen: openSession })
@@ -1617,7 +1830,13 @@ window.__ModuleLoader__.load({
 				const schedule = () => {
 					if (queued) return;
 					queued = true;
-					window.setTimeout(() => { queued = false; paintWorkspaceDots(); }, 200);
+					window.setTimeout(() => {
+						queued = false;
+						paintWorkspaceDots();
+						// Same region, same watchdog: the section-header badge is
+						// re-injected whenever the shipped UI re-renders over it.
+						paintHeaderBadge();
+					}, 200);
 				};
 				const attach = () => {
 					const container = workspaceDotContainer();
@@ -1644,6 +1863,7 @@ window.__ModuleLoader__.load({
 					offDots();
 					offConfig();
 					clearWorkspaceDots();
+					clearHeaderBadge();
 				};
 			}, "dsh-icon-custom: workspace dots");
 			// The platform favicon.svg repaints itself for dark mode through

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.2",
+  "version": "0.9.1",
   "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",