@vibe-forge/client 3.0.0-alpha.6 → 3.0.0-alpha.7

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

@@ -1,112 +0,0 @@
-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

@@ -1,183 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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>
-  )
-}