Copy page

Components

AppTopbar

src/lib/components/AppTopbar.svelte

Purpose

The sticky top bar of the authenticated shell. A three-track grid (1fr | auto | 1fr) keeps the CommandPalette on the true horizontal center. The left track holds the Sidebar.Trigger; the center track also contains the global AI assistant CTA. The right track shows the resolved IANA timezone, LangSelect, an errors button (badge with the max-impact color of all appErrors, opening the errors sheet), a notifications bell with an unread badge, the separate User Guide assistant CTA, and ThemeToggle. The Guide assistant answers from the documentation knowledge base and is separate from the global assistant. The errors badge caps at 99+ and derives its color from the highest impact among current errors.

Origin

Custom — Primebrick-written. Uses shadcn-svelte™ Button, Badge, and Sidebar.Trigger, plus CommandPalette, LangSelect, ThemeToggle, and @lucide/svelte icons.

Usage

Default (mounted by AppShell)

Code
<AppTopbar />

With an unread notifications count

Code
<AppTopbar unreadNotifications={12} />

Error badge behavior

The errors button opens the shell.errors sheet via openSheet. Its badge shows $appErrors.length (capped at 99+) colored by maxImpact($appErrors).

Code
<Button onclick={() => openSheet('shell.errors', {}, { contentClass: 'w-[420px] p-0' })}>
  <TriangleAlert class="size-4" />
</Button>

Props

Full prop table: see API reference — apptopbar.

Key props: unreadNotifications?: number (default 3).

Next steps

• Component catalog
• UI stack
• API reference