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

package/src/components/NavRail.scss

@@ -51,8 +51,7 @@
   width: 100%;
   height: auto;
   padding: 8px max(8px, env(safe-area-inset-right))
-    calc(16px + env(safe-area-inset-bottom))
-    max(8px, env(safe-area-inset-left));
+    calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
   border-top: 1px solid var(--border-color);
   background: color-mix(
     in srgb,

package/src/components/NavRail.tsx

@@ -10,6 +10,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { themeAtom } from '../store'
 import { NavRailCompact } from './NavRailCompact'
+import { useNavRailAccountActions } from './nav-rail-account-actions'
 import {
   buildCompactLanguageActions,
   buildCompactMoreActions,
@@ -33,6 +34,7 @@ export function NavRail({
   const navigate = useNavigate()
   const location = useLocation()
   const { isTouchInteraction } = useResponsiveLayout()
+  const { accountItems, accountMenuLabel, compactAccountActions, showAccountMenu } = useNavRailAccountActions()
 
   const currentPath = location.pathname
   const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
@@ -52,14 +54,23 @@ export function NavRail({
 
   const navItems = React.useMemo(() => buildNavItems({ currentPath, t }), [currentPath, t])
 
-  const compactMoreActions = React.useMemo(() =>
-    buildCompactMoreActions({
+  const compactMoreActions = React.useMemo(() => [
+    ...buildCompactMoreActions({
       currentPath,
       navigate,
       onOpenSidebar,
       showSidebar,
       t
-    }), [currentPath, navigate, onOpenSidebar, showSidebar, t])
+    }),
+    ...compactAccountActions
+  ], [
+    compactAccountActions,
+    currentPath,
+    navigate,
+    onOpenSidebar,
+    showSidebar,
+    t
+  ])
 
   const compactThemeActions = React.useMemo(() =>
     buildCompactThemeActions({
@@ -152,6 +163,25 @@ export function NavRail({
             </Dropdown>
           </span>
         </Tooltip>
+        {showAccountMenu && (
+          <Tooltip title={resolveTooltipTitle(accountMenuLabel)} placement='right'>
+            <span>
+              <Dropdown
+                menu={{
+                  items: accountItems
+                }}
+                placement='topRight'
+                trigger={['click']}
+              >
+                <Button
+                  type='text'
+                  className='nav-item'
+                  icon={<span className='material-symbols-rounded'>account_circle</span>}
+                />
+              </Dropdown>
+            </span>
+          </Tooltip>
+        )}
         <Tooltip title={resolveTooltipTitle(t('common.settings'))} placement='right'>
           <span>
             <Button

package/src/components/Sidebar.scss

@@ -103,50 +103,6 @@
   }
 }
 
-.sidebar-collapsed-header {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  z-index: 10;
-}
-
-.sidebar-collapsed-control {
-  width: 24px;
-  min-width: 24px;
-  height: 24px;
-  padding: 0;
-  border-radius: 6px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--sub-text-color);
-  border: none;
-  background-color: transparent;
-  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;
-    }
-  }
-}
-
 .sidebar-footer {
   margin-top: auto;
   border-top: 1px solid var(--border-color);

package/src/components/Sidebar.tsx

@@ -1,20 +1,31 @@
 import './Sidebar.scss'
 
-import { Button, Tooltip } from 'antd'
-import { useAtomValue } from 'jotai'
+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 type { Session } from '@vibe-forge/core'
-import { deleteSession, updateSession, updateSessionTitle } from '../api'
-import { useGlobalShortcut } from '../hooks/useGlobalShortcut'
-import { isSidebarResizingAtom } from '../store/index'
-import { formatShortcutLabel } from '../utils/shortcutUtils'
+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'
@@ -67,11 +78,16 @@ export function Sidebar({
   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[] = sessionsRes?.sessions ?? []
+  const sessions: Session[] = useMemo(
+    () => mergeOptimisticSessions(sessionsRes?.sessions ?? [], optimisticCreations),
+    [optimisticCreations, sessionsRes?.sessions]
+  )
   const { data: configRes } = useSWR<{
     sources?: {
       merged?: {
@@ -136,6 +152,23 @@ export function Sidebar({
     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
@@ -148,6 +181,12 @@ export function Sidebar({
       }
     }
 
+    if (optimisticCreations[id] != null) {
+      discardOptimisticSession(id)
+      if (activeId === id) onDeletedSession?.(id, nextId)
+      return
+    }
+
     try {
       await updateSession(id, { isArchived: true })
       await mutateSessions()
@@ -170,6 +209,12 @@ export function Sidebar({
       }
     }
 
+    if (optimisticCreations[id] != null) {
+      discardOptimisticSession(id)
+      if (activeId === id) onDeletedSession?.(id, nextId)
+      return
+    }
+
     try {
       await deleteSession(id)
       await mutateSessions()
@@ -180,6 +225,24 @@ export function Sidebar({
   }
 
   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()
@@ -189,6 +252,24 @@ export function Sidebar({
   }
 
   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()
   }
@@ -336,6 +417,7 @@ export function Sidebar({
           onToggleSidebarCollapsed={() => setSidebarCollapsed(!isSidebarCollapsed)}
           onCloseSidebar={onRequestClose}
           selectedCount={selectedIds.size}
+          sessionCount={sessions.length}
           totalCount={filteredSessions.length}
           onSelectAll={handleSelectAll}
           onBatchArchive={() => {
@@ -372,35 +454,26 @@ export function Sidebar({
         />
       </div>
       {!isCompactLayout && isSidebarCollapsed && (
-        <div className='sidebar-collapsed-header'>
-          <Tooltip
-            title={resolveTooltipTitle(isCreatingSession ? t('common.alreadyInNewChat') : t('common.newChat'))}
-            placement='bottom'
-          >
-            <Button
-              ref={createBtnRef}
-              className={`sidebar-collapsed-control ${isCreatingSession ? 'active' : ''}`}
-              type='text'
-              disabled={!!isCreatingSession}
-              onClick={() => {
-                void handleCreateSession()
-              }}
-            >
-              <span className={`material-symbols-rounded ${isCreatingSession ? 'filled' : ''}`}>
-                {isCreatingSession ? 'chat_bubble' : 'send'}
-              </span>
-            </Button>
-          </Tooltip>
-          <Tooltip title={resolveTooltipTitle(t('common.expand'))} placement='bottom'>
-            <Button
-              className='sidebar-collapsed-control'
-              type='text'
-              onClick={() => setSidebarCollapsed(false)}
-            >
-              <span className='material-symbols-rounded'>dock_to_right</span>
-            </Button>
-          </Tooltip>
-        </div>
+        <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

@@ -0,0 +1,79 @@
+.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;
+    }
+  }
+}

package/src/components/auth/AuthGate.tsx

@@ -0,0 +1,174 @@
+import './AuthGate.scss'
+
+import { Alert, Button, Checkbox, Form, Input, Spin } from 'antd'
+import type { PropsWithChildren } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import { getAuthStatus, login } from '#~/api/auth'
+import { setAuthToken } from '#~/api/auth-token'
+import { getApiErrorMessage } from '#~/api/base'
+import { isServerConnectionManagedClientMode, requestServerConnectionPicker } from '#~/runtime-config'
+
+interface LoginFormValues {
+  username?: string
+  password?: string
+  rememberDevice?: boolean
+}
+
+export function AuthGate({ children }: PropsWithChildren) {
+  const { t } = useTranslation()
+  const { data, error, isLoading, mutate } = useSWR('/api/auth/status', getAuthStatus)
+  const [submitError, setSubmitError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+  const suggestedUsername = data?.usernames[0] ?? 'admin'
+  const connectionManagedMode = isServerConnectionManagedClientMode()
+
+  const handleChangeServer = () => {
+    requestServerConnectionPicker({ clearCurrentServer: true })
+    window.location.reload()
+  }
+
+  if (isLoading) {
+    return (
+      <div className='auth-gate auth-gate--loading'>
+        <Spin size='large' />
+      </div>
+    )
+  }
+
+  if (error != null) {
+    return (
+      <div className='auth-gate'>
+        <div className='auth-gate__panel'>
+          <Alert
+            type='error'
+            showIcon
+            message={t('auth.statusFailed')}
+            description={getApiErrorMessage(error, t('auth.statusFailed'))}
+          />
+          {connectionManagedMode && (
+            <Button
+              className='auth-gate__secondary-action'
+              htmlType='button'
+              onClick={handleChangeServer}
+              block
+            >
+              {t('auth.changeServer')}
+            </Button>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  if (data == null || !data.enabled || data.authenticated) {
+    return children
+  }
+
+  const handleFinish = async (values: LoginFormValues) => {
+    setSubmitting(true)
+    setSubmitError(null)
+    try {
+      const status = await login({
+        username: values.username?.trim() ?? '',
+        password: values.password ?? '',
+        rememberDevice: values.rememberDevice === true,
+        returnToken: connectionManagedMode
+      })
+      if (status.token != null) {
+        setAuthToken(status.token)
+      }
+      await mutate(status, { revalidate: false })
+    } catch (err) {
+      setSubmitError(getApiErrorMessage(err, t('auth.loginFailed')))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className='auth-gate'>
+      <main className='auth-gate__panel' aria-labelledby='auth-gate-title'>
+        <div className='auth-gate__intro'>
+          <h1 id='auth-gate-title'>{t('auth.title')}</h1>
+          <p>{t('auth.subtitle')}</p>
+        </div>
+
+        {submitError != null && (
+          <Alert
+            type='error'
+            showIcon
+            className='auth-gate__notice'
+            message={submitError}
+          />
+        )}
+
+        <Form
+          layout='vertical'
+          requiredMark={false}
+          initialValues={{ username: suggestedUsername, rememberDevice: true }}
+          onFinish={(values: LoginFormValues) => void handleFinish(values)}
+        >
+          <Form.Item
+            name='username'
+            label={t('auth.username')}
+            rules={[{ required: true, message: t('auth.usernameRequired') }]}
+          >
+            <Input
+              autoComplete='username'
+              size='large'
+              placeholder={t('auth.usernamePlaceholder')}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name='password'
+            label={t('auth.password')}
+            rules={[{ required: true, message: t('auth.passwordRequired') }]}
+          >
+            <Input.Password
+              autoComplete='current-password'
+              size='large'
+              placeholder={t('auth.passwordPlaceholder')}
+            />
+          </Form.Item>
+
+          <Form.Item name='rememberDevice' valuePropName='checked' className='auth-gate__remember'>
+            <Checkbox>{t('auth.rememberDevice')}</Checkbox>
+          </Form.Item>
+
+          {data.passwordSource === 'generated' && (
+            <p className='auth-gate__hint'>
+              {t('auth.generatedPasswordHint', {
+                path: data.passwordFilePath ?? '.data/web-auth-password'
+              })}
+            </p>
+          )}
+
+          <Button
+            type='primary'
+            htmlType='submit'
+            size='large'
+            loading={submitting}
+            block
+          >
+            {t('auth.login')}
+          </Button>
+
+          {connectionManagedMode && (
+            <Button
+              className='auth-gate__secondary-action'
+              htmlType='button'
+              onClick={handleChangeServer}
+              block
+            >
+              {t('auth.changeServer')}
+            </Button>
+          )}
+        </Form>
+      </main>
+    </div>
+  )
+}