Shell and UI
AppShell provides navigation, account tools, search and loading feedback. Feature components provide the page content.
Navigation and loading
SiteNav builds role-specific links; SiteToolbar hosts search.
Classic layout uses a top bar, workbench a sidebar, and desk a sidebar with QueuePane.
Layout styling uses HTML attributes. Desk Home redirects to Reviews. Hidden links reflect
capability but do not enforce server access.
NavigationLink uses prefetch={false} and intercepts ordinary
in-app clicks through navigate. That waits for pending review commands to
save. Modified clicks keep normal link behavior. During navigation, the shell marks the
content busy/inert and shows the destination PageSkeleton.
LoadingPreview renders noninteractive placeholder layouts.
Shared controls
HeaderSearch supplies five suggestions and links to full Search. QueuePane reads paged inbox projections. NotificationBell reads the notification provider, marks events read and navigates. UserControl hosts Clerk account UI, review preferences, appearance and development View as. These components can initiate saves/navigation; domain rules remain in review commands.
Form primitives mostly wrap Radix; toasts use Base UI, and header popovers use a local component. Shared field classes live in ui/input.tsx. Keep these differences local instead of assuming all popovers or controls share the same behavior.
When adding a screen
Check its navigation capability, protected layout, API access, skeleton and initial-data handoff. For shell styling, test all three layouts and a narrow viewport, keyboard focus, and save failure before navigation. Do not mistake a loading placeholder for a ready data-bearing screen.