Copy page

Components

SidebarAppLauncher

src/lib/components/sidebar/SidebarAppLauncher.svelte

Purpose

A sidebar menu button that shows the current {app} / {module} context and opens a Popover panel with three columns: Applications (root levels), Modules of the previewed app, and Pages of the previewed module under that app. It replaces the old root/module switchers with a single Finder-style cascade.

Column data comes straight from shellNav (the module discovery payload): applications from shellNav.roots, modules from shellNav.modulesForRoot(app), pages from ModuleInfo.nav filtered to the previewed app root — already access-filtered server-side, no second fetch. Selecting a module lazily loads its translation dictionary via loadModuleTranslations.

Select vs activate semantics

Selection and navigation are deliberately separate (touch + keyboard parity):

• Selecting a row (tap / click / arrow focus) only previews the next column — it never navigates.
• Activating lives on the trailing icon-only CTA (ArrowUpRight), or on Enter/Space for keyboard users. A page row is a leaf — its whole row IS the goto.

The activation chain follows the defaults declared in metadata:

Row	Activation target
App CTA	the app's is_default module → its first page under that app
Module CTA	the module's first page under the previewed app
Page row	direct navigation to item.href

Behavior details

• The panel is always visible (even with a single app level) and opens on the current route's context — preview state resets on every open.
• Panel height ratchets between 4 and 12 rows (44px touch targets); within an open session it only grows — no jarring shrink on preview changes — and height changes animate.
• Keyboard: roving tabindex per column, arrows move focus (focus previews), Left/Right traverse columns with wrap, Enter/Space activates, Esc closes.
• A keyboard-hints footer (Kbd) summarizes the bindings.
• Disabled modules (enabled === false) render dimmed and skip activation.
• When collapsed is true the trigger shows only the app icon tile; the {app} / {module} label and chevron hide.

Origin

Custom — Primebrick-written. Uses shadcn-svelte™ Popover + Sidebar primitives, DynamicIcon, Kbd, and @lucide/svelte icons.

Usage

Default (mounted in AppSidebar content)

Code
<SidebarAppLauncher {collapsed} />

Module activation wiring

Activating a module calls shellNav.selectModule, then navigates to the module's home inside the previewed app root (home[root] from the discovery payload, else the module's first nav entry under that root).

Code
<button onclick={(e) => { e.stopPropagation(); void activateModule(m); }}>
  <ArrowUpRight />
</button>

Props

Full prop table: see API reference — sidebarapplauncher.

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

Next steps

• Component catalog
• App shell & sidebar
• API reference