@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/sidebar/SidebarHeader.tsx

@@ -4,6 +4,7 @@ import { Button, Tooltip } from 'antd'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { SidebarListHeader } from '#~/components/sidebar-list/SidebarListHeader'
 import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import type { SidebarSessionSortOrder } from '#~/hooks/use-sidebar-query-state'
 import { SidebarHeaderSearchActions } from './SidebarHeaderSearchActions'
@@ -74,73 +75,80 @@ export function SidebarHeader({
   const [isSearchActionsOpen, setIsSearchActionsOpen] = useState(false)
   const shouldShowSearchActions = !isSidebarCollapsed && (isSearchActionsOpen || isBatchMode)
 
-  return (
-    <div className={`sidebar-header ${isCompactLayout ? 'sidebar-header--compact' : ''}`.trim()}>
-      <div className='header-top'>
-        {!isSidebarCollapsed
-          ? (
-            <Button
-              ref={createButtonRef as React.Ref<HTMLAnchorElement | HTMLButtonElement>}
-              className={`new-chat-btn ${isCreatingSession ? 'active' : ''}`}
-              type={isCreatingSession ? 'default' : 'primary'}
-              block
-              disabled={!!isCreatingSession}
-              onClick={onCreateSession}
-            >
-              <span className='btn-content'>
-                <span className={`material-symbols-rounded ${isCreatingSession ? 'filled' : ''}`}>
-                  {isCreatingSession ? 'chat_bubble' : 'send'}
-                </span>
-                <span>{isCreatingSession ? t('common.creatingChat') : t('common.newChat')}</span>
-              </span>
-              <span className='shortcut-tag'>
-                {shortcutLabel}
-              </span>
-            </Button>
-          )
-          : (
-            <Tooltip
-              title={isTouchInteraction
-                ? undefined
-                : (isCreatingSession ? t('common.alreadyInNewChat') : t('common.newChat'))}
-              placement='right'
-            >
-              <Button
-                className={`sidebar-new-chat-btn ${isCreatingSession ? 'active' : ''}`}
-                type='text'
-                disabled={!!isCreatingSession}
-                onClick={onCreateSession}
-              >
-                <span className={`material-symbols-rounded ${isCreatingSession ? 'filled' : ''}`}>
-                  {isCreatingSession ? 'chat_bubble' : 'send'}
-                </span>
-              </Button>
-            </Tooltip>
-          )}
-        <Tooltip
-          title={isTouchInteraction ? undefined : (
-            isCompactLayout ? t('common.close') : (
-              isSidebarCollapsed ? t('common.expand') : t('common.collapse')
-            )
-          )}
+  const primaryAction = !isSidebarCollapsed
+    ? (
+      <Button
+        ref={createButtonRef as React.Ref<HTMLAnchorElement | HTMLButtonElement>}
+        className={`sidebar-list-header__primary-action new-chat-btn ${isCreatingSession ? 'active' : ''}`}
+        type={isCreatingSession ? 'default' : 'primary'}
+        block
+        disabled={!!isCreatingSession}
+        onClick={onCreateSession}
+      >
+        <span className='sidebar-list-header__button-content btn-content'>
+          <span className={`material-symbols-rounded ${isCreatingSession ? 'filled' : ''}`}>
+            {isCreatingSession ? 'chat_bubble' : 'send'}
+          </span>
+          <span>{isCreatingSession ? t('common.creatingChat') : t('common.newChat')}</span>
+        </span>
+        <span className='sidebar-list-header__shortcut shortcut-tag'>
+          {shortcutLabel}
+        </span>
+      </Button>
+    )
+    : (
+      <Tooltip
+        title={isTouchInteraction
+          ? undefined
+          : (isCreatingSession ? t('common.alreadyInNewChat') : t('common.newChat'))}
+        placement='right'
+      >
+        <Button
+          className={`sidebar-list-header__icon-action sidebar-new-chat-btn ${isCreatingSession ? 'active' : ''}`}
+          type='text'
+          disabled={!!isCreatingSession}
+          onClick={onCreateSession}
         >
-          <Button
-            className='sidebar-collapse-btn'
-            type='text'
-            aria-label={isCompactLayout ? t('common.close') : (
-              isSidebarCollapsed ? t('common.expand') : t('common.collapse')
-            )}
-            onClick={isCompactLayout
-              ? onCloseSidebar
-              : onToggleSidebarCollapsed}
-          >
-            <span className='material-symbols-rounded'>
-              {isCompactLayout ? 'close' : isSidebarCollapsed ? 'dock_to_right' : 'left_panel_close'}
-            </span>
-          </Button>
-        </Tooltip>
-      </div>
+          <span className={`material-symbols-rounded ${isCreatingSession ? 'filled' : ''}`}>
+            {isCreatingSession ? 'chat_bubble' : 'send'}
+          </span>
+        </Button>
+      </Tooltip>
+    )
 
+  const sideAction = (
+    <Tooltip
+      title={isTouchInteraction ? undefined : (
+        isCompactLayout ? t('common.close') : (
+          isSidebarCollapsed ? t('common.expand') : t('common.collapse')
+        )
+      )}
+    >
+      <Button
+        className='sidebar-list-header__icon-action sidebar-collapse-btn'
+        type='text'
+        aria-label={isCompactLayout ? t('common.close') : (
+          isSidebarCollapsed ? t('common.expand') : t('common.collapse')
+        )}
+        onClick={isCompactLayout
+          ? onCloseSidebar
+          : onToggleSidebarCollapsed}
+      >
+        <span className='material-symbols-rounded'>
+          {isCompactLayout ? 'close' : isSidebarCollapsed ? 'dock_to_right' : 'left_panel_close'}
+        </span>
+      </Button>
+    </Tooltip>
+  )
+
+  return (
+    <SidebarListHeader
+      className='sidebar-header'
+      compact={isCompactLayout}
+      collapsed={isSidebarCollapsed}
+      primaryAction={primaryAction}
+      sideAction={sideAction}
+    >
       {!isSidebarCollapsed && (
         <SidebarHeaderSearchActions
           adapterFilters={adapterFilters}
@@ -167,6 +175,6 @@ export function SidebarHeader({
           onToggleSearchActions={() => setIsSearchActionsOpen((prev) => !prev)}
         />
       )}
-    </div>
+    </SidebarListHeader>
   )
 }

package/src/components/sidebar/SidebarHeaderSearchActions.tsx

@@ -1,7 +1,8 @@
-import { Button, Input, Tooltip } from 'antd'
+import { Button, Tooltip } from 'antd'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { SidebarListSearchInput } from '#~/components/sidebar-list/SidebarListHeader'
 import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import type { SidebarSessionSortOrder } from '#~/hooks/use-sidebar-query-state'
 import { SidebarHeaderBatchActions } from './SidebarHeaderBatchActions'
@@ -72,33 +73,28 @@ export function SidebarHeaderSearchActions({
 
   return (
     <>
-      <div className='header-search-row'>
-        <div className='search-input-wrap'>
-          <Input
-            className='search-input'
-            placeholder={t('common.search')}
-            value={searchQuery}
-            onChange={(e) => onSearchChange(e.target.value)}
-            prefix={<span className='material-symbols-rounded search-icon'>search</span>}
-            suffix={
-              <Tooltip title={resolveTooltipTitle(t('common.searchActions'))}>
-                <button
-                  type='button'
-                  className={`search-toggle-button ${shouldShowSearchActions ? 'is-open' : ''} ${
-                    hasActiveSearchControls ? 'has-active-filters' : ''
-                  }`}
-                  aria-label={t('common.searchActions')}
-                  onMouseDown={(event) => event.preventDefault()}
-                  onClick={onToggleSearchActions}
-                >
-                  <span className='material-symbols-rounded search-chevron'>expand_more</span>
-                </button>
-              </Tooltip>
-            }
-            allowClear
-          />
-        </div>
-      </div>
+      <SidebarListSearchInput
+        className='search-input'
+        placeholder={t('common.search')}
+        value={searchQuery}
+        onChange={(e) => onSearchChange(e.target.value)}
+        suffix={
+          <Tooltip title={resolveTooltipTitle(t('common.searchActions'))}>
+            <button
+              type='button'
+              className={`search-toggle-button ${shouldShowSearchActions ? 'is-open' : ''} ${
+                hasActiveSearchControls ? 'has-active-filters' : ''
+              }`}
+              aria-label={t('common.searchActions')}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={onToggleSearchActions}
+            >
+              <span className='material-symbols-rounded search-chevron'>expand_more</span>
+            </button>
+          </Tooltip>
+        }
+        allowClear
+      />
       <div className={`header-search-actions ${shouldShowSearchActions ? 'is-open' : ''}`}>
         <div className='header-search-actions-inner'>
           <div className='header-toolbar-row'>

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

@@ -0,0 +1,246 @@
+.sidebar-list-header {
+  padding: 10px 12px 0;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+
+  &__top {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  &__primary {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  &__side {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  &__content {
+    margin-top: 6px;
+  }
+
+  &__primary-action.ant-btn {
+    height: 28px;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8px;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 8px;
+    transition:
+      transform .2s cubic-bezier(.4, 0, .2, 1),
+      background-color .2s ease,
+      border-color .2s ease,
+      color .2s ease;
+
+    &.active-scale {
+      transform: scale(.96);
+    }
+
+    &.active {
+      background-color: transparent !important;
+      border: 1px solid var(--sidebar-active-text) !important;
+      color: var(--sidebar-active-text) !important;
+      opacity: 1 !important;
+      cursor: default;
+      box-shadow: none;
+
+      .sidebar-list-header__shortcut {
+        display: none;
+      }
+
+      &:hover {
+        background-color: transparent !important;
+        color: var(--sidebar-active-text) !important;
+      }
+    }
+  }
+
+  &__button-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+
+    .material-symbols-rounded {
+      font-size: 16px;
+      line-height: 1;
+    }
+
+    > span:last-child {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__shortcut {
+    font-size: 11px;
+    opacity: .8;
+    font-family:
+      ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
+      monospace;
+    background: rgba(255, 255, 255, .2);
+    padding: 1px 5px;
+    border-radius: 3px;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  &__icon-action.ant-btn {
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--sub-text-color);
+    flex-shrink: 0;
+
+    .material-symbols-rounded {
+      font-size: 18px;
+      display: inline-flex;
+      align-items: center;
+      line-height: 1;
+    }
+  }
+
+  &__search-input.ant-input-affix-wrapper {
+    width: 100%;
+    height: 30px;
+    min-width: 0;
+    padding: 0 8px !important;
+    border-radius: 6px;
+    border-width: 1px !important;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    transition: border-color .2s ease, box-shadow .2s ease;
+
+    &.ant-input-affix-wrapper-focused,
+    &:focus-within {
+      border-color: rgba(37, 99, 235, .32) !important;
+      box-shadow: none !important;
+    }
+
+    .ant-input {
+      font-size: 12px;
+    }
+
+    .ant-input-prefix {
+      margin-inline-end: 4px;
+    }
+
+    .ant-input-suffix {
+      display: inline-flex;
+      align-items: center;
+      margin-inline-start: 4px;
+    }
+
+    .ant-input-clear-icon {
+      font-size: 12px;
+    }
+  }
+
+  &__search-icon {
+    font-size: 14px;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+    color: var(--sub-text-color);
+  }
+}
+
+.sidebar-list-header--compact {
+  padding-top: 12px;
+
+  .sidebar-list-header__top {
+    align-items: stretch;
+  }
+
+  .sidebar-list-header__primary-action.ant-btn {
+    height: 40px;
+    min-height: 40px;
+    padding: 0 12px;
+    font-size: 13px;
+  }
+
+  .sidebar-list-header__icon-action.ant-btn {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    min-height: 40px;
+    border-radius: 8px;
+  }
+
+  .sidebar-list-header__content {
+    margin-top: 8px;
+  }
+
+  .sidebar-list-header__search-input.ant-input-affix-wrapper {
+    height: 40px;
+    min-height: 40px;
+    padding: 0 10px !important;
+
+    .ant-input {
+      font-size: 13px;
+    }
+  }
+}
+
+.sidebar-list-collapsed-actions {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sidebar-list-collapsed-actions__control.ant-btn {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--sub-text-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color .2s ease, color .2s ease;
+
+  .material-symbols-rounded {
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  &:hover {
+    background-color: var(--nav-hover-bg, #f3f4f6);
+    color: var(--text-color, #111827);
+  }
+
+  &.active {
+    background-color: var(--nav-active-bg, #eff6ff);
+    color: var(--nav-active-text, #2563eb);
+
+    .material-symbols-rounded {
+      font-variation-settings: 'FILL' 1;
+    }
+  }
+}

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 {