dsh-tiddlywiki 0.4.0 → 0.6.0

package/src/client/panel.ts

@@ -10,10 +10,13 @@
  * Toggling rides the shared PanelState; cross-plugin exclusivity rides the
  * `dsh-panel-activate` event (same protocol as dsh-taskboard).
  *
- * The iframe points DIRECTLY at the TW service (http://127.0.0.1:<port>),
- * bypassing reverse-proxy sensitivity (design doc R1 — proxy is only a
- * fallback). The panel reads /status first and only sets iframe.src when the
- * service is actually running.
+ * The iframe points at the SAME-ORIGIN TW proxy (`<origin>/dsh-tiddlywiki/tw/`,
+ * remote-access mode R1): the browser only talks to the DSH origin — which it
+ * already reaches over loopback, LAN, Tailscale, a domain or HTTPS — and DSH
+ * proxies to the loopback TW child. The panel reads /status first and only
+ * sets iframe.src when the service is actually running. Because the proxy URL
+ * is origin-relative and port-independent, a TW restart never reloads the
+ * iframe, so an in-progress edit keeps its unsaved state.
  *
  * @module dsh-tiddlywiki/client/panel
  */
@@ -76,6 +79,8 @@ interface StatusPayload {
   ok?: boolean
   status: string
   url?: string
+  /** Same-origin TW proxy path (e.g. /dsh-tiddlywiki/tw/); the iframe base. */
+  twProxy?: string
   wikiPath?: string
   error?: string
   note?: { tag?: string }
@@ -115,9 +120,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 +145,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 +234,24 @@ 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', '在线')
+    if (payload.status === 'running') {
       refreshAttempts = 0
-      showFrame(payload.url)
+      // Same-origin proxy URL: build from the page's own origin so it works no
+      // matter which host/domain the user reached DSH on. Fall back to the
+      // legacy loopback `url` for older servers that do not send twProxy.
+      if (typeof payload.twProxy === 'string') {
+        showFrame(new URL(payload.twProxy, window.location.origin).href)
+      } else if (typeof payload.url === 'string') {
+        showFrame(payload.url)
+      } else {
+        showError('服务未返回编辑器地址')
+      }
       return
     }
     if (payload.status === 'starting') {
-      setChip('starting', '启动中')
       showStarting()
       // Auto-poll while starting (bounded).
       if (refreshAttempts < 30) {
@@ -294,7 +260,6 @@ export function mountPanel(state: PanelState): () => void {
       }
       return
     }
-    setChip('failed', '离线')
     refreshAttempts = 0
     showError(payload.error ?? `服务状态：${payload.status}`)
   }
@@ -347,12 +312,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 +327,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);
@@ -344,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 {