Dashboard Shell

What it is

The Dashboard Shell is the application layout that wraps every authenticated page. It provides the sidebar navigation, top header bar, breadcrumbs, command palette, notification bell, search, user menu, and theme toggle. The shell also hosts the Sandbox HUD at the bottom of the viewport.

Why it matters

A consistent navigation shell ensures users can move between features without losing context. The command palette enables keyboard-driven navigation for power users, and the notification bell surfaces real-time events without requiring page refreshes.

Key concepts

Layout: DashboardShellLayout composes Sidebar + Header + content area + SandboxHUD
Sidebar: Sidebar renders program-scoped navigation links (Overview, Discovery, Tasks, Sprints, etc.)
Header: Header displays breadcrumbs, search trigger, notification bell, user menu, and theme toggle
Breadcrumbs: Breadcrumbs shows the navigation path (Program > Feature > Detail)
Command palette: CommandPalette provides a keyboard-triggered (Cmd+K / Ctrl+K) global search and navigation
Search provider: SearchProvider manages command palette state and search results
Notification bell: NotificationBell shows unread notification count with a dropdown
Confirm dialog: ConfirmDialog reusable confirmation modal used across the platform
Theme toggle: Switch between light and dark themes (stored in preference, .dark class on <html>)
User menu: Profile, organization switcher, and sign-out

How to use it

The dashboard shell loads automatically for all authenticated routes.
Use the Sidebar to navigate between program features.
Click the breadcrumbs to jump up the navigation hierarchy.
Press Cmd+K (Mac) / Ctrl+K (Windows) to open the Command Palette for fast navigation.
Check the Notification Bell for recent events and alerts.
Toggle the theme via the Theme Toggle in the header.

Data model

This feature uses the following tables:

notifications — User-scoped notification records
users — User profile for the user menu

Overview

Sandbox