dsh-tiddlywiki 0.3.1 → 0.5.0

package/src/client/panel.ts

@@ -115,9 +115,6 @@ export function mountPanel(state: PanelState): () => void {
   let iframe: HTMLIFrameElement | undefined
   let frameArea: HTMLDivElement | undefined
   let errorArea: HTMLDivElement | undefined
-  let chip: HTMLSpanElement | undefined
-  let statusDot: HTMLSpanElement | undefined
-  let statusFloater: HTMLDivElement | undefined
   let refreshTimer: number | undefined
   let refreshAttempts = 0
 
@@ -143,48 +140,6 @@ export function mountPanel(state: PanelState): () => void {
     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 = (): HTMLDivElement => {
-    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', () => { void 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 !== undefined && !iframe.hidden) iframe.src = iframe.src
-    })
-
-    wrap.append(statusBtn, reloadBtn)
-    document.body.append(wrap)
-    return wrap
-  }
-
-  const setChip = (stateName: string, text: string): void => {
-    if (statusDot !== undefined) statusDot.dataset.state = stateName
-    if (chip !== undefined) chip.textContent = text
-  }
-
   /** Pin the overlay to the center column's current viewport rect. */
   const syncRect = (): void => {
     if (container === undefined || columnEl === undefined) return
@@ -274,18 +229,15 @@ export function mountPanel(state: PanelState): () => void {
     }
     const payload = await fetchStatus()
     if (payload === null) {
-      setChip('failed', '状态不可达')
       showError('无法访问 /dsh-tiddlywiki/status')
       return
     }
     if (payload.status === 'running' && typeof payload.url === 'string') {
-      setChip('running', '在线')
       refreshAttempts = 0
       showFrame(payload.url)
       return
     }
     if (payload.status === 'starting') {
-      setChip('starting', '启动中')
       showStarting()
       // Auto-poll while starting (bounded).
       if (refreshAttempts < 30) {
@@ -294,7 +246,6 @@ export function mountPanel(state: PanelState): () => void {
       }
       return
     }
-    setChip('failed', '离线')
     refreshAttempts = 0
     showError(payload.error ?? `服务状态：${payload.status}`)
   }
@@ -347,12 +298,12 @@ export function mountPanel(state: PanelState): () => void {
   ensure()
   applyActive()
 
-  // Bottom-right status/reload buttons, gated by ui.showPanelStatus.
-  void (async () => {
-    const payload = await fetchStatus()
-    if (payload?.ui?.showPanelStatus === false) return
-    statusFloater = buildStatusFloater()
-  })()
+  // The "知识库" FAB's 重载面板 entry dispatches this event to reload the
+  // iframe (the panel itself no longer owns a floating status/reload button).
+  const onReloadRequest = (): void => {
+    if (iframe !== undefined && !iframe.hidden) iframe.src = iframe.src
+  }
+  document.addEventListener('dsh-tw-panel-reload', onReloadRequest)
 
   return () => {
     if (refreshTimer !== undefined) window.clearTimeout(refreshTimer)
@@ -362,10 +313,10 @@ export function mountPanel(state: PanelState): () => void {
     resizeObserver.disconnect()
     document.removeEventListener('click', onClickSidebarRow, true)
     document.removeEventListener(ACTIVATE_EVENT, onOtherActivate)
+    document.removeEventListener('dsh-tw-panel-reload', onReloadRequest)
     waitObserver.disconnect()
     unsubscribe()
     document.documentElement.removeAttribute(ACTIVE_ATTR)
     container?.remove()
-    statusFloater?.remove()
   }
 }

package/src/client/settings-page.ts

@@ -210,9 +210,9 @@ function renderConfigSection(body: HTMLElement, config: Record<string, unknown>,
   numField('git.debounceMs', '自动 commit 防抖(ms)', typeof git.debounceMs === 'number' ? git.debounceMs : 60_000)
   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)
-  checkField('ui.showSyncButton', '显示右下角「同步」悬浮按钮', ui.showSyncButton !== false)
+  checkField('ui.showQuickNote', '显示「知识库」按钮里的「快速笔记」入口', ui.showQuickNote !== false)
+  checkField('ui.showPanelStatus', '显示「知识库」按钮里的 TW 面板/重载入口与状态行', ui.showPanelStatus !== false)
+  checkField('ui.showSyncButton', '显示「知识库」按钮里的「同步」入口与 git 状态点', ui.showSyncButton !== false)
   // 界面语言在下方「语言管理」区块设置（config 的 uiLanguage 仅供启动时自动应用）。
 
   const save = make('button', 'dsh-tw-settings-btn dsh-tw-settings-primary', '保存配置')

package/src/client/styles.ts

@@ -104,6 +104,9 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
   display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
   font-family: inherit;
 }
+/* The wrapper's display:flex would beat the UA [hidden]{display:none} rule,
+   so the card's show/hide (root.hidden) needs an explicit rule. */
+.dsh-tw-note[hidden] { display: none; }
 .dsh-tw-note-card {
   width: 340px; max-width: calc(100vw - 40px);
   background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
@@ -130,75 +133,52 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
   font: inherit; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer;
 }
 .dsh-tw-note-close:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, #222); }
-.dsh-tw-note-fields { display: flex; gap: 8px; }
+/* 标题与标签上下分行：标题一行，标签 chips+输入框独占一行，
+   避免标签增多时把并排的标题栏一起撑高。 */
+.dsh-tw-note-fields { display: flex; flex-direction: column; gap: 8px; }
 .dsh-tw-note-fields input {
-  flex: 1; min-width: 0; border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
+  width: 100%; box-sizing: border-box; border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
   border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 12px;
   background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, inherit);
   transition: border-color 120ms ease, box-shadow 120ms ease;
 }
-.dsh-tw-note-fields input:focus, .dsh-tw-note-text:focus {
+.dsh-tw-note-fields input:focus, .dsh-tw-note-editor .cm-editor.cm-focused {
   outline: none; border-color: var(--dsw-alias-brand-primary, #3e63dd);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 25%, transparent);
 }
-.dsh-tw-note-text::placeholder { color: var(--dsw-alias-label-dimmed, #999); }
-/* ── Markdown editor (highlighted-textarea overlay) ────────────────
-   The <pre> highlight layer and the transparent <textarea> share identical
-   metrics (border/padding/font/line-height/white-space) so lines align 1:1. */
+/* ── Markdown editor (CodeMirror 6, see markdown-editor.ts) ──────────
+   The .cm-editor box carries the border/radius/min-height the old textarea
+   had; font metrics live on the scroller so lines/selection stay aligned. */
 .dsh-tw-note-editor { position: relative; min-width: 0; }
-.dsh-tw-note-editor pre,
-.dsh-tw-note-editor textarea {
-  margin: 0; box-sizing: border-box; width: 100%;
+.dsh-tw-note-editor .cm-editor {
   border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18)); border-radius: 8px;
-  padding: 8px 9px; font: inherit; font-size: 13px; line-height: 1.5; min-height: 120px;
-  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; tab-size: 4;
+  background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #222);
+  font-size: 13px; min-height: 120px;
   transition: border-color 120ms ease, box-shadow 120ms ease;
 }
-.dsh-tw-note-editor .dsh-tw-note-hl {
-  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
-  background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #222);
-  pointer-events: none; overflow: hidden;
+.dsh-tw-note-editor .cm-scroller {
+  font-family: inherit; font-size: 13px; line-height: 1.5;
+  min-height: 120px; overflow: auto;
+}
+.dsh-tw-note-editor .cm-content {
+  caret-color: var(--dsw-alias-label-primary, #222);
+  padding: 8px 9px;
+}
+.dsh-tw-note-editor .cm-placeholder { color: var(--dsw-alias-label-dimmed, #999); }
+.dsh-tw-note-editor .cm-line { padding: 0; }
+/* Selection + active line follow the theme. */
+.dsh-tw-note-editor .cm-editor .cm-selectionBackground,
+.dsh-tw-note-editor .cm-editor.cm-focused .cm-selectionBackground {
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 22%, transparent) !important;
 }
-.dsh-tw-note-editor .dsh-tw-note-text {
-  position: relative; z-index: 1; resize: vertical;
-  background: transparent; color: transparent; caret-color: var(--dsw-alias-label-primary, #222);
-  overflow: auto;
+.dsh-tw-note-editor .cm-editor .cm-activeLine {
+  background: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 8%, transparent);
 }
-.dsh-tw-note-editor .dsh-tw-note-text:focus { outline: none; }
-.dsh-tw-note-drop .dsh-tw-note-text,
-.dsh-tw-note-drop .dsh-tw-note-hl {
+/* Drag-over highlight (file upload) targets the CodeMirror box now. */
+.dsh-tw-note-drop .cm-editor {
   border-color: var(--dsw-alias-brand-primary, #3e63dd);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 25%, transparent);
 }
-/* ── markdown highlight tokens (colors only — never size/height, so the
-      overlay keeps line-for-line alignment with the invisible textarea) ── */
-.dsh-tw-note-hl .md-heading { font-weight: 700; color: var(--dsw-alias-brand-primary, #3e63dd); }
-.dsh-tw-note-hl .md-hash { font-weight: 700; color: color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 55%, transparent); }
-.dsh-tw-note-hl .md-code,
-.dsh-tw-note-hl .md-code-block,
-.dsh-tw-note-hl .md-fence {
-  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
-}
-.dsh-tw-note-hl .md-code {
-  background: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 14%, transparent);
-  border-radius: 4px; padding: 0 3px;
-}
-.dsh-tw-note-hl .md-code-block,
-.dsh-tw-note-hl .md-fence {
-  display: block; background: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 8%, transparent);
-}
-.dsh-tw-note-hl .md-bold { font-weight: 700; }
-.dsh-tw-note-hl .md-italic { font-style: italic; }
-.dsh-tw-note-hl .md-strike { text-decoration: line-through; opacity: .75; }
-.dsh-tw-note-hl .md-link { color: var(--dsw-alias-brand-primary, #3e63dd); text-decoration: underline; }
-.dsh-tw-note-hl .md-url { color: color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 70%, #999); text-decoration: underline dotted; }
-.dsh-tw-note-hl .md-image { color: var(--dsw-alias-state-success-primary, #3eaa5f); font-weight: 600; }
-.dsh-tw-note-hl .md-bullet { font-weight: 700; color: var(--dsw-alias-brand-primary, #3e63dd); }
-.dsh-tw-note-hl .md-number { font-weight: 700; color: var(--dsw-alias-state-warning-primary, #d9822b); }
-.dsh-tw-note-hl .md-quote { font-style: italic; color: var(--dsw-alias-label-secondary, #888); }
-.dsh-tw-note-hl .md-hr { color: var(--dsw-alias-label-dimmed, #999); text-decoration: line-through; }
-.dsh-tw-note-hl .md-task { color: var(--dsw-alias-label-secondary, #888); }
-.dsh-tw-note-hl .md-task-checked { color: var(--dsw-alias-state-success-primary, #3eaa5f); font-weight: 600; }
 .dsh-tw-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .dsh-tw-note-foot-left, .dsh-tw-note-foot-right { display: flex; align-items: center; gap: 8px; }
 .dsh-tw-note-hint { font-size: 11px; color: var(--dsw-alias-label-dimmed, #999); }
@@ -228,7 +208,7 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
 .dsh-tw-note-edit:active:not(:disabled) { transform: scale(.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-tags { position: relative; width: 100%; 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;
@@ -367,6 +347,113 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
 .dsh-tw-settings-error { color: var(--dsw-alias-state-error-primary, #d13b3b); font-size: 12px; }
 .dsh-tw-settings-search { flex: 0 0 auto; max-width: 220px; }
 .dsh-tw-settings-check { accent-color: var(--dsw-alias-brand-primary, #3e63dd); }
+
+/* ── "知识库" FAB (v0.5: quick-note + sync + panel status merged) ──────────
+   One fixed cluster above the shutdown launcher FAB (bottom:24). The FAB
+   carries a git status dot; the menu pops upward from it. */
+.dsh-tw-fab-wrap {
+  position: fixed; right: 24px; bottom: 88px; z-index: 960;
+  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
+}
+.dsh-tw-fab {
+  position: relative;
+  width: 46px; height: 46px; border-radius: 50%;
+  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);
+  box-shadow: var(--dsw-shadow-lv3, 0 4px 16px rgba(0,0,0,.16)); cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: background-color 120ms ease, transform 80ms ease;
+}
+.dsh-tw-fab:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.1)); }
+.dsh-tw-fab:active { transform: scale(.94); }
+.dsh-tw-fab-icon { display: inline-flex; }
+.dsh-tw-fab-dot {
+  position: absolute; right: 0; bottom: 0; width: 11px; height: 11px;
+  border-radius: 50%; border: 2px solid var(--dsw-alias-bg-layer-2, #fff);
+  background: #999; box-sizing: border-box;
+}
+.dsh-tw-fab-dot[data-state="clean"] { background: var(--dsw-alias-state-success-primary, #3eaa5f); }
+.dsh-tw-fab-dot[data-state="dirty"] { background: var(--dsw-alias-state-warning-primary, #d9822b); }
+.dsh-tw-fab-dot[data-state="behind"] { background: var(--dsw-alias-state-error-primary, #d13b3b); }
+.dsh-tw-fab-dot[data-state="syncing"] { background: var(--dsw-alias-brand-primary, #3e63dd); }
+.dsh-tw-fab-menu {
+  min-width: 220px; max-width: calc(100vw - 48px);
+  display: flex; flex-direction: column; gap: 2px; padding: 6px;
+  border-radius: 12px; border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.15));
+  background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
+  box-shadow: var(--dsw-shadow-lv3, 0 8px 30px rgba(0,0,0,.22));
+  font-size: 13px;
+  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
+  animation: dsh-tw-note-in 160ms ease;
+}
+.dsh-tw-fab-menu[hidden] { display: none; }
+.dsh-tw-fab-status {
+  display: flex; align-items: center; gap: 7px;
+  padding: 6px 9px; font-size: 12px; color: var(--dsw-alias-label-secondary, #666);
+  border-bottom: 1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.08));
+  margin-bottom: 4px;
+}
+.dsh-tw-fab-status + .dsh-tw-fab-status { border-bottom: 0; margin-bottom: 4px; }
+.dsh-tw-fab-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-tw-fab-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #999; flex: none; }
+.dsh-tw-fab-status-dot[data-state="running"] { background: var(--dsw-alias-state-success-primary, #3eaa5f); }
+.dsh-tw-fab-status-dot[data-state="starting"] { background: var(--dsw-alias-state-warning-primary, #d9822b); }
+.dsh-tw-fab-status-dot[data-state="failed"], .dsh-tw-fab-status-dot[data-state="stopped"] { background: var(--dsw-alias-state-error-primary, #d13b3b); }
+.dsh-tw-fab-status-dot[data-state="clean"] { background: var(--dsw-alias-state-success-primary, #3eaa5f); }
+.dsh-tw-fab-status-dot[data-state="dirty"] { background: var(--dsw-alias-state-warning-primary, #d9822b); }
+.dsh-tw-fab-status-dot[data-state="behind"] { background: var(--dsw-alias-state-error-primary, #d13b3b); }
+.dsh-tw-fab-status-dot[data-state="syncing"] { background: var(--dsw-alias-brand-primary, #3e63dd); }
+.dsh-tw-fab-item {
+  display: flex; align-items: center; gap: 6px; text-align: left;
+  border: none; background: transparent; color: inherit; font: inherit; font-size: 13px;
+  padding: 7px 9px; border-radius: 8px; cursor: pointer;
+}
+.dsh-tw-fab-item:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
+.dsh-tw-fab-item:active { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); }
+
+/* ── quick-note restored-draft banner ─────────────────────────────────────── */
+.dsh-tw-note-draft {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 5px 9px; border-radius: 8px; font-size: 12px;
+  background: color-mix(in srgb, var(--dsw-alias-state-warning-primary, #d9822b) 12%, transparent);
+  color: var(--dsw-alias-label-primary, #222);
+}
+.dsh-tw-note-draft[hidden] { display: none; }
+.dsh-tw-note-draft-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-tw-note-draft-discard {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
+  background: transparent; color: inherit; font: inherit; font-size: 12px;
+  padding: 2px 10px; border-radius: 999px; cursor: pointer; flex: none;
+}
+.dsh-tw-note-draft-discard:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
+
+/* ── quick-note recent-notes picker ───────────────────────────────────────── */
+.dsh-tw-note-recent {
+  position: absolute; right: 0; bottom: calc(100% - 8px); z-index: 70;
+  width: 340px; max-width: calc(100vw - 40px); max-height: 280px; overflow-y: auto;
+  display: flex; flex-direction: column; gap: 2px; padding: 6px;
+  border-radius: 12px; border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.15));
+  background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
+  box-shadow: var(--dsw-shadow-lv3, 0 8px 30px rgba(0,0,0,.22));
+  font-size: 13px;
+}
+.dsh-tw-note-recent[hidden] { display: none; }
+.dsh-tw-note-recent-item {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
+  padding: 6px 8px; border-radius: 7px; cursor: pointer;
+}
+.dsh-tw-note-recent-item:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
+.dsh-tw-note-recent-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-tw-note-recent-meta { flex: none; font-size: 11px; color: var(--dsw-alias-label-dimmed, #999); }
+.dsh-tw-note-recent-muted { padding: 8px 10px; font-size: 12px; color: var(--dsw-alias-label-dimmed, #999); }
+.dsh-tw-note-recent-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: 6px 10px; border-radius: 8px; cursor: pointer;
+  transition: filter 120ms ease, transform 80ms ease;
+}
+.dsh-tw-note-recent-btn:hover { filter: brightness(.96); }
+.dsh-tw-note-recent-btn:active { transform: scale(.96); }
 `
 
 export function injectStyles(): void {