+
{t("nav.admin.section")}
)}
@@ -292,6 +334,184 @@ function SidebarNav({
);
}
+/**
+ * Organisation and team context (W14).
+ *
+ * Sits in the bar so the answer to "whose data am I looking at" is always
+ * on screen. Users in one team see a plain label; multi-team users get a
+ * menu. Switching moves the store's active team — which project creation
+ * and the label follow — and deliberately does not filter any screen. A
+ * control that quietly narrowed the dashboard would be a trap, not a
+ * shortcut; scoping a view is a decision a screen should ask for out loud.
+ */
+function TeamSwitcher() {
+ const { t } = useTranslation();
+ const teams = useAuthStore((s) => s.user?.teams) ?? [];
+ const setActiveTeamId = useUIStore((s) => s.setActiveTeamId);
+ const active = useActiveTeam();
+
+ if (!active) return null;
+
+ if (teams.length < 2) {
+ return (
+
+ {active.name}
+
+ );
+ }
+
+ return (
+
+
+
+
+ {/* Radio semantics, not plain menu items: the check glyph marking the
+ current team is aria-hidden, so without `aria-checked` a screen
+ reader announces every team identically and the user cannot tell
+ which one they are acting as. axe cannot flag that — a named
+ menuitem inside a menu is structurally valid. */}
+
+ {t("nav.switchTeam")}
+
+
+ {teams.map((team) => (
+
+ {team.name}
+
+ ))}
+
+
+
+ );
+}
+
+/**
+ * Global bar (W14) — the shell's top edge, spanning the full width above
+ * both the sidebar and the content.
+ *
+ * The silhouette is the point. A left rail that runs to the top of the
+ * window is what a single-scan viewer looks like; a bar that owns the top
+ * and puts the organisation, the team, and search above everything is what
+ * a console looks like. It is also a shape a tool with no accounts and no
+ * teams cannot copy, because it has nothing to put here.
+ *
+ * Ink surface in a light app, so it carries its own `topbar-*` foreground
+ * scale (see index.css) rather than borrowing the page's.
+ */
+function GlobalBar({
+ onOpenMobileNav,
+ onOpenCommandMenu,
+ onLogout,
+}: {
+ onOpenMobileNav: () => void;
+ onOpenCommandMenu: () => void;
+ onLogout: () => void;
+}) {
+ const { t } = useTranslation();
+ const user = useAuthStore((s) => s.user);
+ const initials = user ? deriveInitials(user.displayName || user.email) : "";
+
+ return (
+
+ );
+}
+
export function AppShell() {
const { t } = useTranslation();
const navigate = useNavigate();
@@ -311,19 +531,6 @@ export function AppShell() {
const isSuperAdmin =
user?.isSuperuser === true || user?.role === "super_admin";
- // M-17 — header identity. Initials come from displayName (full_name with
- // an email fallback, mapped in lib/api.ts). The "active team" concept is
- // the store's default `teamId` (first membership, oldest-first); for
- // multi-team users we surface that default and deliberately do NOT offer
- // switching here (out of scope). No team / still bootstrapping → omit the
- // label entirely instead of rendering a placeholder.
- const initials = user ? deriveInitials(user.displayName || user.email) : "";
- const teams = user?.teams ?? [];
- const activeTeamName =
- teams.find((team) => team.id === user?.teamId)?.name ??
- teams[0]?.name ??
- null;
-
// W9-#54 — global ⌘K palette. The hook owns the keyboard listener so
// the shortcut is reachable from any authenticated route, even when the
// header trigger affordance is off-screen on a narrow viewport.
@@ -336,117 +543,55 @@ export function AppShell() {
return (
- {/* Desktop sidebar. Hidden below `lg` (1024 px), where the mobile
- drawer takes over. Width animates between the full rail and the
- 64 px icon rail; `data-collapsed` lets the test harness assert the
- state without measuring pixels. */}
-
+ {/* The bar spans the full width, above the sidebar rather than beside
+ it. That single move is what separates a console silhouette from a
+ single-scan viewer's. */}
+
setMobileNavOpen(true)}
+ onOpenCommandMenu={() => setCommandOpen(true)}
+ onLogout={handleLogout}
+ />
-
- {/* v2.1 B5: read-only live-demo banner. Renders only when the backend
- reports demo_read_only (useDemoMode), so a normal deploy is unaffected. */}
-
-
+
+
-
-
-
+
+ {/* v2.1 B5: read-only live-demo banner. Renders only when the
+ backend reports demo_read_only (useDemoMode), so a normal
+ deploy is unaffected. */}
+
+
+
+
+
+