@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/chat/workspace-drawer/ChatWorkspaceDrawer.tsx

@@ -0,0 +1,112 @@
+import './ChatWorkspaceDrawer.scss'
+
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { GitRepositoryState } from '@vibe-forge/types'
+
+import { getSessionGitState, getWorkspaceGitState } from '#~/api'
+
+import type { ContextPickerFile } from '#~/components/workspace/context-file-types'
+import type { ProjectFileTreeCommand } from '#~/components/workspace/project-file-tree/project-file-tree-types'
+import { ChatWorkspaceDrawerToolbar } from './ChatWorkspaceDrawerToolbar'
+import type { WorkspaceDrawerView } from './ChatWorkspaceDrawerToolbar'
+import { WorkspaceDrawerChangedFiles } from './WorkspaceDrawerChangedFiles'
+import { WorkspaceDrawerTree } from './WorkspaceDrawerTree'
+import type { ChangedFilesLayout, ChangedTreeCommand } from './changed-files-model'
+
+export function ChatWorkspaceDrawer({
+  onOpenFile,
+  onReferencePaths,
+  selectedFilePath,
+  sessionId
+}: {
+  onOpenFile?: (path: string) => void
+  onReferencePaths?: (files: ContextPickerFile[]) => void
+  selectedFilePath?: string | null
+  sessionId?: string
+}) {
+  const { t } = useTranslation()
+  const [activeView, setActiveView] = useState<WorkspaceDrawerView>('tree')
+  const [changedLayout, setChangedLayout] = useState<ChangedFilesLayout>('folders')
+  const [changedTreeCommand, setChangedTreeCommand] = useState<ChangedTreeCommand | null>(null)
+  const [workspaceTreeCommand, setWorkspaceTreeCommand] = useState<ProjectFileTreeCommand | null>(null)
+  const [treeRefreshKey, setTreeRefreshKey] = useState(0)
+  const gitKey = sessionId != null && sessionId !== ''
+    ? ['chat-workspace-drawer-git', sessionId]
+    : 'chat-workspace-drawer-git'
+  const {
+    data: repoState,
+    isLoading: isGitLoading,
+    mutate: mutateGitState
+  } = useSWR<GitRepositoryState>(
+    gitKey,
+    () => sessionId != null && sessionId !== '' ? getSessionGitState(sessionId) : getWorkspaceGitState(),
+    { refreshInterval: 3000, revalidateOnFocus: true }
+  )
+  const changedFilesCount = repoState?.available === true ? repoState.changedFiles?.length ?? 0 : 0
+
+  const handleForceSync = () => {
+    void mutateGitState()
+    setTreeRefreshKey(value => value + 1)
+  }
+  const handleChangedTreeCommand = (action: ChangedTreeCommand['action']) => {
+    setActiveView('changes')
+    setChangedLayout('folders')
+    setChangedTreeCommand(prev => ({
+      action,
+      id: (prev?.id ?? 0) + 1
+    }))
+  }
+  const handleWorkspaceTreeCommand = (action: ProjectFileTreeCommand['action'], path?: string) => {
+    setActiveView('tree')
+    setWorkspaceTreeCommand(prev => ({
+      action,
+      id: (prev?.id ?? 0) + 1,
+      path
+    }))
+  }
+
+  return (
+    <aside className='chat-workspace-drawer' aria-label={t('chat.workspaceDrawerTitle')}>
+      <ChatWorkspaceDrawerToolbar
+        activeView={activeView}
+        changedFilesCount={changedFilesCount}
+        changedLayout={changedLayout}
+        onActiveViewChange={setActiveView}
+        onChangedLayoutChange={setChangedLayout}
+        onChangedTreeCommand={handleChangedTreeCommand}
+        onForceSync={handleForceSync}
+        onWorkspaceTreeCommand={handleWorkspaceTreeCommand}
+        selectedFilePath={selectedFilePath}
+      />
+
+      <div className='chat-workspace-drawer__body'>
+        <div key={activeView} className='chat-workspace-drawer__view-panel'>
+          {activeView === 'tree'
+            ? (
+              <WorkspaceDrawerTree
+                command={workspaceTreeCommand}
+                refreshKey={treeRefreshKey}
+                selectedFilePath={selectedFilePath}
+                sessionId={sessionId}
+                onOpenFile={onOpenFile}
+                onReferencePaths={onReferencePaths}
+              />
+            )
+            : (
+              <WorkspaceDrawerChangedFiles
+                command={changedTreeCommand}
+                isLoading={isGitLoading}
+                layout={changedLayout}
+                repoState={repoState}
+                selectedFilePath={selectedFilePath}
+                onOpenFile={onOpenFile}
+              />
+            )}
+        </div>
+      </div>
+    </aside>
+  )
+}

package/src/components/chat/workspace-drawer/ChatWorkspaceDrawerToolbar.tsx

@@ -0,0 +1,183 @@
+import { Button, Dropdown, Tooltip } from 'antd'
+import type { MenuProps } from 'antd'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { ProjectFileTreeCommand } from '#~/components/workspace/project-file-tree/project-file-tree-types'
+
+import type { ChangedFilesLayout, ChangedTreeCommand } from './changed-files-model'
+
+export type WorkspaceDrawerView = 'tree' | 'changes'
+
+const changedLayoutItems: Array<{
+  icon: string
+  key: ChangedFilesLayout
+  labelKey: string
+}> = [
+  {
+    key: 'folders',
+    icon: 'account_tree',
+    labelKey: 'chat.workspaceDrawerChangedFolders'
+  },
+  {
+    key: 'flat',
+    icon: 'view_list',
+    labelKey: 'chat.workspaceDrawerChangedFlat'
+  }
+]
+
+const menuDivider = { type: 'divider' as const }
+const renderMenuIcon = (icon: string) =>
+  <span className='material-symbols-rounded chat-workspace-drawer__menu-icon'>{icon}</span>
+
+export function ChatWorkspaceDrawerToolbar({
+  activeView,
+  changedFilesCount,
+  changedLayout,
+  onActiveViewChange,
+  onChangedLayoutChange,
+  onChangedTreeCommand,
+  onForceSync,
+  onWorkspaceTreeCommand,
+  selectedFilePath
+}: {
+  activeView: WorkspaceDrawerView
+  changedFilesCount: number
+  changedLayout: ChangedFilesLayout
+  onActiveViewChange: (view: WorkspaceDrawerView) => void
+  onChangedLayoutChange: (layout: ChangedFilesLayout) => void
+  onChangedTreeCommand: (action: ChangedTreeCommand['action']) => void
+  onForceSync: () => void
+  onWorkspaceTreeCommand: (action: ProjectFileTreeCommand['action'], path?: string) => void
+  selectedFilePath?: string | null
+}) {
+  const { t } = useTranslation()
+  const viewItems = useMemo(() => [
+    { key: 'tree' as const, icon: 'folder', label: t('chat.workspaceDrawerTree') },
+    {
+      key: 'changes' as const,
+      icon: 'difference',
+      label: t('chat.workspaceDrawerChangedFiles'),
+      count: changedFilesCount
+    }
+  ], [changedFilesCount, t])
+
+  const moreMenuItems = useMemo<MenuProps['items']>(() => [
+    {
+      key: 'force-sync',
+      label: t('chat.workspaceDrawerForceSync'),
+      icon: renderMenuIcon('sync'),
+      onClick: onForceSync
+    },
+    ...(activeView === 'changes'
+      ? [
+        menuDivider,
+        {
+          key: 'display-mode',
+          label: t('chat.workspaceDrawerDisplayMode'),
+          icon: renderMenuIcon('view_module'),
+          children: changedLayoutItems.map(item => ({
+            key: `layout:${item.key}`,
+            label: t(item.labelKey),
+            icon: renderMenuIcon(changedLayout === item.key ? 'check' : item.icon),
+            onClick: () => onChangedLayoutChange(item.key)
+          }))
+        }
+      ]
+      : [])
+  ], [
+    activeView,
+    changedLayout,
+    onChangedLayoutChange,
+    onForceSync,
+    t
+  ])
+  const hasSelectedFile = selectedFilePath != null && selectedFilePath !== ''
+  const handleExpandAll = () => {
+    if (activeView === 'tree') {
+      onWorkspaceTreeCommand('expand')
+      return
+    }
+    onChangedTreeCommand('expand')
+  }
+  const handleCollapseAll = () => {
+    if (activeView === 'tree') {
+      onWorkspaceTreeCommand('collapse')
+      return
+    }
+    onChangedTreeCommand('collapse')
+  }
+
+  return (
+    <div className='chat-workspace-drawer__toolbar'>
+      <div className='chat-workspace-drawer__view-actions'>
+        {viewItems.map(item => (
+          <Tooltip key={item.key} title={item.label}>
+            <Button
+              type='text'
+              className={`chat-workspace-drawer__view-btn ${activeView === item.key ? 'is-active' : ''}`}
+              aria-label={item.label}
+              aria-pressed={activeView === item.key}
+              onClick={() => onActiveViewChange(item.key)}
+            >
+              <span className='material-symbols-rounded'>{item.icon}</span>
+              {item.count != null && item.count > 0 && (
+                <span className='chat-workspace-drawer__view-count'>{item.count}</span>
+              )}
+            </Button>
+          </Tooltip>
+        ))}
+      </div>
+      <div className='chat-workspace-drawer__toolbar-actions'>
+        <Tooltip title={t('chat.workspaceDrawerLocateFile')}>
+          <span className='chat-workspace-drawer__toolbar-button-wrap'>
+            <Button
+              type='text'
+              className='chat-workspace-drawer__icon-btn'
+              aria-label={t('chat.workspaceDrawerLocateFile')}
+              disabled={!hasSelectedFile}
+              onClick={() => onWorkspaceTreeCommand('locate', selectedFilePath ?? undefined)}
+            >
+              <span className='material-symbols-rounded'>my_location</span>
+            </Button>
+          </span>
+        </Tooltip>
+        <Tooltip title={t('chat.workspaceDrawerExpandAll')}>
+          <Button
+            type='text'
+            className='chat-workspace-drawer__icon-btn'
+            aria-label={t('chat.workspaceDrawerExpandAll')}
+            onClick={handleExpandAll}
+          >
+            <span className='material-symbols-rounded'>unfold_more</span>
+          </Button>
+        </Tooltip>
+        <Tooltip title={t('chat.workspaceDrawerCollapseAll')}>
+          <Button
+            type='text'
+            className='chat-workspace-drawer__icon-btn'
+            aria-label={t('chat.workspaceDrawerCollapseAll')}
+            onClick={handleCollapseAll}
+          >
+            <span className='material-symbols-rounded'>unfold_less</span>
+          </Button>
+        </Tooltip>
+        <Dropdown
+          menu={{ items: moreMenuItems }}
+          overlayClassName='chat-workspace-drawer-more-dropdown'
+          placement='bottomRight'
+          trigger={['click']}
+        >
+          <Button
+            type='text'
+            className='chat-workspace-drawer__icon-btn'
+            aria-label={t('common.moreActions')}
+            title={t('common.moreActions')}
+          >
+            <span className='material-symbols-rounded'>more_vert</span>
+          </Button>
+        </Dropdown>
+      </div>
+    </div>
+  )
+}

package/src/components/chat/workspace-drawer/WorkspaceDrawerChangedFileRow.tsx

@@ -0,0 +1,75 @@
+import { Tooltip } from 'antd'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { ChangedFileEntry } from './changed-files-model'
+import { getFileDirectory, getFileName } from './changed-files-model'
+import { getWorkspaceFileIconMeta } from './workspace-drawer-icons'
+
+const getSubmoduleLabels = (
+  entry: ChangedFileEntry,
+  t: ReturnType<typeof useTranslation>['t']
+) => {
+  const submodule = entry.file.submodule
+  if (submodule == null) {
+    return []
+  }
+
+  return [
+    submodule.commitChanged ? t('chat.workspaceDrawerSubmoduleCommit') : null,
+    submodule.trackedChanges ? t('chat.workspaceDrawerSubmoduleTracked') : null,
+    submodule.untrackedChanges ? t('chat.workspaceDrawerSubmoduleUntracked') : null
+  ].filter((item): item is string => item != null)
+}
+
+export function WorkspaceDrawerChangedFileRow({
+  entry,
+  onOpenFile,
+  selectedFilePath,
+  showDirectory = true
+}: {
+  entry: ChangedFileEntry
+  onOpenFile?: (path: string) => void
+  selectedFilePath?: string | null
+  showDirectory?: boolean
+}) {
+  const { t } = useTranslation()
+  const fileName = getFileName(entry.file.path)
+  const directory = getFileDirectory(entry.file.path)
+  const icon = entry.file.submodule != null
+    ? { icon: 'folder_special', tone: 'submodule' }
+    : getWorkspaceFileIconMeta(fileName)
+  const statusTooltip = useMemo(() => {
+    const labels = getSubmoduleLabels(entry, t)
+    const status = t(`chat.workspaceDrawerFileStatus.${entry.scope}`)
+    if (labels.length === 0) {
+      return status
+    }
+    return `${status} · ${t('chat.workspaceDrawerSubmodule')}: ${labels.join(', ')}`
+  }, [entry, t])
+
+  return (
+    <button
+      type='button'
+      className={`chat-workspace-drawer__changed-file ${selectedFilePath === entry.file.path ? 'is-selected' : ''}`}
+      title={entry.file.path}
+      onClick={() => onOpenFile?.(entry.file.path)}
+    >
+      <span className={`material-symbols-rounded chat-workspace-drawer__changed-icon is-${icon.tone}`}>
+        {icon.icon}
+      </span>
+      <span className='chat-workspace-drawer__changed-copy'>
+        <span className='chat-workspace-drawer__changed-name'>{fileName}</span>
+        {showDirectory && directory !== '' && (
+          <span className='chat-workspace-drawer__changed-path'>{directory}</span>
+        )}
+      </span>
+      <Tooltip title={statusTooltip}>
+        <span
+          className={`chat-workspace-drawer__changed-status-dot is-${entry.scope}`}
+          aria-label={statusTooltip}
+        />
+      </Tooltip>
+    </button>
+  )
+}

package/src/components/chat/workspace-drawer/WorkspaceDrawerChangedFiles.tsx

@@ -0,0 +1,161 @@
+import { Button, Empty, Spin } from 'antd'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { GitRepositoryState } from '@vibe-forge/types'
+
+import { WorkspaceDrawerChangedFileRow } from './WorkspaceDrawerChangedFileRow'
+import { WorkspaceDrawerChangedFolderTree } from './WorkspaceDrawerChangedFolderTree'
+import type {
+  ChangedFileScope,
+  ChangedFilesLayout,
+  ChangedTreeCommand,
+  SelectedChangedFolder
+} from './changed-files-model'
+import { buildChangedFolderTree, getChangedFileSections } from './changed-files-model'
+
+export function WorkspaceDrawerChangedFiles({
+  command,
+  isLoading,
+  layout,
+  onOpenFile,
+  repoState,
+  selectedFilePath
+}: {
+  command: ChangedTreeCommand | null
+  isLoading: boolean
+  layout: ChangedFilesLayout
+  onOpenFile?: (path: string) => void
+  repoState?: GitRepositoryState
+  selectedFilePath?: string | null
+}) {
+  const { t } = useTranslation()
+  const [collapsedScopes, setCollapsedScopes] = useState<Set<ChangedFileScope>>(new Set())
+  const [selectedFolder, setSelectedFolder] = useState<SelectedChangedFolder | null>(null)
+  const changedFiles = useMemo(() => {
+    if (repoState?.available !== true) {
+      return []
+    }
+    return repoState.changedFiles ?? []
+  }, [repoState])
+  const sections = useMemo(() => getChangedFileSections(changedFiles), [changedFiles])
+  const sectionScopes = useMemo(() => sections.map(section => section.scope), [sections])
+  const sectionTrees = useMemo(() => {
+    return new Map(sections.map(section => [section.scope, buildChangedFolderTree(section.entries)]))
+  }, [sections])
+
+  useEffect(() => {
+    setCollapsedScopes(prev => new Set(Array.from(prev).filter(scope => sectionScopes.includes(scope))))
+  }, [sectionScopes])
+
+  useEffect(() => {
+    if (layout !== 'folders') {
+      setSelectedFolder(null)
+    }
+  }, [layout])
+
+  useEffect(() => {
+    if (command == null) {
+      return
+    }
+
+    if (selectedFolder == null) {
+      setCollapsedScopes(command.action === 'expand' ? new Set() : new Set(sectionScopes))
+      return
+    }
+
+    if (command.action === 'expand') {
+      setCollapsedScopes((prev) => {
+        const next = new Set(prev)
+        next.delete(selectedFolder.scope)
+        return next
+      })
+    }
+  }, [command, sectionScopes, selectedFolder])
+
+  const toggleSection = (scope: ChangedFileScope) => {
+    setCollapsedScopes((prev) => {
+      const next = new Set(prev)
+      if (next.has(scope)) {
+        next.delete(scope)
+      } else {
+        next.add(scope)
+      }
+      return next
+    })
+  }
+
+  if (isLoading) {
+    return (
+      <div className='chat-workspace-drawer__loading'>
+        <Spin size='small' />
+        <span>{t('chat.workspaceDrawerLoadingGit')}</span>
+      </div>
+    )
+  }
+
+  if (repoState != null && repoState.available !== true) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('chat.workspaceDrawerGitUnavailable')} />
+  }
+
+  if (sections.length === 0) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('chat.workspaceDrawerNoChangedFiles')} />
+  }
+
+  return (
+    <div className='chat-workspace-drawer__changed-list'>
+      <div className='chat-workspace-drawer__changed-sections'>
+        {sections.map((section) => {
+          const isCollapsed = collapsedScopes.has(section.scope)
+          return (
+            <section key={section.scope} className='chat-workspace-drawer__changed-section'>
+              <div className='chat-workspace-drawer__changed-section-header'>
+                <span>{t(`chat.workspaceDrawerChangedSection.${section.scope}`)}</span>
+                <span className='chat-workspace-drawer__changed-section-meta'>
+                  <span>{section.count}</span>
+                  <Button
+                    type='text'
+                    className='chat-workspace-drawer__changed-section-toggle'
+                    aria-label={t('chat.workspaceDrawerToggleSection')}
+                    aria-expanded={!isCollapsed}
+                    onClick={() => toggleSection(section.scope)}
+                  >
+                    <span className='material-symbols-rounded'>{isCollapsed ? 'expand_more' : 'expand_less'}</span>
+                  </Button>
+                </span>
+              </div>
+              <div
+                className={`chat-workspace-drawer__changed-section-body ${
+                  isCollapsed ? 'is-collapsed' : 'is-expanded'
+                }`}
+              >
+                <div className='chat-workspace-drawer__changed-section-body-inner'>
+                  {layout === 'folders'
+                    ? (
+                      <WorkspaceDrawerChangedFolderTree
+                        command={command}
+                        root={sectionTrees.get(section.scope) ?? buildChangedFolderTree([])}
+                        scope={section.scope}
+                        selectedFolder={selectedFolder}
+                        selectedFilePath={selectedFilePath}
+                        onOpenFile={onOpenFile}
+                        onSelectFolder={setSelectedFolder}
+                      />
+                    )
+                    : section.entries.map(entry => (
+                      <WorkspaceDrawerChangedFileRow
+                        key={entry.key}
+                        entry={entry}
+                        selectedFilePath={selectedFilePath}
+                        onOpenFile={onOpenFile}
+                      />
+                    ))}
+                </div>
+              </div>
+            </section>
+          )
+        })}
+      </div>
+    </div>
+  )
+}