Copy page

Components

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)

Code
<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.

Code
<SidebarHealthBadge collapsed={true} />

Opening the versions sheet

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

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

Props

Full prop table: see API reference — sidebarhealthbadge.

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

Next steps

• Component catalog
• UI stack
• API reference