@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/NavRail.scss

@@ -47,6 +47,254 @@
   }
 }
 
+.nav-rail--compact {
+  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));
+  border-top: 1px solid var(--border-color);
+  background: color-mix(
+    in srgb,
+    var(--sub-sub-bg-color) 96%,
+    var(--bg-color) 4%
+  );
+  z-index: 20;
+
+  .nav-rail-compact-list {
+    display: grid;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+  }
+
+  .nav-item--compact {
+    width: 100%;
+    min-width: 0;
+    height: 44px;
+    border-radius: 8px;
+
+    .material-symbols-rounded {
+      font-size: 20px;
+    }
+  }
+}
+
+.nav-rail-compact-sheet-backdrop {
+  position: fixed;
+  inset: 0;
+  border: 0;
+  background: rgba(15, 23, 42, .28);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity .2s ease, visibility 0s linear .2s;
+  z-index: 68;
+}
+
+.nav-rail-compact-sheet-backdrop.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.nav-rail-compact-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
+  border-top: 1px solid var(--border-color);
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  background: var(--bg-color);
+  box-shadow: none;
+  transform: translateY(100%);
+  visibility: hidden;
+  transition:
+    transform .24s cubic-bezier(.4, 0, .2, 1),
+    visibility 0s linear .24s;
+  z-index: 69;
+}
+
+.nav-rail-compact-sheet.is-open {
+  transform: translateY(0);
+  visibility: visible;
+  transition-delay: 0s;
+}
+
+.nav-rail-compact-sheet__handle {
+  width: 40px;
+  height: 4px;
+  margin: 0 auto;
+  border-radius: 999px;
+  background: var(--border-color);
+}
+
+.nav-rail-compact-sheet__section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.nav-rail-compact-sheet__section-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--sub-text-color);
+}
+
+.nav-rail-compact-sheet__section-title-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.nav-rail-compact-sheet__actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.nav-rail-compact-sheet__action,
+.nav-rail-compact-sheet__chip {
+  min-width: 0;
+  min-height: 40px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--sub-bg-color);
+  color: var(--text-color);
+  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
+}
+
+.nav-rail-compact-sheet__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 10px;
+
+  .material-symbols-rounded {
+    font-size: 18px;
+    line-height: 1;
+  }
+
+  > span:last-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+  }
+}
+
+.nav-rail-compact-sheet__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.nav-rail-compact-sheet__segmented {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0;
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--sub-bg-color);
+}
+
+.nav-rail-compact-sheet__chip {
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.nav-rail-compact-sheet__segment {
+  min-width: 0;
+  min-height: 44px;
+  padding: 8px 6px;
+  border: 0;
+  border-right: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  transition: background-color .2s ease, color .2s ease;
+
+  &:last-child {
+    border-right: 0;
+  }
+
+  > span:last-child {
+    min-width: 0;
+    font-size: 11px;
+    line-height: 1.2;
+    text-align: center;
+  }
+}
+
+.nav-rail-compact-sheet__segment-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.nav-rail-compact-sheet__select-shell {
+  min-width: 0;
+  min-height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--sub-bg-color);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.nav-rail-compact-sheet__select-icon,
+.nav-rail-compact-sheet__select-chevron {
+  font-size: 18px;
+  line-height: 1;
+  color: var(--sub-text-color);
+  flex-shrink: 0;
+}
+
+.nav-rail-compact-sheet__select {
+  flex: 1;
+  min-width: 0;
+  height: 44px;
+  border: 0;
+  background: transparent;
+  color: var(--text-color);
+  display: block;
+  font-size: 14px;
+  line-height: 44px;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.nav-rail-compact-sheet__select-chevron {
+  pointer-events: none;
+}
+
+.nav-rail-compact-sheet__action.is-active,
+.nav-rail-compact-sheet__chip.is-active,
+.nav-rail-compact-sheet__segment.is-active {
+  border-color: var(--nav-active-text, #2563eb);
+  background: var(--nav-active-bg, #eff6ff);
+  color: var(--nav-active-text, #2563eb);
+}
+
 .nav-menu-icon {
   font-size: 16px;
   display: inline-flex;

package/src/components/NavRail.tsx

@@ -7,133 +7,106 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate } from 'react-router-dom'
 
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { themeAtom } from '../store'
+import { NavRailCompact } from './NavRailCompact'
+import {
+  buildCompactLanguageActions,
+  buildCompactMoreActions,
+  buildCompactThemeActions
+} from './nav-rail-compact-config'
+import { buildLanguageItems, buildNavItems, buildThemeItems } from './nav-rail-items'
 
 export function NavRail({
-  collapsed,
-  onToggleCollapse
+  ariaHidden = false,
+  isCompactLayout = false,
+  onOpenSidebar,
+  showSidebar = false
 }: {
-  collapsed?: boolean
-  onToggleCollapse?: () => void
+  ariaHidden?: boolean
+  isCompactLayout?: boolean
+  onOpenSidebar?: () => void
+  showSidebar?: boolean
 }) {
   const { t, i18n } = useTranslation()
   const [themeMode, setThemeMode] = useAtom(themeAtom)
   const navigate = useNavigate()
   const location = useLocation()
+  const { isTouchInteraction } = useResponsiveLayout()
 
   const currentPath = location.pathname
+  const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
 
-  const langItems: MenuProps['items'] = React.useMemo(() => [
-    {
-      key: 'zh',
-      label: '简体中文',
-      icon: i18n.language.startsWith('zh')
-        ? (
-          <span className='material-symbols-rounded nav-menu-icon active'>check</span>
-        )
-        : <div className='nav-menu-icon-placeholder' />,
-      onClick: () => {
-        void i18n.changeLanguage('zh')
-      }
-    },
-    {
-      key: 'en',
-      label: 'English',
-      icon: i18n.language.startsWith('en')
-        ? (
-          <span className='material-symbols-rounded nav-menu-icon active'>check</span>
-        )
-        : <div className='nav-menu-icon-placeholder' />,
-      onClick: () => {
-        void i18n.changeLanguage('en')
-      }
-    }
-  ], [i18n.language])
+  const langItems: MenuProps['items'] = React.useMemo(() =>
+    buildLanguageItems({
+      currentLanguage: i18n.language,
+      onChangeLanguage: (language) => i18n.changeLanguage(language)
+    }), [i18n.language])
 
-  const themeItems: MenuProps['items'] = React.useMemo(() => [
-    {
-      key: 'light',
-      label: t('common.themeLight'),
-      icon: themeMode === 'light'
-        ? <span className='material-symbols-rounded nav-menu-icon active'>check</span>
-        : <span className='material-symbols-rounded nav-menu-icon'>light_mode</span>,
-      onClick: () => {
-        setThemeMode('light')
-        localStorage.setItem('theme', 'light')
-      }
-    },
-    {
-      key: 'dark',
-      label: t('common.themeDark'),
-      icon: themeMode === 'dark'
-        ? <span className='material-symbols-rounded nav-menu-icon active'>check</span>
-        : <span className='material-symbols-rounded nav-menu-icon'>dark_mode</span>,
-      onClick: () => {
-        setThemeMode('dark')
-        localStorage.setItem('theme', 'dark')
-      }
-    },
-    {
-      key: 'system',
-      label: t('common.themeSystem'),
-      icon: themeMode === 'system'
-        ? <span className='material-symbols-rounded nav-menu-icon active'>check</span>
-        : <span className='material-symbols-rounded nav-menu-icon'>desktop_windows</span>,
-      onClick: () => {
-        setThemeMode('system')
-        localStorage.setItem('theme', 'system')
+  const themeItems: MenuProps['items'] = React.useMemo(() =>
+    buildThemeItems({
+      setThemeMode,
+      t,
+      themeMode
+    }), [setThemeMode, t, themeMode])
+
+  const navItems = React.useMemo(() => buildNavItems({ currentPath, t }), [currentPath, t])
+
+  const compactMoreActions = React.useMemo(() =>
+    buildCompactMoreActions({
+      currentPath,
+      navigate,
+      onOpenSidebar,
+      showSidebar,
+      t
+    }), [currentPath, navigate, onOpenSidebar, showSidebar, t])
+
+  const compactThemeActions = React.useMemo(() =>
+    buildCompactThemeActions({
+      setThemeMode,
+      t,
+      themeMode
+    }), [setThemeMode, t, themeMode])
+
+  const compactLanguageActions = React.useMemo(() =>
+    buildCompactLanguageActions({
+      currentLanguage: i18n.language,
+      onChangeLanguage: (language) => {
+        void i18n.changeLanguage(language)
       }
-    }
-  ], [themeMode, t, setThemeMode])
+    }), [i18n.language])
+
+  const handleNavClick = (_key: string, path: string) => {
+    void navigate(path)
+  }
 
-  const navItems = React.useMemo(() => [
-    {
-      key: 'sessions',
-      icon: 'chat_bubble',
-      label: t('common.sessions'),
-      path: '/',
-      active: currentPath === '/' || currentPath.startsWith('/session/')
-    },
-    {
-      key: 'knowledge',
-      icon: 'library_books',
-      label: t('common.knowledgeBase'),
-      path: '/knowledge',
-      active: currentPath === '/knowledge'
-    },
-    {
-      key: 'automation',
-      icon: 'schedule',
-      label: t('common.automation'),
-      path: '/automation',
-      active: currentPath === '/automation'
-    },
-    {
-      key: 'benchmark',
-      icon: 'speed',
-      label: t('common.benchmark'),
-      path: '/benchmark',
-      active: currentPath === '/benchmark'
-    },
-    {
-      key: 'archive',
-      icon: 'archive',
-      label: t('common.archivedSessions'),
-      path: '/archive',
-      active: currentPath === '/archive'
-    }
-  ], [currentPath, t])
+  if (isCompactLayout) {
+    return (
+      <NavRailCompact
+        ariaHidden={ariaHidden}
+        currentPath={currentPath}
+        languageActions={compactLanguageActions}
+        languageLabel={t('common.language')}
+        moreLabel={t('common.moreActions')}
+        moreSheetActions={compactMoreActions}
+        navItems={navItems}
+        themeActions={compactThemeActions}
+        themeLabel={t('common.theme')}
+        onNavClick={handleNavClick}
+      />
+    )
+  }
 
   return (
-    <div className='nav-rail'>
+    <div className='nav-rail' aria-hidden={ariaHidden || undefined}>
       <div className='nav-rail-top'>
         {navItems.map(item => (
-          <Tooltip key={item.key} title={item.label} placement='right'>
+          <Tooltip key={item.key} title={resolveTooltipTitle(item.label)} placement='right'>
             <span>
               <Button
                 type='text'
                 className={`nav-item ${item.active ? 'active' : ''}`}
-                onClick={() => void navigate(item.path)}
+                onClick={() => handleNavClick(item.key, item.path)}
                 icon={<span className='material-symbols-rounded'>{item.icon}</span>}
               />
             </span>
@@ -141,7 +114,7 @@ export function NavRail({
         ))}
       </div>
       <div className='nav-rail-bottom'>
-        <Tooltip title={t('common.theme')} placement='right'>
+        <Tooltip title={resolveTooltipTitle(t('common.theme'))} placement='right'>
           <span>
             <Dropdown
               menu={{
@@ -162,7 +135,7 @@ export function NavRail({
             </Dropdown>
           </span>
         </Tooltip>
-        <Tooltip title={t('common.language')} placement='right'>
+        <Tooltip title={resolveTooltipTitle(t('common.language'))} placement='right'>
           <span>
             <Dropdown
               menu={{
@@ -179,7 +152,7 @@ export function NavRail({
             </Dropdown>
           </span>
         </Tooltip>
-        <Tooltip title={t('common.settings')} placement='right'>
+        <Tooltip title={resolveTooltipTitle(t('common.settings'))} placement='right'>
           <span>
             <Button
               type='text'

package/src/components/NavRailCompact.tsx

@@ -0,0 +1,107 @@
+import { Button } from 'antd'
+import { useEffect, useState } from 'react'
+
+import { NavRailCompactMoreSheet } from './NavRailCompactMoreSheet'
+
+export interface NavRailCompactItem {
+  active: boolean
+  icon: string
+  key: string
+  label: string
+  path: string
+}
+
+export interface NavRailCompactMoreAction {
+  active?: boolean
+  icon: string
+  key: string
+  label: string
+  onSelect: () => void
+}
+
+export interface NavRailCompactChoiceAction {
+  active: boolean
+  icon?: string
+  key: string
+  label: string
+  onSelect: () => void
+}
+
+export function NavRailCompact({
+  ariaHidden = false,
+  currentPath,
+  languageActions,
+  languageLabel,
+  moreLabel,
+  moreSheetActions,
+  navItems,
+  themeActions,
+  themeLabel,
+  onNavClick
+}: {
+  ariaHidden?: boolean
+  currentPath: string
+  languageActions: NavRailCompactChoiceAction[]
+  languageLabel: string
+  moreLabel: string
+  moreSheetActions: NavRailCompactMoreAction[]
+  navItems: NavRailCompactItem[]
+  themeActions: NavRailCompactChoiceAction[]
+  themeLabel: string
+  onNavClick: (key: string, path: string) => void
+}) {
+  const [isMoreSheetOpen, setIsMoreSheetOpen] = useState(false)
+
+  useEffect(() => {
+    setIsMoreSheetOpen(false)
+  }, [currentPath])
+
+  useEffect(() => {
+    if (ariaHidden) {
+      setIsMoreSheetOpen(false)
+    }
+  }, [ariaHidden])
+
+  return (
+    <div className='nav-rail nav-rail--compact' aria-hidden={ariaHidden || undefined}>
+      <div className='nav-rail-compact-list'>
+        {navItems.map((item) => (
+          <Button
+            key={item.key}
+            type='text'
+            className={`nav-item nav-item--compact ${item.active ? 'active' : ''}`}
+            title={item.label}
+            aria-label={item.label}
+            onClick={() => {
+              setIsMoreSheetOpen(false)
+              onNavClick(item.key, item.path)
+            }}
+            icon={<span className='material-symbols-rounded'>{item.icon}</span>}
+          />
+        ))}
+
+        <Button
+          type='text'
+          className={`nav-item nav-item--compact ${isMoreSheetOpen || currentPath === '/config' ? 'active' : ''}`}
+          title={moreLabel}
+          aria-expanded={isMoreSheetOpen}
+          aria-haspopup='dialog'
+          aria-label={moreLabel}
+          onClick={() => setIsMoreSheetOpen((prev) => !prev)}
+          icon={<span className='material-symbols-rounded'>more_horiz</span>}
+        />
+      </div>
+
+      <NavRailCompactMoreSheet
+        actions={moreSheetActions}
+        isOpen={isMoreSheetOpen}
+        languageActions={languageActions}
+        languageLabel={languageLabel}
+        moreLabel={moreLabel}
+        onClose={() => setIsMoreSheetOpen(false)}
+        themeActions={themeActions}
+        themeLabel={themeLabel}
+      />
+    </div>
+  )
+}