@vibe-forge/client 0.11.3 → 1.0.0

package/src/components/chat/git-controls/BranchSwitcherDropdown.tsx

@@ -1,11 +1,15 @@
 import { Button, Dropdown, Empty, Input, Spin } from 'antd'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { GitBranchSummary, GitRepositoryState } from '@vibe-forge/types'
 
+import { BranchSwitcherResults } from './BranchSwitcherResults'
+
 export function BranchSwitcherDropdown({
   availableLocalBranches,
   currentBranchLabel,
+  compact = false,
   isBusy,
   isLoading,
   open,
@@ -13,6 +17,7 @@ export function BranchSwitcherDropdown({
   branchQuery,
   canCreateBranch,
   hasBranchResults,
+  placement = 'bottomLeft',
   remoteBranches,
   onCreateBranch,
   onOpenChange,
@@ -20,6 +25,7 @@ export function BranchSwitcherDropdown({
   onSwitchBranch
 }: {
   availableLocalBranches: GitBranchSummary[]
+  compact?: boolean
   currentBranchLabel: string
   isBusy: boolean
   isLoading: boolean
@@ -28,6 +34,7 @@ export function BranchSwitcherDropdown({
   branchQuery: string
   canCreateBranch: boolean
   hasBranchResults: boolean
+  placement?: 'bottomLeft' | 'topLeft'
   remoteBranches: GitBranchSummary[]
   onCreateBranch: (name: string) => void
   onOpenChange: (open: boolean) => void
@@ -35,67 +42,57 @@ export function BranchSwitcherDropdown({
   onSwitchBranch: (branch: GitBranchSummary) => void
 }) {
   const { t } = useTranslation()
-
-  const renderBranchSection = (title: string, branches: GitBranchSummary[]) => {
-    if (branches.length === 0) {
-      return null
-    }
-
-    return (
-      <div className='chat-header-git__section'>
-        <span className='chat-header-git__section-label'>{title}</span>
-        {branches.map(branch => {
-          return (
-            <button
-              key={`${branch.kind}:${branch.name}`}
-              type='button'
-              className='chat-header-git__branch-row'
-              disabled={isBusy}
-              title={branch.name}
-              onClick={() => onSwitchBranch(branch)}
-            >
-              <div className='chat-header-git__branch-row-main'>
-                <span className='chat-header-git__row-icon material-symbols-rounded'>
-                  {branch.kind === 'local' ? 'call_split' : 'cloud_sync'}
-                </span>
-                <span className='chat-header-git__row-copy'>
-                  <span className='chat-header-git__row-title'>{branch.name}</span>
-                </span>
-              </div>
-              {branch.isCurrent
-                ? (
-                  <span className='chat-header-git__row-state material-symbols-rounded'>check</span>
-                )
-                : null}
-            </button>
-          )
-        })}
-      </div>
-    )
-  }
+  const [displayMode, setDisplayMode] = useState<'flat' | 'tree'>('tree')
 
   return (
     <Dropdown
       open={open}
-      placement='bottomLeft'
+      placement={placement}
       trigger={['click']}
       onOpenChange={onOpenChange}
       dropdownRender={() => (
         <div className='chat-header-git__overlay chat-header-git__overlay--branches'>
-          <Input
-            allowClear
-            autoFocus
-            className='chat-header-git__search'
-            placeholder={t('chat.gitSearchBranches')}
-            prefix={<span className='material-symbols-rounded'>search</span>}
-            value={branchQuery}
-            onChange={(event) => onQueryChange(event.target.value)}
-            onPressEnter={() => {
-              if (canCreateBranch) {
-                onCreateBranch(branchQuery)
-              }
-            }}
-          />
+          <div className='chat-header-git__search-row'>
+            <Input
+              allowClear
+              autoFocus
+              className='chat-header-git__search'
+              placeholder={t('chat.gitSearchBranches')}
+              prefix={<span className='material-symbols-rounded'>search</span>}
+              value={branchQuery}
+              onChange={(event) => onQueryChange(event.target.value)}
+              onPressEnter={() => {
+                if (canCreateBranch) {
+                  onCreateBranch(branchQuery)
+                }
+              }}
+            />
+
+            <div
+              className='chat-header-git__view-switch'
+              role='tablist'
+              aria-label={t('chat.gitBranchViewMode')}
+            >
+              <button
+                type='button'
+                className={`chat-header-git__view-button ${displayMode === 'tree' ? 'is-active' : ''}`}
+                title={t('chat.gitBranchViewTree')}
+                aria-label={t('chat.gitBranchViewTree')}
+                onClick={() => setDisplayMode('tree')}
+              >
+                <span className='material-symbols-rounded'>account_tree</span>
+              </button>
+              <button
+                type='button'
+                className={`chat-header-git__view-button ${displayMode === 'flat' ? 'is-active' : ''}`}
+                title={t('chat.gitBranchViewFlat')}
+                aria-label={t('chat.gitBranchViewFlat')}
+                onClick={() => setDisplayMode('flat')}
+              >
+                <span className='material-symbols-rounded'>reorder</span>
+              </button>
+            </div>
+          </div>
 
           {canCreateBranch && (
             <button
@@ -124,8 +121,14 @@ export function BranchSwitcherDropdown({
             : hasBranchResults
             ? (
               <div className='chat-header-git__sections'>
-                {renderBranchSection(t('chat.gitBranchesLocal'), availableLocalBranches)}
-                {renderBranchSection(t('chat.gitBranchesRemote'), remoteBranches)}
+                <BranchSwitcherResults
+                  availableLocalBranches={availableLocalBranches}
+                  branchQuery={branchQuery}
+                  isBusy={isBusy}
+                  mode={displayMode}
+                  remoteBranches={remoteBranches}
+                  onSwitchBranch={onSwitchBranch}
+                />
               </div>
             )
             : (
@@ -141,7 +144,9 @@ export function BranchSwitcherDropdown({
     >
       <Button
         type='text'
-        className={`chat-header-git__trigger ${open ? 'is-open' : ''} ${isBusy ? 'is-disabled' : ''}`}
+        className={`chat-header-git__trigger chat-header-git__trigger--branch ${open ? 'is-open' : ''} ${
+          isBusy ? 'is-disabled' : ''
+        } ${compact ? 'is-compact' : ''}`.trim()}
         title={t('chat.gitBranchSwitcher')}
         aria-label={t('chat.gitBranchSwitcher')}
       >

package/src/components/chat/git-controls/BranchSwitcherResults.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { GitBranchSummary } from '@vibe-forge/types'
+
+import { BranchTreeEntries } from './BranchTreeEntries'
+import type { GitBranchDisplayMode } from './git-branch-tree'
+import {
+  buildGitBranchTree,
+  collectGitBranchTreeFolderKeys,
+  getGitBranchTreeFolderKeysForBranch
+} from './git-branch-tree'
+
+export function BranchSwitcherResults({
+  availableLocalBranches,
+  branchQuery,
+  isBusy,
+  mode,
+  remoteBranches,
+  onSwitchBranch
+}: {
+  availableLocalBranches: GitBranchSummary[]
+  branchQuery: string
+  isBusy: boolean
+  mode: GitBranchDisplayMode
+  remoteBranches: GitBranchSummary[]
+  onSwitchBranch: (branch: GitBranchSummary) => void
+}) {
+  const { t } = useTranslation()
+  const localBranchTree = useMemo(
+    () => buildGitBranchTree(availableLocalBranches, 'local'),
+    [availableLocalBranches]
+  )
+  const remoteBranchTree = useMemo(
+    () => buildGitBranchTree(remoteBranches, 'remote'),
+    [remoteBranches]
+  )
+  const [collapsedFolderKeys, setCollapsedFolderKeys] = useState<string[]>([])
+  const hasSearchQuery = branchQuery.trim() !== ''
+  const currentLocalBranch = useMemo(
+    () => availableLocalBranches.find(branch => branch.isCurrent),
+    [availableLocalBranches]
+  )
+  const currentRemoteBranch = useMemo(
+    () => remoteBranches.find(branch => branch.isCurrent),
+    [remoteBranches]
+  )
+
+  const unifiedTreeEntries = useMemo(() => {
+    const entries = []
+    if (localBranchTree.length > 0) {
+      entries.push({
+        type: 'folder' as const,
+        folder: {
+          entries: localBranchTree,
+          hasCurrentBranch: currentLocalBranch != null,
+          key: 'local',
+          label: t('chat.gitBranchesLocal')
+        }
+      })
+    }
+    if (remoteBranchTree.length > 0) {
+      entries.push({
+        type: 'folder' as const,
+        folder: {
+          entries: remoteBranchTree,
+          hasCurrentBranch: currentRemoteBranch != null,
+          key: 'remote',
+          label: t('chat.gitBranchesRemote')
+        }
+      })
+    }
+
+    return entries.sort((left, right) => {
+      if (left.folder.hasCurrentBranch !== right.folder.hasCurrentBranch) {
+        return left.folder.hasCurrentBranch ? -1 : 1
+      }
+
+      return left.folder.label.localeCompare(right.folder.label)
+    })
+  }, [currentLocalBranch, currentRemoteBranch, localBranchTree, remoteBranchTree, t])
+
+  const allFolderKeys = useMemo(
+    () => new Set(collectGitBranchTreeFolderKeys(unifiedTreeEntries)),
+    [unifiedTreeEntries]
+  )
+  const defaultExpandedFolderKeys = useMemo(
+    () =>
+      new Set([
+        ...(currentLocalBranch != null ? getGitBranchTreeFolderKeysForBranch(currentLocalBranch, 'local') : []),
+        ...(currentRemoteBranch != null ? getGitBranchTreeFolderKeysForBranch(currentRemoteBranch, 'remote') : [])
+      ]),
+    [currentLocalBranch, currentRemoteBranch]
+  )
+
+  useEffect(() => {
+    setCollapsedFolderKeys(
+      Array.from(allFolderKeys).filter(key => !defaultExpandedFolderKeys.has(key))
+    )
+  }, [allFolderKeys, defaultExpandedFolderKeys])
+
+  const toggleFolder = (folderKey: string) => {
+    setCollapsedFolderKeys(currentKeys => (
+      currentKeys.includes(folderKey)
+        ? currentKeys.filter(key => key !== folderKey)
+        : [...currentKeys, folderKey]
+    ))
+  }
+
+  const renderBranchSection = (title: string, branches: GitBranchSummary[]) => {
+    if (branches.length === 0) {
+      return null
+    }
+
+    return (
+      <div className='chat-header-git__section'>
+        <span className='chat-header-git__section-label'>{title}</span>
+        {branches.map(branch => {
+          return (
+            <button
+              key={`${branch.kind}:${branch.name}`}
+              type='button'
+              className='chat-header-git__branch-row'
+              disabled={isBusy}
+              title={branch.name}
+              onClick={() => onSwitchBranch(branch)}
+            >
+              <div className='chat-header-git__branch-row-main'>
+                <span className='chat-header-git__row-icon material-symbols-rounded'>
+                  {branch.kind === 'local' ? 'call_split' : 'cloud_sync'}
+                </span>
+                <span className='chat-header-git__row-copy'>
+                  <span className='chat-header-git__row-title'>{branch.name}</span>
+                </span>
+              </div>
+              {branch.isCurrent
+                ? (
+                  <span className='chat-header-git__row-state material-symbols-rounded'>check</span>
+                )
+                : null}
+            </button>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return mode === 'tree'
+    ? (
+      <div className='chat-header-git__branch-tree'>
+        <BranchTreeEntries
+          collapsedFolderKeys={collapsedFolderKeys}
+          hasSearchQuery={hasSearchQuery}
+          isBusy={isBusy}
+          treeEntries={unifiedTreeEntries}
+          onSwitchBranch={onSwitchBranch}
+          onToggleFolder={toggleFolder}
+        />
+      </div>
+    )
+    : (
+      <>
+        {renderBranchSection(t('chat.gitBranchesLocal'), availableLocalBranches)}
+        {renderBranchSection(t('chat.gitBranchesRemote'), remoteBranches)}
+      </>
+    )
+}

package/src/components/chat/git-controls/BranchTreeEntries.tsx

@@ -0,0 +1,99 @@
+import type { CSSProperties } from 'react'
+
+import type { GitBranchSummary } from '@vibe-forge/types'
+
+import type { GitBranchTreeEntry } from './git-branch-tree'
+
+export function BranchTreeEntries({
+  collapsedFolderKeys,
+  depth = 0,
+  hasSearchQuery,
+  isBusy,
+  treeEntries,
+  onSwitchBranch,
+  onToggleFolder
+}: {
+  collapsedFolderKeys: string[]
+  depth?: number
+  hasSearchQuery: boolean
+  isBusy: boolean
+  treeEntries: GitBranchTreeEntry[]
+  onSwitchBranch: (branch: GitBranchSummary) => void
+  onToggleFolder: (folderKey: string) => void
+}) {
+  const getTreeRowStyle = (value: number): CSSProperties => ({
+    ['--branch-depth' as string]: value
+  })
+
+  return treeEntries.map(entry => {
+    if (entry.type === 'folder') {
+      const isCollapsed = !hasSearchQuery && collapsedFolderKeys.includes(entry.folder.key)
+      return (
+        <div
+          key={`folder:${entry.folder.key}`}
+          className={`chat-header-git__branch-tree-folder ${isCollapsed ? 'is-collapsed' : ''}`}
+        >
+          <button
+            type='button'
+            className='chat-header-git__branch-folder-row'
+            aria-expanded={!isCollapsed}
+            style={getTreeRowStyle(depth)}
+            onClick={() => onToggleFolder(entry.folder.key)}
+          >
+            <span className='chat-header-git__row-icon chat-header-git__branch-folder-chevron material-symbols-rounded'>
+              expand_more
+            </span>
+            <span className='chat-header-git__row-icon material-symbols-rounded'>
+              {isCollapsed ? 'folder' : 'folder_open'}
+            </span>
+            <span className='chat-header-git__row-title'>{entry.folder.label}</span>
+          </button>
+          <div
+            className={`chat-header-git__branch-tree-collapse ${isCollapsed ? 'is-collapsed' : ''}`}
+            aria-hidden={isCollapsed}
+          >
+            <div className='chat-header-git__branch-tree-collapse-inner'>
+              <div className='chat-header-git__branch-tree-children'>
+                <BranchTreeEntries
+                  collapsedFolderKeys={collapsedFolderKeys}
+                  depth={depth + 1}
+                  hasSearchQuery={hasSearchQuery}
+                  isBusy={isBusy}
+                  treeEntries={entry.folder.entries}
+                  onSwitchBranch={onSwitchBranch}
+                  onToggleFolder={onToggleFolder}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <button
+        key={`${entry.branch.kind}:${entry.branch.name}`}
+        type='button'
+        className='chat-header-git__branch-row chat-header-git__branch-row--tree'
+        disabled={isBusy}
+        title={entry.branch.name}
+        style={getTreeRowStyle(depth)}
+        onClick={() => onSwitchBranch(entry.branch)}
+      >
+        <div className='chat-header-git__branch-row-main'>
+          <span className='chat-header-git__row-icon material-symbols-rounded'>
+            {entry.branch.kind === 'local' ? 'call_split' : 'cloud_sync'}
+          </span>
+          <span className='chat-header-git__row-copy'>
+            <span className='chat-header-git__row-title'>{entry.label}</span>
+          </span>
+        </div>
+        {entry.branch.isCurrent
+          ? (
+            <span className='chat-header-git__row-state material-symbols-rounded'>check</span>
+          )
+          : null}
+      </button>
+    )
+  })
+}