refactor: compact bind popup with unified boxes and right-side session list

01_content/src/client/index.tsx

@@ -710,9 +710,11 @@ function WorktableSection(props: any) {
   const [wsFolderError, setWsFolderError] = useState(false)
   /** 图标选择器：kind + 目标 id + 弹窗锚点坐标（fixed 定位） */
   const [iconPick, setIconPick] = useState<{ kind: 'layout' | 'shortcut' | 'project'; id: string; x: number; y: number } | null>(null)
-  /** 对话绑定弹窗：项目 id + 锚点坐标；bindGroups = 打开时抓取的会话分组 */
+  /** 对话绑定弹窗：项目 id + 锚点坐标；bindGroups = 打开时抓取的会话分组；
+   *  bindListOpen = 右侧对话列表弹层（点「绑定对话」行弹出） */
   const [bindPick, setBindPick] = useState<{ id: string; x: number; y: number } | null>(null)
   const [bindGroups, setBindGroups] = useState<{ title: string; sessions: { id: string; title: string; isCurrent: boolean }[] }[]>([])
+  const [bindListOpen, setBindListOpen] = useState(false)
 
   /** 自定义布局弹窗（预设网格末尾的 ＋ 磁贴）：描述 → 复制提示词到剪贴板 */
   const [customOpen, setCustomOpen] = useState(false)
@@ -1037,6 +1039,7 @@ function buildCustomLayoutPrompt(req: string): string {
     const x = clamp(Math.round(r.right + 8), 8, window.innerWidth - 300)
     const y = clamp(Math.round(r.top), 8, window.innerHeight - 420)
     setBindPick({ id, x, y })
+    setBindListOpen(false)
     setBindGroups([])
     fetchSessionGroups().then((res) => setBindGroups(res.groups)).catch(() => setBindGroups([]))
   }, [])
@@ -1060,7 +1063,7 @@ function buildCustomLayoutPrompt(req: string): string {
     })
   }
 
-  /** 绑定 / 解绑会话 */
+  /** 绑定 / 解绑会话（弹窗保持打开，绑定结果即时显示在「绑定对话」框里） */
   const setProjectBinding = (id: string, sessionId: string | null) => {
     persistProjects((prev) => {
       const next = { ...prev.bindings }
@@ -1068,7 +1071,7 @@ function buildCustomLayoutPrompt(req: string): string {
       else delete next[id]
       return { ...prev, bindings: next }
     })
-    setBindPick(null)
+    setBindListOpen(false)
   }
 
   /** 复制自定义布局提示词到剪贴板（失败则全选输入框手动复制） */
@@ -1957,11 +1960,11 @@ function buildCustomLayoutPrompt(req: string): string {
         </div>
       )}
 
-      {bindPick && <div className="dsh-wt_popBackdrop" style={{ zIndex: 83 }} onClick={() => setBindPick(null)} />}
+      {bindPick && <div className="dsh-wt_popBackdrop" style={{ zIndex: 83 }} onClick={() => { setBindPick(null); setBindListOpen(false) }} />}
       {bindPick && (
         <div className="dsh-wt_menu dsh-wt_pop dsh-wt_bindPop" style={{ position: 'fixed', left: bindPick.x, top: bindPick.y, width: 280, zIndex: 84 }}>
           <span className="dsh-wt_menuLabel">{t('bind.title')}</span>
-          {/* 项目文件夹（工作目录）：所有产出文件放这里，可随时更改 */}
+          {/* 项目文件夹框（格式基准）：第一行 emoji+标题，第二行路径；可随时更改 */}
           <div className="dsh-wt_bindFolderBox">
             <div className="dsh-wt_bindFolderRow">
               <span className="dsh-wt_bindFolderLabel">📁 {t('bind.folder')}</span>
@@ -1971,29 +1974,44 @@ function buildCustomLayoutPrompt(req: string): string {
               {projects.folders[bindPick.id] ?? t('bind.folderNone')}
             </div>
           </div>
-          {(() => {
-            const sid = projects.bindings[bindPick.id]
-            if (!sid) {
+          {/* 绑定对话框（与项目文件夹同格式）：第一行 💬+标题；第二行 分组 | 对话名（点击右侧弹列表）；框内下方：说明 + 解绑 */}
+          <div className="dsh-wt_bindFolderBox">
+            <div className="dsh-wt_bindFolderRow">
+              <span className="dsh-wt_bindFolderLabel">💬 {t('bind.title')}</span>
+            </div>
+            {(() => {
+              const sid = projects.bindings[bindPick.id]
+              if (!sid) {
+                return (
+                  <button type="button" className="dsh-wt_bindConvRow dsh-wt_bindConvRowNone" title={t('bind.tipUnbound')} onClick={() => setBindListOpen(true)}>
+                    <span className="dsh-wt_bindNoneText">{t('bind.unbound')} · {t('bind.clickPick')}</span>
+                  </button>
+                )
+              }
+              const info = bindInfoOf(bindGroups, sid)
               return (
-                <div className="dsh-wt_bindStatus dsh-wt_bindStatusNone">
-                  <span className="dsh-wt_bindMini" aria-hidden><span className="dsh-wt_bindCircles" /></span>
-                  <span className="dsh-wt_bindNoneText">{t('bind.unbound')}</span>
-                </div>
+                <button type="button" className="dsh-wt_bindConvRow" title={t('bind.tipBound', { name: info.title })} onClick={() => setBindListOpen(true)}>
+                  <span className="dsh-wt_bindFolder" title={info.folder}>📂 {info.folder}</span>
+                  <span className="dsh-wt_bindSep" aria-hidden>|</span>
+                  <span className="dsh-wt_bindConvName" title={info.title}>{info.title}</span>
+                  <span className="dsh-wt_bindConvChevron" aria-hidden>▾</span>
+                </button>
               )
-            }
-            const info = bindInfoOf(bindGroups, sid)
-            return (
-              <div className="dsh-wt_bindStatus">
-                <span className="dsh-wt_bindFolder" title={info.folder}>📂 {info.folder}</span>
-                <span className="dsh-wt_bindSep" aria-hidden>|</span>
-                <span className="dsh-wt_bindConv" title={info.title}>{info.title}</span>
-              </div>
-            )
-          })()}
-          <p className="dsh-wt_bindHint">{t('bind.hint')}</p>
-          {projects.bindings[bindPick.id] && (
-            <button type="button" className="dsh-wt_bindUnbind" onClick={() => setProjectBinding(bindPick.id, null)}>{t('bind.unbind')} ✕</button>
-          )}
+            })()}
+            <p className="dsh-wt_bindHint">{t('bind.hint')}</p>
+            {projects.bindings[bindPick.id] && (
+              <button type="button" className="dsh-wt_bindUnbind" onClick={() => setProjectBinding(bindPick.id, null)}>{t('bind.unbind')} ✕</button>
+            )}
+          </div>
+        </div>
+      )}
+      {/* 对话列表弹层：点「绑定对话」行弹出（优先右侧，放不下翻到左侧）；选中即绑定并收起 */}
+      {bindPick && bindListOpen && (() => {
+        // 主弹窗实际渲染宽 = 280 + 菜单内边距/边框（约 292），右侧列表按 300 偏移避免重叠
+        const rightFits = bindPick.x + 300 + 260 <= window.innerWidth - 8
+        const listLeft = rightFits ? bindPick.x + 300 : Math.max(8, bindPick.x - 268)
+        return (
+        <div className="dsh-wt_menu dsh-wt_pop dsh-wt_bindListPop" style={{ position: 'fixed', left: listLeft, top: clamp(bindPick.y, 8, window.innerHeight - 348), width: 260, zIndex: 86 }}>
           <div className="dsh-wt_selectList dsh-wt_bindList">
             {bindGroups.map((g, gi) => (
               <Fragment key={g.title || 'g' + gi}>
@@ -2008,7 +2026,7 @@ function buildCustomLayoutPrompt(req: string): string {
                     key={s.id}
                     type="button"
                     className={'dsh-wt_selectItem' + (projects.bindings[bindPick.id] === s.id ? ' dsh-wt_selectItemOn' : '')}
-                    onClick={() => setProjectBinding(bindPick.id, s.id)}
+                    onClick={() => { setProjectBinding(bindPick.id, s.id); setBindListOpen(false) }}
                   >
                     <span className="dsh-wt_selectItemTitle">{s.title}</span>
                     {s.isCurrent && <span className="dsh-wt_selectCurrent">{t('custom.sessionCurrent')}</span>}
@@ -2018,7 +2036,8 @@ function buildCustomLayoutPrompt(req: string): string {
             ))}
           </div>
         </div>
-      )}
+        )
+      })()}
 
       {customOpen && <div className="dsh-wt_popBackdrop" style={{ zIndex: 83 }} onClick={() => setCustomOpen(false)} />}
       {customOpen && (

01_content/src/client/locales.ts

@@ -101,7 +101,8 @@ export const zh = {
   'bind.folderChange': '更改',
   'bind.folderNone': '未设置（建议设置：项目产出文件都会放进这里）',
   'bind.tipBound': '已绑定对话：{name}',
-  'bind.hint': '一个项目只能绑定一个对话。选择后，打开该项目时右侧对话窗会自动切换过去；已绑定的项目不会因新建/发送对话而自动改绑。',
+  'bind.clickPick': '点击选择对话',
+  'bind.hint': '打开项目时，右侧对话窗会自动切换到这个对话。',
   'customLayout.add': '自定义',
   'customLayout.addTitle': '自定义一个布局（生成提示词）',
   'customLayout.title': '自定义布局',
@@ -235,7 +236,8 @@ export const en = {
   'bind.folderChange': 'Change',
   'bind.folderNone': 'Not set (recommended: project outputs go here)',
   'bind.tipBound': 'Bound to: {name}',
-  'bind.hint': 'A project can bind exactly one conversation. When bound, opening the project switches the right chat pane to it; an existing binding is never auto-changed by creating/sending conversations.',
+  'bind.clickPick': 'click to pick',
+  'bind.hint': 'Opening the project switches the right chat pane to this conversation.',
   'customLayout.add': 'Custom',
   'customLayout.addTitle': 'Customize a layout (generate a prompt)',
   'customLayout.title': 'Custom layout',

01_content/src/client/styles.ts

@@ -264,20 +264,23 @@ export const css = xtermCss + '\n' + [
   '.dsh-wt_customLayoutBtn:hover{background:var(--dsw-alias-fill-l1,rgba(255,255,255,.05))}',
   '.dsh-wt_customLayoutToast{margin:8px 0 0;font-size:11.5px;line-height:17px;color:var(--dsw-alias-state-success,#3fb950)}',
   '.dsh-wt_customLayoutToastFail{color:var(--dsw-alias-state-danger,#f85149)}',
-  // 对话绑定弹窗：状态行（未绑定 / 📂文件夹 | [对话框]）
-  '.dsh-wt_bindStatus{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 8px;background:var(--dsw-alias-fill-l1,rgba(255,255,255,.03));border:1px solid var(--dsw-alias-border-l1,#262b36);border-radius:8px}',
-  '.dsh-wt_bindStatusNone{color:var(--dsw-alias-label-secondary,#9aa4b2)}',
-  '.dsh-wt_bindMini{position:relative;display:inline-block;width:18px;height:14px;flex:none}',
+  // 对话绑定弹窗：绑定对话框内的对话行（点击右侧弹列表）
   '.dsh-wt_bindNoneText{font-size:12px;line-height:18px}',
   '.dsh-wt_bindFolder{flex:none;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#9aa4b2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40%}',
   '.dsh-wt_bindSep{flex:none;color:var(--dsw-alias-border-l2,#3a4150);font-size:11px}',
-  '.dsh-wt_bindConv{flex:1;min-width:0;padding:2px 8px;border:1px solid var(--dsw-alias-border-l2,#3a4150);border-radius:6px;background:var(--dsw-alias-fill-l2,rgba(255,255,255,.05));font-size:12px;line-height:18px;color:var(--dsw-alias-label-primary,#e6e8eb);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
-  '.dsh-wt_bindHint{margin:6px 0 6px;font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary,#9aa4b2)}',
+  '.dsh-wt_bindConvRow{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;margin-top:4px;padding:3px 4px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--dsw-alias-label-primary,#e6e8eb);font:inherit;font-size:12px;line-height:18px;cursor:pointer;text-align:left}',
+  '.dsh-wt_bindConvRow:hover{background:var(--dsw-alias-fill-l1,rgba(255,255,255,.05));border-color:var(--dsw-alias-border-l2,#3a4150)}',
+  '.dsh-wt_bindConvRowNone{color:var(--dsw-alias-label-secondary,#9aa4b2)}',
+  '.dsh-wt_bindConvName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+  '.dsh-wt_bindConvChevron{flex:none;color:var(--dsw-alias-label-tertiary,#6b7280);font-size:9px;line-height:1}',
+  '.dsh-wt_bindHint{margin:6px 0 2px;font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary,#9aa4b2)}',
   // 自定义窗完成页：自动绑定提示
   '.dsh-wt_customDoneBind{margin:6px 0 0;font-size:11px;line-height:16px;color:var(--dsw-alias-state-accent-primary,#4f8ef7)}',
-  '.dsh-wt_bindUnbind{display:inline-flex;align-items:center;gap:4px;margin-bottom:6px;padding:3px 8px;border:1px solid var(--dsw-alias-border-l1,#262b36);border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary,#9aa4b2);font:inherit;font-size:11px;line-height:16px;cursor:pointer}',
+  '.dsh-wt_bindUnbind{display:inline-flex;align-items:center;gap:4px;margin:4px 0 0;padding:3px 8px;border:1px solid var(--dsw-alias-border-l1,#262b36);border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary,#9aa4b2);font:inherit;font-size:11px;line-height:16px;cursor:pointer}',
   '.dsh-wt_bindUnbind:hover{color:var(--dsw-alias-state-danger,#f85149);border-color:var(--dsw-alias-state-danger,#f85149)}',
   '.dsh-wt_bindList{max-height:280px;overflow:auto;position:static}',
+  '.dsh-wt_bindListPop{display:flex;flex-direction:column;padding:6px}',
+  '.dsh-wt_bindListPop .dsh-wt_bindList{max-height:320px}',
   '.dsh-wt_customRow{display:flex;align-items:center;gap:8px}',
   '.dsh-wt_customLabel{flex:none;font-size:11.5px;color:var(--dsw-alias-label-secondary,#9aa4b2)}',
   '.dsh-wt_customSelect{flex:1;min-width:0;padding:5px 8px;background:var(--dsw-alias-fill-l1,rgba(255,255,255,.03));border:1px solid var(--dsw-alias-border-l1,#262b36);border-radius:6px;color:var(--dsw-alias-label-primary,#e6e8eb);font:inherit;font-size:12px;outline:none}',