✨ refactor(web/default): adopt drill-in sidebar pattern for System Settings

Replace the ad-hoc "workspace" abstraction with a focused, URL-driven "sidebar view" registry that implements the modern Vercel / Cloudflare drill-in pattern: clicking a top-level entry (e.g. System Settings) swaps the sidebar to a contextual workspace, with a `← Back to Dashboard` affordance, instead of stacking sub-navigation in the root. Architecture ------------ - types.ts + SidebarView — declarative nested view config (id, pathPattern, parent, getNavGroups) + SidebarViewParent — back-navigation descriptor + ResolvedSidebarView — { key, view, navGroups } returned by hook + SidebarData — slimmed to { navGroups } only - Workspace — removed (logo/plan never rendered) - lib/sidebar-view-registry.ts (new, replaces workspace-registry.ts) + SIDEBAR_VIEWS array — single source of truth for nested views + resolveSidebarView(pathname) + getNavGroupsForPath(pathname, t) — back-compat helper for the command palette - config/system-settings.config.ts Refactored to export a single SYSTEM_SETTINGS_VIEW (SidebarView) with parent `/dashboard/overview` + label `Back to Dashboard`. - components/sidebar-view-header.tsx (new) Renders only the back affordance (chevron + label). Uses the default SidebarMenuButton size so its typography matches the nav items below; collapses gracefully into icon mode via the existing tooltip behavior. The redundant "title + icon" row was removed — workspace context is already carried by the nav groups. - hooks/use-sidebar-view.ts (new) Encapsulates view resolution and root-nav filtering: · matched view → returns its nav groups verbatim (route-level beforeLoad guards already enforce access); · no match → returns root nav groups, narrowed by user role (admin gate) and useSidebarConfig (admin × user sidebar_modules overlay). - components/app-sidebar.tsx Now a thin presentation layer: reads { key, view, navGroups } from useSidebarView() and orchestrates the view transition via AnimatePresence + MOTION_VARIANTS.sidebarSlide (respects prefers-reduced-motion). No logic, no role checks, no path matching — those live in the hook. - components/command-menu.tsx Switched to the new getNavGroupsForPath() API; behavior preserved. Cleanup ------- - Deleted layout/context/workspace-context.tsx (zero consumers). - Deleted layout/lib/workspace-registry.ts and its workspace-registry.example.ts companion (over-abstracted: name/id metadata, isInWorkspace / getAllWorkspaces / WORKSPACE_IDS were registered but never read). - Removed `workspaces` field from useSidebarData (never consumed after the top-switcher was dropped). - Dropped WorkspaceProvider from authenticated-layout.tsx. - Trimmed dead `Manage and configure` translation key from all six locale files and from static-keys.ts. i18n ---- Added the `Back to Dashboard` key to en, zh, fr, ja, ru, vi, and registered it in static-keys.ts under "Sidebar views". Verification ------------ - bun run typecheck: passes - Lint: no new warnings/errors on the touched files - Adding a new drill-in workspace now only requires registering a SidebarView in SIDEBAR_VIEWS — no changes to AppSidebar required.
2026-05-24 22:09:05 +08:00 · 2026-05-24 22:09:05 +08:00 · 92a0959448
commit 92a0959448
parent 49bc3a1175
46 changed files with 515 additions and 591 deletions
--- a/web/default/src/components/command-menu.tsx
+++ b/web/default/src/components/command-menu.tsx
@ -33,7 +33,7 @@ import {
  CommandList,
  CommandSeparator,
 } from '@/components/ui/command'
-import { getNavGroupsForPath } from './layout/lib/workspace-registry'
+import { getNavGroupsForPath } from './layout/lib/sidebar-view-registry'
 import { ScrollArea } from './ui/scroll-area'

 export function CommandMenu() {
@ -44,8 +44,9 @@ export function CommandMenu() {
  const { pathname } = useLocation()
  const sidebarData = useSidebarData()

-  // 根据当前路径从工作区注册表获取对应的侧边栏配置
-  const navGroups = getNavGroupsForPath(pathname, t) || sidebarData.navGroups
+  // Use the active nested sidebar view's nav groups when one matches
+  // the current URL; otherwise fall back to the root navigation.
+  const navGroups = getNavGroupsForPath(pathname, t) ?? sidebarData.navGroups

  const runCommand = React.useCallback(
    (command: () => unknown) => {
--- a/web/default/src/components/data-table/faceted-filter.tsx
+++ b/web/default/src/components/data-table/faceted-filter.tsx
@ -107,10 +107,7 @@ export function DataTableFacetedFilter<TData, TValue>({
          </>
        )}
      </PopoverTrigger>
-      <PopoverContent
-        className='min-w-[200px] max-w-[360px] p-0'
-        align='start'
-      >
+      <PopoverContent className='max-w-[360px] min-w-[200px] p-0' align='start'>
        <Command>
          <CommandInput placeholder={title} />
          <CommandList>
--- a/web/default/src/components/layout/components/app-sidebar.tsx
+++ b/web/default/src/components/layout/components/app-sidebar.tsx
@ -16,59 +16,59 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.

 For commercial licensing, please contact support@quantumnous.com
 */
-import { useMemo } from 'react'
-import { useLocation } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
-import { useAuthStore } from '@/stores/auth-store'
-import { ROLE } from '@/lib/roles'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
+import { MOTION_TRANSITION, MOTION_VARIANTS } from '@/lib/motion'
 import { useLayout } from '@/context/layout-provider'
-import { useSidebarConfig } from '@/hooks/use-sidebar-config'
-import { useSidebarData } from '@/hooks/use-sidebar-data'
+import { useSidebarView } from '@/hooks/use-sidebar-view'
 import { Sidebar, SidebarContent, SidebarRail } from '@/components/ui/sidebar'
-import { getNavGroupsForPath } from '../lib/workspace-registry'
 import { NavGroup } from './nav-group'
+import { SidebarViewHeader } from './sidebar-view-header'

 /**
- * Application sidebar component
- * Fetches corresponding navigation menu from workspace registry based on current path
- * Dynamically filters navigation items based on backend SidebarModulesAdmin configuration
+ * Application sidebar.
 *
- * Automatically matches workspace configuration for current path through workspace registry system
- * Adding new workspaces only requires registration in workspace-registry.ts
+ * Adopts the Vercel / Cloudflare "drill-in" pattern: the URL drives
+ * which sidebar *view* is rendered. Clicking a top-level entry like
+ * `System Settings` swaps the sidebar to a contextual workspace —
+ * with a `← Back to Dashboard` affordance — instead of stacking the
+ * sub-navigation inside the root tree.
+ *
+ * Architecture:
+ *   - View resolution + filtering: {@link useSidebarView}
+ *   - View registry: `layout/lib/sidebar-view-registry.ts`
+ *   - Per-view header: {@link SidebarViewHeader}
+ *
+ * Adding a new nested view only requires registering a {@link SidebarView}
+ * in the registry; this component requires no changes.
 */
 export function AppSidebar() {
-  const { t } = useTranslation()
  const { collapsible, variant } = useLayout()
-  const { pathname } = useLocation()
-  const userRole = useAuthStore((state) => state.auth.user?.role)
-  const sidebarData = useSidebarData()
-
-  // Get navigation group configuration corresponding to current path from workspace registry
-  const allNavGroups = getNavGroupsForPath(pathname, t) || sidebarData.navGroups
-
-  // Filter sidebar navigation items based on backend configuration
-  const configFilteredNavGroups = useSidebarConfig(allNavGroups)
-
-  // Filter navigation groups based on user role
-  // Non-Admin users cannot see Admin navigation group
-  const currentNavGroups = useMemo(() => {
-    const isAdmin = userRole && userRole >= ROLE.ADMIN
-    return configFilteredNavGroups.filter((group) => {
-      if (group.id === 'admin') {
-        return isAdmin
-      }
-      return true
-    })
-  }, [configFilteredNavGroups, userRole])
+  const { key, view, navGroups } = useSidebarView()
+  const shouldReduce = useReducedMotion()

  return (
    <Sidebar collapsible={collapsible} variant={variant}>
+      {view && <SidebarViewHeader view={view} />}
+
      <SidebarContent className='py-2'>
-        {currentNavGroups.map((props) => {
-          const key = props.id || props.title
-          return <NavGroup key={key} {...props} />
-        })}
+        <AnimatePresence mode='wait' initial={false}>
+          <motion.div
+            key={key}
+            initial={
+              shouldReduce ? false : MOTION_VARIANTS.sidebarSlide.initial
+            }
+            animate={MOTION_VARIANTS.sidebarSlide.animate}
+            exit={shouldReduce ? undefined : MOTION_VARIANTS.sidebarSlide.exit}
+            transition={MOTION_TRANSITION.fast}
+            className='flex flex-col'
+          >
+            {navGroups.map((props) => (
+              <NavGroup key={props.id || props.title} {...props} />
+            ))}
+          </motion.div>
+        </AnimatePresence>
      </SidebarContent>
+
      <SidebarRail />
    </Sidebar>
  )
--- a/web/default/src/components/layout/components/authenticated-layout.tsx
+++ b/web/default/src/components/layout/components/authenticated-layout.tsx
@ -23,7 +23,6 @@ import { SearchProvider } from '@/context/search-provider'
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
 import { AnimatedOutlet } from '@/components/page-transition'
 import { SkipToMain } from '@/components/skip-to-main'
-import { WorkspaceProvider } from '../context/workspace-context'
 import { AppHeader } from './app-header'
 import { AppSidebar } from './app-sidebar'

@ -37,24 +36,22 @@ export function AuthenticatedLayout(props: AuthenticatedLayoutProps) {
  return (
    <LayoutProvider>
      <SearchProvider>
-        <WorkspaceProvider>
-          <SidebarProvider defaultOpen={defaultOpen} className='flex-col'>
-            <SkipToMain />
-            <AppHeader />
-            <div className='flex min-h-0 w-full flex-1'>
-              <AppSidebar />
-              <SidebarInset
-                className={cn(
-                  '@container/content',
-                  'h-[calc(100svh-var(--app-header-height,0px))]',
-                  'peer-data-[variant=inset]:h-[calc(100svh-var(--app-header-height,0px)-(var(--spacing)*4))]'
-                )}
-              >
-                {props.children ?? <AnimatedOutlet />}
-              </SidebarInset>
-            </div>
-          </SidebarProvider>
-        </WorkspaceProvider>
+        <SidebarProvider defaultOpen={defaultOpen} className='flex-col'>
+          <SkipToMain />
+          <AppHeader />
+          <div className='flex min-h-0 w-full flex-1'>
+            <AppSidebar />
+            <SidebarInset
+              className={cn(
+                '@container/content',
+                'h-[calc(100svh-var(--app-header-height,0px))]',
+                'peer-data-[variant=inset]:h-[calc(100svh-var(--app-header-height,0px)-(var(--spacing)*4))]'
+              )}
+            >
+              {props.children ?? <AnimatedOutlet />}
+            </SidebarInset>
+          </div>
+        </SidebarProvider>
      </SearchProvider>
    </LayoutProvider>
  )
--- a/web/default/src/components/layout/components/footer.tsx
+++ b/web/default/src/components/layout/components/footer.tsx
@ -20,8 +20,8 @@ import { Fragment, useMemo } from 'react'
 import { Link } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/utils'
-import { useSystemConfig } from '@/hooks/use-system-config'
 import { useStatus } from '@/hooks/use-status'
+import { useSystemConfig } from '@/hooks/use-system-config'

 interface FooterLink {
  text: string
@ -235,7 +235,7 @@ export function Footer(props: FooterProps) {
              className='custom-footer text-muted-foreground min-w-0 text-center text-sm sm:text-left'
              dangerouslySetInnerHTML={{ __html: footerHtml }}
            />
-            <div className='border-border/60 flex w-full flex-wrap items-center justify-center gap-x-3 gap-y-1 border-t pt-4 text-muted-foreground/45 text-xs sm:w-auto sm:justify-end sm:border-t-0 sm:border-l sm:pt-0 sm:pl-5'>
+            <div className='border-border/60 text-muted-foreground/45 flex w-full flex-wrap items-center justify-center gap-x-3 gap-y-1 border-t pt-4 text-xs sm:w-auto sm:justify-end sm:border-t-0 sm:border-l sm:pt-0 sm:pl-5'>
              <LegalLinks />
              <ProjectAttribution currentYear={currentYear} inline />
            </div>
--- a/web/default/src/components/layout/components/sidebar-view-header.tsx
+++ b/web/default/src/components/layout/components/sidebar-view-header.tsx
@ -0,0 +1,70 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { Link } from '@tanstack/react-router'
+import { ChevronLeft } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import {
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import type { SidebarView } from '../types'
+
+type SidebarViewHeaderProps = {
+  view: SidebarView
+}
+
+/**
+ * Header for a nested sidebar view (Vercel / Cloudflare drill-in pattern).
+ *
+ * Renders only the back affordance — workspace context is conveyed by
+ * the nav groups below, not a redundant title row.
+ */
+export function SidebarViewHeader(props: SidebarViewHeaderProps) {
+  const { t } = useTranslation()
+  const { setOpenMobile } = useSidebar()
+
+  return (
+    <SidebarHeader className='border-sidebar-border border-b px-2 py-2'>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            tooltip={t(props.view.parent.label)}
+            className={cn(
+              'text-muted-foreground hover:text-foreground',
+              'gap-1.5 font-medium'
+            )}
+            render={
+              <Link
+                to={props.view.parent.to}
+                onClick={() => setOpenMobile(false)}
+              />
+            }
+          >
+            <ChevronLeft className='size-4 shrink-0' />
+            <span className='truncate'>{t(props.view.parent.label)}</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+  )
+}
--- a/web/default/src/components/layout/config/system-settings.config.ts
+++ b/web/default/src/components/layout/config/system-settings.config.ts
@ -33,15 +33,16 @@ import { getModelsSectionNavItems } from '@/features/system-settings/models/sect
 import { getOperationsSectionNavItems } from '@/features/system-settings/operations/section-registry.tsx'
 import { getSecuritySectionNavItems } from '@/features/system-settings/security/section-registry.tsx'
 import { getSiteSectionNavItems } from '@/features/system-settings/site/section-registry.tsx'
-import { type NavGroup } from '../types'
+import type { NavGroup, SidebarView } from '../types'

 /**
- * System settings sidebar configuration
- * Displayed when switching to "System Settings" workspace
+ * Sidebar nav groups for the System Settings nested view.
+ *
+ * Kept as a single group because the workspace title in the sidebar
+ * header already provides top-level context — the inner group label
+ * scopes the items as "administration" actions.
 */
-export const WORKSPACE_SYSTEM_SETTINGS_ID = 'system-settings'
-
-export function getSystemSettingsNavGroups(t: TFunction): NavGroup[] {
+function getSystemSettingsNavGroups(t: TFunction): NavGroup[] {
  return [
    {
      id: 'system-administration',
@ -86,3 +87,20 @@ export function getSystemSettingsNavGroups(t: TFunction): NavGroup[] {
    },
  ]
 }
+
+/**
+ * Nested sidebar view for `/system-settings/*`.
+ *
+ * Activates the Vercel / Cloudflare-style drill-in sidebar:
+ * the root navigation is replaced by the system administration
+ * groups, with a "Back to Dashboard" affordance in the header.
+ */
+export const SYSTEM_SETTINGS_VIEW: SidebarView = {
+  id: 'system-settings',
+  pathPattern: /^\/system-settings(\/|$)/,
+  parent: {
+    to: '/dashboard/overview',
+    label: 'Back to Dashboard',
+  },
+  getNavGroups: getSystemSettingsNavGroups,
+}
--- a/web/default/src/components/layout/context/workspace-context.tsx
+++ b/web/default/src/components/layout/context/workspace-context.tsx
@ -1,62 +0,0 @@
-/*
-Copyright (C) 2023-2026 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-For commercial licensing, please contact support@quantumnous.com
-*/
-/* eslint-disable react-refresh/only-export-components */
-import * as React from 'react'
-import { type Workspace } from '../types'
-
-type WorkspaceContextType = {
-  activeWorkspace: Workspace | null
-  setActiveWorkspace: (workspace: Workspace) => void
-}
-
-const WorkspaceContext = React.createContext<WorkspaceContextType | undefined>(
-  undefined
-)
-
-/**
- * 工作区上下文 Provider
- * 管理当前激活的工作区状态，用于切换不同的侧边栏视图
- */
-export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
-  const [activeWorkspace, setActiveWorkspace] =
-    React.useState<Workspace | null>(null)
-
-  const value = React.useMemo(
-    () => ({ activeWorkspace, setActiveWorkspace }),
-    [activeWorkspace]
-  )
-
-  return (
-    <WorkspaceContext.Provider value={value}>
-      {children}
-    </WorkspaceContext.Provider>
-  )
-}
-
-/**
- * 使用工作区上下文的 Hook
- * @throws 如果在 WorkspaceProvider 外部使用会抛出错误
- */
-export function useWorkspace() {
-  const context = React.useContext(WorkspaceContext)
-  if (!context) {
-    throw new Error('useWorkspace must be used within WorkspaceProvider')
-  }
-  return context
-}
--- a/web/default/src/components/layout/index.ts
+++ b/web/default/src/components/layout/index.ts
@ -17,10 +17,10 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 /**
- * Layout 组件统一导出
+ * Public surface of the Layout module.
 */

-// 核心组件
+// Core components
 export { AppHeader } from './components/app-header'
 export { AppSidebar } from './components/app-sidebar'
 export { AuthenticatedLayout } from './components/authenticated-layout'
@ -34,41 +34,34 @@ export { Main } from './components/main'
 export { PageFooterPortal } from './components/page-footer'
 export { NavGroup } from './components/nav-group'
 export { SectionPageLayout } from './components/section-page-layout'
+export { SidebarViewHeader } from './components/sidebar-view-header'
 export { SystemBrand } from './components/system-brand'
 export { TopNav } from './components/top-nav'
 export { MobileDrawer } from './components/mobile-drawer'

-// 上下文
-export { WorkspaceProvider, useWorkspace } from './context/workspace-context'
-
-// 配置
-export {
-  getSystemSettingsNavGroups,
-  WORKSPACE_SYSTEM_SETTINGS_ID,
-} from './config/system-settings.config'
+// Configuration
+export { SYSTEM_SETTINGS_VIEW } from './config/system-settings.config'
 export { defaultTopNavLinks } from './config/top-nav.config'

-// 常量
+// Constants
 export { MOBILE_DRAWER_ANIMATION, MOBILE_DRAWER_CONFIG } from './constants'

-// 工具函数 - 工作区注册表
+// Sidebar view registry
 export {
-  getWorkspaceByPath,
  getNavGroupsForPath,
-  isInWorkspace,
-  getAllWorkspaces,
-  WORKSPACE_IDS,
-} from './lib/workspace-registry'
+  resolveSidebarView,
+} from './lib/sidebar-view-registry'

-// 类型导出（使用 type-only 导出避免与组件冲突）
+// Type exports (type-only to avoid conflicts with components above)
 export type {
-  Workspace,
-  NavLink,
  NavCollapsible,
-  NavItem,
  NavGroup as NavGroupType,
+  NavItem,
+  NavLink,
+  ResolvedSidebarView,
  SidebarData,
+  SidebarView,
+  SidebarViewParent,
  TopNavLink,
 } from './types'
-export type { WorkspaceConfig, WorkspaceId } from './lib/workspace-registry'
 export type { SectionPageLayoutProps } from './components/section-page-layout'
--- a/web/default/src/components/layout/lib/sidebar-view-registry.ts
+++ b/web/default/src/components/layout/lib/sidebar-view-registry.ts
@ -0,0 +1,58 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { type TFunction } from 'i18next'
+import { SYSTEM_SETTINGS_VIEW } from '../config/system-settings.config'
+import type { NavGroup, SidebarView } from '../types'
+
+/**
+ * Registered nested sidebar views.
+ *
+ * Each entry describes a contextual sidebar that replaces the root
+ * navigation when the user enters that workspace (Vercel-style
+ * "drill-in" pattern). Add new entries here to register a new view.
+ *
+ * Match priority is array order; the first matching `pathPattern` wins.
+ */
+const SIDEBAR_VIEWS: readonly SidebarView[] = [SYSTEM_SETTINGS_VIEW]
+
+/**
+ * Resolve the active nested view for the given path.
+ *
+ * @returns Matching {@link SidebarView}, or `null` when the root
+ *          navigation should be displayed.
+ */
+export function resolveSidebarView(pathname: string): SidebarView | null {
+  return SIDEBAR_VIEWS.find((view) => view.pathPattern.test(pathname)) ?? null
+}
+
+/**
+ * Backwards-compatible helper for consumers (e.g. command palette) that
+ * just need the navigation groups for the current path, without caring
+ * about the view metadata.
+ *
+ * @returns Nav groups for the matched view, or `null` if no nested view
+ *          matches (callers should then fall back to root nav groups).
+ */
+export function getNavGroupsForPath(
+  pathname: string,
+  t: TFunction
+): NavGroup[] | null {
+  const view = resolveSidebarView(pathname)
+  return view ? view.getNavGroups(t) : null
+}
--- a/web/default/src/components/layout/lib/workspace-registry.example.ts
+++ b/web/default/src/components/layout/lib/workspace-registry.example.ts
@ -1,119 +0,0 @@
-/*
-Copyright (C) 2023-2026 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-For commercial licensing, please contact support@quantumnous.com
-*/
-/**
- * 工作区注册表使用示例
- *
- * 本文件展示如何添加新工作区，仅作示例参考，不会被编译
- */
-
-/**
- * 步骤1: 创建工作区的侧边栏配置文件
- * 例如：web/src/components/layout/config/user-management.config.ts
- */
-/*
-import { Users, UserPlus, Shield } from 'lucide-react'
-import { type NavGroup } from '../types'
-
-export const userManagementConfig: NavGroup[] = [
-  {
-    title: 'User Management',
-    items: [
-      {
-        title: 'All Users',
-        url: '/user-management/list',
-        icon: Users,
-      },
-      {
-        title: 'Create User',
-        url: '/user-management/create',
-        icon: UserPlus,
-      },
-      {
-        title: 'Permissions',
-        url: '/user-management/permissions',
-        icon: Shield,
-      },
-    ],
-  },
-]
-*/
-
-/**
- * 步骤2: 在 workspace-registry.ts 中注册新工作区
- * 在 workspaceRegistry 数组中添加配置（在默认工作区之前）
- */
-/*
-import { userManagementConfig } from '../config/user-management.config'
-
-const workspaceRegistry: WorkspaceConfig[] = [
-  // System Settings 工作区
-  {
-    name: 'System Settings',
-    pathPattern: /^\/system-settings/,
-    navGroups: systemSettingsConfig,
-  },
-  // 新增的 User Management 工作区
-  {
-    name: 'User Management',
-    pathPattern: /^\/user-management/,  // 或使用字符串: '/user-management'
-    navGroups: userManagementConfig,
-  },
-  // 默认工作区（必须放在最后）
-  {
-    name: 'Default',
-    pathPattern: /.* /,
-    navGroups: sidebarConfig.navGroups,
-  },
-]
-*/
-
-/**
- * 步骤3: （可选）在 sidebar.config.ts 中添加工作区到切换器
- */
-/*
-export const sidebarConfig: SidebarData = {
-  workspaces: [
-    {
-      name: '',
-      logo: Command,
-      plan: '',
-    },
-    {
-      name: 'User Management',
-      logo: Users,
-      plan: 'Manage users',
-    },
-    {
-      name: 'System Settings',
-      logo: Settings,
-      plan: 'Manage and configure',
-    },
-  ],
-  navGroups: [...],
-}
-*/
-
-/**
- * 同语注：这里就完成了，现在：
- * - 侧边栏会根据当前路径自动切换显示对应的工作区菜单
- * - 搜索功能会自动显示当前工作区的菜单项
- * - 工作区切换器会显示新的工作区选项
- *
- * 无需修改任何其他文件！
- */
--- a/web/default/src/components/layout/lib/workspace-registry.ts
+++ b/web/default/src/components/layout/lib/workspace-registry.ts
@ -1,128 +0,0 @@
-/*
-Copyright (C) 2023-2026 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-For commercial licensing, please contact support@quantumnous.com
-*/
-import { type TFunction } from 'i18next'
-import {
-  getSystemSettingsNavGroups,
-  WORKSPACE_SYSTEM_SETTINGS_ID,
-} from '../config/system-settings.config'
-import type { NavGroup } from '../types'
-
-export const WORKSPACE_IDS = {
-  SYSTEM_SETTINGS: WORKSPACE_SYSTEM_SETTINGS_ID,
-  DEFAULT: 'default',
-} as const
-
-export type WorkspaceId = (typeof WORKSPACE_IDS)[keyof typeof WORKSPACE_IDS]
-
-/**
- * Workspace configuration type
- * Each workspace contains name, path matching rules, and corresponding navigation group configuration
- */
-export type WorkspaceConfig = {
-  /** Workspace identifier (for logic) */
-  id: WorkspaceId
-  /** Workspace name */
-  name: string
-  /** Path matching rule, supports string (contains match) or regular expression */
-  pathPattern: string | RegExp
-  /** Sidebar navigation group configuration for this workspace */
-  getNavGroups?: (t: TFunction) => NavGroup[]
-}
-
-/**
- * Workspace registry
- *
- * Sorted by priority, first matched workspace will be used
- * Last one should be default workspace (matches all paths)
- *
- * @example
- * // Add new workspace
- * {
- *   name: 'User Management',
- *   pathPattern: /^\/user-management/,
- *   navGroups: userManagementConfig
- * }
- */
-const workspaceRegistry: WorkspaceConfig[] = [
-  // System Settings workspace
-  {
-    id: WORKSPACE_IDS.SYSTEM_SETTINGS,
-    name: 'System Settings',
-    pathPattern: /^\/system-settings/,
-    getNavGroups: getSystemSettingsNavGroups,
-  },
-  // Default workspace (must be last)
-  {
-    id: WORKSPACE_IDS.DEFAULT,
-    name: 'Default',
-    pathPattern: /.*/,
-    // getNavGroups is undefined, will be handled by consumers (e.g. useSidebarData)
-  },
-]
-
-/**
- * Get matched workspace configuration based on path
- * @param pathname - Current route path
- * @returns Matched workspace configuration
- */
-export function getWorkspaceByPath(pathname: string): WorkspaceConfig {
-  const workspace = workspaceRegistry.find((ws) => {
-    if (typeof ws.pathPattern === 'string') {
-      return pathname.includes(ws.pathPattern)
-    }
-    return ws.pathPattern.test(pathname)
-  })
-
-  // If no match, return default workspace (last one)
-  return workspace || workspaceRegistry[workspaceRegistry.length - 1]
-}
-
-/**
- * Get corresponding sidebar navigation group configuration based on path
- * @param pathname - Current route path
- * @returns Navigation group configuration for corresponding workspace
- */
-export function getNavGroupsForPath(
-  pathname: string,
-  t: TFunction
-): NavGroup[] | undefined {
-  const workspace = getWorkspaceByPath(pathname)
-  return workspace.getNavGroups?.(t)
-}
-
-/**
- * Determine if in specified workspace
- * @param pathname - Current route path
- * @param workspaceId - Workspace identifier
- * @returns Whether in specified workspace
- */
-export function isInWorkspace(
-  pathname: string,
-  workspaceId: WorkspaceId
-): boolean {
-  return getWorkspaceByPath(pathname).id === workspaceId
-}
-
-/**
- * Get all registered workspace configurations
- * @returns Array of workspace configurations
- */
-export function getAllWorkspaces(): WorkspaceConfig[] {
-  return workspaceRegistry
-}
--- a/web/default/src/components/layout/types.ts
+++ b/web/default/src/components/layout/types.ts
@ -17,17 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { type LinkProps } from '@tanstack/react-router'
-
-/**
- * Workspace type
- * Used for top switcher to display different workspaces
- */
-export type Workspace = {
-  id: string
-  name: string
-  logo: React.ElementType
-  plan: string
-}
+import { type TFunction } from 'i18next'

 /**
 * Base navigation item type
@ -82,10 +72,12 @@ export type NavGroup = {
 }

 /**
- * Sidebar data type
+ * Root sidebar data type
+ *
+ * Used by the default (top-level) sidebar view that lists primary
+ * application navigation (chat, dashboard, admin, etc).
 */
 export type SidebarData = {
-  workspaces: Workspace[]
  navGroups: NavGroup[]
 }

@ -100,3 +92,45 @@ export type TopNavLink = {
  requiresAuth?: boolean
  external?: boolean
 }
+
+/**
+ * Back-navigation descriptor for a nested sidebar view
+ */
+export type SidebarViewParent = {
+  /** Destination URL for the back button */
+  to: LinkProps['to'] | (string & {})
+  /** Visible label, e.g. "Back to Dashboard" — already localized */
+  label: string
+}
+
+/**
+ * Nested sidebar view configuration
+ *
+ * A nested view replaces the root navigation when the user enters a
+ * dedicated workspace (e.g. System Settings). It models the modern
+ * Vercel / Cloudflare "drill-in" sidebar UX: clicking a top-level entry
+ * swaps the sidebar to a contextual view with a "Back" affordance.
+ */
+export type SidebarView = {
+  /** Stable identifier (also drives transition animation keys) */
+  id: string
+  /** Path matcher that activates this view */
+  pathPattern: RegExp
+  /** Back-navigation descriptor; required for nested views */
+  parent: SidebarViewParent
+  /** Nav group builder, called per render with the active translator */
+  getNavGroups: (t: TFunction) => NavGroup[]
+}
+
+/**
+ * Resolved sidebar view returned by `useSidebarView()`
+ *
+ * - `view === null`: root navigation (default sidebar)
+ * - `view !== null`: nested workspace view (renders header + back button)
+ */
+export type ResolvedSidebarView = {
+  /** Animation/identity key — falls back to a sentinel for the root view */
+  key: string
+  view: SidebarView | null
+  navGroups: NavGroup[]
+}
--- a/web/default/src/features/auth/sign-in/index.tsx
+++ b/web/default/src/features/auth/sign-in/index.tsx
@ -35,18 +35,19 @@ export function SignIn() {
          <h2 className='text-center text-2xl font-semibold tracking-tight sm:text-left'>
            {t('Sign in')}
          </h2>
-          {!status?.self_use_mode_enabled && status?.register_enabled !== false && (
-            <p className='text-muted-foreground text-left text-sm sm:text-base'>
-              {t("Don't have an account?")}{' '}
-              <Link
-                to='/sign-up'
-                className='hover:text-primary font-medium underline underline-offset-4'
-              >
-                {t('Sign up')}
-              </Link>
-              .
-            </p>
-          )}
+          {!status?.self_use_mode_enabled &&
+            status?.register_enabled !== false && (
+              <p className='text-muted-foreground text-left text-sm sm:text-base'>
+                {t("Don't have an account?")}{' '}
+                <Link
+                  to='/sign-up'
+                  className='hover:text-primary font-medium underline underline-offset-4'
+                >
+                  {t('Sign up')}
+                </Link>
+                .
+              </p>
+            )}
        </div>

        <UserAuthForm redirectTo={redirect} />
--- a/web/default/src/features/auth/sign-up/components/sign-up-form.tsx
+++ b/web/default/src/features/auth/sign-up/components/sign-up-form.tsx
@ -319,7 +319,6 @@ export function SignUpForm({
                )}
              </Button>
            </div>
-
          </>
        )}

--- a/web/default/src/features/channels/components/channels-columns.tsx
+++ b/web/default/src/features/channels/components/channels-columns.tsx
@ -36,7 +36,6 @@ import {
 } from '@/lib/format'
 import { getLobeIcon } from '@/lib/lobe-icon'
 import { cn, truncateText } from '@/lib/utils'
-import { TruncatedText } from '@/components/truncated-text'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import {
@ -53,6 +52,7 @@ import {
  dotColorMap,
  textColorMap,
 } from '@/components/status-badge'
+import { TruncatedText } from '@/components/truncated-text'
 import { getCodexUsage } from '../api'
 import { CHANNEL_STATUS_CONFIG, MODEL_FETCHABLE_TYPES } from '../constants'
 import {
--- a/web/default/src/features/channels/components/dialogs/fetch-models-dialog.tsx
+++ b/web/default/src/features/channels/components/dialogs/fetch-models-dialog.tsx
@ -89,9 +89,7 @@ export function FetchModelsDialog({

  // Parse existing models
  const existingModels = useMemo(
-    () =>
-      existingModelsOverride ??
-      parseModelsString(currentRow?.models || ''),
+    () => existingModelsOverride ?? parseModelsString(currentRow?.models || ''),
    [existingModelsOverride, currentRow?.models]
  )

@ -369,12 +367,14 @@ export function FetchModelsDialog({
        <DialogHeader>
          <DialogTitle>{t('Fetch Models')}</DialogTitle>
          <DialogDescription>
-            {currentRow
-              ? <>
-                  {t('Fetch available models for:')}{' '}
-                  <strong>{currentRow.name}</strong>
-                </>
-              : t('Fetch available models from upstream')}
+            {currentRow ? (
+              <>
+                {t('Fetch available models for:')}{' '}
+                <strong>{currentRow.name}</strong>
+              </>
+            ) : (
+              t('Fetch available models from upstream')
+            )}
          </DialogDescription>
        </DialogHeader>

--- a/web/default/src/features/channels/components/drawers/channel-mutate-drawer.tsx
+++ b/web/default/src/features/channels/components/drawers/channel-mutate-drawer.tsx
@ -3381,7 +3381,9 @@ export function ChannelMutateDrawer({
        redirectSourceModels={redirectModelKeyList}
        customFetcher={!isEditing ? createModeFetcher : undefined}
        existingModelsOverride={
-          !isEditing ? parseModelsString(form.getValues('models') || '') : undefined
+          !isEditing
+            ? parseModelsString(form.getValues('models') || '')
+            : undefined
        }
      />

--- a/web/default/src/features/dashboard/components/overview/performance-health-panel.tsx
+++ b/web/default/src/features/dashboard/components/overview/performance-health-panel.tsx
@ -82,9 +82,17 @@ export function PerformanceHealthPanel() {
  const summary = useMemo(() => {
    return {
      avgLatencyMs: Math.round(
-        simpleAverage(models, 'avg_latency_ms', (v) => Number.isFinite(v) && v > 0)
+        simpleAverage(
+          models,
+          'avg_latency_ms',
+          (v) => Number.isFinite(v) && v > 0
+        )
+      ),
+      avgTps: simpleAverage(
+        models,
+        'avg_tps',
+        (v) => Number.isFinite(v) && v > 0
      ),
-      avgTps: simpleAverage(models, 'avg_tps', (v) => Number.isFinite(v) && v > 0),
      successRate: simpleAverage(models, 'success_rate', Number.isFinite),
    }
  }, [models])
@ -96,7 +104,10 @@ export function PerformanceHealthPanel() {
  return (
    <section className='bg-card h-full overflow-hidden rounded-2xl border shadow-xs'>
      <div className='flex items-center gap-2 border-b px-4 py-3 sm:px-5'>
-        <HeartPulse className='text-muted-foreground/60 size-4 shrink-0' aria-hidden='true' />
+        <HeartPulse
+          className='text-muted-foreground/60 size-4 shrink-0'
+          aria-hidden='true'
+        />
        <h3 className='text-sm font-semibold'>{t('Performance health')}</h3>
        <span className='text-muted-foreground ml-auto text-xs'>
          {t('Performance metrics for the last 24 hours')}
@ -132,38 +143,43 @@ export function PerformanceHealthPanel() {
              <Skeleton key={i} className='h-5 w-full rounded' />
            ))}
          </div>
-        ) : hasData && (
-          <div>
-            <span className='text-muted-foreground mb-1 block text-[11px] font-medium'>
-              {t('Top models by traffic')}
-            </span>
-            <div className='grid grid-cols-1 gap-x-4 sm:grid-cols-2'>
-              {topModels.map((model) => (
-                <div
-                  key={model.model_name}
-                  className='flex items-center justify-between gap-2 rounded px-1.5 py-1'
-                >
-                  <span className='min-w-0 flex-1 truncate font-mono text-[11px]'>
-                    {model.model_name}
-                  </span>
-                  <span className='inline-flex shrink-0 items-center gap-1'>
-                    <span
-                      className={cn('size-1.5 rounded-full', rateDotClass(model.success_rate))}
-                      aria-hidden='true'
-                    />
-                    <span
-                      className={cn(
-                        'font-mono text-[11px] font-semibold tabular-nums',
-                        rateTextClass(model.success_rate)
-                      )}
-                    >
-                      {formatUptimePct(model.success_rate)}
+        ) : (
+          hasData && (
+            <div>
+              <span className='text-muted-foreground mb-1 block text-[11px] font-medium'>
+                {t('Top models by traffic')}
+              </span>
+              <div className='grid grid-cols-1 gap-x-4 sm:grid-cols-2'>
+                {topModels.map((model) => (
+                  <div
+                    key={model.model_name}
+                    className='flex items-center justify-between gap-2 rounded px-1.5 py-1'
+                  >
+                    <span className='min-w-0 flex-1 truncate font-mono text-[11px]'>
+                      {model.model_name}
                    </span>
-                  </span>
-                </div>
-              ))}
+                    <span className='inline-flex shrink-0 items-center gap-1'>
+                      <span
+                        className={cn(
+                          'size-1.5 rounded-full',
+                          rateDotClass(model.success_rate)
+                        )}
+                        aria-hidden='true'
+                      />
+                      <span
+                        className={cn(
+                          'font-mono text-[11px] font-semibold tabular-nums',
+                          rateTextClass(model.success_rate)
+                        )}
+                      >
+                        {formatUptimePct(model.success_rate)}
+                      </span>
+                    </span>
+                  </div>
+                ))}
+              </div>
            </div>
-          </div>
+          )
        )}
      </div>
    </section>
--- a/web/default/src/features/dashboard/components/overview/summary-cards.tsx
+++ b/web/default/src/features/dashboard/components/overview/summary-cards.tsx
@ -19,12 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
-import {
-  ArrowRight,
-  Flame,
-  ShieldCheck,
-  TrendingDown,
-} from 'lucide-react'
+import { ArrowRight, Flame, ShieldCheck, TrendingDown } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useAuthStore } from '@/stores/auth-store'
 import { getCurrencyLabel, isCurrencyDisplayEnabled } from '@/lib/currency'
@ -102,7 +97,10 @@ function getSummarySparkline(
  return undefined
 }

-function getRunwayDays(remainQuota: number, recentUsage: number): number | null {
+function getRunwayDays(
+  remainQuota: number,
+  recentUsage: number
+): number | null {
  if (remainQuota <= 0 || recentUsage <= 0) return null
  const days = remainQuota / recentUsage
  if (!Number.isFinite(days)) return null
@ -111,10 +109,7 @@ function getRunwayDays(remainQuota: number, recentUsage: number): number | null

 type HealthLevel = 'healthy' | 'caution' | 'critical'

-function getHealthLevel(
-  remainQuota: number,
-  recentUsage: number
-): HealthLevel {
+function getHealthLevel(remainQuota: number, recentUsage: number): HealthLevel {
  if (remainQuota <= 0) return 'critical'
  const days = getRunwayDays(remainQuota, recentUsage)
  if (days !== null && days < 3) return 'caution'
@ -139,7 +134,6 @@ const HEALTH_CONFIG: Record<
  },
 }

-
 export function SummaryCards() {
  const { t } = useTranslation()
  const user = useAuthStore((state) => state.auth.user)
@ -341,10 +335,7 @@ export function SummaryCards() {
            </div>
          </div>

-          <Button
-            className='justify-between'
-            render={<Link to='/wallet' />}
-          >
+          <Button className='justify-between' render={<Link to='/wallet' />}>
            <span>{t('Wallet')}</span>
            <ArrowRight data-icon='inline-end' />
          </Button>
--- a/web/default/src/features/dashboard/components/ui/stat-card.tsx
+++ b/web/default/src/features/dashboard/components/ui/stat-card.tsx
@ -96,8 +96,7 @@ function buildLineSparkline(values?: number[]) {
      sanitized.length === 1
        ? width / 2
        : (index / (sanitized.length - 1)) * width
-    const normalized =
-      range > 0 ? (value - min) / range : max > 0 ? 0.5 : 0
+    const normalized = range > 0 ? (value - min) / range : max > 0 ? 0.5 : 0
    const y = height - padding - normalized * (height - padding * 2)

    return { x, y }
--- a/web/default/src/features/dashboard/index.tsx
+++ b/web/default/src/features/dashboard/index.tsx
@ -236,7 +236,7 @@ export function Dashboard() {
            <div className='flex flex-wrap items-center justify-between gap-1.5 sm:gap-2'>
              {showSectionTabs ? (
                <Tabs value={activeSection} onValueChange={handleSectionChange}>
-                  <TabsList className='group-data-horizontal/tabs:h-auto max-w-full flex-wrap justify-start'>
+                  <TabsList className='max-w-full flex-wrap justify-start group-data-horizontal/tabs:h-auto'>
                    {visibleSections.map((section) => (
                      <TabsTrigger key={section} value={section}>
                        {t(SECTION_META[section].titleKey)}
--- a/web/default/src/features/home/components/sections/hero.tsx
+++ b/web/default/src/features/home/components/sections/hero.tsx
@ -65,7 +65,9 @@ export function Hero(props: HeroProps) {
          className='landing-animate-fade-up text-muted-foreground/80 mt-5 max-w-lg text-base leading-relaxed opacity-0 md:text-lg'
          style={{ animationDelay: '80ms' }}
        >
-          {t('Power AI applications, manage digital assets, connect the Future')}
+          {t(
+            'Power AI applications, manage digital assets, connect the Future'
+          )}
        </p>
        <div
          className='landing-animate-fade-up mt-8 flex items-center gap-3 opacity-0'
--- a/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx
+++ b/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx
@ -168,7 +168,9 @@ export function ApiKeysMutateDrawer({
        }
      })
    } else if (open && !isUpdate) {
-      form.reset(getApiKeyFormDefaultValues(defaultUseAutoGroup && backendHasAuto))
+      form.reset(
+        getApiKeyFormDefaultValues(defaultUseAutoGroup && backendHasAuto)
+      )
    }
  }, [open, isUpdate, currentRow, form, defaultUseAutoGroup, backendHasAuto])

@ -177,7 +179,10 @@ export function ApiKeysMutateDrawer({
    if (groups.length === 0) return
    const currentGroup = form.getValues('group')
    if (currentGroup && !groups.some((g) => g.value === currentGroup)) {
-      const fallback = groups.find((g) => g.value === 'default')?.value ?? groups[0]?.value ?? ''
+      const fallback =
+        groups.find((g) => g.value === 'default')?.value ??
+        groups[0]?.value ??
+        ''
      form.setValue('group', fallback)
      if (currentGroup === 'auto') {
        form.setValue('cross_group_retry', false)
--- a/web/default/src/features/keys/lib/api-key-form.ts
+++ b/web/default/src/features/keys/lib/api-key-form.ts
@ -57,9 +57,7 @@ export function getApiKeyFormSchema(t: TFunction) {
    })
 }

-export type ApiKeyFormValues = z.infer<
-  ReturnType<typeof getApiKeyFormSchema>
->
+export type ApiKeyFormValues = z.infer<ReturnType<typeof getApiKeyFormSchema>>

 // ============================================================================
 // Form Defaults
--- a/web/default/src/features/models/index.tsx
+++ b/web/default/src/features/models/index.tsx
@ -142,7 +142,7 @@ function ModelsContent() {
        <SectionPageLayout.Content>
          <div className='space-y-4'>
            <Tabs value={activeSection} onValueChange={handleSectionChange}>
-              <TabsList className='group-data-horizontal/tabs:h-auto max-w-full flex-wrap justify-start'>
+              <TabsList className='max-w-full flex-wrap justify-start group-data-horizontal/tabs:h-auto'>
                {MODELS_SECTION_IDS.map((section) => (
                  <TabsTrigger key={section} value={section}>
                    {t(SECTION_META[section].titleKey)}
--- a/web/default/src/features/profile/components/profile-settings-card.tsx
+++ b/web/default/src/features/profile/components/profile-settings-card.tsx
@ -69,7 +69,7 @@ export function ProfileSettingsCard({
      icon={<Settings className='h-4 w-4' />}
    >
      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className='grid group-data-horizontal/tabs:h-10 w-full grid-cols-2 items-stretch gap-1 rounded-xl p-1'>
+        <TabsList className='grid w-full grid-cols-2 items-stretch gap-1 rounded-xl p-1 group-data-horizontal/tabs:h-10'>
          <TabsTrigger
            value='bindings'
            className='h-full gap-2 rounded-lg px-3 py-0 leading-none'
--- a/web/default/src/features/subscriptions/components/subscriptions-mutate-drawer.tsx
+++ b/web/default/src/features/subscriptions/components/subscriptions-mutate-drawer.tsx
@ -673,9 +673,7 @@ export function SubscriptionsMutateDrawer({
                          disabled={items.length === 0}
                        >
                          <SelectTrigger className='w-full flex-1'>
-                            <SelectValue
-                              placeholder={t('Select a product')}
-                            />
+                            <SelectValue placeholder={t('Select a product')} />
                          </SelectTrigger>
                          <SelectContent>
                            {items.map((item) => (
@ -689,7 +687,9 @@ export function SubscriptionsMutateDrawer({
                          type='button'
                          variant='outline'
                          onClick={handleCreatePancakeProduct}
-                          disabled={creatingPancakeProduct || !pancakeCreateReady}
+                          disabled={
+                            creatingPancakeProduct || !pancakeCreateReady
+                          }
                          className='shrink-0'
                        >
                          {creatingPancakeProduct
--- a/web/default/src/features/system-settings/integrations/waffo-pancake-settings-section.tsx
+++ b/web/default/src/features/system-settings/integrations/waffo-pancake-settings-section.tsx
@ -75,9 +75,7 @@ const DEFAULT_NEW_PAIR_NAME = `${DEFAULT_NEW_STORE_NAME} + ${DEFAULT_NEW_PRODUCT
 export function WaffoPancakeSettingsSection(props: Props) {
  const { t } = useTranslation()

-  const [storeID, setStoreID] = React.useState(
-    props.provisionedStoreID ?? ''
-  )
+  const [storeID, setStoreID] = React.useState(props.provisionedStoreID ?? '')
  const [productID, setProductID] = React.useState(
    props.provisionedProductID ?? ''
  )
@ -283,9 +281,7 @@ export function WaffoPancakeSettingsSection(props: Props) {
  // returning admins (saved merchant ID but empty key field) would send
  // a mixed-state body that the backend rejects.
  const readCreds = () => {
-    const formMerchant = (
-      form.getValues('WaffoPancakeMerchantID') || ''
-    ).trim()
+    const formMerchant = (form.getValues('WaffoPancakeMerchantID') || '').trim()
    const formKey = (form.getValues('WaffoPancakePrivateKey') || '').trim()
    const saved = (props.defaultValues.WaffoPancakeMerchantID || '').trim()
    const edited = formMerchant !== saved || formKey.length > 0
@ -370,12 +366,8 @@ export function WaffoPancakeSettingsSection(props: Props) {
    // Sends raw form values (not readCreds): SaveWaffoPancakeConfig already
    // treats a blank PrivateKey as "keep existing", and MerchantID stays
    // populated from props for returning admins.
-    const merchantID = (
-      form.getValues('WaffoPancakeMerchantID') || ''
-    ).trim()
-    const privateKey = (
-      form.getValues('WaffoPancakePrivateKey') || ''
-    ).trim()
+    const merchantID = (form.getValues('WaffoPancakeMerchantID') || '').trim()
+    const privateKey = (form.getValues('WaffoPancakePrivateKey') || '').trim()
    if (!merchantID) {
      toast.error(t('Merchant ID is required'))
      return
--- a/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
@ -441,9 +441,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                    {sensitiveVisible ? log.username : '••••'}
                  </TooltipTrigger>
                  {sensitiveVisible && log.username.length > 12 && (
-                    <TooltipContent side='top'>
-                      {log.username}
-                    </TooltipContent>
+                    <TooltipContent side='top'>{log.username}</TooltipContent>
                  )}
                </Tooltip>
              </TooltipProvider>
@ -484,11 +482,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
        <div className='flex max-w-[200px] flex-col gap-0.5'>
          <TooltipProvider delay={300}>
            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <div className='max-w-full' />
-                }
-              >
+              <TooltipTrigger render={<div className='max-w-full' />}>
                <StatusBadge
                  label={displayName}
                  icon={KeyRound}
--- a/web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx
+++ b/web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx
@ -297,9 +297,7 @@ export function CommonLogsFilterBar<TData>(
          <Input
            placeholder={t('Upstream Request ID')}
            value={filters.upstreamRequestId || ''}
-            onChange={(e) =>
-              handleChange('upstreamRequestId', e.target.value)
-            }
+            onChange={(e) => handleChange('upstreamRequestId', e.target.value)}
            onKeyDown={handleKeyDown}
            className={inputClass}
          />
--- a/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx
+++ b/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx
@ -986,35 +986,33 @@ export function DetailsDialog(props: DetailsDialogProps) {
            )}

            {/* Param override */}
-            {other?.po &&
-              Array.isArray(other.po) &&
-              other.po.length > 0 && (
-                <DetailSection
-                  icon={<Settings2 className='size-3.5' aria-hidden='true' />}
-                  label={`${t('Param Override')} (${other.po.length})`}
-                >
-                  {other.po.filter(Boolean).map((line, idx) => {
-                    const parsed = parseAuditLine(line)
-                    if (!parsed) return null
-                    return (
-                      <div
-                        key={idx}
-                        className='bg-background/60 flex min-w-0 flex-col gap-1.5 rounded border p-2 sm:flex-row sm:items-start sm:gap-2'
-                      >
-                        <StatusBadge
-                          variant='neutral'
-                          label={getParamOverrideActionLabel(parsed.action, t)}
-                          className='shrink-0 font-medium'
-                          copyable={false}
-                        />
-                        <span className='min-w-0 font-mono text-[11px] leading-relaxed break-all sm:break-words'>
-                          {parsed.content}
-                        </span>
-                      </div>
-                    )
-                  })}
-                </DetailSection>
-              )}
+            {other?.po && Array.isArray(other.po) && other.po.length > 0 && (
+              <DetailSection
+                icon={<Settings2 className='size-3.5' aria-hidden='true' />}
+                label={`${t('Param Override')} (${other.po.length})`}
+              >
+                {other.po.filter(Boolean).map((line, idx) => {
+                  const parsed = parseAuditLine(line)
+                  if (!parsed) return null
+                  return (
+                    <div
+                      key={idx}
+                      className='bg-background/60 flex min-w-0 flex-col gap-1.5 rounded border p-2 sm:flex-row sm:items-start sm:gap-2'
+                    >
+                      <StatusBadge
+                        variant='neutral'
+                        label={getParamOverrideActionLabel(parsed.action, t)}
+                        className='shrink-0 font-medium'
+                        copyable={false}
+                      />
+                      <span className='min-w-0 font-mono text-[11px] leading-relaxed break-all sm:break-words'>
+                        {parsed.content}
+                      </span>
+                    </div>
+                  )
+                })}
+              </DetailSection>
+            )}

            {/* Content */}
            {details && (
--- a/web/default/src/features/usage-logs/index.tsx
+++ b/web/default/src/features/usage-logs/index.tsx
@ -127,7 +127,7 @@ function UsageLogsContent() {
          <div className='space-y-4'>
            {showTaskSwitcher && (
              <Tabs value={activeCategory} onValueChange={handleSectionChange}>
-                <TabsList className='group-data-horizontal/tabs:h-auto max-w-full flex-wrap justify-start'>
+                <TabsList className='max-w-full flex-wrap justify-start group-data-horizontal/tabs:h-auto'>
                  {visibleSections.map((section) => (
                    <TabsTrigger key={section} value={section}>
                      {t(SECTION_META[section].titleKey)}
--- a/web/default/src/features/wallet/lib/ui.tsx
+++ b/web/default/src/features/wallet/lib/ui.tsx
@ -17,9 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { type ReactNode } from 'react'
+import i18next from 'i18next'
 import { CreditCard, Landmark } from 'lucide-react'
 import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si'
-import i18next from 'i18next'
 import { PAYMENT_TYPES, PAYMENT_ICON_COLORS } from '../constants'

 // ============================================================================
--- a/web/default/src/hooks/use-sidebar-data.ts
+++ b/web/default/src/hooks/use-sidebar-data.ts
@ -17,39 +17,35 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import {
-  LayoutDashboard,
  Activity,
-  Key,
-  FileText,
-  Wallet,
  Box,
-  Users,
+  CreditCard,
+  FileText,
+  FlaskConical,
+  Key,
+  LayoutDashboard,
+  ListTodo,
+  MessageSquare,
+  Radio,
+  Settings,
  Ticket,
  User,
-  Command,
-  Radio,
-  FlaskConical,
-  MessageSquare,
-  CreditCard,
-  ListTodo,
-  Settings,
+  Users,
+  Wallet,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { WORKSPACE_IDS } from '@/components/layout/lib/workspace-registry'
 import { type SidebarData } from '@/components/layout/types'

+/**
+ * Root navigation groups for the application sidebar.
+ *
+ * These are shown when the URL does not match any nested sidebar view
+ * registered in `layout/lib/sidebar-view-registry.ts`.
+ */
 export function useSidebarData(): SidebarData {
  const { t } = useTranslation()

  return {
-    workspaces: [
-      {
-        id: WORKSPACE_IDS.DEFAULT,
-        name: '', // Dynamically fetches system name
-        logo: Command,
-        plan: '', // Dynamically fetches system version
-      },
-    ],
    navGroups: [
      {
        id: 'chat',
--- a/web/default/src/hooks/use-sidebar-view.ts
+++ b/web/default/src/hooks/use-sidebar-view.ts
@ -0,0 +1,74 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { useMemo } from 'react'
+import { useLocation } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { useAuthStore } from '@/stores/auth-store'
+import { ROLE } from '@/lib/roles'
+import { resolveSidebarView } from '@/components/layout/lib/sidebar-view-registry'
+import type { NavGroup, ResolvedSidebarView } from '@/components/layout/types'
+import { useSidebarConfig } from './use-sidebar-config'
+import { useSidebarData } from './use-sidebar-data'
+
+/** Sentinel key used for the root navigation in animation `key=` props */
+const ROOT_VIEW_KEY = '__root'
+
+/**
+ * Resolve the active sidebar view for the current location.
+ *
+ * - Returns the matching nested {@link SidebarView} (with its nav
+ *   groups) when the URL belongs to a registered drill-in workspace.
+ * - Otherwise returns the root navigation, narrowed by:
+ *     · admin-only group visibility (role-based);
+ *     · `useSidebarConfig` (admin × user `sidebar_modules` overlay).
+ *
+ * Nested views are intentionally NOT passed through `useSidebarConfig`
+ * — those filters target known dashboard URLs only, and gating is
+ * already enforced at the route level (`beforeLoad` redirects).
+ */
+export function useSidebarView(): ResolvedSidebarView {
+  const { t } = useTranslation()
+  const pathname = useLocation({ select: (l) => l.pathname })
+  const userRole = useAuthStore((s) => s.auth.user?.role)
+  const rootSidebarData = useSidebarData()
+  const configFilteredRoot = useSidebarConfig(rootSidebarData.navGroups)
+
+  const rootNavGroups = useMemo<NavGroup[]>(() => {
+    const isAdmin = userRole !== undefined && userRole >= ROLE.ADMIN
+    return configFilteredRoot.filter((group) =>
+      group.id === 'admin' ? isAdmin : true
+    )
+  }, [configFilteredRoot, userRole])
+
+  const view = resolveSidebarView(pathname)
+
+  if (view) {
+    return {
+      key: view.id,
+      view,
+      navGroups: view.getNavGroups(t),
+    }
+  }
+
+  return {
+    key: ROOT_VIEW_KEY,
+    view: null,
+    navGroups: rootNavGroups,
+  }
+}
--- a/web/default/src/hooks/use-top-nav-links.ts
+++ b/web/default/src/hooks/use-top-nav-links.ts
@ -19,8 +19,8 @@ For commercial licensing, please contact support@quantumnous.com
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAuthStore } from '@/stores/auth-store'
-import { useStatus } from '@/hooks/use-status'
 import { parseHeaderNavModulesFromStatus } from '@/lib/nav-modules'
+import { useStatus } from '@/hooks/use-status'

 export type TopNavLink = {
  title: string
--- a/web/default/src/i18n/locales/en.json
+++ b/web/default/src/i18n/locales/en.json
@ -469,6 +469,7 @@
    "Azure": "Azure",
    "AZURE_OPENAI_ENDPOINT *": "AZURE_OPENAI_ENDPOINT *",
    "Back": "Back",
+    "Back to Dashboard": "Back to Dashboard",
    "Back to Home": "Back to Home",
    "Back to login": "Back to login",
    "Back to Models": "Back to Models",
@ -2241,7 +2242,6 @@
    "Make it easier for teammates to pick the right group.": "Make it easier for teammates to pick the right group.",
    "Manage": "Manage",
    "Manage account bindings for this user": "Manage account bindings for this user",
-    "Manage and configure": "Manage and configure",
    "Manage API channels and provider configurations": "Manage API channels and provider configurations",
    "Manage Bindings": "Manage Bindings",
    "Manage catalog visibility and pricing.": "Manage catalog visibility and pricing.",
--- a/web/default/src/i18n/locales/fr.json
+++ b/web/default/src/i18n/locales/fr.json
@ -469,6 +469,7 @@
    "Azure": "Azure",
    "AZURE_OPENAI_ENDPOINT *": "AZURE_OPENAI_ENDPOINT *",
    "Back": "Retour",
+    "Back to Dashboard": "Retour au tableau de bord",
    "Back to Home": "Retour à l'accueil",
    "Back to login": "Retour à la connexion",
    "Back to Models": "Retour aux modèles",
@ -2232,7 +2233,6 @@
    "Make it easier for teammates to pick the right group.": "Faciliter le choix du bon groupe pour les coéquipiers.",
    "Manage": "Gestion",
    "Manage account bindings for this user": "Gérer les liaisons de compte pour cet utilisateur",
-    "Manage and configure": "Gérer et configurer",
    "Manage API channels and provider configurations": "Gérer les canaux d'API et les configurations des fournisseurs",
    "Manage Bindings": "Gérer les liaisons",
    "Manage catalog visibility and pricing.": "Gérer la visibilité du catalogue et les prix.",
--- a/web/default/src/i18n/locales/ja.json
+++ b/web/default/src/i18n/locales/ja.json
@ -469,6 +469,7 @@
    "Azure": "Azure",
    "AZURE_OPENAI_ENDPOINT *": "AZURE_OPENAI_ENDPOINT *",
    "Back": "戻る",
+    "Back to Dashboard": "ダッシュボードに戻る",
    "Back to Home": "ホームに戻る",
    "Back to login": "ログインに戻る",
    "Back to Models": "モデルに戻る",
@ -2232,7 +2233,6 @@
    "Make it easier for teammates to pick the right group.": "チームメイトが適切なグループを選択しやすくする。",
    "Manage": "管理",
    "Manage account bindings for this user": "このユーザーのアカウントバインドを管理",
-    "Manage and configure": "管理と設定",
    "Manage API channels and provider configurations": "APIチャネルとプロバイダー構成を管理する",
    "Manage Bindings": "バインド管理",
    "Manage catalog visibility and pricing.": "カタログの表示と価格設定を管理。",
--- a/web/default/src/i18n/locales/ru.json
+++ b/web/default/src/i18n/locales/ru.json
@ -469,6 +469,7 @@
    "Azure": "Azure",
    "AZURE_OPENAI_ENDPOINT *": "AZURE_OPENAI_ENDPOINT *",
    "Back": "Назад",
+    "Back to Dashboard": "Вернуться к панели управления",
    "Back to Home": "Вернуться на главную",
    "Back to login": "Вернуться к входу",
    "Back to Models": "Вернуться к моделям",
@ -2232,7 +2233,6 @@
    "Make it easier for teammates to pick the right group.": "Упростите выбор правильной группы для товарищей по команде.",
    "Manage": "Управление",
    "Manage account bindings for this user": "Управление привязками аккаунта пользователя",
-    "Manage and configure": "Управление и настройка",
    "Manage API channels and provider configurations": "Управление каналами API и конфигурациями провайдеров",
    "Manage Bindings": "Управление привязками",
    "Manage catalog visibility and pricing.": "Управление видимостью каталога и ценообразованием.",
--- a/web/default/src/i18n/locales/vi.json
+++ b/web/default/src/i18n/locales/vi.json
@ -469,6 +469,7 @@
    "Azure": "Azure",
    "AZURE_OPENAI_ENDPOINT *": "AZURE_OPENAI_ENDPOINT *",
    "Back": "Quay lại",
+    "Back to Dashboard": "Quay lại Bảng điều khiển",
    "Back to Home": "Trở về Trang chủ",
    "Back to login": "Quay lại đăng nhập",
    "Back to Models": "Quay lại Mô hình",
@ -2232,7 +2233,6 @@
    "Make it easier for teammates to pick the right group.": "Giúp đồng đội dễ dàng chọn đúng nhóm hơn.",
    "Manage": "Quản lý",
    "Manage account bindings for this user": "Quản lý liên kết tài khoản cho người dùng này",
-    "Manage and configure": "Quản lý và cấu hình",
    "Manage API channels and provider configurations": "Quản lý các kênh API và cấu hình nhà cung cấp",
    "Manage Bindings": "Quản lý liên kết",
    "Manage catalog visibility and pricing.": "Quản lý hiển thị danh mục và giá cả.",
--- a/web/default/src/i18n/locales/zh.json
+++ b/web/default/src/i18n/locales/zh.json
@ -469,6 +469,7 @@
    "Azure": "Azure",
    "AZURE_OPENAI_ENDPOINT *": "AZURE_OPENAI_ENDPOINT *",
    "Back": "返回",
+    "Back to Dashboard": "返回控制台",
    "Back to Home": "返回主页",
    "Back to login": "返回登录",
    "Back to Models": "返回模型",
@ -2241,7 +2242,6 @@
    "Make it easier for teammates to pick the right group.": "让队友更容易选择正确的分组。",
    "Manage": "管理",
    "Manage account bindings for this user": "管理此用户的账户绑定",
-    "Manage and configure": "管理和配置",
    "Manage API channels and provider configurations": "管理 API 渠道和提供商配置",
    "Manage Bindings": "管理绑定",
    "Manage catalog visibility and pricing.": "管理目录可见性和定价。",
--- a/web/default/src/i18n/static-keys.ts
+++ b/web/default/src/i18n/static-keys.ts
@ -27,9 +27,9 @@ export const STATIC_I18N_KEYS = [
  'Docs',
  'About',

-  // Workspace
+  // Sidebar views (drill-in workspaces)
  'System Settings',
-  'Manage and configure',
+  'Back to Dashboard',

  // System settings sidebar
  'System Administration',
--- a/web/default/src/routes/__root.tsx
+++ b/web/default/src/routes/__root.tsx
@ -29,10 +29,10 @@ import { ThemeCustomizationProvider } from '@/context/theme-customization-provid
 import { useSystemConfig } from '@/hooks/use-system-config'
 import { Toaster } from '@/components/ui/sonner'
 import { NavigationProgress } from '@/components/navigation-progress'
+import { saveAffiliateCode } from '@/features/auth/lib/storage'
 import { GeneralError } from '@/features/errors/general-error'
 import { NotFoundError } from '@/features/errors/not-found-error'
 import { getSetupStatus } from '@/features/setup/api'
-import { saveAffiliateCode } from '@/features/auth/lib/storage'

 function RootComponent() {
  // Load system configuration (logo, system name, etc.) from backend
--- a/web/default/src/routes/_authenticated/playground/index.tsx
+++ b/web/default/src/routes/_authenticated/playground/index.tsx
@ -17,9 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { createFileRoute, redirect } from '@tanstack/react-router'
+import { isSidebarModuleEnabled } from '@/lib/nav-modules'
 import { Main } from '@/components/layout'
 import { Playground } from '@/features/playground'
-import { isSidebarModuleEnabled } from '@/lib/nav-modules'

 export const Route = createFileRoute('/_authenticated/playground/')({
  beforeLoad: () => {