@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/layout/AppShell.tsx

@@ -1,16 +1,21 @@
 import './AppShell.scss'
 
 import { Layout } from 'antd'
-import { useSetAtom } from 'jotai'
-import { useEffect } from 'react'
+import { useAtom, useSetAtom } from 'jotai'
+import { useEffect, useMemo, useRef } from 'react'
 import type { PropsWithChildren } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
 
 import type { Session } from '@vibe-forge/core'
 
 import { NavRail } from '#~/components/NavRail'
 import { Sidebar } from '#~/components/Sidebar'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { useSidebarQueryState } from '#~/hooks/use-sidebar-query-state'
-import { isSidebarCollapsedAtom } from '#~/store/index'
+import { isMobileSidebarOpenAtom, isSidebarCollapsedAtom } from '#~/store/index'
+import { useMobileSidebarModal } from './@hooks/use-mobile-sidebar-modal'
+import { MOBILE_SIDEBAR_DIALOG_ID } from './mobile-sidebar-constants'
 
 type AppShellProps = PropsWithChildren<{
   activeSessionId?: string
@@ -30,12 +35,119 @@ export function AppShell({
   showSidebar,
   sidebarWidth
 }: AppShellProps) {
+  const { t } = useTranslation()
   const { isSidebarCollapsed } = useSidebarQueryState()
+  const location = useLocation()
+  const { isCompactLayout } = useResponsiveLayout()
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useAtom(isMobileSidebarOpenAtom)
   const setIsSidebarCollapsed = useSetAtom(isSidebarCollapsedAtom)
+  const isDesktopSidebarCollapsed = !isCompactLayout && isSidebarCollapsed
+  const contentRegionRef = useRef<HTMLDivElement | null>(null)
+  const mobileNavRegionRef = useRef<HTMLDivElement | null>(null)
+  const mobileSidebarSheetRef = useRef<HTMLDivElement | null>(null)
+  const mobileSidebarBackgroundRefs = useMemo(
+    () => [contentRegionRef, mobileNavRegionRef],
+    []
+  )
+
+  useEffect(() => {
+    setIsSidebarCollapsed(isCompactLayout ? false : isSidebarCollapsed)
+  }, [isCompactLayout, isSidebarCollapsed, setIsSidebarCollapsed])
+
+  useEffect(() => {
+    setIsMobileSidebarOpen(false)
+  }, [isCompactLayout, location.pathname, setIsMobileSidebarOpen])
 
   useEffect(() => {
-    setIsSidebarCollapsed(isSidebarCollapsed)
-  }, [isSidebarCollapsed, setIsSidebarCollapsed])
+    if (!isCompactLayout || showSidebar) {
+      return
+    }
+
+    setIsMobileSidebarOpen(false)
+  }, [isCompactLayout, setIsMobileSidebarOpen, showSidebar])
+
+  useMobileSidebarModal({
+    backgroundRefs: mobileSidebarBackgroundRefs,
+    isCompactLayout,
+    isMobileSidebarOpen,
+    setIsMobileSidebarOpen,
+    sheetRef: mobileSidebarSheetRef
+  })
+
+  const resolvedSidebarWidth = isCompactLayout ? Math.min(sidebarWidth, 320) : sidebarWidth
+  const contentClassName = [
+    'app-shell__content',
+    showSidebar ? 'app-shell__content--session' : '',
+    isDesktopSidebarCollapsed ? 'is-sidebar-collapsed' : '',
+    showSidebar ? '' : 'is-flat'
+  ].filter(Boolean).join(' ')
+  const content = (
+    <div
+      ref={contentRegionRef}
+      className='app-shell__content-region'
+      aria-hidden={isCompactLayout && isMobileSidebarOpen ? true : undefined}
+    >
+      <Layout.Content className={contentClassName}>
+        {children}
+      </Layout.Content>
+    </div>
+  )
+
+  if (isCompactLayout) {
+    return (
+      <Layout className={`app-shell app-shell--compact ${isDarkMode ? 'app-shell--dark' : ''}`}>
+        {content}
+
+        {showSidebar && (
+          <>
+            <button
+              type='button'
+              className={`app-shell__mobile-sidebar-backdrop ${isMobileSidebarOpen ? 'is-open' : ''}`}
+              aria-label={t('common.close')}
+              aria-hidden={!isMobileSidebarOpen}
+              tabIndex={-1}
+              onClick={() => setIsMobileSidebarOpen(false)}
+            />
+            <div
+              ref={mobileSidebarSheetRef}
+              id={MOBILE_SIDEBAR_DIALOG_ID}
+              className={`app-shell__mobile-sidebar-sheet ${isMobileSidebarOpen ? 'is-open' : ''}`}
+              role='dialog'
+              aria-modal={isMobileSidebarOpen ? 'true' : undefined}
+              aria-label={t('common.sessions')}
+              aria-hidden={!isMobileSidebarOpen}
+              tabIndex={-1}
+            >
+              <Sidebar
+                width={resolvedSidebarWidth}
+                activeId={activeSessionId}
+                onSelectSession={(session, isNew) => {
+                  setIsMobileSidebarOpen(false)
+                  onSelectSession(session, isNew)
+                }}
+                onDeletedSession={(deletedId, nextId) => {
+                  setIsMobileSidebarOpen(false)
+                  onDeletedSession(deletedId, nextId)
+                }}
+                isCompactLayout
+                isMobileOpen={isMobileSidebarOpen}
+                onRequestClose={() => setIsMobileSidebarOpen(false)}
+              />
+            </div>
+          </>
+        )}
+
+        <div ref={mobileNavRegionRef}>
+          <NavRail
+            isCompactLayout
+            ariaHidden={isMobileSidebarOpen}
+            showSidebar={showSidebar}
+            onOpenSidebar={() => setIsMobileSidebarOpen(true)}
+          />
+        </div>
+      </Layout>
+    )
+  }
 
   return (
     <Layout className={`app-shell ${isDarkMode ? 'app-shell--dark' : ''}`}>
@@ -50,11 +162,7 @@ export function AppShell({
           />
         )}
       </div>
-      <Layout.Content
-        className={`app-shell__content ${isSidebarCollapsed ? 'is-sidebar-collapsed' : ''}`}
-      >
-        {children}
-      </Layout.Content>
+      {content}
     </Layout>
   )
 }

package/src/components/layout/PageShell.scss

@@ -0,0 +1,41 @@
+.page-shell {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  background: var(--sub-bg-color);
+  --subpage-secondary-panel-width: 300px;
+  --subpage-content-card-gap: 12px;
+  --subpage-content-card-radius: 12px;
+  --subpage-content-card-bg: var(--bg-color);
+  --subpage-tertiary-padding: 8px;
+  --subpage-tertiary-gap: 8px;
+  --subpage-tertiary-radius: 8px;
+  --subpage-tertiary-border: 1px solid var(--border-color);
+  --subpage-tertiary-bg: var(--bg-color);
+  --subpage-tertiary-hover-bg: var(--sidebar-hover-bg, #e5e5e5);
+  --subpage-tertiary-hover-border: var(--sidebar-hover-bg, #e5e5e5);
+}
+
+.page-shell__header {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px 8px;
+}
+
+.page-shell__body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+@media (max-width: 720px) {
+  .page-shell {
+    padding: 0;
+  }
+}

package/src/components/layout/PageShell.tsx

@@ -0,0 +1,32 @@
+import './PageShell.scss'
+
+import type { PropsWithChildren, ReactNode } from 'react'
+
+type PageShellProps = PropsWithChildren<{
+  bodyClassName?: string
+  className?: string
+  header?: ReactNode
+}>
+
+export function PageShell({
+  bodyClassName,
+  children,
+  className,
+  header
+}: PageShellProps) {
+  const rootClassName = ['page-shell', className].filter(Boolean).join(' ')
+  const bodyClasses = ['page-shell__body', bodyClassName].filter(Boolean).join(' ')
+
+  return (
+    <div className={rootClassName}>
+      {header != null && (
+        <div className='page-shell__header'>
+          {header}
+        </div>
+      )}
+      <div className={bodyClasses}>
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/layout/mobile-sidebar-constants.ts

@@ -0,0 +1 @@
+export const MOBILE_SIDEBAR_DIALOG_ID = 'mobile-sidebar-dialog'

package/src/components/nav-rail-compact-config.ts

@@ -0,0 +1,114 @@
+import type { TFunction } from 'i18next'
+import type { NavigateFunction } from 'react-router-dom'
+
+import type { ThemeMode } from '#~/store'
+
+import type { NavRailCompactChoiceAction, NavRailCompactMoreAction } from './NavRailCompact'
+
+export function buildCompactMoreActions({
+  currentPath,
+  navigate,
+  onOpenSidebar,
+  showSidebar,
+  t
+}: {
+  currentPath: string
+  navigate: NavigateFunction
+  onOpenSidebar?: () => void
+  showSidebar: boolean
+  t: TFunction
+}): NavRailCompactMoreAction[] {
+  const actions: NavRailCompactMoreAction[] = []
+
+  if (showSidebar && onOpenSidebar != null) {
+    actions.push({
+      active: currentPath === '/' || currentPath.startsWith('/session/'),
+      icon: 'menu',
+      key: 'sessions',
+      label: t('common.sessions'),
+      onSelect: onOpenSidebar
+    })
+  }
+
+  actions.push({
+    active: currentPath === '/config',
+    icon: 'settings',
+    key: 'settings',
+    label: t('common.settings'),
+    onSelect: () => {
+      void navigate('/config')
+    }
+  })
+
+  return actions
+}
+
+export function buildCompactThemeActions({
+  setThemeMode,
+  t,
+  themeMode
+}: {
+  setThemeMode: (value: ThemeMode) => void
+  t: TFunction
+  themeMode: ThemeMode
+}): NavRailCompactChoiceAction[] {
+  return [
+    {
+      active: themeMode === 'light',
+      icon: 'light_mode',
+      key: 'light',
+      label: t('common.themeLight'),
+      onSelect: () => {
+        setThemeMode('light')
+        localStorage.setItem('theme', 'light')
+      }
+    },
+    {
+      active: themeMode === 'dark',
+      icon: 'dark_mode',
+      key: 'dark',
+      label: t('common.themeDark'),
+      onSelect: () => {
+        setThemeMode('dark')
+        localStorage.setItem('theme', 'dark')
+      }
+    },
+    {
+      active: themeMode === 'system',
+      icon: 'desktop_windows',
+      key: 'system',
+      label: t('common.themeSystem'),
+      onSelect: () => {
+        setThemeMode('system')
+        localStorage.setItem('theme', 'system')
+      }
+    }
+  ]
+}
+
+export function buildCompactLanguageActions({
+  currentLanguage,
+  onChangeLanguage
+}: {
+  currentLanguage: string
+  onChangeLanguage: (language: string) => void
+}): NavRailCompactChoiceAction[] {
+  return [
+    {
+      active: currentLanguage.startsWith('zh'),
+      key: 'zh',
+      label: '简体中文',
+      onSelect: () => {
+        onChangeLanguage('zh')
+      }
+    },
+    {
+      active: currentLanguage.startsWith('en'),
+      key: 'en',
+      label: 'English',
+      onSelect: () => {
+        onChangeLanguage('en')
+      }
+    }
+  ]
+}

package/src/components/nav-rail-items.tsx

@@ -0,0 +1,181 @@
+import type { MenuProps } from 'antd'
+import type { TFunction } from 'i18next'
+import type { NavigateFunction } from 'react-router-dom'
+
+import type { ThemeMode } from '#~/store'
+
+export interface NavRailItem {
+  active: boolean
+  icon: string
+  key: string
+  label: string
+  path: string
+}
+
+export function buildLanguageItems({
+  currentLanguage,
+  onChangeLanguage
+}: {
+  currentLanguage: string
+  onChangeLanguage: (language: string) => unknown
+}): MenuProps['items'] {
+  return [
+    {
+      key: 'zh',
+      label: '简体中文',
+      icon: currentLanguage.startsWith('zh')
+        ? (
+          <span className='material-symbols-rounded nav-menu-icon active'>check</span>
+        )
+        : <div className='nav-menu-icon-placeholder' />,
+      onClick: () => {
+        void onChangeLanguage('zh')
+      }
+    },
+    {
+      key: 'en',
+      label: 'English',
+      icon: currentLanguage.startsWith('en')
+        ? (
+          <span className='material-symbols-rounded nav-menu-icon active'>check</span>
+        )
+        : <div className='nav-menu-icon-placeholder' />,
+      onClick: () => {
+        void onChangeLanguage('en')
+      }
+    }
+  ]
+}
+
+export function buildThemeItems({
+  setThemeMode,
+  t,
+  themeMode
+}: {
+  setThemeMode: (themeMode: ThemeMode) => void
+  t: TFunction
+  themeMode: ThemeMode
+}): MenuProps['items'] {
+  return [
+    {
+      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')
+      }
+    }
+  ]
+}
+
+export function buildNavItems({
+  currentPath,
+  t
+}: {
+  currentPath: string
+  t: TFunction
+}): NavRailItem[] {
+  return [
+    {
+      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'
+    }
+  ]
+}
+
+export function buildCompactMoreItems({
+  langItems,
+  navigate,
+  t,
+  themeItems,
+  themeMode
+}: {
+  langItems: MenuProps['items']
+  navigate: NavigateFunction
+  t: TFunction
+  themeItems: MenuProps['items']
+  themeMode: ThemeMode
+}): MenuProps['items'] {
+  return [
+    {
+      key: 'settings',
+      label: t('common.settings'),
+      icon: <span className='material-symbols-rounded nav-menu-icon'>settings</span>,
+      onClick: () => {
+        void navigate('/config')
+      }
+    },
+    {
+      key: 'theme',
+      label: t('common.theme'),
+      icon: (
+        <span className='material-symbols-rounded nav-menu-icon'>
+          {themeMode === 'light' ? 'light_mode' : themeMode === 'dark' ? 'dark_mode' : 'desktop_windows'}
+        </span>
+      ),
+      children: themeItems
+    },
+    {
+      key: 'language',
+      label: t('common.language'),
+      icon: <span className='material-symbols-rounded nav-menu-icon'>language</span>,
+      children: langItems
+    }
+  ]
+}

package/src/components/sidebar/SessionContextMenu.tsx

@@ -15,6 +15,7 @@ import type { SessionContextMenuEntry } from './SessionContextMenuContent'
 interface SessionContextMenuProps {
   children: ReactElement
   session: Session
+  trigger?: ('click' | 'contextMenu')[]
   onArchive: (id: string) => void | Promise<void>
   onDelete: (id: string) => void | Promise<void>
   onRename: (id: string, title: string) => Promise<void>
@@ -26,6 +27,7 @@ type PendingSessionMenuAction = 'archive' | 'delete' | null
 export function SessionContextMenu({
   children,
   session,
+  trigger = ['contextMenu'],
   onArchive,
   onDelete,
   onRename,
@@ -174,7 +176,7 @@ export function SessionContextMenu({
 
   return (
     <Dropdown
-      trigger={['contextMenu']}
+      trigger={trigger}
       open={open}
       onOpenChange={(nextOpen) => {
         setOpen(nextOpen)

package/src/components/sidebar/SessionItem.scss

@@ -333,6 +333,68 @@
   }
 }
 
+.session-item--touch {
+  .session-header-side {
+    gap: 8px;
+  }
+
+  .time-display {
+    opacity: 1 !important;
+  }
+
+  .action-btn--more {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    color: var(--sub-text-color);
+
+    .material-symbols-rounded {
+      font-size: 18px;
+    }
+  }
+}
+
+.session-item--compact {
+  .session-info {
+    gap: 6px;
+  }
+
+  .session-header {
+    align-items: flex-start;
+  }
+
+  .session-header-side {
+    gap: 4px;
+    min-height: 0;
+  }
+
+  .time-display {
+    display: none;
+  }
+
+  .tags-container {
+    gap: 4px;
+
+    .session-tag {
+      max-width: 96px;
+
+      &--count {
+        padding: 0 5px;
+        color: var(--sub-text-color);
+      }
+    }
+  }
+}
+
+.session-item--compact.session-item--touch {
+  .action-btn--more {
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+  }
+}
+
 @keyframes spin {
   from {
     transform: rotate(0deg);