e0ca034daf
Update color tokens, motion, spacing, typography. Enhance ThemeProvider and ThemeSwitcher. Refine layout components (Header, Sidebar, Navbar, MobileBottomNav, DashboardLayout). CSS overhaul in index.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
79 lines
No EOL
2.8 KiB
TypeScript
79 lines
No EOL
2.8 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { Header } from './Header';
|
|
import { Sidebar } from './Sidebar';
|
|
import { MobileBottomNav } from './MobileBottomNav';
|
|
import { AnnouncementBanner } from '../feedback/AnnouncementBanner';
|
|
import { GlobalPlayer } from '@/features/player/components/GlobalPlayer';
|
|
import { useQueueSync } from '@/features/player/hooks/useQueueSync';
|
|
import { useUIStore } from '@/stores/ui';
|
|
import { cn } from '@/lib/utils';
|
|
import { AstralBackground } from '../ui/AstralBackground';
|
|
|
|
interface DashboardLayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Layout principal "App Shell" - Veza Professional V2
|
|
*
|
|
* Architecture:
|
|
* - Body: Fixed viewport (overflow-hidden)
|
|
* - Sidebar: Fixed left, z-index high (desktop only)
|
|
* - MobileBottomNav: Fixed bottom (mobile only, lg:hidden)
|
|
* - Main: Scrollable container independent of window
|
|
* - Header: Sticky top within Main
|
|
* - Player: Fixed above bottom nav (mobile) / above content (desktop)
|
|
*
|
|
* Z-index hierarchy (bottom to top):
|
|
* z-raised (10) — main content
|
|
* z-40 — MobileBottomNav
|
|
* z-player — GlobalPlayer (z-sticky = 200)
|
|
* z-sidebar — Sidebar (95)
|
|
* z-sticky — Header (200)
|
|
*/
|
|
export function DashboardLayout({ children }: DashboardLayoutProps) {
|
|
const { sidebarOpen } = useUIStore();
|
|
useQueueSync();
|
|
|
|
return (
|
|
<div className="flex h-screen w-full overflow-hidden relative bg-background">
|
|
{/* 1. Global Background (Fixed z-0) */}
|
|
<AstralBackground />
|
|
|
|
{/* 2. Fixed Sidebar — desktop only (z-90) */}
|
|
<Sidebar />
|
|
|
|
{/* 3. Main Content Area (The only thing that scrolls) */}
|
|
<div
|
|
className={cn(
|
|
'flex-1 flex flex-col h-full min-w-0 relative z-[var(--sumi-z-raised)] transition-all duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-in-out)]',
|
|
sidebarOpen ? 'lg:ml-main-expanded' : 'lg:ml-main-collapsed',
|
|
'max-lg:ml-0'
|
|
)}
|
|
>
|
|
{/* Header is part of the flow but stays at top */}
|
|
<Header />
|
|
|
|
{/* Scrollable Content Container — bottom padding accounts for player + mobile nav */}
|
|
<main
|
|
id="main-content"
|
|
className="flex-1 overflow-y-auto overflow-x-hidden pt-main pb-main px-4 md:px-8 custom-scrollbar"
|
|
data-scroll-container="main"
|
|
>
|
|
<div className="max-w-layout-content mx-auto w-full">
|
|
<AnnouncementBanner />
|
|
{children}
|
|
</div>
|
|
</main>
|
|
|
|
{/* Floating Player — sits above MobileBottomNav on mobile */}
|
|
<div className="absolute bottom-0 left-0 right-0 z-player w-full min-w-0" aria-label="Player bar container">
|
|
<GlobalPlayer />
|
|
</div>
|
|
</div>
|
|
|
|
{/* 4. Mobile Bottom Navigation — fixed, below player, above content */}
|
|
<MobileBottomNav />
|
|
</div>
|
|
);
|
|
} |