import { useState } from 'react';
import { Outlet, useNavigate } from 'react-router';
import {
AppShell,
Sidebar,
TopBar,
} from '@cameleer/design-system';
import { useAuth } from '../auth/useAuth';
import { useScopes } from '../auth/useScopes';
import { useOrgStore } from '../auth/useOrganization';
import { EnvironmentTree } from './EnvironmentTree';
import cameleerLogo from '@cameleer/design-system/assets/cameleer3-logo.svg';
function CameleerLogo() {
return (
);
}
// Nav icon helpers
function DashboardIcon() {
return (
);
}
function EnvIcon() {
return (
);
}
function LicenseIcon() {
return (
);
}
function ObsIcon() {
return (
);
}
function PlatformIcon() {
return (
);
}
export function Layout() {
const navigate = useNavigate();
const { logout } = useAuth();
const scopes = useScopes();
const { username } = useOrgStore();
const [envSectionOpen, setEnvSectionOpen] = useState(true);
const [collapsed, setCollapsed] = useState(false);
const sidebar = (
setCollapsed((c) => !c)}>
}
title="Cameleer SaaS"
onClick={() => navigate('/')}
/>
{/* Dashboard */}
}
label="Dashboard"
open={false}
onToggle={() => navigate('/')}
>
{null}
{/* Environments — expandable tree */}
}
label="Environments"
open={envSectionOpen}
onToggle={() => setEnvSectionOpen((o) => !o)}
>
{/* License */}
}
label="License"
open={false}
onToggle={() => navigate('/license')}
>
{null}
{/* Platform Admin section */}
{scopes.has('platform:admin') && (
}
label="Platform"
open={false}
onToggle={() => navigate('/admin/tenants')}
>
{null}
)}
{/* Link to the observability SPA (direct port, not via Traefik prefix) */}
}
label="View Dashboard"
onClick={() => window.open('/server/', '_blank', 'noopener')}
/>
);
return (
);
}