UI And Navigation

UI and navigation code gives the product its everyday operating surface: desktop sidebar, mobile bottom navigation, dashboard header, command menu, user actions, theme behavior, toasts, and smooth scrolling.

The goal is to keep navigation predictable across dashboard, public pages, authenticated surfaces, and mobile layouts.

Dashboard Layout

The dashboard shell lives in src/components/dashboard/dashboard-layout-shell.tsx.

It composes:

• AI runtime provider.
• Realtime event bridge.
• Sidebar provider.
• Desktop dashboard sidebar.
• Dashboard header.
• Mobile bottom navigation.
• Billing checkout return bridge.
• Email verification result dialog.
• Settings dialog global bridge.
• Lazy AI widget.
• Toast provider.

This shell keeps global dashboard behavior in one place while feature pages stay focused on their own content.

Desktop Sidebar

The desktop sidebar lives in src/components/dashboard/dashboard-sidebar.tsx.

It includes:

• Product logo.
• New chat action.
• Chat search action.
• Admin link when allowed.
• Library link.
• Recent chats.
• Projects.
• User footer action.

Chat and project sidebar rows live under src/features/ai/chat/components/chat-dashboard-sidebar.

Sidebar collapsed state and chat sidebar UI state are handled by the sidebar primitive and AI chat sidebar store.

Mobile Navigation

Mobile dashboard navigation lives in:

• src/components/dashboard/mobile-bottom-nav.tsx
• src/components/dashboard/mobile-bottom-nav-item.tsx
• src/components/dashboard/mobile-bottom-nav-account-button.tsx

The mobile layout uses a fixed bottom navigation and gives the dashboard content extra bottom spacing so important controls are not hidden behind the nav.

Dashboard Header

The dashboard header lives in src/components/dashboard/dashboard-header.tsx.

It shows the current dashboard context, exposes sidebar controls, and adapts the label for selected chat or dashboard section state.

Command Menu

The quick access command menu lives under src/components/quick-access-menu.

Command items are defined in src/components/quick-access-menu/dashboard-command-items.constants.ts.

The command menu supports:

• Route navigation.
• Theme changes.
• Settings action.
• Chat search action.
• Logout action.
• Admin only items.
• Auth only items.

Use command items for fast global actions. Keep feature specific heavy behavior inside the feature, then trigger it through a small global action when needed.

User And Help Actions

The signed in user button lives in src/features/auth/components/user-button.tsx.

The help popover lives in src/features/help/components/help-popover/help-popover.tsx.

These surfaces connect users to settings, billing, contact, sign out, and other account oriented actions.

Theme, Toasts, And Smooth Scroll

Theme provider wiring lives in src/providers/theme.provider.tsx, and the user facing theme selector lives in Settings.

Dashboard toasts use the shared Toaster from src/components/ui/sonner, mounted in the dashboard shell.

Smooth scrolling is initialized by src/providers/smooth-scroll.provider.tsx from the root app layout.

Where To Customize

• src/components/dashboard/dashboard-layout-shell.tsx for dashboard level providers and bridges.
• src/components/dashboard/dashboard-sidebar.tsx for desktop dashboard navigation.
• src/components/dashboard/mobile-bottom-nav.tsx for mobile dashboard navigation.
• src/components/dashboard/dashboard-header.tsx for dashboard header behavior.
• src/components/quick-access-menu for command menu behavior.
• src/components/navigation for public navigation.
• src/features/help/components/help-popover for help actions.
• src/providers/theme.provider.tsx for theme provider behavior.
• src/providers/smooth-scroll.provider.tsx for smooth scroll behavior.

When adding navigation, use WebRoutes for paths and keep authenticated, admin only, and mobile visibility rules explicit.