Teamup/client/src/components/AppShell.tsx

import type { ReactNode } from 'react'
import { Link, useLocation } from 'react-router'
import {
  BookMarked,
  BookOpen,
  BookUser,
  Bot,
  Boxes,
  ChartColumn,
  Gauge,
  Inbox,
  type LucideIcon,
  LayoutDashboard,
  LogOut,
  Network,
  Package,
  Rocket,
  ShieldCheck,
  Sparkles,
  Users,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'
import { useAuth } from '@/store/auth'

export function AppShell({ children }: { children: ReactNode }) {
  const email = useAuth((s) => s.email)
  const logout = useAuth((s) => s.logout)

  return (
    <div className="flex min-h-screen text-foreground">
      <aside
        className="flex w-60 shrink-0 flex-col border-r border-white/15 text-sidebar-foreground backdrop-blur-2xl"
        style={{ background: 'linear-gradient(180deg, oklch(0.27 0.1 287 / 0.78) 0%, oklch(0.2 0.085 298 / 0.78) 100%)' }}
      >
        <div className="flex items-center gap-3 px-5 py-4">
          <span className="grid size-8 place-items-center rounded-md bg-sidebar-primary font-bold text-sidebar-primary-foreground">
            T
          </span>
          <div className="leading-tight">
            <div className="font-semibold tracking-tight">TeamUp.AI</div>
            <div className="text-xs text-sidebar-foreground/60">command center</div>
          </div>
        </div>

        <Separator className="bg-sidebar-border" />

        <nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-3">
          <NavItem icon={Rocket} label="Get started" to="/start" />

          <NavSection label="Work" />
          <NavItem icon={LayoutDashboard} label="Board" to="/" />
          <NavItem icon={Sparkles} label="Team" to="/team" />
          <NavItem icon={Inbox} label="Cartable" to="/cartable" />
          <NavItem icon={ShieldCheck} label="Review inbox" to="/reviews" />

          <NavSection label="Organization" />
          <NavItem icon={Boxes} label="Structure" to="/structure" />
          <NavItem icon={Network} label="Org chart" to="/org" />
          <NavItem icon={Users} label="Members" to="/members" />

          <NavSection label="AI & libraries" />
          <NavItem icon={Bot} label="AI seats" to="/seats" />
          <NavItem icon={BookMarked} label="Skills" to="/skills" />
          <NavItem icon={BookUser} label="Agent profiles" to="/agent-profiles" />
          <NavItem icon={Package} label="Product profiles" to="/product-profiles" />

          <NavSection label="Insights" />
          <NavItem icon={Gauge} label="Performance" to="/performance" />
          <NavItem icon={ChartColumn} label="Analytics" to="/analytics" />

          <NavSection label="Help" />
          <NavItem icon={BookOpen} label="Knowledge base" to="/help" />
        </nav>

        <Separator className="bg-sidebar-border" />

        <div className="flex items-center justify-between gap-2 p-3">
          <span className="truncate text-xs text-sidebar-foreground/70">{email ?? 'signed in'}</span>
          <Button
            variant="ghost"
            size="sm"
            onClick={logout}
            className="text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
          >
            <LogOut data-icon="inline-start" />
            Sign out
          </Button>
        </div>
      </aside>

      <main className="flex-1 overflow-auto">{children}</main>
    </div>
  )
}

function NavSection({ label }: { label: string }) {
  return (
    <div className="px-3 pb-1 pt-4 text-[10px] font-semibold uppercase tracking-wider text-sidebar-foreground/45">
      {label}
    </div>
  )
}

function NavItem({
  icon: Icon,
  label,
  to,
  muted,
}: {
  icon: LucideIcon
  label: string
  to?: string
  muted?: boolean
}) {
  const location = useLocation()
  const active = to ? location.pathname === to : false

  const className = cn(
    'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
    active
      ? 'bg-white/15 font-medium text-white shadow-sm ring-1 ring-white/15 backdrop-blur-sm'
      : 'text-sidebar-foreground/80',
    muted ? 'opacity-50' : 'hover:bg-white/10 hover:text-white',
  )

  const content = (
    <>
      <Icon className="size-4" />
      {label}
      {muted && <span className="ml-auto text-[10px] uppercase tracking-wide opacity-70">soon</span>}
    </>
  )

  if (!to || muted) {
    return <span className={className}>{content}</span>
  }

  return (
    <Link to={to} className={className}>
      {content}
    </Link>
  )
}