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

package/src/components/sidebar/SidebarHeaderSearchActions.tsx

@@ -1,175 +0,0 @@
-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'
-import { SidebarHeaderSelectField } from './SidebarHeaderSelectField'
-
-interface SidebarHeaderSearchActionsProps {
-  adapterFilters: string[]
-  availableAdapters: string[]
-  availableTags: string[]
-  hasActiveSearchControls: boolean
-  isBatchMode: boolean
-  searchQuery: string
-  selectedCount: number
-  shouldShowSearchActions: boolean
-  sortOrder: SidebarSessionSortOrder
-  sortSelection?: SidebarSessionSortOrder
-  tagFilters: string[]
-  totalCount: number
-  onAdapterFilterChange: (filters: string[]) => void
-  onBatchArchive: () => void
-  onBatchDelete: () => void
-  onBatchStar: () => void
-  onSearchChange: (query: string) => void
-  onSortOrderChange: (sort?: SidebarSessionSortOrder) => void
-  onSelectAll: (selected: boolean) => void
-  onTagFilterChange: (tags: string[]) => void
-  onToggleBatchMode: () => void
-  onToggleSearchActions: () => void
-}
-
-export function SidebarHeaderSearchActions({
-  adapterFilters,
-  availableAdapters,
-  availableTags,
-  hasActiveSearchControls,
-  isBatchMode,
-  searchQuery,
-  selectedCount,
-  shouldShowSearchActions,
-  sortOrder,
-  sortSelection,
-  tagFilters,
-  totalCount,
-  onAdapterFilterChange,
-  onBatchArchive,
-  onBatchDelete,
-  onBatchStar,
-  onSearchChange,
-  onSortOrderChange,
-  onSelectAll,
-  onTagFilterChange,
-  onToggleBatchMode,
-  onToggleSearchActions
-}: SidebarHeaderSearchActionsProps) {
-  const { t } = useTranslation()
-  const { isTouchInteraction } = useResponsiveLayout()
-  const isAllSelected = totalCount > 0 && selectedCount === totalCount
-  const toOptions = useMemo(() => (values: string[]) => values.map((value) => ({ label: value, value })), [])
-  const filterSuffixIcon = <span className='material-symbols-rounded toolbar-filter-chevron'>expand_more</span>
-  const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
-  const sortOptions = useMemo(
-    () => [
-      { label: t('automation.sortDesc'), value: 'desc' },
-      { label: t('automation.sortAsc'), value: 'asc' }
-    ],
-    [t]
-  )
-
-  return (
-    <>
-      <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'>
-            <div className='header-toolbar-leading'>
-              {isBatchMode
-                ? (
-                  <Tooltip title={resolveTooltipTitle(t('common.cancelBatch'))}>
-                    <Button
-                      className='sidebar-tool-btn is-icon-only'
-                      type='text'
-                      onClick={onToggleBatchMode}
-                      icon={<span className='material-symbols-rounded'>close</span>}
-                    />
-                  </Tooltip>
-                )
-                : (
-                  <Tooltip title={resolveTooltipTitle(t('common.batchMode'))}>
-                    <Button
-                      className='sidebar-tool-btn is-icon-only'
-                      type='text'
-                      onClick={onToggleBatchMode}
-                      icon={<span className='material-symbols-rounded'>checklist</span>}
-                    />
-                  </Tooltip>
-                )}
-            </div>
-            <div className='header-filter-stack'>
-              <SidebarHeaderSelectField
-                icon='sell'
-                mode='tags'
-                placeholder={t('common.allTags')}
-                options={toOptions(availableTags)}
-                value={tagFilters}
-                onChange={(value) => onTagFilterChange(value as string[])}
-                maxTagCount={1}
-                allowClear
-                suffixIcon={filterSuffixIcon}
-                tokenSeparators={[',']}
-              />
-              <SidebarHeaderSelectField
-                icon='extension'
-                mode='tags'
-                placeholder={t('common.allAdapters')}
-                options={toOptions(availableAdapters)}
-                value={adapterFilters}
-                onChange={(value) => onAdapterFilterChange(value as string[])}
-                maxTagCount={1}
-                allowClear
-                suffixIcon={filterSuffixIcon}
-                tokenSeparators={[',']}
-              />
-              <SidebarHeaderSelectField
-                icon='swap_vert'
-                placeholder={t('common.sort')}
-                options={sortOptions}
-                value={sortSelection}
-                onChange={(value) => onSortOrderChange(value as SidebarSessionSortOrder | undefined)}
-                allowClear
-                suffixIcon={filterSuffixIcon}
-              />
-            </div>
-          </div>
-          {isBatchMode && (
-            <SidebarHeaderBatchActions
-              isAllSelected={isAllSelected}
-              selectedCount={selectedCount}
-              totalCount={totalCount}
-              onBatchArchive={onBatchArchive}
-              onBatchDelete={onBatchDelete}
-              onBatchStar={onBatchStar}
-              onSelectAll={onSelectAll}
-            />
-          )}
-        </div>
-      </div>
-    </>
-  )
-}

package/src/components/sidebar/SidebarHeaderSelectField.tsx

@@ -1,24 +0,0 @@
-import { Select } from 'antd'
-import type { SelectProps } from 'antd'
-
-interface SidebarHeaderSelectFieldProps extends SelectProps {
-  icon: string
-}
-
-export function SidebarHeaderSelectField({
-  className,
-  icon,
-  ...selectProps
-}: SidebarHeaderSelectFieldProps) {
-  return (
-    <div className='toolbar-filter-control'>
-      <span className='material-symbols-rounded toolbar-filter-icon'>{icon}</span>
-      <Select
-        className={className == null || className === ''
-          ? 'toolbar-filter-select'
-          : `toolbar-filter-select ${className}`}
-        {...selectProps}
-      />
-    </div>
-  )
-}

package/src/components/sidebar/SidebarUtilityFooter.tsx

@@ -1,69 +0,0 @@
-import { Button, Dropdown } from 'antd'
-import type { MenuProps } from 'antd'
-import { useAtom } from 'jotai'
-import { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
-
-import { themeAtom } from '#~/store'
-import { buildLanguageItems, buildThemeItems } from '../nav-rail-items'
-
-export function SidebarUtilityFooter() {
-  const { t, i18n } = useTranslation()
-  const [themeMode, setThemeMode] = useAtom(themeAtom)
-  const navigate = useNavigate()
-
-  const languageItems: MenuProps['items'] = useMemo(() =>
-    buildLanguageItems({
-      currentLanguage: i18n.language,
-      onChangeLanguage: (language) => i18n.changeLanguage(language)
-    }), [i18n.language])
-
-  const themeItems: MenuProps['items'] = useMemo(() =>
-    buildThemeItems({
-      setThemeMode,
-      t,
-      themeMode
-    }), [setThemeMode, t, themeMode])
-
-  return (
-    <div className='sidebar-utility-footer'>
-      <Dropdown menu={{ items: themeItems, triggerSubMenuAction: 'click' }} placement='topLeft' trigger={['click']}>
-        <Button
-          type='text'
-          className='sidebar-utility-footer__action'
-          icon={
-            <span className='material-symbols-rounded'>
-              {themeMode === 'light' ? 'light_mode' : themeMode === 'dark' ? 'dark_mode' : 'desktop_windows'}
-            </span>
-          }
-        >
-          <span>{t('common.theme')}</span>
-        </Button>
-      </Dropdown>
-
-      <Dropdown
-        menu={{ items: languageItems, triggerSubMenuAction: 'click' }}
-        placement='topLeft'
-        trigger={['click']}
-      >
-        <Button
-          type='text'
-          className='sidebar-utility-footer__action'
-          icon={<span className='material-symbols-rounded'>language</span>}
-        >
-          <span>{t('common.language')}</span>
-        </Button>
-      </Dropdown>
-
-      <Button
-        type='text'
-        className='sidebar-utility-footer__action'
-        icon={<span className='material-symbols-rounded'>settings</span>}
-        onClick={() => void navigate('/config')}
-      >
-        <span>{t('common.settings')}</span>
-      </Button>
-    </div>
-  )
-}

package/src/components/sidebar/filter-utils.ts

@@ -1,23 +0,0 @@
-const escapeRegex = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-
-const buildWildcardRegex = (pattern: string) => {
-  return new RegExp(`^${escapeRegex(pattern).replace(/\\\*/g, '.*')}$`, 'i')
-}
-
-const matchesPattern = (candidate: string, pattern: string) => {
-  const normalizedCandidate = candidate.trim()
-  const normalizedPattern = pattern.trim()
-
-  if (normalizedCandidate === '' || normalizedPattern === '') return false
-  if (normalizedPattern.includes('*')) {
-    return buildWildcardRegex(normalizedPattern).test(normalizedCandidate)
-  }
-
-  return normalizedCandidate.toLowerCase().includes(normalizedPattern.toLowerCase())
-}
-
-export const matchesAnyFilterPattern = (candidates: string[], patterns: string[]) => {
-  if (patterns.length === 0) return true
-
-  return patterns.some((pattern) => candidates.some((candidate) => matchesPattern(candidate, pattern)))
-}

package/src/components/sidebar/sidebar-search-visibility.ts

@@ -1,18 +0,0 @@
-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

@@ -1,246 +0,0 @@
-.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

@@ -1,146 +0,0 @@
-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}
-    />
-  )
-}