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

package/src/components/sidebar-list/SidebarListHeader.tsx

@@ -0,0 +1,146 @@
+import './SidebarListHeader.scss'
+
+import { Button, Input, Tooltip } from 'antd'
+import type { TooltipProps } from 'antd'
+import type { ChangeEventHandler, ReactNode, Ref } from 'react'
+
+interface SidebarListHeaderProps {
+  children?: ReactNode
+  className?: string
+  compact?: boolean
+  collapsed?: boolean
+  primaryAction: ReactNode
+  sideAction?: ReactNode
+}
+
+interface SidebarListSearchInputProps {
+  allowClear?: boolean
+  className?: string
+  disabled?: boolean
+  placeholder: string
+  suffix?: ReactNode
+  value: string
+  onChange: ChangeEventHandler<HTMLInputElement>
+}
+
+interface SidebarListCollapsedActionsProps {
+  children: ReactNode
+  className?: string
+}
+
+interface SidebarListCollapsedActionButtonProps {
+  active?: boolean
+  ariaLabel?: string
+  buttonRef?: Ref<HTMLAnchorElement | HTMLButtonElement>
+  className?: string
+  disabled?: boolean
+  filled?: boolean
+  icon: string
+  tooltip?: ReactNode
+  tooltipPlacement?: TooltipProps['placement']
+  onClick?: () => void
+}
+
+export function SidebarListHeader({
+  children,
+  className,
+  compact = false,
+  collapsed = false,
+  primaryAction,
+  sideAction
+}: SidebarListHeaderProps) {
+  const rootClassName = [
+    'sidebar-list-header',
+    compact ? 'sidebar-list-header--compact' : '',
+    collapsed ? 'sidebar-list-header--collapsed' : '',
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <div className={rootClassName}>
+      <div className='sidebar-list-header__top'>
+        <div className='sidebar-list-header__primary'>
+          {primaryAction}
+        </div>
+        {sideAction != null && (
+          <div className='sidebar-list-header__side'>
+            {sideAction}
+          </div>
+        )}
+      </div>
+      {!collapsed && children != null && (
+        <div className='sidebar-list-header__content'>
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function SidebarListCollapsedActions({
+  children,
+  className
+}: SidebarListCollapsedActionsProps) {
+  return (
+    <div className={['sidebar-list-collapsed-actions', className].filter(Boolean).join(' ')}>
+      {children}
+    </div>
+  )
+}
+
+export function SidebarListCollapsedActionButton({
+  active = false,
+  ariaLabel,
+  buttonRef,
+  className,
+  disabled,
+  filled = false,
+  icon,
+  tooltip,
+  tooltipPlacement = 'bottom',
+  onClick
+}: SidebarListCollapsedActionButtonProps) {
+  return (
+    <Tooltip title={tooltip} placement={tooltipPlacement}>
+      <Button
+        ref={buttonRef}
+        className={[
+          'sidebar-list-collapsed-actions__control',
+          active ? 'active' : '',
+          className
+        ].filter(Boolean).join(' ')}
+        type='text'
+        aria-label={ariaLabel}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        <span className={`material-symbols-rounded ${filled ? 'filled' : ''}`}>
+          {icon}
+        </span>
+      </Button>
+    </Tooltip>
+  )
+}
+
+export function SidebarListSearchInput({
+  allowClear = true,
+  className,
+  disabled,
+  placeholder,
+  suffix,
+  value,
+  onChange
+}: SidebarListSearchInputProps) {
+  return (
+    <Input
+      className={['sidebar-list-header__search-input', className].filter(Boolean).join(' ')}
+      disabled={disabled}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      prefix={<span className='material-symbols-rounded sidebar-list-header__search-icon'>search</span>}
+      suffix={suffix}
+      allowClear={allowClear}
+    />
+  )
+}

package/src/components/workspace/ContextFilePicker.scss

@@ -1,4 +1,13 @@
 .context-file-picker {
+  --project-tree-row-hover-bg: var(
+    --workspace-drawer-row-hover-bg,
+    rgba(59, 130, 246, .09)
+  );
+  --project-tree-row-selected-bg: var(
+    --workspace-drawer-row-selected-bg,
+    rgba(59, 130, 246, .14)
+  );
+
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -19,37 +28,11 @@
     font-size: 13px;
   }
 
-  &__switcher {
-    font-size: 18px;
-    color: var(--sub-text-color, #6b7280);
-  }
-
   &__footer {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
   }
-
-  .ant-tree {
-    background: transparent;
-    color: var(--text-color);
-  }
-
-  .ant-tree-list-holder-inner {
-    gap: 2px;
-  }
-
-  .ant-tree-node-content-wrapper {
-    min-height: 34px;
-    border-radius: 8px;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .ant-tree-checkbox + .ant-tree-node-content-wrapper:hover,
-  .ant-tree-node-content-wrapper:hover {
-    background: var(--tag-hover-bg, #f3f4f6);
-  }
 }
 
 .context-file-picker--inline {

package/src/components/workspace/ContextFilePicker.tsx

@@ -1,62 +1,15 @@
 import './ContextFilePicker.scss'
 
-import { App, Button, Empty, Modal, Spin, Tree } from 'antd'
-import type { DataNode } from 'antd/es/tree'
+import { Button, Modal } from 'antd'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { listSessionWorkspaceTree, listWorkspaceTree } from '#~/api'
+import type { ContextPickerFile } from './context-file-types'
+import { toContextPickerFiles } from './context-file-types'
+import { ProjectFileTree } from './project-file-tree/ProjectFileTree'
+import type { ProjectFileTreeSelection } from './project-file-tree/project-file-tree-types'
 
-export interface ContextPickerFile {
-  path: string
-  name?: string
-}
-
-interface ContextFileTreeNode extends DataNode {
-  key: string
-  path: string
-  title: string
-  children?: ContextFileTreeNode[]
-  isLeaf?: boolean
-  disableCheckbox?: boolean
-}
-
-const replaceNodeChildren = (
-  nodes: ContextFileTreeNode[],
-  targetPath: string,
-  children: ContextFileTreeNode[]
-): ContextFileTreeNode[] => {
-  return nodes.map((node) => {
-    if (node.path === targetPath) {
-      return {
-        ...node,
-        children
-      }
-    }
-    if (node.children == null) {
-      return node
-    }
-    return {
-      ...node,
-      children: replaceNodeChildren(node.children, targetPath, children)
-    }
-  })
-}
-
-const toTreeNodes = (entries: Awaited<ReturnType<typeof listWorkspaceTree>>['entries']): ContextFileTreeNode[] =>
-  entries.map(entry => ({
-    key: entry.path,
-    path: entry.path,
-    title: entry.name,
-    isLeaf: entry.type === 'file',
-    disableCheckbox: entry.type !== 'file'
-  }))
-
-const toPendingFiles = (paths: string[]): ContextPickerFile[] =>
-  paths.map(path => ({
-    path,
-    name: path.split('/').pop() ?? path
-  }))
+export type { ContextPickerFile } from './context-file-types'
 
 export function ContextFilePicker({
   open,
@@ -74,83 +27,48 @@ export function ContextFilePicker({
   onConfirm: (files: ContextPickerFile[]) => void
 }) {
   const { t } = useTranslation()
-  const { message } = App.useApp()
-  const [checkedKeys, setCheckedKeys] = useState<string[]>(selectedPaths)
-  const [treeData, setTreeData] = useState<ContextFileTreeNode[]>([])
-  const [loadingRoot, setLoadingRoot] = useState(false)
-  const loadWorkspaceTree = async (path?: string) => {
-    if (sessionId != null && sessionId !== '') {
-      return await listSessionWorkspaceTree(sessionId, path)
-    }
-    return await listWorkspaceTree(path)
-  }
+  const [checkedPaths, setCheckedPaths] = useState<string[]>(selectedPaths)
+  const [selectedFiles, setSelectedFiles] = useState<ContextPickerFile[]>([])
+  const selectedPathsKey = selectedPaths.join('\0')
 
   useEffect(() => {
     if (!open) {
       return
     }
 
-    setCheckedKeys(selectedPaths)
-    setLoadingRoot(true)
-    void loadWorkspaceTree()
-      .then((result) => {
-        setTreeData(toTreeNodes(result.entries))
-      })
-      .catch(() => {
-        void message.error(t('chat.contextPickerLoadFailed'))
-      })
-      .finally(() => {
-        setLoadingRoot(false)
-      })
-  }, [message, open, selectedPaths, sessionId, t])
+    const nextPaths = selectedPathsKey === '' ? [] : selectedPathsKey.split('\0')
+    setCheckedPaths(nextPaths)
+    setSelectedFiles(toContextPickerFiles(nextPaths, []))
+  }, [open, selectedPathsKey])
 
-  const loadData = async (node: DataNode) => {
-    const path = String(node.key)
-    const result = await loadWorkspaceTree(path)
-    setTreeData(prev => replaceNodeChildren(prev, path, toTreeNodes(result.entries)))
+  const handleSelectionChange = (selection: ProjectFileTreeSelection) => {
+    setCheckedPaths(selection.paths)
+    setSelectedFiles(toContextPickerFiles(selection.paths, selection.nodes))
+  }
+  const handleConfirm = () => {
+    onConfirm(toContextPickerFiles(checkedPaths, selectedFiles))
   }
 
   const body = (
     <div className={`context-file-picker ${variant === 'inline' ? 'context-file-picker--inline' : ''}`.trim()}>
       <div className='context-file-picker__body'>
-        {loadingRoot
-          ? (
-            <div className='context-file-picker__loading'>
-              <Spin size='small' />
-              <span>{t('chat.contextPickerLoading')}</span>
-            </div>
-          )
-          : treeData.length === 0
-          ? (
-            <Empty
-              image={Empty.PRESENTED_IMAGE_SIMPLE}
-              description={t('chat.contextPickerEmpty')}
-            />
-          )
-          : (
-            <Tree
-              blockNode
-              checkable
-              checkStrictly
-              treeData={treeData}
-              checkedKeys={checkedKeys}
-              loadData={loadData}
-              switcherIcon={
-                <span className='material-symbols-rounded context-file-picker__switcher'>chevron_right</span>
-              }
-              onCheck={(keys) => {
-                const nextKeys = Array.isArray(keys) ? keys : keys.checked
-                setCheckedKeys(nextKeys.map(String))
-              }}
-            />
-          )}
+        {open && (
+          <ProjectFileTree
+            selectableTypes='all'
+            selectedPaths={checkedPaths}
+            selectionMode='multiple'
+            sessionId={sessionId}
+            showLoadingState
+            onSelectionChange={handleSelectionChange}
+          />
+        )}
       </div>
       {variant === 'inline' && (
         <div className='context-file-picker__footer'>
           <Button size='small' onClick={onCancel}>
             {t('common.cancel')}
           </Button>
-          <Button type='primary' size='small' onClick={() => onConfirm(toPendingFiles(checkedKeys))}>
+          <Button type='primary' size='small' onClick={handleConfirm}>
             {t('chat.contextPickerConfirm')}
           </Button>
         </div>
@@ -170,7 +88,7 @@ export function ContextFilePicker({
       cancelText={t('common.cancel')}
       width={640}
       onCancel={onCancel}
-      onOk={() => onConfirm(toPendingFiles(checkedKeys))}
+      onOk={handleConfirm}
       className='context-file-picker-modal'
     >
       {body}

package/src/components/workspace/context-file-types.ts

@@ -0,0 +1,36 @@
+import type { WorkspaceTreeEntry } from '#~/api'
+
+export interface ContextPickerFile {
+  path: string
+  name?: string
+  size?: number
+}
+
+export interface ContextReferenceRequest {
+  id: number
+  files: ContextPickerFile[]
+}
+
+type ContextPickerFileEntry = Pick<ContextPickerFile, 'name' | 'path'>
+
+export const getContextFileName = (path: string) => path.split(/[\\/]/).filter(Boolean).at(-1) ?? path
+
+export const toContextPickerFile = (
+  entry: ContextPickerFileEntry | Pick<WorkspaceTreeEntry, 'name' | 'path'>
+): ContextPickerFile => ({
+  path: entry.path,
+  name: entry.name || getContextFileName(entry.path)
+})
+
+export const toContextPickerFiles = (
+  paths: string[],
+  entries: Array<ContextPickerFileEntry | Pick<WorkspaceTreeEntry, 'name' | 'path'>>
+): ContextPickerFile[] => {
+  const entryByPath = new Map(entries.map(entry => [entry.path, entry]))
+  return paths.map((path) => {
+    const entry = entryByPath.get(path)
+    return entry == null
+      ? { path, name: getContextFileName(path) }
+      : toContextPickerFile(entry)
+  })
+}

package/src/components/workspace/project-file-tree/ProjectFileTree.scss

@@ -0,0 +1,298 @@
+.project-file-tree {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.project-file-tree__item {
+  min-width: 0;
+}
+
+.project-file-tree__row {
+  width: 100%;
+  min-width: 0;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 6px 0 calc(4px + var(--project-tree-depth, 0) * 14px);
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  appearance: none;
+  font-family: inherit;
+  text-align: left;
+  transition: background-color .18s ease, color .18s ease, transform .18s ease;
+
+  &.is-directory,
+  &.is-file {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background-color: var(
+      --project-tree-row-hover-bg,
+      var(--workspace-drawer-row-hover-bg, rgba(59, 130, 246, .09))
+    );
+  }
+
+  &.is-disabled {
+    color: var(--sub-text-color);
+    cursor: default;
+    opacity: .58;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  &.is-selected {
+    background-color: var(
+      --project-tree-row-selected-bg,
+      var(--workspace-drawer-row-selected-bg, rgba(59, 130, 246, .14))
+    );
+
+    &.has-selected-before {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &.has-selected-after {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  &.is-directory.is-expanded .project-file-tree__icon-wrap {
+    transform: rotate(-4deg) scale(1.04);
+  }
+}
+
+.project-file-tree__row--loading {
+  justify-content: flex-start;
+  color: var(--sub-text-color);
+}
+
+.project-file-tree__icon,
+.project-file-tree__icon-wrap,
+.project-file-tree__icon-badge,
+.project-file-tree__link-indicator {
+  transition:
+    color .18s ease,
+    transform .18s ease,
+    font-variation-settings .18s ease;
+
+  &.is-folder {
+    color: #d97706;
+  }
+
+  &.is-source,
+  &.is-typescript,
+  &.is-api {
+    color: #2563eb;
+  }
+
+  &.is-javascript {
+    color: #ca8a04;
+  }
+
+  &.is-style,
+  &.is-component {
+    color: #db2777;
+  }
+
+  &.is-docs,
+  &.is-markdown {
+    color: #0f766e;
+  }
+
+  &.is-ai,
+  &.is-config,
+  &.is-json {
+    color: #7c3aed;
+  }
+
+  &.is-package,
+  &.is-app,
+  &.is-route {
+    color: #0891b2;
+  }
+
+  &.is-script,
+  &.is-env,
+  &.is-lock {
+    color: #64748b;
+  }
+
+  &.is-submodule {
+    color: #8b5cf6;
+  }
+
+  &.is-git {
+    color: #f97316;
+  }
+
+  &.is-symlink,
+  &.is-symlink-external,
+  &.is-symlink-broken,
+  &.is-ignore {
+    color: #94a3b8;
+  }
+
+  &.is-symlink-broken {
+    color: #ef4444;
+  }
+
+  &.is-asset,
+  &.is-image {
+    color: #16a34a;
+  }
+
+  &.is-test {
+    color: #ea580c;
+  }
+}
+
+.project-file-tree__icon-wrap {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.project-file-tree__icon.material-symbols-rounded {
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.project-file-tree__icon-badge.material-symbols-rounded {
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-color);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.project-file-tree__name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-color);
+  font-size: 13px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-file-tree__link-indicator {
+  width: 18px;
+  height: 18px;
+  margin-left: auto;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  color: var(--sub-text-color);
+  font-size: 14px;
+  line-height: 1;
+}
+
+.project-file-tree__row:hover .project-file-tree__link-indicator {
+  background-color: var(--sub-bg-color);
+}
+
+.project-file-tree__children {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-2px);
+  transition:
+    grid-template-rows .22s ease,
+    opacity .18s ease,
+    transform .18s ease,
+    visibility 0s linear .22s;
+}
+
+.project-file-tree__children.is-expanded {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  transition-delay: 0s;
+}
+
+.project-file-tree__children-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.project-file-tree__loading {
+  min-height: 92px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--sub-text-color);
+  font-size: 12px;
+}
+
+.project-file-tree__menu-icon.material-symbols-rounded {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sub-text-color);
+  font-size: 16px;
+  line-height: 1;
+}
+
+.project-file-tree-context-dropdown.ant-dropdown {
+  .ant-dropdown-menu {
+    min-width: 180px;
+    padding: 4px;
+    border-radius: 8px;
+    background-color: var(--bg-color);
+    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
+  }
+
+  .ant-dropdown-menu-item {
+    min-height: 28px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 13px;
+    line-height: 1.2;
+  }
+
+  .ant-dropdown-menu-title-content {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-file-tree__row,
+  .project-file-tree__children,
+  .project-file-tree__icon,
+  .project-file-tree__icon-wrap {
+    transition: none;
+  }
+}