// src/components/shell/AppShell.tsx import type { ReactNode } from "react"; import Sidebar, { type NavItem, type RecentItem } from "./Sidebar"; export interface AppShellProps { nav: NavItem[]; recents?: RecentItem[]; /** TopBar + page content. */ children: ReactNode; } /** Two-column workspace frame: sticky sidebar rail + scrolling canvas. * Pages render a TopBar followed by .shell-main content. */ export default function AppShell({ nav, recents, children }: AppShellProps) { return (

{children}

); } // src/components/shell/TopBar.tsx import type { ReactNode } from "react"; import { Badge } from "@/components/ui/Badge"; import UserMenu from "./UserMenu"; export interface TopBarProps { title: ReactNode; /** Environment name; anything but "Production" renders the caution badge. */ environment?: string; /** Right-side contextual actions (buttons, theme toggle, etc.). */ actions?: ReactNode; user?: { name: string; role: string }; } /** Sticky header over the canvas: page title, environment badge, actions, identity. */ export default function TopBar({ title, environment, actions, user }: TopBarProps) { return (

{title} {environment && environment !== "Production" && ( {environment} )}

{actions} {user &&

); } // src/components/shell/Sidebar.tsx "use client"; import Link from "next/link"; import { usePathname } from "next/navigation"; import type { LucideIcon } from "lucide-react"; import { Clock } from "lucide-react"; import { cx } from "@/lib/cx"; import Kbd from "@/components/ui/Kbd"; import { useWorkspaceMaybe } from "@/lib/store"; import AtomMark from "@/components/AtomMark"; export interface NavItem { href: string; label: string; icon: LucideIcon; /** Keyboard shortcut hint, e.g. "⌘C". Revealed on hover/focus. */ shortcut?: string; } export interface RecentItem { href: string; label: string; } export interface SidebarProps { items: NavItem[]; recents?: RecentItem[]; } /** The workspace rail: ink-plate active item, kbd hints on hover, recents below. */ export default function Sidebar({ items, recents }: SidebarProps) { const pathname = usePathname(); const workspace = useWorkspaceMaybe(); const liveRecents = workspace && workspace.state.recents.length > 0 ? workspace.state.recents : recents; return ( ); }