cameleer-saas/ui/src/components/Layout.tsx

import { useState, useMemo } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router';
import { LayoutDashboard, ShieldCheck, Building, Activity } from 'lucide-react';
import {
  AppShell,
  Sidebar,
  TopBar,
} from '@cameleer/design-system';
import { useAuth } from '../auth/useAuth';
import { useScopes } from '../auth/useScopes';
import { useOrgStore } from '../auth/useOrganization';
import cameleerLogo from '@cameleer/design-system/assets/cameleer3-logo.svg';

function CameleerLogo() {
  return (
    <img
      src={cameleerLogo}
      alt=""
      width="24"
      height="24"
      aria-hidden="true"
    />
  );
}

export function Layout() {
  const navigate = useNavigate();
  const location = useLocation();
  const { logout } = useAuth();
  const scopes = useScopes();
  const { username } = useOrgStore();

  const [collapsed, setCollapsed] = useState(false);

  const breadcrumb = useMemo(() => {
    if (location.pathname.startsWith('/admin')) return [{ label: 'Admin' }, { label: 'Tenants' }];
    if (location.pathname.startsWith('/license')) return [{ label: 'License' }];
    return [{ label: 'Dashboard' }];
  }, [location.pathname]);

  const sidebar = (
    <Sidebar collapsed={collapsed} onCollapseToggle={() => setCollapsed(c => !c)}>
      <Sidebar.Header
        logo={<CameleerLogo />}
        title="Cameleer SaaS"
        onClick={() => navigate('/')}
      />

      {/* Dashboard */}
      <Sidebar.Section
        icon={<LayoutDashboard size={18} />}
        label="Dashboard"
        open={false}
        active={location.pathname === '/' || location.pathname === ''}
        onToggle={() => navigate('/')}
      >
        {null}
      </Sidebar.Section>

      {/* License */}
      <Sidebar.Section
        icon={<ShieldCheck size={18} />}
        label="License"
        open={false}
        active={location.pathname.startsWith('/license')}
        onToggle={() => navigate('/license')}
      >
        {null}
      </Sidebar.Section>

      {/* Platform Admin section */}
      {scopes.has('platform:admin') && (
        <Sidebar.Section
          icon={<Building size={18} />}
          label="Platform"
          open={false}
          active={location.pathname.startsWith('/admin')}
          onToggle={() => navigate('/admin/tenants')}
        >
          {null}
        </Sidebar.Section>
      )}

      <Sidebar.Footer>
        {/* Link to the server observability dashboard */}
        <Sidebar.FooterLink
          icon={<Activity size={18} />}
          label="Open Server Dashboard"
          onClick={() => window.open('/server/', '_blank', 'noopener')}
        />
      </Sidebar.Footer>
    </Sidebar>
  );

  return (
    <AppShell sidebar={sidebar}>
      {/*
       * TopBar always renders status filters, time range pills, auto-refresh, and
       * command palette search via useGlobalFilters() / useCommandPalette(). Both
       * hooks throw if their providers are absent, so GlobalFilterProvider and
       * CommandPaletteProvider cannot be removed from main.tsx without crashing the
       * app. The TopBar API has no props to suppress these server-oriented controls.
       * Hiding them on platform pages would require a DS change.
       */}
      <TopBar
        breadcrumb={breadcrumb}
        user={{ name: username || 'User' }}
        onLogout={logout}
      />
      <Outlet />
    </AppShell>
  );
}