@trackany-device/components 1.0.0

package/src/layouts/app/SplitSidebarLayout.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps } from './layout-types';
+import type { NavItem } from '../../types/navigation';
+import { Toolbar } from './partials/Toolbar';
+import { Footer } from './partials/Footer';
+import { HeaderTopbar } from './partials/HeaderTopbar';
+import { AccordionMenu, AccordionMenuGroup, AccordionMenuItem, AccordionMenuSub, AccordionMenuSubContent, AccordionMenuSubTrigger } from '../../components/ui/accordion-menu';
+import { ScrollArea } from '../../components/ui/scroll-area';
+
+/**
+ * SplitSidebarLayout (demo4)
+ * No horizontal navbar. Left sidebar split into:
+ *   - primary panel: icon/section switcher
+ *   - secondary panel: full nav items for the active section
+ */
+interface SplitSidebarLayoutProps extends BaseAppLayoutProps {
+    primaryItems?: NavItem[];
+    secondaryItems?: NavItem[];
+    activePrimary?: string;
+    onPrimaryChange?: (value: string) => void;
+    showToolbar?: boolean;
+}
+
+export function SplitSidebarLayout({
+    children, navItems = [], primaryItems = [], secondaryItems = [],
+    currentUrl = '', logo, logoHref = '/', appName, user,
+    title, breadcrumbs = [], toolbarActions, activePrimary,
+    onLogout, settingsUrl, logoutUrl, unreadCount = 0,
+    footerLinks = [], copyright, showToolbar = true,
+}: SplitSidebarLayoutProps) {
+    const sideItems = secondaryItems.length > 0 ? secondaryItems : navItems;
+
+    return (
+        <div className="flex min-h-screen">
+            {/* Primary sidebar (icon strip) */}
+            {primaryItems.length > 0 && (
+                <aside className="w-16 shrink-0 border-e border-sidebar-border bg-sidebar flex flex-col items-center py-3 gap-1">
+                    {logo && <a href={logoHref} className="mb-3">{logo}</a>}
+                    {primaryItems.map((item, i) => (
+                        <button
+                            key={i}
+                            onClick={() => {}}
+                            className={cn('w-10 h-10 flex items-center justify-center rounded-lg text-sidebar-foreground hover:bg-sidebar-accent transition-colors text-xs', activePrimary === item.title && 'bg-sidebar-accent')}
+                            title={item.title}
+                        >
+                            {item.title.slice(0, 2)}
+                        </button>
+                    ))}
+                </aside>
+            )}
+
+            {/* Secondary sidebar (full nav) */}
+            <aside className="w-56 shrink-0 border-e border-sidebar-border bg-sidebar flex flex-col">
+                {!primaryItems.length && logo && (
+                    <div className="flex items-center gap-2 px-4 h-[70px] border-b border-sidebar-border shrink-0">
+                        <a href={logoHref}>{logo}</a>
+                        {appName && <span className="text-sm font-semibold">{appName}</span>}
+                    </div>
+                )}
+                <ScrollArea className="flex-1 py-3 px-2">
+                    <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
+                        <AccordionMenuGroup>
+                            {sideItems.map((item, i) => (
+                                item.items ? (
+                                    <AccordionMenuSub key={i} value={item.title}>
+                                        <AccordionMenuSubTrigger>{item.title}</AccordionMenuSubTrigger>
+                                        <AccordionMenuSubContent type="single" collapsible parentValue={item.title}>
+                                            {item.items.map((c, ci) => <AccordionMenuItem key={ci} value={c.href ?? c.title} asChild><a href={c.href}>{c.title}</a></AccordionMenuItem>)}
+                                        </AccordionMenuSubContent>
+                                    </AccordionMenuSub>
+                                ) : (
+                                    <AccordionMenuItem key={i} value={item.href ?? item.title} asChild><a href={item.href}>{item.title}</a></AccordionMenuItem>
+                                )
+                            ))}
+                        </AccordionMenuGroup>
+                    </AccordionMenu>
+                </ScrollArea>
+            </aside>
+
+            {/* Main area */}
+            <div className="flex flex-col flex-1 min-w-0">
+                <header className="flex items-center h-[70px] border-b border-border bg-background px-4 shrink-0">
+                    <div className="flex-1" />
+                    <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                </header>
+                <main className="flex-1" role="content">
+                    {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
+                        <Toolbar title={title} breadcrumbs={breadcrumbs} actions={toolbarActions} currentUrl={currentUrl} />
+                    )}
+                    {children}
+                </main>
+                <Footer links={footerLinks} copyright={copyright} />
+            </div>
+        </div>
+    );
+}

package/src/layouts/app/TopNavLayout.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useState, type ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps } from './layout-types';
+import { Navbar } from './partials/Navbar';
+import { Toolbar } from './partials/Toolbar';
+import { Footer } from './partials/Footer';
+import { HeaderTopbar } from './partials/HeaderTopbar';
+
+interface TopNavLayoutProps extends BaseAppLayoutProps {
+    headerRightSlot?: ReactNode;
+    navRightSlot?: ReactNode;
+    showToolbar?: boolean;
+}
+
+export function TopNavLayout({
+    children,
+    navItems = [],
+    currentUrl = '',
+    logo,
+    logoHref = '/',
+    appName,
+    user,
+    title,
+    breadcrumbs = [],
+    toolbarActions,
+    stickyHeader = true,
+    stickyOffset = 100,
+    onLogout,
+    settingsUrl,
+    logoutUrl,
+    unreadCount = 0,
+    footerLinks = [],
+    copyright,
+    headerRightSlot,
+    navRightSlot,
+    showToolbar = true,
+}: TopNavLayoutProps) {
+    const [isSticky, setIsSticky] = useState(false);
+
+    useEffect(() => {
+        if (!stickyHeader) return;
+        const handleScroll = () => setIsSticky(window.scrollY > stickyOffset);
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [stickyHeader, stickyOffset]);
+
+    const headerHeight = isSticky ? '60px' : '100px';
+
+    return (
+        <div
+            className="flex grow flex-col min-h-screen"
+            style={{ '--header-height': headerHeight } as React.CSSProperties}
+        >
+            {/* Header */}
+            <header
+                className={cn(
+                    'flex items-center shrink-0 transition-[height] border-b border-border',
+                    'h-(--header-height)',
+                    stickyHeader && isSticky && 'fixed z-10 top-0 inset-x-0 shadow-xs backdrop-blur-md bg-background/80',
+                )}
+                style={{ height: headerHeight }}
+            >
+                <div className="container mx-auto px-4 flex justify-between items-center gap-4">
+                    {/* Logo */}
+                    <div className="flex items-center gap-3 shrink-0">
+                        {logo && <a href={logoHref} className="shrink-0">{logo}</a>}
+                        {appName && <span className="text-sm font-medium text-foreground hidden md:inline">{appName}</span>}
+                    </div>
+                    {/* Right topbar */}
+                    <HeaderTopbar
+                        user={user}
+                        unreadCount={unreadCount}
+                        settingsUrl={settingsUrl}
+                        logoutUrl={logoutUrl}
+                        onLogout={onLogout}
+                        extraSlot={headerRightSlot}
+                    />
+                </div>
+            </header>
+
+            {/* Spacer when header is sticky */}
+            {stickyHeader && isSticky && <div style={{ height: '100px' }} aria-hidden="true" />}
+
+            {/* Horizontal navbar */}
+            <Navbar navItems={navItems} currentUrl={currentUrl} rightSlot={navRightSlot} />
+
+            {/* Content */}
+            <main className="grow" role="content">
+                {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
+                    <Toolbar
+                        title={title}
+                        breadcrumbs={breadcrumbs}
+                        actions={toolbarActions}
+                        currentUrl={currentUrl}
+                    />
+                )}
+                {children}
+            </main>
+
+            <Footer links={footerLinks} copyright={copyright} />
+        </div>
+    );
+}

package/src/layouts/app/TopNavLinksLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// layout-2: top nav with external links in navbar (same structure as TopNavLayout)
+export { TopNavLayout as TopNavLinksLayout } from './TopNavLayout';

package/src/layouts/app/WorkspaceBreadcrumbLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Workspace variant — shares same structure as WorkspaceSidebarLayout
+export { WorkspaceSidebarLayout as WorkspaceBreadcrumbLayout } from './WorkspaceSidebarLayout';

package/src/layouts/app/WorkspaceCommunitiesLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Workspace variant — shares same structure as WorkspaceSidebarLayout
+export { WorkspaceSidebarLayout as WorkspaceCommunitiesLayout } from './WorkspaceSidebarLayout';

package/src/layouts/app/WorkspaceNavbarLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Navbar + sidebar variant
+export { NavbarSidebarLayout as WorkspaceNavbarLayout } from './NavbarSidebarLayout';

package/src/layouts/app/WorkspaceSidebarLayout.tsx

@@ -0,0 +1,98 @@
+'use client';
+// layout-14/20: workspace sidebar — primary nav + workspace switcher + secondary panel
+// Used for multi-workspace apps (similar to Notion, Linear, Slack)
+import { type ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import type { BaseAppLayoutProps } from './layout-types';
+import { Toolbar } from './partials/Toolbar';
+import { Footer } from './partials/Footer';
+import { HeaderTopbar } from './partials/HeaderTopbar';
+import { AccordionMenu, AccordionMenuGroup, AccordionMenuItem, AccordionMenuSub, AccordionMenuSubContent, AccordionMenuSubTrigger } from '../../components/ui/accordion-menu';
+import { ScrollArea } from '../../components/ui/scroll-area';
+
+interface WorkspaceSidebarLayoutProps extends BaseAppLayoutProps {
+    workspaces?: Array<{ id: string; name: string; icon?: string; href: string }>;
+    activeWorkspace?: string;
+    communities?: Array<{ name: string; href: string }>;
+    secondaryItems?: import('../../types/navigation').NavItem[];
+    sidebarFooter?: ReactNode;
+    showToolbar?: boolean;
+}
+
+export function WorkspaceSidebarLayout({
+    children, navItems = [], currentUrl = '',
+    logo, logoHref = '/', appName, user,
+    title, breadcrumbs = [], toolbarActions,
+    workspaces = [], activeWorkspace, communities = [],
+    secondaryItems = [], sidebarFooter,
+    onLogout, settingsUrl, logoutUrl, unreadCount = 0,
+    footerLinks = [], copyright, showToolbar = true,
+}: WorkspaceSidebarLayoutProps) {
+    const allNavItems = [...navItems, ...secondaryItems];
+    return (
+        <div className="flex min-h-screen">
+            {/* Workspace strip */}
+            {workspaces.length > 0 && (
+                <div className="w-[52px] flex flex-col items-center py-3 gap-1.5 border-e border-sidebar-border bg-sidebar shrink-0">
+                    {logo && <a href={logoHref} className="mb-2">{logo}</a>}
+                    {workspaces.map((ws, i) => (
+                        <a key={i} href={ws.href} className={cn('w-8 h-8 rounded-lg flex items-center justify-center text-xs font-bold transition-colors', activeWorkspace === ws.id ? 'bg-sidebar-primary text-sidebar-primary-foreground' : 'bg-sidebar-accent text-sidebar-foreground hover:bg-sidebar-accent/80')}>
+                            {ws.icon ?? ws.name.slice(0, 2)}
+                        </a>
+                    ))}
+                </div>
+            )}
+
+            {/* Main sidebar */}
+            <aside className="w-56 shrink-0 flex flex-col border-e border-sidebar-border bg-sidebar">
+                {!workspaces.length && logo && (
+                    <div className="flex items-center gap-2 px-4 h-[70px] border-b border-sidebar-border shrink-0">
+                        <a href={logoHref}>{logo}</a>
+                        {appName && <span className="text-sm font-semibold">{appName}</span>}
+                    </div>
+                )}
+                <ScrollArea className="flex-1 py-2 px-2">
+                    <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
+                        <AccordionMenuGroup>
+                            {allNavItems.map((item, i) => (
+                                item.items ? (
+                                    <AccordionMenuSub key={i} value={item.title}>
+                                        <AccordionMenuSubTrigger>{item.title}</AccordionMenuSubTrigger>
+                                        <AccordionMenuSubContent type="single" collapsible parentValue={item.title}>
+                                            {item.items.map((c, ci) => <AccordionMenuItem key={ci} value={c.href ?? c.title} asChild><a href={c.href}>{c.title}</a></AccordionMenuItem>)}
+                                        </AccordionMenuSubContent>
+                                    </AccordionMenuSub>
+                                ) : (
+                                    <AccordionMenuItem key={i} value={item.href ?? item.title} asChild><a href={item.href}>{item.title}</a></AccordionMenuItem>
+                                )
+                            ))}
+                        </AccordionMenuGroup>
+                        {communities.length > 0 && (
+                            <AccordionMenuGroup>
+                                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">Communities</div>
+                                {communities.map((c, i) => (
+                                    <AccordionMenuItem key={i} value={c.href} asChild><a href={c.href}>{c.name}</a></AccordionMenuItem>
+                                ))}
+                            </AccordionMenuGroup>
+                        )}
+                    </AccordionMenu>
+                </ScrollArea>
+                {sidebarFooter && <div className="p-3 border-t border-sidebar-border">{sidebarFooter}</div>}
+            </aside>
+
+            <div className="flex flex-col flex-1 min-w-0">
+                <header className="flex items-center h-[70px] border-b border-border bg-background px-4 shrink-0">
+                    <div className="flex-1" />
+                    <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
+                </header>
+                <main className="flex-1" role="content">
+                    {showToolbar && (title || breadcrumbs.length > 0 || toolbarActions) && (
+                        <Toolbar title={title} breadcrumbs={breadcrumbs} actions={toolbarActions} currentUrl={currentUrl} />
+                    )}
+                    {children}
+                </main>
+                <Footer links={footerLinks} copyright={copyright} />
+            </div>
+        </div>
+    );
+}

package/src/layouts/app/WorkspaceSidebarTitleLayout.tsx

@@ -0,0 +1,3 @@
+'use client';
+// Workspace variant — shares same structure as WorkspaceSidebarLayout
+export { WorkspaceSidebarLayout as WorkspaceSidebarTitleLayout } from './WorkspaceSidebarLayout';

package/src/layouts/app/app-header-layout.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import { AppShell } from '../../components/app-shell';
+import { AppContent } from '../../components/app-content';
+import { AppHeader } from '../../components/app-header';
+import type { NavItem, BreadcrumbItem } from '../../types/navigation';
+import type { User } from '../../types/auth';
+
+export type AppHeaderLayoutProps = {
+    breadcrumbs?: BreadcrumbItem[];
+    children: ReactNode;
+    user?: User | null;
+    navItems?: NavItem[];
+    unreadCount?: number;
+    dashboardHref?: string;
+    settingsUrl?: string;
+    logoutUrl?: string;
+};
+
+export default function AppHeaderLayout({
+    breadcrumbs = [],
+    children,
+    user,
+    navItems = [],
+    unreadCount = 0,
+    dashboardHref = '/dashboard',
+    settingsUrl = '/settings/profile',
+    logoutUrl = '/logout',
+}: AppHeaderLayoutProps) {
+    return (
+        <AppShell variant="header">
+            <AppHeader
+                breadcrumbs={breadcrumbs}
+                user={user}
+                navItems={navItems}
+                unreadCount={unreadCount}
+                dashboardHref={dashboardHref}
+                settingsUrl={settingsUrl}
+                logoutUrl={logoutUrl}
+            />
+            <AppContent variant="header">
+                {children}
+            </AppContent>
+        </AppShell>
+    );
+}

package/src/layouts/app/app-sidebar-layout.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import { AppShell } from '../../components/app-shell';
+import { AppContent } from '../../components/app-content';
+import { AppSidebar } from '../../components/app-sidebar';
+import { AppSidebarHeader } from '../../components/app-sidebar-header';
+import type { NavItem, BreadcrumbItem } from '../../types/navigation';
+import type { User } from '../../types/auth';
+
+export type AppSidebarLayoutProps = {
+    breadcrumbs?: BreadcrumbItem[];
+    children: ReactNode;
+    user?: User | null;
+    navItems?: NavItem[];
+    tenant?: { display_name?: string | null; sub_brand?: string | null } | null;
+    unreadCount?: number;
+    dashboardHref?: string;
+    settingsUrl?: string;
+    logoutUrl?: string;
+    defaultOpen?: boolean;
+};
+
+export default function AppSidebarLayout({
+    breadcrumbs = [],
+    children,
+    user,
+    navItems,
+    tenant,
+    unreadCount = 0,
+    dashboardHref = '/dashboard',
+    settingsUrl = '/settings/profile',
+    logoutUrl = '/logout',
+    defaultOpen = true,
+}: AppSidebarLayoutProps) {
+    return (
+        <AppShell variant="sidebar" defaultOpen={defaultOpen}>
+            <AppSidebar
+                navItems={navItems}
+                user={user}
+                tenant={tenant}
+                dashboardHref={dashboardHref}
+                settingsUrl={settingsUrl}
+                logoutUrl={logoutUrl}
+            />
+            <AppContent variant="sidebar">
+                <AppSidebarHeader
+                    breadcrumbs={breadcrumbs}
+                    user={user}
+                    unreadCount={unreadCount}
+                    settingsUrl={settingsUrl}
+                    logoutUrl={logoutUrl}
+                />
+                {children}
+            </AppContent>
+        </AppShell>
+    );
+}

package/src/layouts/app/layout-context.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { createContext, useContext, useState, type ReactNode } from 'react';
+
+interface LayoutContextValue {
+    sidebarCollapsed: boolean;
+    setSidebarCollapsed: (collapsed: boolean) => void;
+    toggleSidebar: () => void;
+    stickyHeader: boolean;
+    setStickyHeader: (sticky: boolean) => void;
+}
+
+const LayoutContext = createContext<LayoutContextValue | null>(null);
+
+export function LayoutProvider({
+    children,
+    defaultSidebarCollapsed = false,
+    defaultStickyHeader = true,
+}: {
+    children: ReactNode;
+    defaultSidebarCollapsed?: boolean;
+    defaultStickyHeader?: boolean;
+}) {
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultSidebarCollapsed);
+    const [stickyHeader, setStickyHeader] = useState(defaultStickyHeader);
+
+    return (
+        <LayoutContext.Provider value={{
+            sidebarCollapsed,
+            setSidebarCollapsed,
+            toggleSidebar: () => setSidebarCollapsed((c) => !c),
+            stickyHeader,
+            setStickyHeader,
+        }}>
+            {children}
+        </LayoutContext.Provider>
+    );
+}
+
+export function useLayout() {
+    const ctx = useContext(LayoutContext);
+    if (!ctx) throw new Error('useLayout must be used within a LayoutProvider');
+    return ctx;
+}

package/src/layouts/app/layout-types.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import type { NavItem, BreadcrumbItem } from '../../types/navigation';
+
+export interface AppLayoutUser {
+    name: string;
+    email?: string;
+    avatar?: string;
+}
+
+export interface AppLayoutFooterLink {
+    label: string;
+    href: string;
+}
+
+export interface BaseAppLayoutProps {
+    children: ReactNode;
+
+    // Navigation
+    navItems?: NavItem[];
+    currentUrl?: string;
+
+    // Identity
+    logo?: ReactNode;
+    logoHref?: string;
+    appName?: string;
+    user?: AppLayoutUser | null;
+
+    // Page context
+    title?: string;
+    breadcrumbs?: BreadcrumbItem[];
+    toolbarActions?: ReactNode;
+
+    // Behaviour
+    stickyHeader?: boolean;
+    stickyOffset?: number;
+    defaultSidebarCollapsed?: boolean;
+
+    // Actions
+    onLogout?: () => void;
+    settingsUrl?: string;
+    logoutUrl?: string;
+    unreadCount?: number;
+
+    // Footer
+    footerLinks?: AppLayoutFooterLink[];
+    copyright?: string;
+}

package/src/layouts/app/partials/Footer.tsx

@@ -0,0 +1,35 @@
+import type { AppLayoutFooterLink } from '../layout-types';
+import { cn } from '../../../lib/utils';
+
+interface FooterProps {
+    links?: AppLayoutFooterLink[];
+    copyright?: string;
+    className?: string;
+}
+
+export function Footer({ links = [], copyright, className }: FooterProps) {
+    const year = new Date().getFullYear();
+    return (
+        <footer className={cn('footer border-t border-border', className)}>
+            <div className="container mx-auto px-4">
+                <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
+                    <div className="flex order-2 md:order-1 gap-2 font-normal text-sm">
+                        <span className="text-muted-foreground">{year} &copy;</span>
+                        {copyright && (
+                            <span className="text-secondary-foreground">{copyright}</span>
+                        )}
+                    </div>
+                    {links.length > 0 && (
+                        <nav className="flex order-1 md:order-2 gap-4 font-normal text-sm text-muted-foreground">
+                            {links.map((link) => (
+                                <a key={link.href} href={link.href} className="hover:text-primary transition-colors">
+                                    {link.label}
+                                </a>
+                            ))}
+                        </nav>
+                    )}
+                </div>
+            </div>
+        </footer>
+    );
+}

package/src/layouts/app/partials/HeaderTopbar.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import type { AppLayoutUser } from '../layout-types';
+import { Bell, Search } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import { Button } from '../../../controls/Button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../components/ui/dropdown-menu';
+
+interface HeaderTopbarProps {
+    user?: AppLayoutUser | null;
+    unreadCount?: number;
+    onSearchOpen?: () => void;
+    settingsUrl?: string;
+    logoutUrl?: string;
+    onLogout?: () => void;
+    className?: string;
+    extraSlot?: ReactNode;
+}
+
+function getInitials(name: string): string {
+    return name
+        .split(' ')
+        .map((n) => n[0])
+        .slice(0, 2)
+        .join('')
+        .toUpperCase();
+}
+
+export function HeaderTopbar({
+    user,
+    unreadCount = 0,
+    onSearchOpen,
+    settingsUrl,
+    logoutUrl,
+    onLogout,
+    className,
+    extraSlot,
+}: HeaderTopbarProps) {
+    return (
+        <div className={cn('flex items-center gap-3', className)}>
+            {extraSlot}
+
+            {onSearchOpen && (
+                <Button variant="ghost" size="sm" className="size-9 p-0 rounded-full" onClick={onSearchOpen} aria-label="Search">
+                    <Search className="size-4" />
+                </Button>
+            )}
+
+            <Button variant="ghost" size="sm" className="size-9 p-0 rounded-full relative" aria-label="Notifications">
+                <Bell className="size-4" />
+                {unreadCount > 0 && (
+                    <span className="absolute top-0.5 right-0.5 size-2 rounded-full bg-primary" />
+                )}
+            </Button>
+
+            {user && (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <button className="size-9 rounded-full border border-border overflow-hidden cursor-pointer shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                            {user.avatar ? (
+                                <img src={user.avatar} alt={user.name} className="size-full object-cover" />
+                            ) : (
+                                <span className="size-full flex items-center justify-center bg-muted text-xs font-medium text-muted-foreground">
+                                    {getInitials(user.name)}
+                                </span>
+                            )}
+                        </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-52">
+                        <div className="px-2 py-1.5">
+                            <p className="text-sm font-medium text-foreground truncate">{user.name}</p>
+                            {user.email && <p className="text-xs text-muted-foreground truncate">{user.email}</p>}
+                        </div>
+                        <DropdownMenuSeparator />
+                        {settingsUrl && (
+                            <DropdownMenuItem asChild>
+                                <a href={settingsUrl}>Settings</a>
+                            </DropdownMenuItem>
+                        )}
+                        <DropdownMenuSeparator />
+                        {logoutUrl ? (
+                            <DropdownMenuItem asChild>
+                                <a href={logoutUrl} className="text-destructive focus:text-destructive">Sign out</a>
+                            </DropdownMenuItem>
+                        ) : onLogout ? (
+                            <DropdownMenuItem onClick={onLogout} className="text-destructive focus:text-destructive">
+                                Sign out
+                            </DropdownMenuItem>
+                        ) : null}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            )}
+        </div>
+    );
+}