@fonlan/dsh-quick-commands 0.1.4 → 0.1.6

package/src/client/locales.ts

@@ -37,10 +37,10 @@ export const zh = {
   runLost: '运行记录已失效',
   runNotFound: '工作区或命令未找到',
 
-  // settings card
+  // settings page (设置 → 侧栏「快捷命令」)
+  settingsTitle: '快捷命令',
   cardTitle: '快速命令',
-  cardDescription: '为每个工作区配置常用命令，会话头部一键运行',
-  collapseOrExpand: '展开 / 收起',
+  sectionSub: '为每个工作区配置常用命令，会话头部一键运行',
   cardIntro: '为每个工作区配置常用命令，运行于工作区目录。支持占位符：{workspace} 工作区路径，{cwd} 会话目录，{title} 工作区标题。',
   cardWorkspaces: '工作区',
   cardNoWorkspaces: '没有工作区。请在侧边栏先添加工作区。',
@@ -54,9 +54,9 @@ export const zh = {
   cardAnchor: '输出弹窗位置',
   cardAnchorCorner: '右下角',
   cardAnchorButton: '锚定按钮下方',
-}
+} as const
 
-export const en = {
+export const en: Record<keyof typeof zh, string> = {
   buttonTitle: 'Quick commands',
   buttonTooltip: 'Quick commands (current workspace)',
   noWorkspace: 'This session is not in any configured workspace',
@@ -87,9 +87,9 @@ export const en = {
   runLost: 'Run record expired',
   runNotFound: 'Workspace or command not found',
 
+  settingsTitle: 'Quick Commands',
   cardTitle: 'Quick commands',
-  cardDescription: 'Configure common commands per workspace, run them from the session header',
-  collapseOrExpand: 'Expand / collapse',
+  sectionSub: 'Configure common commands per workspace, run them from the session header',
   cardIntro: 'Configure common commands per workspace; they run in the workspace directory. Placeholders: {workspace} workspace path, {cwd} session cwd, {title} workspace title.',
   cardWorkspaces: 'Workspaces',
   cardNoWorkspaces: 'No workspaces. Add one in the sidebar first.',

package/src/client/quick-commands.css

@@ -370,196 +370,6 @@
   opacity: 1;
 }
 
-/* ── settings card (设置 → 插件配置) — mirrors official PluginCard disclosure ── */
-.qc-settings-card {
-  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
-  background: var(--dsw-alias-bg-layer-2, #1f1f21);
-  border-radius: 12px;
-  list-style: none;
-  transition: border-color .16s, background .16s;
-}
-.qc-settings-card:hover {
-  border-color: var(--dsw-alias-label-secondary, #cfd3d6);
-}
-.qc-settings-card-open {
-  background: var(--dsw-alias-bg-layer-1, #27272a);
-  border-color: var(--dsw-alias-label-secondary, #cfd3d6);
-}
-.qc-settings-header {
-  appearance: none;
-  width: 100%;
-  font: inherit;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 12px;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
-  display: flex;
-}
-.qc-settings-header:focus-visible {
-  outline: 2px solid var(--dsw-alias-brand-primary, #4a9eff);
-  outline-offset: -2px;
-}
-.qc-settings-head-text {
-  flex-direction: column;
-  flex: 1;
-  gap: 4px;
-  min-width: 0;
-  display: flex;
-}
-.qc-settings-name {
-  color: var(--dsw-alias-label-primary, #f2f2f2);
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.4;
-}
-.qc-settings-description {
-  color: var(--dsw-alias-label-secondary, #cfd3d6);
-  font-size: 13px;
-  line-height: 1.5;
-}
-.qc-settings-chevron {
-  color: var(--dsw-alias-label-secondary, #cfd3d6);
-  flex: none;
-  transition: transform .16s;
-}
-.qc-settings-chevron-open {
-  transform: rotate(180deg);
-}
-.qc-settings-body {
-  border-top: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
-  margin: 0 16px;
-  padding-bottom: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.qc-settings-intro {
-  font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #cfd3d6);
-  margin: 8px 0 0;
-  line-height: 1.5;
-}
-.qc-settings-anchor {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 12px;
-}
-.qc-settings-anchor-label {
-  color: var(--dsw-alias-label-primary, #f2f2f2);
-  font-weight: 500;
-}
-.qc-settings-radio {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--dsw-alias-label-secondary, #cfd3d6);
-  cursor: pointer;
-}
-.qc-settings-error {
-  font-size: 12px;
-  color: var(--dsw-alias-state-error-primary, #e5484d);
-}
-.qc-settings-empty {
-  font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #cfd3d6);
-  margin: 0;
-}
-.qc-settings-workspace {
-  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
-  border-radius: 10px;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.qc-settings-workspace-head {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
-.qc-settings-workspace-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--dsw-alias-label-primary, #f2f2f2);
-}
-.qc-settings-workspace-path {
-  font-size: 11px;
-  font-family: var(--dsw-font-family-mono, monospace);
-  color: var(--dsw-alias-label-tertiary, #adb2b8);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.qc-settings-no-commands {
-  font-size: 12px;
-  color: var(--dsw-alias-label-tertiary, #adb2b8);
-  margin: 0;
-}
-.qc-settings-command {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-.qc-settings-field {
-  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-1, #2a2a2d);
-  color: var(--dsw-alias-label-primary, #f2f2f2);
-  font-size: 12px;
-  padding: 6px 8px;
-  outline: none;
-}
-.qc-settings-field::placeholder {
-  color: var(--dsw-alias-label-tertiary, #adb2b8);
-}
-.qc-settings-field:focus {
-  border-color: var(--dsw-alias-brand-primary, #4a9eff);
-}
-.qc-settings-field-name {
-  width: 160px;
-  flex: none;
-}
-.qc-settings-field-command {
-  flex: 1;
-  font-family: var(--dsw-font-family-mono, monospace);
-}
-.qc-settings-icon-btn {
-  border: 0;
-  background: transparent;
-  color: var(--dsw-alias-label-tertiary, #adb2b8);
-  cursor: pointer;
-  padding: 4px;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 6px;
-}
-.qc-settings-icon-btn:hover {
-  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
-  color: var(--dsw-alias-state-error-primary, #e5484d);
-}
-.qc-settings-add-btn {
-  align-self: flex-start;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
-  border-radius: 8px;
-  background: transparent;
-  color: var(--dsw-alias-label-primary, #f2f2f2);
-  font-size: 12px;
-  padding: 4px 10px;
-  cursor: pointer;
-}
-.qc-settings-add-btn:hover {
-  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
-}
-
 /* ── mobile fallback (dsh-mobile-nav) ──────────────────────────────────────
    The dsh-mobile-nav plugin (≤1023px) hides the ENTIRE header utilities seat
    with `[data-mobile-nav="frame"] [data-phase] header > :first-child >
@@ -581,3 +391,28 @@
   [data-slot="conversation.session.header.utilities"] > :not(.qc-head-wrap) {
   display: none !important;
 }
+
+/* ── viewport-level command menu ─────────────────────────────────────────
+   The phone shell's nav rail creates a sibling stacking context and its
+   center column can clip header descendants. The React menu therefore mounts
+   in document.body; these styles deliberately detach it from that header
+   context. Pixel coordinates (including the 56px rail exclusion) are set by
+   positionMenu() in header.tsx. */
+.qc-menu-portal {
+  position: fixed;
+  right: auto;
+  z-index: 1100;
+  box-sizing: border-box;
+  max-height: min(420px, calc(100dvh - 72px));
+}
+
+@media (max-width: 767px) {
+  /* A 44px target lets a fingertip reliably activate both the stop and close
+     buttons without changing the desktop header density. */
+  body[data-dsh-mobile] .qc-popup-icon,
+  [data-mobile-nav="frame"] .qc-popup-icon {
+    min-width: 44px;
+    min-height: 44px;
+    justify-content: center;
+  }
+}

package/src/client/settings-section.css

@@ -0,0 +1,163 @@
+/**
+ * Styles for the quick-commands settings page.
+ *
+ * The page occupies the settings panel content column: a static header
+ * (title plus a one-line summary) over the always-visible command editor.
+ * Inner controls follow the built-in settings language.
+ */
+
+/* page layout */
+
+.qc-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 720px;
+}
+.qc-page-head {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.qc-page-title {
+  margin: 0;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.qc-page-sub {
+  margin: 0;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* body: workspace / command-set editor */
+
+.qc-settings-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.qc-settings-intro {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  margin: 0;
+  line-height: 1.5;
+}
+.qc-settings-anchor {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+}
+.qc-settings-anchor-label {
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-weight: 500;
+}
+.qc-settings-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  cursor: pointer;
+}
+.qc-settings-error {
+  font-size: 12px;
+  color: var(--dsw-alias-state-error-primary, #e5484d);
+}
+.qc-settings-empty {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  margin: 0;
+}
+.qc-settings-workspace {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.qc-settings-workspace-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.qc-settings-workspace-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+}
+.qc-settings-workspace-path {
+  font-size: 11px;
+  font-family: var(--dsw-font-family-mono, monospace);
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.qc-settings-no-commands {
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  margin: 0;
+}
+.qc-settings-command {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.qc-settings-field {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-1, #2a2a2d);
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-size: 12px;
+  padding: 6px 8px;
+  outline: none;
+}
+.qc-settings-field::placeholder {
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+}
+.qc-settings-field:focus {
+  border-color: var(--dsw-alias-brand-primary, #4a9eff);
+}
+.qc-settings-field-name {
+  width: 160px;
+  flex: none;
+}
+.qc-settings-field-command {
+  flex: 1;
+  font-family: var(--dsw-font-family-mono, monospace);
+}
+.qc-settings-icon-btn {
+  border: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  cursor: pointer;
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+}
+.qc-settings-icon-btn:hover {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
+  color: var(--dsw-alias-state-error-primary, #e5484d);
+}
+.qc-settings-add-btn {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-size: 12px;
+  padding: 4px 10px;
+  cursor: pointer;
+}
+.qc-settings-add-btn:hover {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
+}

package/src/client/settings-section.tsx

@@ -0,0 +1,195 @@
+/**
+ * Quick-commands settings page (设置 → 侧栏「快捷命令」).
+ *
+ * Registers into the "settings.section" list slot, so the page owns one entry
+ * in the settings sidebar and renders in the settings panel's content column.
+ * The header is static (title + one-line summary) over the always-visible
+ * body: the workspace / command-set editor and the popup anchor preference.
+ * Body edits instant-save per change; partial rows (empty name/command)
+ * persist while the user types.
+ */
+import { useEffect, useRef, useState } from 'react'
+import {
+  IconPlusOutline16,
+  IconTrashOutline16,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import { quickApi } from './api'
+import type { QuickRosterEntry, QuickCommandsSettings } from '../shared/contract'
+import './settings-section.css'
+
+interface Props {
+  t: (key: string) => string
+}
+
+interface RosterState {
+  loaded: boolean
+  entries: QuickRosterEntry[]
+  anchor: QuickCommandsSettings['popupAnchor']
+}
+
+type CommandDraft = { name: string; command: string }
+
+export function QuickCommandsSettingsSection({ t }: Props): JSX.Element {
+  const [state, setState] = useState<RosterState>({ loaded: false, entries: [], anchor: 'corner' })
+  const [error, setError] = useState<string | null>(null)
+  // Guard concurrent saves: the last write wins via a monotonically bumped token.
+  const saveToken = useRef(0)
+
+  const load = async (): Promise<void> => {
+    try {
+      const [entries, settings] = await Promise.all([quickApi.workspacesList(), quickApi.settingsGet()])
+      setState({ loaded: true, entries, anchor: settings.popupAnchor })
+      setError(null)
+    } catch (e) {
+      setState((s) => ({ ...s, loaded: true }))
+      setError(e instanceof Error ? e.message : String(e))
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  /** Instant-save the workspace's whole command set; optimistic UI. */
+  const saveCommands = async (workspaceId: string, commands: CommandDraft[]): Promise<void> => {
+    const token = ++saveToken.current
+    try {
+      const next = await quickApi.settingsSetCommands(workspaceId, commands)
+      if (token !== saveToken.current) return
+      setState((s) => ({
+        ...s,
+        anchor: next.popupAnchor,
+        entries: s.entries.map((e) => (e.workspaceId === workspaceId ? { ...e, commands } : e)),
+      }))
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+      // Re-sync to server truth on failure.
+      void load()
+    }
+  }
+
+  /** Compute the next command list for a workspace, THEN save + update state. */
+  const mutateCommands = (workspaceId: string, next: (current: CommandDraft[]) => CommandDraft[]): void => {
+    const entry = state.entries.find((e) => e.workspaceId === workspaceId)
+    if (entry === undefined) return
+    const commands = next(entry.commands)
+    // Optimistic update first (row stays visible immediately), then persist.
+    setState((s) => ({
+      ...s,
+      entries: s.entries.map((e) => (e.workspaceId === workspaceId ? { ...e, commands } : e)),
+    }))
+    void saveCommands(workspaceId, commands)
+  }
+
+  const patchEntry = (workspaceId: string, index: number, field: 'name' | 'command', value: string): void => {
+    mutateCommands(workspaceId, (current) =>
+      current.map((c, i) => (i === index ? { ...c, [field]: value } : c)),
+    )
+  }
+
+  const addCommand = (workspaceId: string): void => {
+    mutateCommands(workspaceId, (current) => [...current, { name: '', command: '' }])
+  }
+
+  const removeCommand = (workspaceId: string, index: number): void => {
+    mutateCommands(workspaceId, (current) => current.filter((_, i) => i !== index))
+  }
+
+  const setAnchor = async (anchor: QuickCommandsSettings['popupAnchor']): Promise<void> => {
+    setState((s) => ({ ...s, anchor }))
+    try {
+      const next = await quickApi.settingsSetAnchor(anchor)
+      setState((s) => ({ ...s, anchor: next.popupAnchor }))
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+      void load()
+    }
+  }
+
+  const title = t('cardTitle')
+  const description = t('sectionSub')
+
+  return (
+    <div className="qc-page">
+      <header className="qc-page-head">
+        <h3 className="qc-page-title">{title}</h3>
+        <p className="qc-page-sub">{description}</p>
+      </header>
+      <div className="qc-settings-body">
+        <p className="qc-settings-intro">{t('cardIntro')}</p>
+
+        <div className="qc-settings-anchor">
+          <span className="qc-settings-anchor-label">{t('cardAnchor')}</span>
+          <label className="qc-settings-radio">
+            <input
+              type="radio"
+              name="qc-anchor"
+              checked={state.anchor === 'corner'}
+              onChange={() => void setAnchor('corner')}
+            />
+            {t('cardAnchorCorner')}
+          </label>
+          <label className="qc-settings-radio">
+            <input
+              type="radio"
+              name="qc-anchor"
+              checked={state.anchor === 'button'}
+              onChange={() => void setAnchor('button')}
+            />
+            {t('cardAnchorButton')}
+          </label>
+        </div>
+
+        {error !== null && <div className="qc-settings-error">{t('cardSaveError')}: {error}</div>}
+
+        {state.loaded && state.entries.length === 0 && (
+          <p className="qc-settings-empty">{t('cardNoWorkspaces')}</p>
+        )}
+
+        {state.entries.map((entry) => (
+          <section key={entry.workspaceId} className="qc-settings-workspace">
+            <header className="qc-settings-workspace-head">
+              <span className="qc-settings-workspace-title">{entry.title || entry.path || entry.workspaceId}</span>
+              <span className="qc-settings-workspace-path">{entry.path}</span>
+            </header>
+            {entry.commands.length === 0 && (
+              <p className="qc-settings-no-commands">{t('cardNoCommands')}</p>
+            )}
+            {entry.commands.map((command, index) => (
+              <div key={`${entry.workspaceId}-${index}`} className="qc-settings-command">
+                <input
+                  className="qc-settings-field qc-settings-field-name"
+                  placeholder={t('cardName')}
+                  value={command.name}
+                  aria-label={t('cardName')}
+                  onChange={(e) => patchEntry(entry.workspaceId, index, 'name', e.target.value)}
+                />
+                <input
+                  className="qc-settings-field qc-settings-field-command"
+                  placeholder={t('cardCommand')}
+                  value={command.command}
+                  aria-label={t('cardCommand')}
+                  onChange={(e) => patchEntry(entry.workspaceId, index, 'command', e.target.value)}
+                />
+                <button
+                  type="button"
+                  className="qc-settings-icon-btn"
+                  aria-label={t('cardRemove')}
+                  title={t('cardRemove')}
+                  onClick={() => removeCommand(entry.workspaceId, index)}
+                >
+                  <IconTrashOutline16 size={14} />
+                </button>
+              </div>
+            ))}
+            <button type="button" className="qc-settings-add-btn" onClick={() => addCommand(entry.workspaceId)}>
+              <IconPlusOutline16 size={14} />
+              {t('cardAddCommand')}
+            </button>
+          </section>
+        ))}
+      </div>
+    </div>
+  )
+}