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

package/src/components/sidebar/SidebarHeader.scss

@@ -1,372 +0,0 @@
-.sidebar-header {
-  padding: 10px 12px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  flex-shrink: 0;
-
-  .header-top {
-    display: flex;
-    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);
-
-    .btn-content {
-      display: flex;
-      align-items: 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;
-    }
-
-    &.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;
-
-      .shortcut-tag {
-        display: none;
-      }
-
-      &:hover {
-        background-color: transparent !important;
-        color: var(--sidebar-active-text) !important;
-      }
-    }
-  }
-
-  .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;
-    }
-
-    .search-icon {
-      font-size: 14px;
-      display: inline-flex;
-      align-items: center;
-      line-height: 1;
-      color: var(--sub-text-color);
-    }
-
-    .search-toggle-button {
-      width: 20px;
-      height: 20px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      margin-inline-end: -1px;
-      border: none;
-      background: transparent;
-      color: var(--sub-text-color);
-      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;
-
-      &:hover {
-        color: #b91c1c;
-      }
-    }
-  }
-}
-
-.sidebar-list-header--compact.sidebar-header {
-  .search-input .search-toggle-button {
-    width: 24px;
-    height: 24px;
-    border-radius: 6px;
-  }
-
-  .toolbar-filter-select .ant-select-selector,
-  .batch-select-toggle {
-    min-height: 40px;
-  }
-}

package/src/components/sidebar/SidebarHeader.tsx

@@ -1,198 +0,0 @@
-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[]
-  availableAdapters: string[]
-  availableTags: string[]
-  createButtonRef: React.RefObject<HTMLButtonElement | null>
-  hasActiveSearchControls: boolean
-  isBatchMode: boolean
-  isCompactLayout: boolean
-  isCreatingSession: boolean
-  isSidebarCollapsed: boolean
-  searchQuery: string
-  selectedCount: number
-  sessionCount: number
-  sortOrder: SidebarSessionSortOrder
-  sortSelection?: SidebarSessionSortOrder
-  shortcutLabel: string
-  tagFilters: string[]
-  totalCount: number
-  onBatchArchive: () => void
-  onBatchDelete: () => void
-  onBatchStar: () => void
-  onAdapterFilterChange: (filters: string[]) => void
-  onCloseSidebar?: () => 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({
-  adapterFilters,
-  availableAdapters,
-  availableTags,
-  createButtonRef,
-  hasActiveSearchControls,
-  isBatchMode,
-  isCompactLayout,
-  isCreatingSession,
-  isSidebarCollapsed,
-  searchQuery,
-  selectedCount,
-  sessionCount,
-  sortOrder,
-  sortSelection,
-  shortcutLabel,
-  tagFilters,
-  totalCount,
-  onBatchArchive,
-  onBatchDelete,
-  onBatchStar,
-  onAdapterFilterChange,
-  onCloseSidebar,
-  onCreateSession,
-  onSearchChange,
-  onSortOrderChange,
-  onSelectAll,
-  onTagFilterChange,
-  onToggleBatchMode,
-  onToggleSidebarCollapsed
-}: 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
-  })
-
-  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}
-        >
-          <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>
-  )
-
-  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/SidebarHeaderBatchActions.tsx

@@ -1,85 +0,0 @@
-import { Button, Checkbox, Popconfirm, Tooltip } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-
-interface SidebarHeaderBatchActionsProps {
-  isAllSelected: boolean
-  selectedCount: number
-  totalCount: number
-  onBatchArchive: () => void
-  onBatchDelete: () => void
-  onBatchStar: () => void
-  onSelectAll: (selected: boolean) => void
-}
-
-export function SidebarHeaderBatchActions({
-  isAllSelected,
-  selectedCount,
-  totalCount,
-  onBatchArchive,
-  onBatchDelete,
-  onBatchStar,
-  onSelectAll
-}: SidebarHeaderBatchActionsProps) {
-  const { t } = useTranslation()
-  const { isTouchInteraction } = useResponsiveLayout()
-  const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
-
-  return (
-    <div className='header-batch-actions'>
-      <Tooltip title={resolveTooltipTitle(isAllSelected ? t('common.deselectAll') : t('common.selectAll'))}>
-        <label className='batch-select-toggle'>
-          <Checkbox
-            checked={isAllSelected}
-            indeterminate={selectedCount > 0 && selectedCount < totalCount}
-            onChange={(e) => onSelectAll(e.target.checked)}
-          />
-        </label>
-      </Tooltip>
-      <Tooltip title={resolveTooltipTitle(t('common.star'))}>
-        <Button
-          className='sidebar-tool-btn is-icon-only'
-          type='text'
-          disabled={selectedCount === 0}
-          onClick={onBatchStar}
-          icon={<span className='material-symbols-rounded'>star</span>}
-        />
-      </Tooltip>
-      <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={resolveTooltipTitle(t('common.archive'))}>
-          <Button
-            className='sidebar-tool-btn is-icon-only'
-            type='text'
-            disabled={selectedCount === 0}
-            icon={<span className='material-symbols-rounded'>archive</span>}
-          />
-        </Tooltip>
-      </Popconfirm>
-      <Popconfirm
-        title={t('common.deleteConfirm', { count: selectedCount })}
-        onConfirm={onBatchDelete}
-        okText={t('common.confirm')}
-        cancelText={t('common.cancel')}
-        okButtonProps={{ danger: true }}
-        disabled={selectedCount === 0}
-      >
-        <Tooltip title={resolveTooltipTitle(t('common.delete'))}>
-          <Button
-            className='sidebar-tool-btn is-icon-only is-danger'
-            type='text'
-            disabled={selectedCount === 0}
-            icon={<span className='material-symbols-rounded'>delete</span>}
-          />
-        </Tooltip>
-      </Popconfirm>
-    </div>
-  )
-}