Skip to content

feat(web-ui): add branch switcher popover to chat input workspace strip - #1843

Open
ArrogHie wants to merge 2 commits into
GCWing:mainfrom
ArrogHie:feat/chat-branch-switcher
Open

feat(web-ui): add branch switcher popover to chat input workspace strip#1843
ArrogHie wants to merge 2 commits into
GCWing:mainfrom
ArrogHie:feat/chat-branch-switcher

Conversation

@ArrogHie

Copy link
Copy Markdown
Contributor

背景

聊天输入框下方的工作区条显示 BitFun / main 格式信息,其中分支部分此前是纯展示性的,无法交互。希望点击分支名后弹出面板,快速切换或创建分支。

改动内容

1. BranchQuickSwitch 增强BranchQuickSwitch.tsx / BranchQuickSwitch.scss

  • 新增 onCreateSuccess 回调 prop
  • 新增 canCreateNewBranch 逻辑:搜索词不匹配任何现有分支时显示"创建分支"选项
  • 新增 handleCreateBranch 方法:调用 gitService.createBranch(执行 git checkout -b,创建并切换)
  • 键盘导航更新:Enter 在搜索词为新分支名时触发创建
  • 新增 --create 选项样式(Plus 图标、accent 高亮色)

2. ChatInputWorkspaceStrip 集成ChatInputWorkspaceStrip.tsx / ChatInputWorkspaceStrip.scss

  • 分支 chip 改为可点击(role=buttononClick、Enter/Space 键盘支持)
  • 通过 createPortal(..., document.body) 渲染弹窗,避免破坏 strip 的绝对定位布局
  • 新增 --branch-clickable 修饰类(pointer cursor、hover、focus-visible)
  • 分支 tooltip 更新为"点击切换或创建分支"

3. i18n — 6 个 locale 文件(en-US / zh-CN / zh-TW)

key en-US zh-CN zh-TW
quickSwitch.searchPlaceholder Search or create branch... 搜索或新建分支... 搜尋或建立分支...
quickSwitch.createBranchLabel Create branch 创建分支 建立分支
quickSwitch.errors.createFailed Failed to create branch 创建分支失败 建立分支失敗
workspaceStrip.branchTooltip Click to switch or create branch 点击切换或创建分支 點擊切換或建立分支

4. 测试ChatInputWorkspaceStrip.test.tsx

  • mock BranchQuickSwitch 组件
  • 新增"点击 branch chip 弹出面板"测试
  • 新增"仓库不可用时 chip 不可点击"测试
  • portal 渲染后查询 document 而非 container

验证结果

  • pnpm run type-check:web — 通过
  • pnpm run i18n:audit — 0 warnings
  • 6 个单元测试全部通过

交互流程

用户点击分支 chip (main)
  → 弹出 BranchQuickSwitch 面板(portal 渲染到 body)
  → 搜索框获得焦点,显示分支列表
  → 用户输入 "feature/x"
    → 匹配已有分支:点击/Enter 切换
    → 不匹配:显示"创建分支 feature/x"选项,点击/Enter 创建并切换

Add clickable branch chip in ChatInputWorkspaceStrip that opens a
BranchQuickSwitch popover for quick branch switching and creation.

BranchQuickSwitch enhancements:
- Add onCreateSuccess prop and branch creation capability
- Show 'Create branch' option when search term does not match existing
  branches (calls gitService.createBranch, which runs git checkout -b)
- Add isCreating/creatingBranch state with loading spinner
- Update keyboard navigation: Enter triggers creation when search
  term is new, otherwise switches to selected branch
- Add --create item variant with accent color styling

ChatInputWorkspaceStrip integration:
- Branch chip becomes clickable (role=button, onClick, Enter/Space keys)
  when repository is available
- Render BranchQuickSwitch through createPortal to document.body to
  avoid disrupting the absolutely-positioned strip layout
- Add --branch-clickable modifier with pointer cursor and hover styles
- Update branch tooltip to 'Click to switch or create branch'

i18n (en-US/zh-CN/zh-TW):
- quickSwitch.searchPlaceholder: 'Search or create branch...'
- quickSwitch.createBranchLabel: 'Create branch' / '创建分支' / '建立分支'
- quickSwitch.errors.createFailed: 'Failed to create branch' / ...
- workspaceStrip.branchTooltip: 'Click to switch or create branch' / ...

Tests:
- Mock BranchQuickSwitch, add click interaction test
- Add non-repo guard test (chip not clickable when no repository)
- Query document instead of container for portaled element
@ArrogHie
ArrogHie force-pushed the feat/chat-branch-switcher branch from 3a65845 to 376c41f Compare July 30, 2026 03:13
@ArrogHie ArrogHie changed the title feat: add branch switcher popover to chat input workspace strip feat(web-ui): add branch switcher popover to chat input workspace strip Jul 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant