dsh-tiddlywiki 0.1.2 → 0.2.1

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 {
@@ -66,31 +81,31 @@ html[data-dsh-tw-active] [data-pane="conversation"] > :not([data-dsh-tw-view]),
 html[data-dsh-tw-active] [class*="centerCol"] > :not([data-dsh-tw-view]),
 html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view]) { display: none !important; }
 
-.dsh-tw-panel-bar {
-  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
-  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.18));
-  background: var(--dsw-alias-bg-layer-1, transparent);
-  font-size: 12px; color: var(--dsw-alias-label-secondary, inherit);
-  flex: none;
+/* ── bottom-right status / reload floating buttons ───────────────────
+   The top panel bar (title + status + reload row) is gone so TW's menubar
+   reaches the panel top; status/reload now live here as floating buttons,
+   same visual language as the quick-note toggle. The ui.showPanelStatus
+   setting controls whether they mount at all. */
+.dsh-tw-panel-status {
+  /* 状态/重载悬浮按钮：右对齐到与快速笔记按钮同一条竖线（right:24），
+     垂直排在快速笔记按钮（bottom:88，高约 38px）上方；
+     两个按钮竖直依次排列（状态在上、重载在下），与其他插件按钮列对齐、不堆叠。 */
+  position: fixed; right: 24px; bottom: 140px; z-index: 950;
+  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
 }
-.dsh-tw-panel-bar button {
-  border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.25));
-  background: transparent; color: inherit; font: inherit; font-size: 12px;
-  padding: 2px 8px; border-radius: 6px; cursor: pointer;
+.dsh-tw-panel-status-btn {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
+  background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
+  font: inherit; font-size: 12px; padding: 7px 12px; border-radius: 999px;
+  box-shadow: var(--dsw-shadow-lv3, 0 4px 16px rgba(0,0,0,.16)); cursor: pointer;
+  display: inline-flex; align-items: center; gap: 6px;
+  transition: background-color 120ms ease;
 }
-.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); }
-.dsh-tw-status-chip[data-state="failed"], .dsh-tw-status-chip[data-state="stopped"] { color: var(--dsw-alias-state-error-primary, #d13b3b); }
+.dsh-tw-panel-status-btn:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.1)); }
+.dsh-tw-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #999; flex: none; }
+.dsh-tw-status-dot[data-state="running"] { background: var(--dsw-alias-state-success-primary, #3eaa5f); }
+.dsh-tw-status-dot[data-state="starting"] { background: var(--dsw-alias-state-warning-primary, #d9822b); }
+.dsh-tw-status-dot[data-state="failed"], .dsh-tw-status-dot[data-state="stopped"] { background: var(--dsw-alias-state-error-primary, #d13b3b); }
 
 .dsh-tw-panel-frame { flex: 1; min-height: 0; border: 0; width: 100%; display: block; background: #fff; }
 /* [hidden] must beat the author display rules above (UA hidden is overridden). */
@@ -169,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;
@@ -503,34 +546,14 @@ function mountPanel(state) {
 	let frameArea;
 	let errorArea;
 	let chip;
+	let statusDot;
+	let statusFloater;
 	let refreshTimer;
 	let refreshAttempts = 0;
 	const build = () => {
 		const view = document.createElement("div");
 		view.dataset.dshTwView = "";
 		view.className = "dsh-tw-view";
-		const bar = document.createElement("div");
-		bar.className = "dsh-tw-panel-bar";
-		const title = document.createElement("span");
-		title.className = "dsh-tw-panel-title";
-		title.textContent = "TiddlyWiki 知识库";
-		chip = document.createElement("span");
-		chip.className = "dsh-tw-status-chip";
-		chip.dataset.state = "unknown";
-		chip.textContent = "—";
-		const reload = document.createElement("button");
-		reload.type = "button";
-		reload.textContent = "重载";
-		reload.addEventListener("click", () => {
-			if (iframe !== void 0 && !iframe.hidden) iframe.src = iframe.src;
-		});
-		const refresh = document.createElement("button");
-		refresh.type = "button";
-		refresh.textContent = "状态";
-		refresh.addEventListener("click", () => {
-			doRefresh();
-		});
-		bar.append(title, chip, refresh, reload);
 		frameArea = document.createElement("div");
 		frameArea.className = "dsh-tw-panel-frame-wrap";
 		frameArea.style.cssText = "flex:1;min-height:0;display:flex;flex-direction:column";
@@ -542,13 +565,47 @@ function mountPanel(state) {
 		errorArea = document.createElement("div");
 		errorArea.className = "dsh-tw-panel-error";
 		errorArea.hidden = true;
-		view.append(bar, frameArea, errorArea);
+		view.append(frameArea, errorArea);
 		return view;
 	};
+	/**
+	* Bottom-right floating status/reload buttons (same visual language as the
+	* quick-note toggle) — the top panel bar is gone, so TW's menubar reaches
+	* the very top of the panel and clears the host's top-right buttons. Mount
+	* is gated by `ui.showPanelStatus` (settings page toggle).
+	*/
+	const buildStatusFloater = () => {
+		const wrap = document.createElement("div");
+		wrap.className = "dsh-tw-panel-status";
+		const statusBtn = document.createElement("button");
+		statusBtn.type = "button";
+		statusBtn.className = "dsh-tw-panel-status-btn";
+		statusBtn.title = "刷新状态";
+		statusDot = document.createElement("span");
+		statusDot.className = "dsh-tw-status-dot";
+		statusDot.dataset.state = "unknown";
+		chip = document.createElement("span");
+		chip.className = "dsh-tw-panel-status-text";
+		chip.textContent = "—";
+		statusBtn.append(statusDot, chip);
+		statusBtn.addEventListener("click", () => {
+			doRefresh();
+		});
+		const reloadBtn = document.createElement("button");
+		reloadBtn.type = "button";
+		reloadBtn.className = "dsh-tw-panel-status-btn";
+		reloadBtn.textContent = "重载";
+		reloadBtn.title = "重载 TiddlyWiki 面板";
+		reloadBtn.addEventListener("click", () => {
+			if (iframe !== void 0 && !iframe.hidden) iframe.src = iframe.src;
+		});
+		wrap.append(statusBtn, reloadBtn);
+		document.body.append(wrap);
+		return wrap;
+	};
 	const setChip = (stateName, text) => {
-		if (chip === void 0) return;
-		chip.dataset.state = stateName;
-		chip.textContent = text;
+		if (statusDot !== void 0) statusDot.dataset.state = stateName;
+		if (chip !== void 0) chip.textContent = text;
 	};
 	/** Pin the overlay to the center column's current viewport rect. */
 	const syncRect = () => {
@@ -702,6 +759,10 @@ function mountPanel(state) {
 	const unsubscribe = state.subscribe(applyActive);
 	ensure();
 	applyActive();
+	(async () => {
+		if ((await fetchStatus())?.ui?.showPanelStatus === false) return;
+		statusFloater = buildStatusFloater();
+	})();
 	return () => {
 		if (refreshTimer !== void 0) window.clearTimeout(refreshTimer);
 		window.clearInterval(syncInterval);
@@ -714,6 +775,7 @@ function mountPanel(state) {
 		unsubscribe();
 		document.documentElement.removeAttribute(ACTIVE_ATTR);
 		container?.remove();
+		statusFloater?.remove();
 	};
 }
 //#endregion
@@ -853,14 +915,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);
 }
@@ -868,16 +939,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");
@@ -899,10 +1091,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 保存）";
@@ -937,10 +1127,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;
@@ -964,7 +1153,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)
@@ -998,7 +1187,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 {
@@ -1007,7 +1196,7 @@ function mountNoteWidget() {
 				headers: { "content-type": "application/json" },
 				body: JSON.stringify({
 					title,
-					tag,
+					tags,
 					text
 				}),
 				signal: AbortSignal.timeout(1e4)
@@ -1033,10 +1222,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
@@ -1154,6 +1360,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");
@@ -1204,6 +1411,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.showPanelStatus", "显示 TW 面板右下角「状态/重载」悬浮按钮", ui.showPanelStatus !== false);
 	const save = make("button", "dsh-tw-settings-btn dsh-tw-settings-primary", "保存配置");
 	save.type = "button";
 	save.addEventListener("click", () => {