dsh-tiddlywiki 0.2.0 → 0.3.0

package/src/client/styles.ts

@@ -51,31 +51,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;
-}
-.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-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); }
+/* ── 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:140）上方；
+     两个按钮竖直依次排列（状态在上、重载在下），与其他插件按钮列对齐、不堆叠。 */
+  position: fixed; right: 24px; bottom: 192px; z-index: 950;
+  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
+}
+.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-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). */
@@ -131,14 +131,74 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
   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 {
+.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. */
+.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%;
   border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18)); border-radius: 8px;
-  padding: 8px 9px; font: inherit; font-size: 13px; min-height: 120px; resize: vertical;
-  background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, inherit);
+  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;
   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 .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 .dsh-tw-note-text:focus { outline: none; }
+.dsh-tw-note-drop .dsh-tw-note-text,
+.dsh-tw-note-drop .dsh-tw-note-hl {
+  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); }
+.dsh-tw-note-upload {
+  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;
+}
+.dsh-tw-note-upload:hover { filter: brightness(.96); }
 .dsh-tw-note-save {
   border: 1px solid transparent; background: var(--dsw-alias-brand-primary, #3e63dd); color: #fff;
   font: inherit; font-size: 12px; padding: 6px 16px; border-radius: 8px; cursor: pointer;
@@ -216,6 +276,29 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
 }
 .dsh-tw-note-toggle:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.1)); }
 
+/* ── floating sync button (bottom-right) ───────────────────────
+   Pill FAB between the quick-note toggle (bottom:88) and the TW panel
+   status/reload floaters (bottom:192); dot reflects git state. */
+.dsh-tw-sync {
+  position: fixed; right: 24px; bottom: 140px; z-index: 950;
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 9px 14px; border-radius: 999px;
+  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: 13px; box-shadow: var(--dsw-shadow-lv3, 0 4px 16px rgba(0,0,0,.16));
+  cursor: pointer; transition: background-color 120ms ease;
+}
+.dsh-tw-sync:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.1)); }
+.dsh-tw-sync:disabled { opacity: .65; cursor: default; }
+.dsh-tw-sync-icon { display: inline-flex; flex: none; }
+.dsh-tw-sync-spin .dsh-tw-sync-icon svg { animation: dsh-tw-spin 1s linear infinite; transform-origin: center; }
+@keyframes dsh-tw-spin { to { transform: rotate(360deg); } }
+.dsh-tw-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #999; flex: none; }
+.dsh-tw-sync-dot[data-state="clean"] { background: var(--dsw-alias-state-success-primary, #3eaa5f); }
+.dsh-tw-sync-dot[data-state="dirty"] { background: var(--dsw-alias-state-warning-primary, #d9822b); }
+.dsh-tw-sync-dot[data-state="behind"] { background: var(--dsw-alias-state-error-primary, #d13b3b); }
+.dsh-tw-sync-dot[data-state="syncing"] { background: var(--dsw-alias-brand-primary, #3e63dd); }
+
 /* ── toast ──────────────────────────────────────────────────── */
 .dsh-tw-toast {
   position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);

package/src/client/sync-button.ts

@@ -0,0 +1,188 @@
+/**
+ * Floating "sync" button (bottom-right) — one click pulls + commits + pushes
+ * the wiki git repository and reports the result, with a live status dot so
+ * the human always sees whether the knowledge base is in sync.
+ *
+ * - honors `ui.showSyncButton`: the button is mounted async and never created
+ *   when the option is off (settings page toggle);
+ * - polls /dsh-tiddlywiki/status every 30s for the git state;
+ * - clicking POSTs /dsh-tiddlywiki/sync (pull → commit → push) and toasts the
+ *   outcome, then refreshes the dot immediately.
+ *
+ * Status dot mapping (git summary from /status):
+ *   offline → gray   (no repo / service unreachable)
+ *   dirty   → amber  (uncommitted changes)
+ *   behind  → red    (remote has commits we don't — pull will rebase)
+ *   clean   → green  (worktree clean)
+ *
+ * @module dsh-tiddlywiki/client/sync-button
+ */
+import { toast } from './toast.ts'
+
+const STATUS_ENDPOINT = '/dsh-tiddlywiki/status'
+const SYNC_ENDPOINT = '/dsh-tiddlywiki/sync'
+const POLL_MS = 30_000
+
+/** Public git summary shape (mirrors GitStatusViewPublic on the host). */
+interface GitView {
+  exists?: boolean
+  branch?: string
+  dirty?: boolean
+  dirtyFiles?: string[]
+  remote?: string
+  lastCommit?: string
+  ahead?: number
+  behind?: number
+}
+
+interface StatusPayload {
+  ok?: boolean
+  status?: string
+  git?: GitView | null
+  ui?: { showSyncButton?: boolean }
+}
+
+/** Inline sync icon (circular arrows, stroke-based, theme-colored). */
+const SYNC_ICON = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 8a5 5 0 1 1-1.4-3.5"/><path d="M13 2.5v3h-3"/></svg>'
+
+function pad(n: number): string {
+  return n < 10 ? `0${n}` : String(n)
+}
+
+/** Compact local time for the tooltip (e.g. "10:32"). */
+function clock(date: Date): string {
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+
+async function fetchStatus(): Promise<StatusPayload | null> {
+  try {
+    const res = await fetch(STATUS_ENDPOINT, { signal: AbortSignal.timeout(8_000) })
+    if (!res.ok) return null
+    return (await res.json()) as StatusPayload
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Mount the floating sync button. Fetches /status first: when
+ * `ui.showSyncButton` is off the button is never created. Returns a disposer.
+ */
+export function mountSyncButton(): () => void {
+  let disposed = false
+  let root: HTMLButtonElement | undefined
+  let dot: HTMLSpanElement | undefined
+  let label: HTMLSpanElement | undefined
+  let lastSync: Date | undefined
+  let timer: number | undefined
+
+  const build = (): HTMLButtonElement => {
+    const btn = document.createElement('button')
+    btn.type = 'button'
+    btn.className = 'dsh-tw-sync'
+    btn.title = '同步知识库（pull → commit → push）'
+
+    const icon = document.createElement('span')
+    icon.className = 'dsh-tw-sync-icon'
+    icon.innerHTML = SYNC_ICON
+
+    dot = document.createElement('span')
+    dot.className = 'dsh-tw-sync-dot'
+    dot.dataset.state = 'offline'
+
+    label = document.createElement('span')
+    label.className = 'dsh-tw-sync-label'
+    label.textContent = '同步'
+
+    btn.append(icon, label, dot)
+    btn.addEventListener('click', () => { void doSync() })
+    document.body.append(btn)
+    return btn
+  }
+
+  /** Map a git summary onto the dot + label + tooltip. */
+  const applyStatus = (payload: StatusPayload | null): void => {
+    if (root === undefined || dot === undefined || label === undefined) return
+    const git = payload?.git
+    const bits: string[] = ['同步知识库']
+    let state = 'offline'
+    let word = '离线'
+
+    if (git === null || git === undefined || git.exists !== true) {
+      bits.push('git 仓库不可用')
+    } else {
+      bits.push(`分支 ${git.branch ?? '?'}`)
+      if (typeof git.lastCommit === 'string') bits.push(git.lastCommit)
+      const behind = typeof git.behind === 'number' ? git.behind : 0
+      const ahead = typeof git.ahead === 'number' ? git.ahead : 0
+      if (ahead > 0) bits.push(`领先 ${ahead}`)
+      if (behind > 0) bits.push(`落后 ${behind}`)
+      if (git.dirty === true) {
+        state = 'dirty'
+        word = '待提交'
+        bits.push(`有 ${git.dirtyFiles?.length ?? 0} 个未提交改动`)
+      } else if (behind > 0) {
+        state = 'behind'
+        word = '可更新'
+      } else {
+        state = 'clean'
+        word = '已同步'
+      }
+    }
+    if (lastSync !== undefined) bits.push(`上次同步 ${clock(lastSync)}`)
+    root.title = bits.join(' · ')
+    dot.dataset.state = state
+    label.textContent = word
+  }
+
+  const doSync = async (): Promise<void> => {
+    if (root === undefined) return
+    root.disabled = true
+    root.classList.add('dsh-tw-sync-spin')
+    if (label !== undefined) label.textContent = '同步中…'
+    if (dot !== undefined) dot.dataset.state = 'syncing'
+    try {
+      const res = await fetch(SYNC_ENDPOINT, { method: 'POST', signal: AbortSignal.timeout(120_000) })
+      const payload = (await res.json().catch(() => null)) as
+        | { ok?: boolean; message?: string; error?: string; status?: GitView; conflictFiles?: string[]; push?: string; changed?: boolean; restarted?: boolean; restartError?: string }
+        | null
+      lastSync = new Date()
+      if (payload === null || payload.ok !== true) {
+        const msg = payload?.error ?? payload?.message ?? `HTTP ${res.status}`
+        toast(`同步失败：${msg}`)
+      } else {
+        let detail = ''
+        if (payload.push && payload.push !== 'nothing to commit') detail = `（${payload.push}）`
+        if (payload.changed === true) {
+          detail += payload.restarted === true ? '，TW 已重启' : '，TW 未自动重启'
+          if (payload.restartError) detail += `（${payload.restartError}）`
+        }
+        toast(`同步完成：${payload.message ?? 'OK'}${detail}`)
+      }
+      applyStatus(await fetchStatus())
+    } catch (err) {
+      toast(`同步失败：${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      root.disabled = false
+      root.classList.remove('dsh-tw-sync-spin')
+    }
+  }
+
+  const poll = async (): Promise<void> => {
+    applyStatus(await fetchStatus())
+  }
+
+  void (async () => {
+    const payload = await fetchStatus()
+    if (disposed || payload?.ui?.showSyncButton === false) return
+    root = build()
+    applyStatus(payload)
+    timer = window.setInterval(() => { void poll() }, POLL_MS)
+  })()
+
+  return () => {
+    disposed = true
+    if (timer !== undefined) window.clearInterval(timer)
+    root?.remove()
+  }
+}

package/src/client/toast.ts

@@ -1,22 +1,22 @@
-/**
- * One-shot transient toast, shared by the quick-note widget and the settings
- * page. Reuses a single body-level element (`.dsh-tw-toast`) with a show
- * class; the element is created lazily and styled by styles.ts.
- *
- * @module dsh-tiddlywiki/client/toast
- */
-
-export function toast(message: string): void {
-  let el = document.querySelector<HTMLElement>('.dsh-tw-toast')
-  if (el === null) {
-    el = document.createElement('div')
-    el.className = 'dsh-tw-toast'
-    document.body.append(el)
-  }
-  el.textContent = message
-  el.classList.add('dsh-tw-toast-show')
-  clearTimeout((el as HTMLElement & { __twToastTimer?: number }).__twToastTimer)
-  ;(el as HTMLElement & { __twToastTimer?: number }).__twToastTimer = window.setTimeout(() => {
-    el?.classList.remove('dsh-tw-toast-show')
-  }, 2_500)
-}
+/**
+ * One-shot transient toast, shared by the quick-note widget and the settings
+ * page. Reuses a single body-level element (`.dsh-tw-toast`) with a show
+ * class; the element is created lazily and styled by styles.ts.
+ *
+ * @module dsh-tiddlywiki/client/toast
+ */
+
+export function toast(message: string): void {
+  let el = document.querySelector<HTMLElement>('.dsh-tw-toast')
+  if (el === null) {
+    el = document.createElement('div')
+    el.className = 'dsh-tw-toast'
+    document.body.append(el)
+  }
+  el.textContent = message
+  el.classList.add('dsh-tw-toast-show')
+  clearTimeout((el as HTMLElement & { __twToastTimer?: number }).__twToastTimer)
+  ;(el as HTMLElement & { __twToastTimer?: number }).__twToastTimer = window.setTimeout(() => {
+    el?.classList.remove('dsh-tw-toast-show')
+  }, 2_500)
+}