dsh-tiddlywiki 0.1.1 → 0.2.0

package/lib/client.js

@@ -54,6 +54,21 @@ const CSS_TEXT = `
 .dsh-tw-entry[data-active="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); font-weight: 500; }
 .dsh-tw-entry svg { flex: none; }
 .dsh-tw-entry .dsh-tw-entry-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Collapsed rail: the shell narrows the sidebar to a 56px icon rail (dual
+   signals — the frame's data-sidebar-collapsed + the sidebar root's hashed
+   *_collapsed class, same doctrine as dsh-taskboard 0.4.3). Mirror the
+   native 36×36 icon-button geometry: center the icon, hide the label, and
+   scale it up to match the shell's 18px rail icons. */
+[data-sidebar-collapsed] [data-dsh-tw-entry],
+[class*="_collapsed"] [data-dsh-tw-entry] {
+  width: 36px; height: 36px; min-width: 36px;
+  margin: 0 0 12px; padding: 0;
+  justify-content: center; gap: 0; text-align: center;
+}
+[data-sidebar-collapsed] [data-dsh-tw-entry] .dsh-tw-entry-label,
+[class*="_collapsed"] [data-dsh-tw-entry] .dsh-tw-entry-label { display: none; }
+[data-sidebar-collapsed] [data-dsh-tw-entry] svg,
+[class*="_collapsed"] [data-dsh-tw-entry] svg { width: 18px; height: 18px; }
 
 /* ── center-column panel (fixed overlay, JS-pinned to the column rect) ── */
 .dsh-tw-view {
@@ -80,6 +95,13 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
 }
 .dsh-tw-panel-bar button:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
 .dsh-tw-panel-title { font-weight: 600; margin-right: auto; }
+/* dsh-better-sidebar coexistence: the floating toggle cluster (two 28px
+   buttons at the viewport's top-right) lives above the panel (z-index is
+   handled in JS — the panel stays below the host layer), so reserve the
+   cluster's width at the panel bar's right end — mirroring how
+   dsh-better-sidebar pads the DSH session header — and the panel's own
+   状态/重载 buttons never sit underneath it. */
+.dsh-tw-view[data-sidebar-host] .dsh-tw-panel-bar { padding-right: 80px; }
 .dsh-tw-status-chip { font-variant-numeric: tabular-nums; }
 .dsh-tw-status-chip[data-state="running"] { color: var(--dsw-alias-state-success-primary, #3eaa5f); }
 .dsh-tw-status-chip[data-state="starting"] { color: var(--dsw-alias-state-warning-primary, #d9822b); }
@@ -162,6 +184,34 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
 }
 .dsh-tw-note-edit:hover:not(:disabled) { filter: brightness(.96); }
 .dsh-tw-note-edit:disabled { opacity: .55; cursor: default; }
+/* ── Multi-tag chip editor (quick-note tags) ─────────────────────────────── */
+.dsh-tw-note-tags { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.dsh-tw-note-chips { display: flex; flex-wrap: wrap; gap: 4px; }
+.dsh-tw-note-tagchip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 6px 2px 8px; border-radius: 999px; font-size: 11px; line-height: 1.4;
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 10%, var(--dsw-alias-bg-layer-1, #fff));
+  border: 1px solid color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 30%, transparent);
+  color: var(--dsw-alias-label-primary, #222);
+}
+.dsh-tw-note-tagchip-x {
+  cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; border-radius: 50%;
+  color: var(--dsw-alias-label-secondary, #888);
+}
+.dsh-tw-note-tagchip-x:hover { color: var(--dsw-alias-state-error-primary, #d13b3b); }
+.dsh-tw-note-taginput { width: 100%; box-sizing: border-box; }
+.dsh-tw-note-tagsuggest {
+  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 60;
+  max-height: 168px; overflow-y: auto; border-radius: 8px; padding: 4px;
+  background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
+  box-shadow: var(--dsw-shadow-lv2, 0 4px 16px rgba(0,0,0,.16));
+  font-size: 12px;
+}
+.dsh-tw-note-tagsuggest-item {
+  padding: 6px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.dsh-tw-note-tagsuggest-item:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
 /* ── Native-editor popup iframe (quick-note "在 TW 中编辑") ──────────────── */
 .dsh-tw-editor-popup {
   position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
@@ -435,10 +485,35 @@ const ACTIVATE_EVENT = "dsh-panel-activate";
 const PANEL_NAME = "dsh-tiddlywiki";
 /** Overlay z-index: above the shell content, below the note widget (950). */
 const PANEL_Z_INDEX = 40;
+/**
+* dsh-better-sidebar's unified fixed host layer (its persistent
+* expand/collapse toggle cluster lives inside it, at a global z-index of 25
+* — its internal 45 is trapped by the host's stacking context). When this
+* host is present the panel must stay BELOW it, so the sidebar toggle
+* buttons stay visible and clickable above the full-screen TW panel.
+*/
+const PANEL_HOST_SELECTOR = "[data-dsh-panel-host]";
+/** The app's own shell overlay layer (dsh-client-ui-layout pins it at 20). */
+const APP_OVERLAY_Z_INDEX = 20;
 /** Safety re-measure cadence for shell layout changes CSS can't see. */
 const SYNC_INTERVAL_MS = 2e3;
 const STATUS_ENDPOINT$1 = "/dsh-tiddlywiki/status";
 const RESTART_ENDPOINT$1 = "/dsh-tiddlywiki/restart";
+/**
+* The panel's z-index: below any dsh-better-sidebar host layer so its
+* persistent toggle cluster (top-right corner) stays visible and clickable
+* above the full-screen TW panel, otherwise the default 40. The host's live
+* computed z-index is read instead of hardcoding 25, so the rule tracks
+* plugin updates; the panel is still clamped above the app's own shell
+* overlay layer (dsh-client-ui-layout pins it at 20).
+*/
+function resolvePanelZIndex() {
+	const host = document.querySelector(PANEL_HOST_SELECTOR);
+	if (host === null) return PANEL_Z_INDEX;
+	const parsed = parseInt(getComputedStyle(host).zIndex, 10);
+	if (!Number.isFinite(parsed)) return PANEL_Z_INDEX;
+	return Math.max(APP_OVERLAY_Z_INDEX, Math.min(PANEL_Z_INDEX, parsed - 1));
+}
 function conversationColumn() {
 	for (const selector of COLUMN_SELECTORS) {
 		const el = document.querySelector(selector);
@@ -532,13 +607,25 @@ function mountPanel(state) {
 		if (container.style.width !== width) container.style.width = width;
 		if (container.style.height !== height) container.style.height = height;
 	};
+	/**
+	* Coexist with dsh-better-sidebar: keep the panel's z-index below the
+	* host layer (so its toggle cluster stays clickable above the panel) and
+	* flag the host's presence so CSS can reserve the cluster's width at the
+	* panel bar's right end. Re-run whenever the host mounts/unmounts.
+	*/
+	const applyChrome = () => {
+		if (container === void 0) return;
+		container.style.zIndex = String(resolvePanelZIndex());
+		if (document.querySelector(PANEL_HOST_SELECTOR) !== null) container.dataset.sidebarHost = "1";
+		else delete container.dataset.sidebarHost;
+	};
 	const ensure = () => {
 		if (container !== void 0) return;
 		columnEl = conversationColumn();
 		if (columnEl === void 0) return;
 		container = build();
 		container.style.position = "fixed";
-		container.style.zIndex = String(PANEL_Z_INDEX);
+		applyChrome();
 		document.body.append(container);
 		syncRect();
 	};
@@ -640,6 +727,7 @@ function mountPanel(state) {
 	};
 	const waitObserver = new MutationObserver(() => {
 		ensure();
+		applyChrome();
 	});
 	waitObserver.observe(document.body, {
 		childList: true,
@@ -808,14 +896,23 @@ function ensurePopup() {
 * collapsible, independent of any shell DOM. Lets the human jot drafts /
 * scratch notes while waiting for the AI or drafting the next prompt.
 *
-* Save posts to /dsh-tiddlywiki/note → an independent tiddler (title & tag
+* Save posts to /dsh-tiddlywiki/note → an independent tiddler (title & tags
 * editable; defaults: timestamp title + config tag, usually "inbox").
 *
+* ui.showQuickNote config: the widget is mounted async and stays hidden (and
+* never appended) when the option is off, so the toggle button can be disabled
+* from the settings page without touching the shell.
+*
+* Tag editor: multi-select chips + autocomplete from the wiki's existing tags
+* (GET /dsh-tiddlywiki/tags). Enter/`,` commits the typed value; Backspace on
+* an empty field removes the last chip; the dropdown filters on typing.
+*
 * @module dsh-tiddlywiki/client/note-widget
 */
 const NOTE_ENDPOINT = "/dsh-tiddlywiki/note";
 const EDIT_ENDPOINT = "/dsh-tiddlywiki/edit";
 const STATUS_ENDPOINT = "/dsh-tiddlywiki/status";
+const TAGS_ENDPOINT = "/dsh-tiddlywiki/tags";
 function pad(n) {
 	return n < 10 ? `0${n}` : String(n);
 }
@@ -823,16 +920,137 @@ function pad(n) {
 function timestampTitle(date = /* @__PURE__ */ new Date()) {
 	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
 }
-async function fetchDefaultTag() {
+async function fetchUiOptions() {
+	const fallback = {
+		showQuickNote: true,
+		defaultTag: "inbox"
+	};
 	try {
 		const res = await fetch(STATUS_ENDPOINT, { signal: AbortSignal.timeout(5e3) });
-		if (!res.ok) return "inbox";
-		return (await res.json()).note?.tag ?? "inbox";
+		if (!res.ok) return fallback;
+		const payload = await res.json();
+		return {
+			showQuickNote: payload.ui?.showQuickNote !== false,
+			defaultTag: payload.note?.tag ?? "inbox"
+		};
 	} catch {
-		return "inbox";
+		return fallback;
 	}
 }
-function mountNoteWidget() {
+/** Multi-tag chip editor with autocomplete from the wiki's existing tags. */
+function buildTagEditor() {
+	const wrap = document.createElement("div");
+	wrap.className = "dsh-tw-note-tags";
+	const chipWrap = document.createElement("div");
+	chipWrap.className = "dsh-tw-note-chips";
+	const input = document.createElement("input");
+	input.className = "dsh-tw-note-taginput";
+	input.placeholder = "tag（可多选，自动补全）";
+	const suggest = document.createElement("div");
+	suggest.className = "dsh-tw-note-tagsuggest";
+	suggest.hidden = true;
+	wrap.append(chipWrap, input, suggest);
+	const chips = [];
+	const hideSuggest = () => {
+		suggest.hidden = true;
+	};
+	const renderChips = () => {
+		chipWrap.replaceChildren();
+		for (const tag of chips) {
+			const chip = document.createElement("span");
+			chip.className = "dsh-tw-note-tagchip";
+			chip.textContent = tag;
+			const x = document.createElement("span");
+			x.className = "dsh-tw-note-tagchip-x";
+			x.textContent = "×";
+			x.title = `移除 tag「${tag}」`;
+			x.addEventListener("click", (event) => {
+				event.stopPropagation();
+				const i = chips.indexOf(tag);
+				if (i >= 0) {
+					chips.splice(i, 1);
+					renderChips();
+				}
+			});
+			chip.append(x);
+			chipWrap.append(chip);
+		}
+	};
+	const addTag = (tag) => {
+		const t = tag.trim();
+		if (t.length === 0 || chips.includes(t)) return;
+		chips.push(t);
+		input.value = "";
+		renderChips();
+		hideSuggest();
+		input.focus();
+	};
+	const commitInput = () => {
+		for (const raw of input.value.split(/\s+/)) addTag(raw);
+	};
+	let knownTags = [];
+	let tagsPromise;
+	const ensureTags = () => {
+		tagsPromise ??= fetch(TAGS_ENDPOINT, { signal: AbortSignal.timeout(5e3) }).then((r) => r.ok ? r.json() : Promise.resolve({})).then((p) => [...p.tags ?? []].sort((a, b) => a.localeCompare(b, "zh"))).catch(() => []);
+		tagsPromise.then((list) => {
+			knownTags = list;
+		});
+		return tagsPromise;
+	};
+	const showSuggest = () => {
+		const q = input.value.trim().toLowerCase();
+		const matches = knownTags.filter((t) => !chips.includes(t) && (q.length === 0 || t.toLowerCase().includes(q))).slice(0, 8);
+		suggest.replaceChildren();
+		for (const tag of matches) {
+			const item = document.createElement("div");
+			item.className = "dsh-tw-note-tagsuggest-item";
+			item.textContent = tag;
+			item.addEventListener("mousedown", (event) => {
+				event.preventDefault();
+				addTag(tag);
+			});
+			suggest.append(item);
+		}
+		suggest.hidden = matches.length === 0;
+	};
+	input.addEventListener("focus", () => {
+		ensureTags().then(showSuggest);
+	});
+	input.addEventListener("input", () => {
+		if (knownTags.length === 0) ensureTags().then(showSuggest);
+		else showSuggest();
+	});
+	input.addEventListener("keydown", (event) => {
+		if (event.key === "Enter" || event.key === ",") {
+			event.preventDefault();
+			commitInput();
+		} else if (event.key === "Backspace" && input.value.length === 0 && chips.length > 0) {
+			chips.pop();
+			renderChips();
+		} else if (event.key === "Escape") hideSuggest();
+	});
+	document.addEventListener("click", (event) => {
+		if (!wrap.contains(event.target)) hideSuggest();
+	}, true);
+	return {
+		el: wrap,
+		getTags: () => {
+			commitInput();
+			return [...chips];
+		},
+		setDefault: (tag) => {
+			if (chips.length === 0) {
+				const t = tag.trim();
+				if (t.length > 0) {
+					chips.push(t);
+					renderChips();
+				}
+			}
+		}
+	};
+}
+/** Build the whole widget DOM and wire it up (returns the appended root). */
+function buildWidget() {
 	const root = document.createElement("div");
 	root.className = "dsh-tw-note";
 	const card = document.createElement("div");
@@ -854,10 +1072,8 @@ function mountNoteWidget() {
 	const titleInput = document.createElement("input");
 	titleInput.className = "dsh-tw-note-title";
 	titleInput.placeholder = "标题（默认时间戳）";
-	const tagInput = document.createElement("input");
-	tagInput.className = "dsh-tw-note-tag";
-	tagInput.placeholder = "tag（默认 inbox）";
-	fields.append(titleInput, tagInput);
+	const tagEditor = buildTagEditor();
+	fields.append(titleInput, tagEditor.el);
 	const textarea = document.createElement("textarea");
 	textarea.className = "dsh-tw-note-text";
 	textarea.placeholder = "写点东西…（Ctrl+Enter 保存）";
@@ -892,10 +1108,9 @@ function mountNoteWidget() {
 		card.hidden = false;
 		opened = true;
 		resetTitle();
-		if (tagInput.value.length === 0) tagInput.value = defaultTag;
 		textarea.focus();
-		defaultTag = await fetchDefaultTag();
-		if (tagInput.value.length === 0) tagInput.value = defaultTag;
+		defaultTag = (await fetchUiOptions()).defaultTag;
+		tagEditor.setDefault(defaultTag);
 	};
 	const close = () => {
 		card.hidden = true;
@@ -919,7 +1134,7 @@ function mountNoteWidget() {
 				headers: { "content-type": "application/json" },
 				body: JSON.stringify({
 					title: titleInput.value.trim(),
-					tag: tagInput.value.trim(),
+					tags: tagEditor.getTags(),
 					text
 				}),
 				signal: AbortSignal.timeout(1e4)
@@ -953,7 +1168,7 @@ function mountNoteWidget() {
 	const doEdit = async () => {
 		const title = titleInput.value.trim().length > 0 ? titleInput.value.trim() : timestampTitle();
 		const text = textarea.value;
-		const tag = tagInput.value.trim();
+		const tags = tagEditor.getTags();
 		edit.disabled = true;
 		edit.textContent = "打开中…";
 		try {
@@ -962,7 +1177,7 @@ function mountNoteWidget() {
 				headers: { "content-type": "application/json" },
 				body: JSON.stringify({
 					title,
-					tag,
+					tags,
 					text
 				}),
 				signal: AbortSignal.timeout(1e4)
@@ -988,10 +1203,27 @@ function mountNoteWidget() {
 	edit.addEventListener("click", () => {
 		doEdit();
 	});
-	return () => {
-		root.remove();
+	return root;
+}
+/**
+* Mount the floating quick-note widget. Fetches /status first: when
+* `ui.showQuickNote` is off the widget is never created (no DOM side effects).
+* Returns a disposer that removes it.
+*/
+function mountNoteWidget() {
+	let disposed = false;
+	let root;
+	const disposer = () => {
+		disposed = true;
+		root?.remove();
 		document.querySelector(".dsh-tw-toast")?.remove();
 	};
+	(async () => {
+		const ui = await fetchUiOptions();
+		if (disposed || !ui.showQuickNote) return;
+		root = buildWidget();
+	})();
+	return disposer;
 }
 //#endregion
 //#region src/client/settings-page.ts
@@ -1109,6 +1341,7 @@ function renderConfigSection(body, config, refresh) {
 	section.append(make("h3", "dsh-tw-settings-h", "常规配置"));
 	const note = config.note ?? {};
 	const git = config.git ?? {};
+	const ui = config.ui ?? {};
 	const fields = [];
 	const textField = (key, label, initial) => {
 		const input = make("input", "dsh-tw-settings-input");
@@ -1159,6 +1392,8 @@ function renderConfigSection(body, config, refresh) {
 	numField("git.debounceMs", "自动 commit 防抖(ms)", typeof git.debounceMs === "number" ? git.debounceMs : 6e4);
 	textField("git.remote", "git 远端（空=仅本地）", typeof git.remote === "string" ? git.remote : "");
 	textField("git.branch", "git 分支", typeof git.branch === "string" ? git.branch : "main");
+	checkField("ui.showQuickNote", "显示「快速笔记」悬浮按钮", ui.showQuickNote !== false);
+	checkField("ui.sidebarLeftCss", "侧边栏移左 CSS（随启动补丁还原被删除的样式）", ui.sidebarLeftCss !== false);
 	const save = make("button", "dsh-tw-settings-btn dsh-tw-settings-primary", "保存配置");
 	save.type = "button";
 	save.addEventListener("click", () => {