@vibe-forge/client 0.9.0 → 0.10.1

package/src/components/sidebar/SidebarHeader.scss

@@ -1,78 +1,358 @@
 .sidebar-header {
-  padding: 12px 16px;
+  padding: 10px 12px 0;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 0;
   flex-shrink: 0;
 
-  .header-bottom {
+  .header-top {
     display: flex;
-    gap: 8px;
     align-items: center;
+    gap: 6px;
+  }
+
+  .new-chat-btn {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8px;
+    font-size: 12px;
+    font-weight: 500;
+    transition: all .2s cubic-bezier(.4, 0, .2, 1);
 
-    .batch-select-wrapper {
-      width: 32px;
-      height: 32px;
+    .btn-content {
       display: flex;
       align-items: center;
-      justify-content: center;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .material-symbols-rounded {
+      font-size: 16px;
+      line-height: 1;
+    }
+
+    .shortcut-tag {
+      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;
     }
 
-    .search-input {
-      border-radius: 6px;
-      flex: 1;
-      height: 36px;
+    &.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;
 
-      .search-icon {
-        font-size: 18px;
-        color: var(--sub-text-color);
-        display: inline-flex;
-        align-items: center;
-        line-height: 1;
+      .shortcut-tag {
+        display: none;
+      }
+
+      &:hover {
+        background-color: transparent !important;
+        color: var(--sidebar-active-text) !important;
       }
     }
+  }
 
-    .batch-actions {
-      display: flex;
-      gap: 8px;
+  .header-search-row {
+    display: flex;
+    margin-top: 6px;
+  }
+
+  .search-input-wrap {
+    flex: 1;
+  }
+
+  .search-input {
+    flex: 1;
+    height: 30px;
+    font-size: 12px;
+    padding: 0 8px !important;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    border-width: 1px !important;
+    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;
+    }
 
-      .action-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 32px;
-        height: 32px;
-        padding: 0;
-        flex-shrink: 0;
-        color: var(--sub-text-color);
-
-        &.active {
-          color: var(--primary-color);
-        }
-
-        .material-symbols-rounded {
-          font-size: 20px;
-          display: inline-flex;
-          align-items: center;
-          line-height: 1;
-        }
-      }
+    .search-icon {
+      font-size: 14px;
+      display: inline-flex;
+      align-items: center;
+      line-height: 1;
+      color: var(--sub-text-color);
     }
 
-    .sidebar-collapse-btn, .sidebar-new-chat-btn {
-      display: flex;
+    .search-toggle-button {
+      width: 20px;
+      height: 20px;
+      display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 32px;
-      height: 32px;
       padding: 0;
+      margin-inline-end: -1px;
+      border: none;
+      background: transparent;
       color: var(--sub-text-color);
-      flex-shrink: 0;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: color .2s ease, background-color .2s ease;
+      position: relative;
+
+      &.is-open {
+        color: var(--primary-color);
+      }
+
+      &.has-active-filters::after {
+        content: '';
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        width: 6px;
+        height: 6px;
+        border-radius: 999px;
+        background-color: #dc2626;
+        box-shadow: 0 0 0 1px var(--bg-color);
+      }
+
+      &:hover {
+        background-color: rgba(37, 99, 235, .08);
+        color: var(--primary-color);
+      }
+    }
+
+    .search-chevron {
+      font-size: 14px;
+      line-height: 1;
+      transition: transform .2s ease, color .2s ease;
+
+      .search-toggle-button.is-open & {
+        transform: rotate(180deg);
+      }
+    }
+
+    .ant-input-clear-icon {
+      font-size: 12px;
+    }
+  }
+
+  .header-search-actions {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    transform: translateY(-6px);
+    pointer-events: none;
+    transition:
+      max-height .24s cubic-bezier(.4, 0, .2, 1),
+      opacity .18s ease,
+      transform .18s ease,
+      margin-top .18s ease;
+
+    &.is-open {
+      max-height: 240px;
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+      margin-top: 2px;
+    }
+  }
+
+  .header-search-actions-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding-top: 2px;
+  }
+
+  .header-toolbar-row,
+  .header-batch-actions {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .header-toolbar-leading {
+    display: inline-flex;
+    align-items: flex-start;
+    flex-shrink: 0;
+  }
+
+  .header-filter-stack {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .header-batch-actions {
+    align-items: center;
+    gap: 6px;
+  }
+
+  .batch-select-toggle {
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    background-color: var(--bg-color);
+    color: var(--sub-text-color);
+    flex-shrink: 0;
+  }
+
+  .toolbar-filter-control {
+    flex: 1;
+    min-width: 0;
+    position: relative;
+  }
+
+  .toolbar-filter-icon {
+    position: absolute;
+    top: 50%;
+    left: 8px;
+    transform: translateY(-50%);
+    font-size: 14px;
+    line-height: 1;
+    color: var(--sub-text-color);
+    flex-shrink: 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .toolbar-filter-select {
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+
+    .ant-select-selector {
+      min-height: 30px !important;
+      height: 30px !important;
+      padding: 0 6px 0 28px !important;
+      border-radius: 6px !important;
+      border-width: 1px !important;
+      align-items: center !important;
+      transition: border-color .2s ease, box-shadow .2s ease;
+    }
+
+    .ant-select-selection-search-input,
+    .ant-select-selection-placeholder,
+    .ant-select-selection-item {
+      font-size: 11px;
+    }
+
+    .ant-select-selection-overflow {
+      gap: 4px;
+      flex-wrap: nowrap;
+      align-items: center;
+    }
+
+    .ant-select-selection-item {
+      border-radius: 999px;
+    }
+
+    .toolbar-filter-chevron {
+      font-size: 14px;
+      line-height: 1;
+      color: var(--sub-text-color);
+      transition: transform .2s ease, color .2s ease;
+    }
+
+    &.ant-select-open .toolbar-filter-chevron {
+      transform: rotate(180deg);
+      color: var(--primary-color);
+    }
+
+    &.ant-select-focused .ant-select-selector,
+    &.ant-select-open .ant-select-selector {
+      border-color: rgba(37, 99, 235, .32) !important;
+      box-shadow: none !important;
+    }
+  }
+
+  .sidebar-tool-btn,
+  .sidebar-collapse-btn,
+  .sidebar-new-chat-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 8px;
+    color: var(--sub-text-color);
+    flex-shrink: 0;
+
+    .material-symbols-rounded {
+      font-size: 18px;
+      display: inline-flex;
+      align-items: center;
+      line-height: 1;
+    }
+  }
+
+  .sidebar-collapse-btn,
+  .sidebar-new-chat-btn {
+    width: 28px;
+    padding: 0;
+  }
+
+  .sidebar-tool-btn {
+    border-radius: 6px;
+
+    &.is-icon-only {
+      width: 28px;
+      min-width: 28px;
+      padding: 0;
+      gap: 0;
+    }
+
+    &.active {
+      color: var(--primary-color);
+      background-color: var(--sidebar-active-bg);
+    }
+
+    &.is-danger {
+      color: #dc2626;
 
-      .material-symbols-rounded {
-        font-size: 20px;
+      &:hover {
+        color: #b91c1c;
       }
     }
   }

package/src/components/sidebar/SidebarHeader.tsx

@@ -1,128 +1,150 @@
 import './SidebarHeader.scss'
 
-import { Button, Checkbox, Input, Popconfirm, Tooltip } from 'antd'
-import { useAtom } from 'jotai'
-import React from 'react'
+import { Button, Tooltip } from 'antd'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { isSidebarCollapsedAtom } from '#~/store/index.js'
+import type { SidebarSessionSortOrder } from '#~/hooks/use-sidebar-query-state'
+import { SidebarHeaderSearchActions } from './SidebarHeaderSearchActions'
 
 interface SidebarHeaderProps {
-  searchQuery: string
-  onSearchChange: (query: string) => void
+  adapterFilters: string[]
+  availableAdapters: string[]
+  availableTags: string[]
+  createButtonRef: React.RefObject<HTMLButtonElement | null>
+  hasActiveSearchControls: boolean
   isBatchMode: boolean
-  onToggleBatchMode: () => void
+  isCreatingSession: boolean
+  isSidebarCollapsed: boolean
+  searchQuery: string
   selectedCount: number
+  sortOrder: SidebarSessionSortOrder
+  sortSelection?: SidebarSessionSortOrder
+  shortcutLabel: string
+  tagFilters: string[]
   totalCount: number
-  onSelectAll: (selected: boolean) => void
   onBatchArchive: () => void
-  isCreatingSession: boolean
+  onBatchDelete: () => void
+  onBatchStar: () => void
+  onAdapterFilterChange: (filters: string[]) => void
   onCreateSession: () => void
+  onSearchChange: (query: string) => void
+  onSortOrderChange: (sort?: SidebarSessionSortOrder) => void
+  onSelectAll: (selected: boolean) => void
+  onTagFilterChange: (tags: string[]) => void
+  onToggleBatchMode: () => void
+  onToggleSidebarCollapsed: () => void
 }
 
 export function SidebarHeader({
-  searchQuery,
-  onSearchChange,
+  adapterFilters,
+  availableAdapters,
+  availableTags,
+  createButtonRef,
+  hasActiveSearchControls,
   isBatchMode,
-  onToggleBatchMode,
+  isCreatingSession,
+  isSidebarCollapsed,
+  searchQuery,
   selectedCount,
+  sortOrder,
+  sortSelection,
+  shortcutLabel,
+  tagFilters,
   totalCount,
-  onSelectAll,
   onBatchArchive,
-  isCreatingSession,
-  onCreateSession
+  onBatchDelete,
+  onBatchStar,
+  onAdapterFilterChange,
+  onCreateSession,
+  onSearchChange,
+  onSortOrderChange,
+  onSelectAll,
+  onTagFilterChange,
+  onToggleBatchMode,
+  onToggleSidebarCollapsed
 }: SidebarHeaderProps) {
   const { t } = useTranslation()
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = useAtom(isSidebarCollapsedAtom)
-  const isAllSelected = totalCount > 0 && selectedCount === totalCount
+  const [isSearchActionsOpen, setIsSearchActionsOpen] = useState(false)
+  const shouldShowSearchActions = !isSidebarCollapsed && (isSearchActionsOpen || isBatchMode)
 
   return (
     <div className='sidebar-header'>
-      <div className='header-bottom'>
-        {isBatchMode && (
-          <div className='batch-select-wrapper'>
-            <Tooltip title={isAllSelected ? t('common.deselectAll') : t('common.selectAll')}>
-              <Checkbox
-                checked={isAllSelected}
-                indeterminate={selectedCount > 0 && selectedCount < totalCount}
-                onChange={(e) => onSelectAll(e.target.checked)}
-              />
-            </Tooltip>
-          </div>
-        )}
-        <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>
-          }
-          allowClear
-        />
-        <div className='batch-actions'>
-          <Tooltip title={isBatchMode ? t('common.cancelBatch') : t('common.batchMode')}>
+      <div className='header-top'>
+        {!isSidebarCollapsed
+          ? (
             <Button
-              className={`action-btn ${isBatchMode ? 'active' : ''}`}
-              type={isBatchMode ? 'primary' : 'text'}
-              onClick={onToggleBatchMode}
+              ref={createButtonRef as React.Ref<HTMLAnchorElement | HTMLButtonElement>}
+              className={`new-chat-btn ${isCreatingSession ? 'active' : ''}`}
+              type={isCreatingSession ? 'default' : 'primary'}
+              block
+              disabled={!!isCreatingSession}
+              onClick={onCreateSession}
             >
-              <span className='material-symbols-rounded'>
-                {isBatchMode ? 'close' : 'checklist'}
+              <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>
-          {isBatchMode && (
-            <Popconfirm
-              title={t('common.archiveConfirm', { count: selectedCount })}
-              onConfirm={onBatchArchive}
-              okText={t('common.confirm')}
-              cancelText={t('common.cancel')}
-              okButtonProps={{ danger: false }}
-              disabled={selectedCount === 0}
-            >
-              <Tooltip title={t('common.batchArchive')}>
-                <Button
-                  className='action-btn'
-                  type='text'
-                  disabled={selectedCount === 0}
-                >
-                  <span className='material-symbols-rounded'>
-                    archive
-                  </span>
-                </Button>
-              </Tooltip>
-            </Popconfirm>
+          )
+          : (
+            <Tooltip title={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>
           )}
-        </div>
         <Tooltip title={isSidebarCollapsed ? t('common.expand') : t('common.collapse')}>
           <Button
             className='sidebar-collapse-btn'
             type='text'
-            onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
+            onClick={onToggleSidebarCollapsed}
           >
             <span className='material-symbols-rounded'>
               {isSidebarCollapsed ? 'dock_to_right' : 'left_panel_close'}
             </span>
           </Button>
         </Tooltip>
-        {isSidebarCollapsed && (
-          <Tooltip title={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>
-        )}
       </div>
+
+      {!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)}
+        />
+      )}
     </div>
   )
 }