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

package/src/components/Sidebar.tsx

@@ -1,480 +0,0 @@
-import './Sidebar.scss'
-
-import { useAtomValue, useSetAtom } from 'jotai'
-import React, { useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
-
-import type { Session } from '@vibe-forge/core'
-
-import { deleteSession, updateSession, updateSessionTitle } from '#~/api'
-import {
-  SidebarListCollapsedActionButton,
-  SidebarListCollapsedActions
-} from '#~/components/sidebar-list/SidebarListHeader'
-import {
-  markOptimisticSessionDiscarded,
-  mergeOptimisticSessions,
-  optimisticSessionCreationsAtom,
-  removeSessionFromList
-} from '#~/hooks/chat/optimistic-session-creation'
-import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-import { useSidebarQueryState } from '#~/hooks/use-sidebar-query-state'
-import type { SidebarSessionSortOrder } from '#~/hooks/use-sidebar-query-state'
-import { useGlobalShortcut } from '#~/hooks/useGlobalShortcut'
-import { getAdapterDisplay } from '#~/resources/adapters.js'
-import { isSidebarResizingAtom } from '#~/store/index'
-import { formatShortcutLabel } from '#~/utils/shortcutUtils'
-
-import { SessionList } from './sidebar/SessionList'
-import { SidebarHeader } from './sidebar/SidebarHeader'
-import { matchesAnyFilterPattern } from './sidebar/filter-utils'
-
-const sortSessionsByOrder = (sessions: Session[], sortOrder: SidebarSessionSortOrder) => {
-  return [...sessions].sort((left, right) => {
-    const starredDelta = Number(right.isStarred === true) - Number(left.isStarred === true)
-    if (starredDelta !== 0) return starredDelta
-
-    const createdDelta = (left.createdAt ?? 0) - (right.createdAt ?? 0)
-    return sortOrder === 'asc' ? createdDelta : -createdDelta
-  })
-}
-
-export function Sidebar({
-  activeId,
-  isCompactLayout = false,
-  isMobileOpen = false,
-  onRequestClose,
-  onSelectSession,
-  onDeletedSession,
-  width
-}: {
-  activeId?: string
-  isCompactLayout?: boolean
-  isMobileOpen?: boolean
-  onRequestClose?: () => void
-  onSelectSession: (session: Session, isNew?: boolean) => void
-  onDeletedSession?: (id: string, nextId?: string) => void
-  width: number
-}) {
-  const {
-    adapterFilters,
-    hasActiveFilterConditions,
-    hasActiveSearchControls,
-    isSidebarCollapsed,
-    searchQuery,
-    setSortOrder,
-    setAdapterFilters,
-    setSearchQuery,
-    setSidebarCollapsed,
-    setTagFilters,
-    sortOrder,
-    sortSelection,
-    tagFilters
-  } = useSidebarQueryState()
-  const isResizing = useAtomValue(isSidebarResizingAtom)
-  const [isBatchMode, setIsBatchMode] = useState(false)
-  const [selectedIds, setSelectedIds] = useState(new Set<string>())
-  const { t } = useTranslation()
-  const { isTouchInteraction } = useResponsiveLayout()
-  const isMac = navigator.platform.includes('Mac')
-  const optimisticCreations = useAtomValue(optimisticSessionCreationsAtom)
-  const setOptimisticCreations = useSetAtom(optimisticSessionCreationsAtom)
-
-  const { data: sessionsRes, mutate: mutateSessions } = useSWR<{ sessions: Session[] }>(
-    `/api/sessions`
-  )
-  const sessions: Session[] = useMemo(
-    () => mergeOptimisticSessions(sessionsRes?.sessions ?? [], optimisticCreations),
-    [optimisticCreations, sessionsRes?.sessions]
-  )
-  const { data: configRes } = useSWR<{
-    sources?: {
-      merged?: {
-        shortcuts?: {
-          newSession?: string
-        }
-      }
-    }
-  }>('/api/config')
-
-  const newSessionShortcut = configRes?.sources?.merged?.shortcuts?.newSession
-  const resolvedNewSessionShortcut = newSessionShortcut != null && newSessionShortcut.trim() !== ''
-    ? newSessionShortcut
-    : 'mod+k'
-  const shortcutLabel = useMemo(
-    () => formatShortcutLabel(resolvedNewSessionShortcut, isMac),
-    [resolvedNewSessionShortcut, isMac]
-  )
-  const availableTags = useMemo(() => {
-    return Array.from(
-      new Set(
-        sessions.flatMap((session) => (session.tags ?? []).map((tag) => tag.trim()).filter(Boolean))
-      )
-    ).sort((left, right) => left.localeCompare(right))
-  }, [sessions])
-  const availableAdapters = useMemo(() => {
-    return Array.from(
-      new Set(
-        sessions
-          .map((session) => session.adapter?.trim() ?? '')
-          .filter(Boolean)
-      )
-    ).sort((left, right) => left.localeCompare(right))
-  }, [sessions])
-
-  const filteredSessions = useMemo(() => {
-    const query = searchQuery.trim().toLowerCase()
-    const visibleSessions = sessions.filter((s: Session) => {
-      if (!matchesAnyFilterPattern(s.tags ?? [], tagFilters)) return false
-
-      const adapterCandidates = [
-        s.adapter ?? '',
-        s.adapter != null && s.adapter !== '' ? getAdapterDisplay(s.adapter).title : ''
-      ].filter(Boolean)
-      if (!matchesAnyFilterPattern(adapterCandidates, adapterFilters)) return false
-
-      if (!query) return true
-      return (
-        (s.title ?? '').toLowerCase().includes(query) ||
-        (s.lastMessage ?? '').toLowerCase().includes(query) ||
-        (s.lastUserMessage ?? '').toLowerCase().includes(query) ||
-        s.id.toLowerCase().includes(query) ||
-        (s.tags ?? []).some((tag: string) => tag.toLowerCase().includes(query)) ||
-        adapterCandidates.some((candidate) => candidate.toLowerCase().includes(query))
-      )
-    })
-    return sortSessionsByOrder(visibleSessions, sortOrder)
-  }, [adapterFilters, searchQuery, sessions, sortOrder, tagFilters])
-
-  async function handleCreateSession() {
-    onRequestClose?.()
-    onSelectSession({ id: '' } as Session, true)
-  }
-
-  function discardOptimisticSession(id: string) {
-    markOptimisticSessionDiscarded(id)
-    setOptimisticCreations((prev) => {
-      if (prev[id] == null) return prev
-      const next = { ...prev }
-      delete next[id]
-      return next
-    })
-    void mutateSessions((prev) => {
-      if (prev?.sessions == null) return prev
-      return {
-        ...prev,
-        sessions: removeSessionFromList(prev.sessions, id)
-      }
-    }, false)
-  }
-
-  async function handleArchiveSession(id: string) {
-    // 先计算下一个要跳转的 ID
-    let nextId: string | undefined
-    const currentIndex = sessions.findIndex(s => s.id === id)
-    if (currentIndex !== -1) {
-      if (currentIndex + 1 < sessions.length) {
-        nextId = sessions[currentIndex + 1].id
-      } else if (currentIndex - 1 >= 0) {
-        nextId = sessions[currentIndex - 1].id
-      }
-    }
-
-    if (optimisticCreations[id] != null) {
-      discardOptimisticSession(id)
-      if (activeId === id) onDeletedSession?.(id, nextId)
-      return
-    }
-
-    try {
-      await updateSession(id, { isArchived: true })
-      await mutateSessions()
-      // 传递 nextId 给 onDeletedSession
-      onDeletedSession?.(id, nextId)
-    } catch (err) {
-      console.error('Failed to archive session:', err)
-    }
-  }
-
-  async function handleDeleteSession(id: string) {
-    // 先计算下一个要跳转的 ID
-    let nextId: string | undefined
-    const currentIndex = sessions.findIndex(s => s.id === id)
-    if (currentIndex !== -1) {
-      if (currentIndex + 1 < sessions.length) {
-        nextId = sessions[currentIndex + 1].id
-      } else if (currentIndex - 1 >= 0) {
-        nextId = sessions[currentIndex - 1].id
-      }
-    }
-
-    if (optimisticCreations[id] != null) {
-      discardOptimisticSession(id)
-      if (activeId === id) onDeletedSession?.(id, nextId)
-      return
-    }
-
-    try {
-      await deleteSession(id)
-      await mutateSessions()
-      if (activeId === id) onDeletedSession?.(id, nextId)
-    } catch (err) {
-      console.error('Failed to delete session:', err)
-    }
-  }
-
-  async function handleStarSession(id: string, isStarred: boolean) {
-    if (optimisticCreations[id] != null) {
-      setOptimisticCreations((prev) => {
-        const current = prev[id]
-        if (current == null) return prev
-        return {
-          ...prev,
-          [id]: {
-            ...current,
-            session: {
-              ...current.session,
-              isStarred
-            }
-          }
-        }
-      })
-      return
-    }
-
-    try {
-      await updateSession(id, { isStarred })
-      await mutateSessions()
-    } catch (err) {
-      console.error('Failed to star session:', err)
-    }
-  }
-
-  async function handleRenameSession(id: string, title: string) {
-    if (optimisticCreations[id] != null) {
-      setOptimisticCreations((prev) => {
-        const current = prev[id]
-        if (current == null) return prev
-        return {
-          ...prev,
-          [id]: {
-            ...current,
-            session: {
-              ...current.session,
-              title
-            }
-          }
-        }
-      })
-      return
-    }
-
-    await updateSessionTitle(id, title)
-    await mutateSessions()
-  }
-
-  const handleToggleSelect = (id: string) => {
-    setSelectedIds((prev: Set<string>) => {
-      const next = new Set(prev)
-      if (next.has(id)) {
-        next.delete(id)
-      } else {
-        next.add(id)
-      }
-      return next
-    })
-  }
-
-  const handleSelectAll = (selected: boolean) => {
-    if (selected) {
-      setSelectedIds(new Set(filteredSessions.map(s => s.id)))
-    } else {
-      setSelectedIds(new Set())
-    }
-  }
-
-  const handleBatchArchive = async () => {
-    try {
-      await Promise.all(Array.from(selectedIds).map(async (id: string) => updateSession(id, { isArchived: true })))
-      await mutateSessions()
-
-      // Calculate nextId if active session is archived
-      if (activeId && selectedIds.has(activeId)) {
-        let nextId: string | undefined
-        // Find the first session that is NOT in the selectedIds list
-        const nextSession = sessions.find(s => !selectedIds.has(s.id))
-        if (nextSession) {
-          nextId = nextSession.id
-        }
-        onDeletedSession?.(activeId, nextId)
-      }
-
-      setSelectedIds(new Set<string>())
-      setIsBatchMode(false)
-    } catch (err) {
-      console.error('Failed to batch archive sessions:', err)
-    }
-  }
-
-  const handleBatchDelete = async () => {
-    try {
-      await Promise.all(Array.from(selectedIds).map(async (id: string) => deleteSession(id)))
-      await mutateSessions()
-
-      if (activeId && selectedIds.has(activeId)) {
-        const nextSession = sessions.find(s => !selectedIds.has(s.id))
-        onDeletedSession?.(activeId, nextSession?.id)
-      }
-
-      setSelectedIds(new Set<string>())
-      setIsBatchMode(false)
-    } catch (err) {
-      console.error('Failed to batch delete sessions:', err)
-    }
-  }
-
-  const handleBatchStar = async (isStarred: boolean) => {
-    try {
-      await Promise.all(Array.from(selectedIds).map(async (id: string) => updateSession(id, { isStarred })))
-      await mutateSessions()
-    } catch (err) {
-      console.error('Failed to batch update star status:', err)
-    }
-  }
-
-  const toggleBatchMode = () => {
-    setIsBatchMode((prev: boolean) => !prev)
-    setSelectedIds(new Set<string>())
-  }
-
-  const isCreatingSession = activeId === undefined || activeId === ''
-  const effectiveSidebarCollapsed = isCompactLayout ? false : isSidebarCollapsed
-  const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
-
-  const createBtnRef = useRef<HTMLButtonElement>(null)
-
-  useGlobalShortcut({
-    shortcut: resolvedNewSessionShortcut,
-    isMac,
-    onTrigger: (event) => {
-      event.preventDefault()
-      if (isCreatingSession) return
-      if (createBtnRef.current) {
-        createBtnRef.current.classList.add('active-scale')
-        setTimeout(() => {
-          createBtnRef.current?.classList.remove('active-scale')
-        }, 200)
-      }
-      void handleCreateSession()
-    }
-  })
-
-  return (
-    <div
-      className={[
-        'sidebar-container',
-        effectiveSidebarCollapsed ? 'collapsed' : '',
-        isCompactLayout ? 'sidebar-container--compact' : '',
-        isMobileOpen ? 'is-mobile-open' : ''
-      ].filter(Boolean).join(' ')}
-      style={isCompactLayout
-        ? undefined
-        : {
-          width: effectiveSidebarCollapsed ? 0 : width,
-          minWidth: effectiveSidebarCollapsed ? 0 : undefined,
-          transition: isResizing ? 'none' : 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-          borderRight: effectiveSidebarCollapsed ? 'none' : undefined
-        }}
-    >
-      <div
-        className='sidebar-content'
-        style={isCompactLayout
-          ? undefined
-          : {
-            width,
-            transition: isResizing ? 'none' : 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-            transform: effectiveSidebarCollapsed ? `translateX(-${width}px)` : 'translateX(0)'
-          }}
-      >
-        <SidebarHeader
-          adapterFilters={adapterFilters}
-          availableAdapters={availableAdapters}
-          hasActiveSearchControls={hasActiveSearchControls}
-          isCompactLayout={isCompactLayout}
-          isSidebarCollapsed={effectiveSidebarCollapsed}
-          searchQuery={searchQuery}
-          sortOrder={sortOrder}
-          sortSelection={sortSelection}
-          onSearchChange={setSearchQuery}
-          availableTags={availableTags}
-          tagFilters={tagFilters}
-          onSortOrderChange={setSortOrder}
-          onAdapterFilterChange={setAdapterFilters}
-          onTagFilterChange={setTagFilters}
-          isBatchMode={isBatchMode}
-          onToggleBatchMode={toggleBatchMode}
-          onToggleSidebarCollapsed={() => setSidebarCollapsed(!isSidebarCollapsed)}
-          onCloseSidebar={onRequestClose}
-          selectedCount={selectedIds.size}
-          sessionCount={sessions.length}
-          totalCount={filteredSessions.length}
-          onSelectAll={handleSelectAll}
-          onBatchArchive={() => {
-            void handleBatchArchive()
-          }}
-          onBatchDelete={() => {
-            void handleBatchDelete()
-          }}
-          onBatchStar={() => {
-            void handleBatchStar(true)
-          }}
-          isCreatingSession={isCreatingSession}
-          shortcutLabel={shortcutLabel}
-          createButtonRef={createBtnRef}
-          onCreateSession={() => {
-            void handleCreateSession()
-          }}
-        />
-        <SessionList
-          hasActiveFilters={hasActiveFilterConditions}
-          sessions={filteredSessions}
-          activeId={activeId}
-          isBatchMode={isBatchMode}
-          isCompactLayout={isCompactLayout}
-          selectedIds={selectedIds}
-          isTouchInteraction={isTouchInteraction}
-          searchQuery={searchQuery}
-          onSelectSession={onSelectSession}
-          onArchiveSession={handleArchiveSession}
-          onDeleteSession={handleDeleteSession}
-          onRenameSession={handleRenameSession}
-          onStarSession={handleStarSession}
-          onToggleSelect={handleToggleSelect}
-        />
-      </div>
-      {!isCompactLayout && isSidebarCollapsed && (
-        <SidebarListCollapsedActions>
-          <SidebarListCollapsedActionButton
-            buttonRef={createBtnRef as React.Ref<HTMLAnchorElement | HTMLButtonElement>}
-            active={isCreatingSession}
-            disabled={!!isCreatingSession}
-            filled={isCreatingSession}
-            icon={isCreatingSession ? 'chat_bubble' : 'send'}
-            tooltip={resolveTooltipTitle(isCreatingSession ? t('common.alreadyInNewChat') : t('common.newChat'))}
-            ariaLabel={isCreatingSession ? t('common.alreadyInNewChat') : t('common.newChat')}
-            onClick={() => {
-              void handleCreateSession()
-            }}
-          />
-          <SidebarListCollapsedActionButton
-            icon='dock_to_right'
-            tooltip={resolveTooltipTitle(t('common.expand'))}
-            ariaLabel={t('common.expand')}
-            onClick={() => setSidebarCollapsed(false)}
-          />
-        </SidebarListCollapsedActions>
-      )}
-    </div>
-  )
-}

package/src/components/auth/AuthGate.scss

@@ -1,79 +0,0 @@
-.auth-gate {
-  min-height: var(--vf-visual-viewport-height, 100dvh);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 28px;
-  overflow-y: auto;
-  overscroll-behavior-y: contain;
-  -webkit-overflow-scrolling: touch;
-  background: var(--bg-color);
-  color: var(--text-color);
-  scroll-padding-bottom: 24px;
-}
-
-.auth-gate--loading {
-  background: var(--sub-bg-color);
-}
-
-.auth-gate__panel {
-  width: min(420px, 100%);
-  padding: 0;
-}
-
-.auth-gate__intro {
-  margin-bottom: 24px;
-
-  h1 {
-    margin: 0 0 6px;
-    font-size: 24px;
-    line-height: 1.2;
-  }
-
-  p {
-    margin: 0;
-    color: var(--sub-text-color);
-    line-height: 1.5;
-  }
-}
-
-.auth-gate__notice {
-  margin-bottom: 18px;
-}
-
-.auth-gate__secondary-action {
-  margin-top: 18px;
-}
-
-.auth-gate__remember {
-  margin-bottom: 8px;
-}
-
-.auth-gate__hint {
-  margin: 0 0 18px;
-  color: var(--sub-text-color);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-@media (max-width: 640px) {
-  .auth-gate {
-    align-items: center;
-    padding: max(16px, env(safe-area-inset-top)) 14px
-      max(16px, env(safe-area-inset-bottom));
-  }
-
-  html.has-mobile-keyboard .auth-gate {
-    align-items: flex-start;
-    justify-content: flex-start;
-    scroll-padding-bottom: calc(24px + var(--vf-keyboard-inset-bottom, 0px));
-  }
-
-  .auth-gate__panel {
-    width: 100%;
-
-    h1 {
-      font-size: 22px;
-    }
-  }
-}