# SidebarHealthBadge


`src/lib/components/sidebar/SidebarHealthBadge.svelte`

## Purpose

A pill badge in the sidebar footer that summarizes backend health. It derives a
`HealthChip` from `backendState` via the `useHealthChip` composable and renders
an icon plus localized label: `Cloud` when healthy, `CloudOff` when the backend
is offline, `Database` when the DB is down, and `ShieldAlert` when the IDP is
down. Clicking opens the `shell.versions` sheet (which contains
`BrowserClientInfo` and version/health details). When the sidebar is collapsed
to icon mode, the badge shrinks to a square icon-only chip.

## Origin

**Custom** — Primebrick-written. Uses shadcn-svelte™ `Badge`, the
`useHealthChip` composable, `$lib/shell/sheets/sheet-manager.svelte`, and
`@lucide/svelte` icons.

## Usage

### Default (mounted in AppSidebar footer)

```svelte
<SidebarHealthBadge {collapsed} />
```

### Collapsed (icon-only)

When `collapsed` is true, the label hides and the badge becomes an 8x8 icon chip
via `group-data-[collapsible=icon]` utilities.

```svelte
<SidebarHealthBadge collapsed={true} />
```

### Opening the versions sheet

Clicking the badge calls `openSheet('shell.versions', ...)`.

```svelte
<button onclick={() => openSheet('shell.versions', {}, { contentClass: 'w-[420px] p-0' })}>
  <Badge variant="outline">{healthChipLabel}</Badge>
</button>
```

## Props

Full prop table: see [API reference — sidebarhealthbadge](/docs/user-guide/api-reference#sidebarhealthbadge).

Key props: `collapsed: boolean` (whether the sidebar is in icon-only mode).

## Next steps

- [Component catalog](/docs/user-guide/components)
- [UI stack](/docs/user-guide/ui-stack)
- [API reference](/docs/user-guide/api-reference#sidebarhealthbadge)