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

package/src/components/sidebar/SidebarHeader.tsx

@@ -1,12 +1,17 @@
 import './SidebarHeader.scss'
 
 import { Button, Tooltip } from 'antd'
+import { useAtomValue } from 'jotai'
 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 { sessionListSearchThresholdAtom } from '#~/store/index'
+
 import { SidebarHeaderSearchActions } from './SidebarHeaderSearchActions'
+import { shouldShowSidebarSearchRow } from './sidebar-search-visibility'
 
 interface SidebarHeaderProps {
   adapterFilters: string[]
@@ -20,6 +25,7 @@ interface SidebarHeaderProps {
   isSidebarCollapsed: boolean
   searchQuery: string
   selectedCount: number
+  sessionCount: number
   sortOrder: SidebarSessionSortOrder
   sortSelection?: SidebarSessionSortOrder
   shortcutLabel: string
@@ -51,6 +57,7 @@ export function SidebarHeader({
   isSidebarCollapsed,
   searchQuery,
   selectedCount,
+  sessionCount,
   sortOrder,
   sortSelection,
   shortcutLabel,
@@ -71,102 +78,121 @@ export function SidebarHeader({
 }: SidebarHeaderProps) {
   const { t } = useTranslation()
   const { isTouchInteraction } = useResponsiveLayout()
+  const sessionListSearchThreshold = useAtomValue(sessionListSearchThresholdAtom)
   const [isSearchActionsOpen, setIsSearchActionsOpen] = useState(false)
   const shouldShowSearchActions = !isSidebarCollapsed && (isSearchActionsOpen || isBatchMode)
+  const shouldShowSearchRow = !isSidebarCollapsed && shouldShowSidebarSearchRow({
+    hasActiveSearchControls,
+    isBatchMode,
+    isSearchActionsOpen,
+    sessionCount,
+    threshold: sessionListSearchThreshold
+  })
 
-  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>
+    )
 
-      {!isSidebarCollapsed && (
-        <SidebarHeaderSearchActions
-          adapterFilters={adapterFilters}
-          availableAdapters={availableAdapters}
-          availableTags={availableTags}
-          hasActiveSearchControls={hasActiveSearchControls}
-          isBatchMode={isBatchMode}
-          searchQuery={searchQuery}
-          selectedCount={selectedCount}
-          shouldShowSearchActions={shouldShowSearchActions}
-          sortOrder={sortOrder}
-          sortSelection={sortSelection}
-          tagFilters={tagFilters}
-          totalCount={totalCount}
-          onBatchArchive={onBatchArchive}
-          onBatchDelete={onBatchDelete}
-          onBatchStar={onBatchStar}
-          onAdapterFilterChange={onAdapterFilterChange}
-          onSearchChange={onSearchChange}
-          onSortOrderChange={onSortOrderChange}
-          onSelectAll={onSelectAll}
-          onTagFilterChange={onTagFilterChange}
-          onToggleBatchMode={onToggleBatchMode}
-          onToggleSearchActions={() => setIsSearchActionsOpen((prev) => !prev)}
-        />
+  const sideAction = (
+    <Tooltip
+      title={isTouchInteraction ? undefined : (
+        isCompactLayout ? t('common.close') : (
+          isSidebarCollapsed ? t('common.expand') : t('common.collapse')
+        )
       )}
-    </div>
+    >
+      <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>
+  )
+
+  const headerContent = shouldShowSearchRow
+    ? (
+      <SidebarHeaderSearchActions
+        adapterFilters={adapterFilters}
+        availableAdapters={availableAdapters}
+        availableTags={availableTags}
+        hasActiveSearchControls={hasActiveSearchControls}
+        isBatchMode={isBatchMode}
+        searchQuery={searchQuery}
+        selectedCount={selectedCount}
+        shouldShowSearchActions={shouldShowSearchActions}
+        sortOrder={sortOrder}
+        sortSelection={sortSelection}
+        tagFilters={tagFilters}
+        totalCount={totalCount}
+        onBatchArchive={onBatchArchive}
+        onBatchDelete={onBatchDelete}
+        onBatchStar={onBatchStar}
+        onAdapterFilterChange={onAdapterFilterChange}
+        onSearchChange={onSearchChange}
+        onSortOrderChange={onSortOrderChange}
+        onSelectAll={onSelectAll}
+        onTagFilterChange={onTagFilterChange}
+        onToggleBatchMode={onToggleBatchMode}
+        onToggleSearchActions={() => setIsSearchActionsOpen((prev) => !prev)}
+      />
+    )
+    : null
+
+  return (
+    <SidebarListHeader
+      className='sidebar-header'
+      compact={isCompactLayout}
+      collapsed={isSidebarCollapsed}
+      primaryAction={primaryAction}
+      sideAction={sideAction}
+    >
+      {headerContent}
+    </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/sidebar-search-visibility.ts

@@ -0,0 +1,18 @@
+export const shouldShowSidebarSearchRow = ({
+  hasActiveSearchControls,
+  isBatchMode,
+  isSearchActionsOpen,
+  sessionCount,
+  threshold
+}: {
+  hasActiveSearchControls: boolean
+  isBatchMode: boolean
+  isSearchActionsOpen: boolean
+  sessionCount: number
+  threshold: number
+}) => {
+  if (threshold <= 0) return true
+  if (hasActiveSearchControls || isBatchMode || isSearchActionsOpen) return true
+
+  return sessionCount > threshold
+}

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;
+    }
+  }
+}