feat: workspace select menu

2026-07-24 16:09:58 +08:00
parent 06143b1a86
commit 6f5321cb37
26 changed files with 890 additions and 187 deletions
--- a/packages/client/ui-conversation/src/client/apply.ts
+++ b/packages/client/ui-conversation/src/client/apply.ts
@@ -160,6 +160,10 @@ export function apply(ctx: Context): void {
        if (conversation === undefined) throw new Error('ui-conversation: conversation service unavailable')
        return conversation.startSession(opts)
      },
+      createWorkspaceSession: async (name) => {
+        const id = await sessions.createWorkspace(name)
+        sessions.open(id)
+      },
    }),
  }, EmptyState)
 }
--- a/packages/client/ui-conversation/src/client/contract/slots.ts
+++ b/packages/client/ui-conversation/src/client/contract/slots.ts
@@ -164,6 +164,11 @@ export type DetailsSlotProps = PropsRuntime<'details'> & PropsStore<ChatStore> &
 export interface EmptyStateInjected {
  /** The create → navigate → first-send chain, in one service call. */
  startSession(opts: { cwd?: string; text: string; mode: 'queue' | 'steer' }): Promise<void>
+  /**
+   * Create a workspace folder under the host cwd, mint a session there, and
+   * open it (Create-new modal success path).
+   */
+  createWorkspaceSession(name: string): Promise<void>
 }

 /** Full empty-state component props (root slot: no store; cwd options derive from useSessions in-component). */
--- a/packages/client/ui-conversation/src/client/skeleton/EmptyState.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/EmptyState.module.css
@@ -1,6 +1,6 @@
-/* NEW SESSION hero (figma 313:14149): fish + title, workspace chip above the
-   shared InputBar card. The input itself is InputBar — only stack geometry
-   lives here. */
+/* NEW SESSION hero (figma Input_Bottom 75:8208): fish + title, workspace chip
+   above the shared InputBar card. The input itself is InputBar — only stack
+   geometry and the chip live here. */

 .root {
  display: flex;
@@ -11,23 +11,26 @@
  padding: 24px;
 }

-/* Cap matches InputBar card width (776). Glow may paint past the sides. */
+/* Cap matches InputBar card width (800). Glow may paint past the sides. */
 .stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
-  gap: 40px;
+  /* figma 75:8208: 12 between title block / workspace / card. */
+  gap: 12px;
  width: 100%;
-  max-width: 776px;
+  max-width: 800px;
  overflow: visible;
 }

-/* figma 34:10411: fish + title, gap 10, centered; 26/32 wt600. */
+/* figma 34:10411: fish + title, gap 10, centered; 26/32 wt600; title block
+   keeps 36px below the headline before the flex gap. */
 .headline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
+  padding-bottom: 36px;
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
@@ -68,38 +71,43 @@
  z-index: 1;
 }

-.workspaceRow {
+/* Must beat `.body > :not(.glow)` specificity so the open Menu (and its
+   right-hand submenu) paints above the InputBar card. */
+.body > .workspaceRow {
+  z-index: 10;
  display: flex;
  align-items: center;
  min-width: 0;
-  /* Align with InputBar's left chrome (card pad 10 + attach). */
-  padding-left: 10px;
+  /* figma 75:8208 workspace row: px 8 above the card. */
+  padding-left: 8px;
 }

-/* Folder + "New Workspace" + chevron (figma workspace trigger). */
+/* Folder + label + chevron — transparent at rest; fill only on hover / open. */
 .workspace {
  display: inline-flex;
  align-items: center;
-  gap: 6px;
+  gap: 4px;
  max-width: 100%;
-  height: 28px;
-  padding: 0 4px 0 0;
+  min-height: 28px;
+  padding: 0 8px;
  border: none;
-  border-radius: 8px;
+  border-radius: 12px;
  background: transparent;
  color: var(--dsw-alias-label-primary);
-  font-size: 14px;
+  font-size: 13px;
  line-height: 20px;
+  font-weight: 500;
  cursor: pointer;
 }

-.workspace:hover {
+.workspace:hover,
+.workspace[aria-expanded='true'] {
  background: var(--dsw-alias-interactive-bg-hover);
 }

 .folder {
  flex: none;
-  color: var(--dsw-alias-label-tertiary);
+  color: var(--dsw-alias-label-primary);
 }

 .workspaceLabel {
@@ -113,19 +121,44 @@
  color: var(--dsw-alias-label-caption);
 }

-.customInput {
-  width: min(320px, 100%);
-  height: 28px;
-  padding: 0 10px;
-  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
-  border-radius: 8px;
+/* Workspace menu width tracks the longest basename in the Figma frame. */
+.workspaceMenu :global([role='menu']) {
+  min-width: 240px;
+}
+
+/* Dialog field (figma 451:18655 Input): h44, r22, px 14, caption placeholder. */
+.modalInput {
+  width: 100%;
+  height: 44px;
+  padding: 0 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 22px;
  outline: none;
-  background: var(--dsw-alias-bg-base);
+  background: transparent;
  font-size: 14px;
-  line-height: 20px;
+  line-height: 24px;
  color: var(--dsw-alias-label-primary);
 }

-.customInput:focus {
+.modalInput::placeholder {
+  color: var(--dsw-alias-label-caption);
+}
+
+.modalInput:focus {
  border-color: var(--dsw-alias-state-business-primary);
 }
+
+.modalInput:disabled {
+  color: var(--dsw-alias-label-dimmed);
+}
+
+.modalAction {
+  min-width: 72px;
+}
+
+.modalError {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-state-error-primary);
+}
--- a/packages/client/ui-conversation/src/client/skeleton/EmptyState.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/EmptyState.tsx
@@ -1,16 +1,21 @@
 // EmptyState (figma NEW SESSION screen): centered hero — fish + title,
-// workspace picker row, then the SAME InputBar the resident composer uses
-// (empty→content is a position move, never a swap). Project picker: cwd set
-// derived in-component from useSessions plus a free-form new-directory path;
-// submit runs startSession (create → open → send).
+// workspace picker row (MenuDropdown 122:9481 + New Workspace submenu
+// 419:16920 + Dialog 451:18655), then the SAME InputBar the resident
+// composer uses (empty→content is a position move, never a swap). Project
+// options derive in-component from useSessions; Create new runs
+// createWorkspaceSession (host mkdir + session.create + open).

 import { useId, useMemo, useState } from 'react'
 import {
+  Button,
  FishLogo,
  IconChevronDownOutline14,
+  IconFolderClose16,
  IconFolderOpen16,
+  IconPlusOutline16,
  Menu,
-  type MenuItem,
+  Modal,
+  type MenuEntry,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SessionListState } from '@deepseek-ai/dsh-client-runtime/client'
 import type { EmptyStateSlotProps } from '../contract/slots.ts'
@@ -18,10 +23,15 @@ import { InputBar } from './InputBar.tsx'
 import type { InputBarError } from './InputBar.tsx'
 import css from './EmptyState.module.css'

-/** Menu id for the free-form directory entry (not a filesystem path). */
-const NEW_DIR = '::new-directory'
-/** Menu id for the host default project directory (empty cwd on create). */
-const DEFAULT_DIR = '::default'
+/** Menu id for "New Workspace" (opens submenu; not a cwd). */
+const NEW_WORKSPACE = '::new-workspace'
+/** Submenu: path modal (figma 451:18655 copy). */
+const USE_EXISTING = '::use-existing'
+/** Submenu: create-workspace modal → mkdir + default session. */
+const CREATE_NEW = '::create-new'
+
+/** Which full-page dialog is open (null = none). */
+type ModalKind = 'path' | 'create' | null

 /** Full props composed by reference from the contract (runtime share & injected share; no store). */
 export type EmptyStateProps = EmptyStateSlotProps
@@ -36,22 +46,26 @@ function deriveCwds(state: SessionListState): readonly string[] {
  return [...seen]
 }

-/** Basename for the workspace chip; empty → the design's "New Workspace" label. */
+/** Basename for the workspace chip / menu row; empty → the design's "New Workspace" label. */
 function workspaceLabel(cwd: string): string {
  if (cwd === '') return 'New Workspace'
  const base = cwd.replace(/[/\\]+$/, '').split(/[/\\]/).pop()
  return base !== undefined && base !== '' ? base : cwd
 }

-export function EmptyState({ useSessions, startSession }: EmptyStateProps) {
+export function EmptyState({ useSessions, startSession, createWorkspaceSession }: EmptyStateProps) {
  const list = useSessions(s => s)
  const cwds = useMemo(() => deriveCwds(list), [list])
  // Local viewing state: the empty state owns no session, so its draft is
  // ephemeral by design (drafts are keyed by session id; there is none yet).
  const [draft, setDraft] = useState('')
  const [cwd, setCwd] = useState('')
-  const [custom, setCustom] = useState(false)
  const [menuOpen, setMenuOpen] = useState(false)
+  const [modalKind, setModalKind] = useState<ModalKind>(null)
+  const [pathDraft, setPathDraft] = useState('')
+  const [workspaceName, setWorkspaceName] = useState('New WorkSpace')
+  const [creating, setCreating] = useState(false)
+  const [modalError, setModalError] = useState<string | null>(null)
  const [sending, setSending] = useState(false)
  const [error, setError] = useState<InputBarError | null>(null)
  // Stable filter id so multiple EmptyState mounts do not collide in the DOM.
@@ -74,59 +88,64 @@ export function EmptyState({ useSessions, startSession }: EmptyStateProps) {
    // Success needs no cleanup: the session selection swaps this slot out for the session body.
  }

-  const items: MenuItem[] = [
-    { id: DEFAULT_DIR, label: 'Default directory' },
-    ...cwds.map(c => ({ id: c, label: c })),
-    { id: NEW_DIR, label: 'New directory…' },
+  const items: MenuEntry[] = [
+    ...cwds.map(c => ({
+      id: c,
+      label: workspaceLabel(c),
+      icon: <IconFolderClose16 size={16} />,
+    })),
+    ...(cwds.length > 0 ? [{ type: 'separator' as const, id: 'sep-new' }] : []),
+    {
+      id: NEW_WORKSPACE,
+      label: 'New Workspace',
+      icon: <IconPlusOutline16 size={16} />,
+      submenu: [
+        { id: USE_EXISTING, label: 'Use a existing folder' },
+        { id: CREATE_NEW, label: 'Create new' },
+      ],
+    },
  ]
-  const selectedId = custom ? NEW_DIR : cwd === '' ? DEFAULT_DIR : cwd

-  const workspace = custom
-    ? (
-        <input
-          className={css.customInput}
-          value={cwd}
-          autoFocus
-          aria-label="项目目录"
-          placeholder="Directory path, e.g. /home/me/proj"
-          onChange={(e) => { setCwd(e.target.value) }}
-        />
-      )
-    : (
-        <Menu
-          open={menuOpen}
-          onClose={() => { setMenuOpen(false) }}
-          selectedId={selectedId}
-          items={items}
-          onSelect={(id) => {
-            if (id === NEW_DIR) {
-              setCustom(true)
-              setCwd('')
-            } else if (id === DEFAULT_DIR) {
-              setCustom(false)
-              setCwd('')
-            } else {
-              setCustom(false)
-              setCwd(id)
-            }
-            setMenuOpen(false)
-          }}
-          anchor={(
-            <button
-              type="button"
-              className={css.workspace}
-              aria-label="项目目录"
-              aria-haspopup="menu"
-              aria-expanded={menuOpen}
-              onClick={() => { setMenuOpen(!menuOpen) }}
-            >
-              <IconFolderOpen16 className={css.folder} size={16} />
-              <span className={css.workspaceLabel}>{workspaceLabel(cwd)}</span>
-              <IconChevronDownOutline14 className={css.chevron} size={14} />
-            </button>
-          )}
-        />
-      )
+  const closeModal = (): void => {
+    if (creating) return
+    setModalKind(null)
+    setModalError(null)
+  }
+
+  const openPathModal = (): void => {
+    setPathDraft(cwd)
+    setModalError(null)
+    setModalKind('path')
+  }
+
+  const openCreateModal = (): void => {
+    setWorkspaceName('New WorkSpace')
+    setModalError(null)
+    setModalKind('create')
+  }
+
+  const confirmPath = (): void => {
+    const next = pathDraft.trim()
+    if (next === '') return
+    setCwd(next)
+    setModalKind(null)
+  }
+
+  const confirmCreate = (): void => {
+    if (creating) return
+    setCreating(true)
+    setModalError(null)
+    createWorkspaceSession(workspaceName)
+      .catch((reason: unknown) => {
+        setModalError(reason instanceof Error ? reason.message : String(reason))
+        setCreating(false)
+      })
+    // Success swaps this slot out for the new session body — no local cleanup.
+  }
+
+  const modalBusy = creating
+  const isPath = modalKind === 'path'
+  const isCreate = modalKind === 'create'

  return (
    <div className={css.root}>
@@ -138,7 +157,8 @@ export function EmptyState({ useSessions, startSession }: EmptyStateProps) {
        </div>
        <div className={css.body}>
          {/* figma 313:14109: soft ellipse behind workspace + InputBar; width
-              tracks the card (1051/776) so blur scales in userSpace with it. */}
+              tracks the card (glow asset 1051 vs design card 776) so blur
+              scales in userSpace with it. */}
          <svg className={css.glow} viewBox="0 0 1051 468" fill="none" aria-hidden="true">
            <defs>
              <filter
@@ -159,7 +179,44 @@ export function EmptyState({ useSessions, startSession }: EmptyStateProps) {
              <ellipse cx="525.5" cy="234" rx="425.5" ry="134" fill="#6187D8" fillOpacity="0.1" />
            </g>
          </svg>
-          <div className={css.workspaceRow}>{workspace}</div>
+          <div className={css.workspaceRow}>
+            <Menu
+              open={menuOpen}
+              onClose={() => { setMenuOpen(false) }}
+              {...(cwd !== '' ? { selectedId: cwd } : {})}
+              items={items}
+              side="top"
+              className={css.workspaceMenu!}
+              onSelect={(id) => {
+                if (id === USE_EXISTING) {
+                  setMenuOpen(false)
+                  openPathModal()
+                  return
+                }
+                if (id === CREATE_NEW) {
+                  setMenuOpen(false)
+                  openCreateModal()
+                  return
+                }
+                setCwd(id)
+                setMenuOpen(false)
+              }}
+              anchor={(
+                <button
+                  type="button"
+                  className={css.workspace}
+                  aria-label="项目目录"
+                  aria-haspopup="menu"
+                  aria-expanded={menuOpen}
+                  onClick={() => { setMenuOpen(!menuOpen) }}
+                >
+                  <IconFolderOpen16 className={css.folder} size={16} />
+                  <span className={css.workspaceLabel}>{workspaceLabel(cwd)}</span>
+                  <IconChevronDownOutline14 className={css.chevron} size={12} />
+                </button>
+              )}
+            />
+          </div>
          <InputBar
            draft={draft}
            running={false}
@@ -174,6 +231,75 @@ export function EmptyState({ useSessions, startSession }: EmptyStateProps) {
          />
        </div>
      </div>
+      <Modal
+        open={isPath}
+        onClose={closeModal}
+        title="Enter an existing folder path"
+        footer={(
+          <>
+            <Button variant="outline" className={css.modalAction!} onClick={closeModal}>Cancel</Button>
+            <Button
+              variant="primary"
+              className={css.modalAction!}
+              disabled={pathDraft.trim() === ''}
+              onClick={confirmPath}
+            >
+              Open Folder
+            </Button>
+          </>
+        )}
+      >
+        <input
+          className={css.modalInput}
+          value={pathDraft}
+          aria-label="Folder path"
+          autoFocus
+          placeholder="ex. User/Documents/Harness/Space"
+          onChange={(e) => { setPathDraft(e.target.value) }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              confirmPath()
+            }
+          }}
+        />
+      </Modal>
+      <Modal
+        open={isCreate}
+        onClose={closeModal}
+        title="Create new workspace"
+        footer={(
+          <>
+            <Button variant="outline" className={css.modalAction!} disabled={modalBusy} onClick={closeModal}>
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              className={css.modalAction!}
+              disabled={modalBusy || workspaceName.trim() === ''}
+              onClick={confirmCreate}
+            >
+              Create
+            </Button>
+          </>
+        )}
+      >
+        <input
+          className={css.modalInput}
+          value={workspaceName}
+          aria-label="Workspace name"
+          autoFocus
+          disabled={modalBusy}
+          onChange={(e) => { setWorkspaceName(e.target.value) }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              confirmCreate()
+            }
+          }}
+        />
+        {modalError !== null && <div className={css.modalError} role="alert">{modalError}</div>}
+      </Modal>
    </div>
  )
 }
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
@@ -1,7 +1,7 @@
-/* Floating capsule input (figma Input_Bottom 34:11445): card floats above the
+/* Floating capsule input (figma Input_Bottom 75:8208): card floats above the
   viewport bottom inside the centered message column; textarea on top, action
   row below, one primary circle button bottom-right. Input width rides the
-   column (776 is a cap, not a fixed size — layout rule: the box shrinks with
+   column (800 is a cap, not a fixed size — layout rule: the box shrinks with
   the center column keeping its padding). Hero variant = the same card
   centered in the empty state; the transition between the two is a position
   move of one component. */
@@ -10,8 +10,8 @@
  display: flex;
  flex-direction: column;
  align-items: center;
-  /* figma Input_Bottom 34:11445: pad L32/R32/B12; the bottom gradient mask is
-     owned by the chat scroller. Top 8 hosts the error strip's breathing room. */
+  /* figma Input_Bottom: pad L32/R32/B12; the bottom gradient mask is owned by
+     the chat scroller. Top 8 hosts the error strip's breathing room. */
  padding: 8px 32px 12px;
 }

@@ -21,7 +21,7 @@

 .error {
  width: 100%;
-  max-width: 776px;
+  max-width: 800px;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 8px;
@@ -34,10 +34,12 @@
 .card {
  display: flex;
  flex-direction: column;
-  /* figma Input 34:11458: 12px between the text area and the button row. */
+  /* figma Input 75:8208: 12px between the text area and the button row; 10px
+     top pad on the card before .InputText. */
  gap: 12px;
  width: 100%;
-  max-width: 776px;
+  max-width: 800px;
+  padding-top: 10px;
  /* Input stroke: black/0.10 light, white/0.06 dark (figma darkmode note says
     the input border is one notch weaker than buttons) — exactly the
     l2-darkmode-thin pair. Fill: the input surface token (elevated in dark). */
@@ -49,11 +51,6 @@
  line-height: 24px;
 }

-/* New-session state rounds up (figma: r24 and a taller box). */
-.hero .card {
-  border-radius: 24px;
-}
-
 .accessory {
  display: flex;
  align-items: center;
@@ -85,7 +82,8 @@

 .input,
 .mirror {
-  padding: 12px 16px 0;
+  /* figma .InputText 34:10434: pl 16 / pr 12 / pt 4. */
+  padding: 4px 12px 0 16px;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
@@ -108,17 +106,12 @@
 .mirror {
  visibility: hidden;
  pointer-events: none;
-  /* 2-line floor: 2 × 24px line + 12px top padding; 14-line cap (336px). */
-  min-height: 60px;
+  /* figma min-h 52 (= ~2 × 24 line + 4pt); 14-line cap (336px). */
+  min-height: 52px;
  max-height: 336px;
  overflow: hidden;
 }

-.hero .mirror {
-  /* New-session box is taller at rest (figma 118px input area). */
-  min-height: 84px;
-}
-
 /* Toolbar: attach + Plan + Read-only on the left; model + send on the right
   (figma Input_Bottom chrome). */
 .row {
@@ -131,16 +124,25 @@
 }

 .tools,
+.modes,
 .trailing {
  display: flex;
  align-items: center;
-  gap: 4px;
  min-width: 0;
 }

+/* figma 75:8208: 16 between + and the mode chips; 4 between Plan / Read-only. */
+.tools {
+  gap: 16px;
+}
+
+.modes {
+  gap: 4px;
+}
+
 .trailing {
  flex: none;
-  gap: 8px;
+  gap: 12px;
 }

 /* Attach circle (figma + control): 28px, selector fill, primary glyph. */
@@ -166,22 +168,24 @@
  cursor: default;
 }

-/* Plan / Read-only / model — native <select>, chip-like closed chrome. */
+/* Plan / Read-only / model — native <select>, chip-like closed chrome
+   (figma ToggleButton: 13/20 medium secondary, 12px chevron). */
 .select {
  max-width: 220px;
  height: 28px;
-  padding: 0 22px 0 6px;
+  padding: 0 20px 0 8px;
  border: none;
  border-radius: 8px;
  outline: none;
  background-color: transparent;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%2381858C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2381858C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
-  background-size: 14px 14px;
+  background-size: 12px 12px;
  color: var(--dsw-alias-label-secondary);
-  font-size: 14px;
+  font-size: 13px;
  line-height: 20px;
+  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
@@ -175,8 +175,10 @@ export function InputBar({
            >
              <IconPlusOutline16 size={14} />
            </button>
-            {renderSelect('Plan mode', planId, PLAN_OPTIONS, setPlanId)}
-            {renderSelect('Access mode', readonlyId, READONLY_OPTIONS, setReadonlyId)}
+            <div className={css.modes}>
+              {renderSelect('Plan mode', planId, PLAN_OPTIONS, setPlanId)}
+              {renderSelect('Access mode', readonlyId, READONLY_OPTIONS, setReadonlyId)}
+            </div>
          </div>
          <div className={css.trailing}>
            {renderSelect('Model', modelId, MODEL_OPTIONS, setModelId)}
@@ -190,11 +192,11 @@ export function InputBar({
              onClick={onPrimary}
            >
              {running ? (
-                <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden>
+                <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
                  <rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor" />
                </svg>
              ) : (
-                <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden>
+                <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
                  <path d="M8 13V3.8M8 3.8L3.8 8M8 3.8L12.2 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
                </svg>
              )}