t0ng7u
92a0959448
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.
104 lines
3.7 KiB
TypeScript
Vendored
104 lines
3.7 KiB
TypeScript
Vendored
/*
|
|
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 { useState } from 'react'
|
|
import { Link2, Settings } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
|
import { TitledCard } from '@/components/ui/titled-card'
|
|
import type { UserProfile } from '../types'
|
|
import { AccountBindingsTab } from './tabs/account-bindings-tab'
|
|
import { NotificationTab } from './tabs/notification-tab'
|
|
|
|
// ============================================================================
|
|
// Profile Settings Card Component
|
|
// ============================================================================
|
|
|
|
interface ProfileSettingsCardProps {
|
|
profile: UserProfile | null
|
|
loading: boolean
|
|
onProfileUpdate: () => void
|
|
}
|
|
|
|
export function ProfileSettingsCard({
|
|
profile,
|
|
loading,
|
|
onProfileUpdate,
|
|
}: ProfileSettingsCardProps) {
|
|
const { t } = useTranslation()
|
|
const [activeTab, setActiveTab] = useState('bindings')
|
|
|
|
if (loading) {
|
|
return (
|
|
<Card className='gap-0 overflow-hidden py-0'>
|
|
<CardHeader className='border-b p-3 !pb-3 sm:p-5 sm:!pb-5'>
|
|
<Skeleton className='h-6 w-32' />
|
|
<Skeleton className='mt-2 h-4 w-48' />
|
|
</CardHeader>
|
|
<CardContent className='space-y-4 p-3 sm:p-5'>
|
|
<Skeleton className='h-10 w-full' />
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
|
<Skeleton key={i} className='h-20 w-full' />
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<TitledCard
|
|
title={t('Settings')}
|
|
description={t('Configure your account preferences and integrations')}
|
|
icon={<Settings className='h-4 w-4' />}
|
|
>
|
|
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
|
<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'
|
|
>
|
|
<Link2 className='h-4 w-4' />
|
|
<span className='hidden sm:inline'>{t('Account Bindings')}</span>
|
|
<span className='sm:hidden'>{t('Bindings')}</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value='settings'
|
|
className='h-full gap-2 rounded-lg px-3 py-0 leading-none'
|
|
>
|
|
<Settings className='h-4 w-4' />
|
|
<span className='hidden sm:inline'>
|
|
{t('Settings & Preferences')}
|
|
</span>
|
|
<span className='sm:hidden'>{t('Settings')}</span>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value='bindings' className='mt-4 sm:mt-6'>
|
|
<AccountBindingsTab profile={profile} onUpdate={onProfileUpdate} />
|
|
</TabsContent>
|
|
|
|
<TabsContent value='settings' className='mt-4 sm:mt-6'>
|
|
<NotificationTab profile={profile} onUpdate={onProfileUpdate} />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</TitledCard>
|
|
)
|
|
}
|