# 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)

```svelte
<AppTopbar />
```

### With an unread notifications count

```svelte
<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)`.

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

## Props

Full prop table: see [API reference — apptopbar](/frontend/dev/api-reference#apptopbar).

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

## Next steps

- [Component catalog](/frontend/dev/components)
- [UI stack](/frontend/dev/ui-stack)
- [API reference](/frontend/dev/api-reference#apptopbar)