@vibe-forge/client 0.11.3 → 1.0.0

package/src/components/layout/AppShell.scss

@@ -1,5 +1,6 @@
 .app-shell {
-  height: 100vh;
+  min-height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: row;
   gap: 0;
@@ -17,6 +18,13 @@
   min-height: 0;
 }
 
+.app-shell__content-region {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
 .app-shell__content {
   flex: 1;
   position: relative;
@@ -24,8 +32,7 @@
   overflow: hidden;
   min-width: 0;
   min-height: 0;
-  padding: 4px 4px 4px 0;
-  transition: padding-left .3s cubic-bezier(.4, 0, .2, 1);
+  padding: 0;
   border-radius: 0;
   background-color: var(--sub-bg-color);
   box-shadow:
@@ -33,8 +40,12 @@
     0 2px 8px rgba(15, 23, 42, .04);
 }
 
-.app-shell__content.is-sidebar-collapsed {
-  padding-left: 4px;
+.app-shell__content.app-shell__content--session {
+  padding: 12px 12px 12px 0;
+}
+
+.app-shell__content.app-shell__content--session.is-sidebar-collapsed {
+  padding: 4px;
 }
 
 .app-shell__content > * {
@@ -45,6 +56,83 @@
   overflow: hidden;
 }
 
+.app-shell__content.is-flat {
+  padding: 0;
+  background-color: var(--sub-bg-color);
+  box-shadow: none;
+}
+
+.app-shell__content.is-flat > * {
+  border-radius: 0;
+}
+
+.app-shell__mobile-sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  border: none;
+  background: rgba(0, 0, 0, .28);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity .24s ease, visibility 0s linear .24s;
+  z-index: 60;
+}
+
+.app-shell__mobile-sidebar-backdrop.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.app-shell__mobile-sidebar-sheet {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: min(320px, calc(100vw - 24px));
+  max-width: calc(100vw - 24px);
+  padding: max(4px, env(safe-area-inset-top)) 0
+    max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
+  transform: translateX(-100%);
+  visibility: hidden;
+  transition:
+    transform .24s cubic-bezier(.4, 0, .2, 1),
+    visibility 0s linear .24s;
+  z-index: 61;
+  pointer-events: none;
+  overscroll-behavior: contain;
+}
+
+.app-shell__mobile-sidebar-sheet.is-open {
+  transform: translateX(0);
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.app-shell__mobile-sidebar-sheet > * {
+  height: 100%;
+  overflow: hidden;
+  border-radius: 0 8px 8px 0;
+  box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
+  overscroll-behavior: contain;
+}
+
+.app-shell--compact {
+  flex-direction: column;
+
+  .app-shell__content {
+    padding: max(4px, env(safe-area-inset-top)) 4px 4px;
+    box-shadow: none;
+    background-color: var(--sub-bg-color);
+  }
+
+  .app-shell__content > * {
+    border-radius: 8px;
+  }
+}
+
 .app-shell--dark {
   background:
     linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)),
@@ -52,6 +140,18 @@
 
   .app-shell__content {
     background-color: var(--sub-bg-color);
-    box-shadow: 0 18px 48px rgba(0, 0, 0, .3), 0 2px 10px rgba(0, 0, 0, .22);
+    box-shadow: none;
+  }
+
+  .app-shell__mobile-sidebar-backdrop {
+    background: rgba(0, 0, 0, .48);
+  }
+
+  .app-shell__mobile-sidebar-sheet > * {
+    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
+  }
+
+  .app-shell__content.is-flat {
+    box-shadow: none;
   }
 }

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)