Copy page

Components

SidebarVersionBadge

src/lib/components/sidebar/SidebarVersionBadge.svelte

Purpose

A small monospace badge in the sidebar footer that displays the current app version (v{APP_VERSION} from $lib/version). Clicking it opens the shell.versions sheet (health + version + browser client info). The badge is hidden when the sidebar is collapsed to icon mode unless the sidebar is in mobile mode (isMobile), where the collapsed state does not apply. This avoids a cramped icon-only footer on desktop while keeping the version visible on mobile.

Origin

Custom — Primebrick-written. Uses shadcn-svelte™ Badge, $lib/shell/sheets/sheet-manager.svelte, and $lib/version.

Usage

Default (mounted in AppSidebar footer)

Code
<SidebarVersionBadge {collapsed} isMobile={sidebar.isMobile} />

Mobile (always visible)

On mobile the sidebar is an overlay, so the badge shows even when "collapsed".

Code
<SidebarVersionBadge collapsed={false} isMobile={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" class="font-mono">v{APP_VERSION}</Badge>
</button>

Props

Full prop table: see API reference — sidebarversionbadge.

Key props: collapsed: boolean, isMobile: boolean.

Next steps

• Component catalog
• UI stack
• API reference