Shared UI components

Shared UI components

Why these components matter

A large portion of the repository is built from reusable UI infrastructure rather than page-local code. These shared components are where navigation chrome, error boundaries, modals, upload surfaces, preview viewers, and common form elements live.

Core shared chrome

• src/components/sidebar/Sidebar.jsx: workspace sidebar used by the protected shell.
• src/components/Topbar/Topbar.jsx: workspace top bar and profile dropdown trigger.
• src/components/common/toolshell/ToolPageShell.jsx: shared header/body shell for generator-style pages.
• src/components/common/TenantBrandIdentity.jsx: tenant branding display used in admin and auth-adjacent layouts.
• src/components/header/Header.jsx and src/components/footer/Footer.jsx: public/documentation shell chrome.

Feedback, error, and modal surfaces

• GlobalErrorBoundary
• SectionErrorBoundary
• GlobalErrorToast
• NotificationContainer
• ValidationBanner
• DeleteConfirmationDialog
• SaveAsModal
• SaveAsDraftModal
• SaveTemplateModal
• SavePromptModal

These components give the app its consistent error and confirmation semantics.

Upload and preview surfaces

• FileUploadWidget
• FilePreviewModal
• preview viewers for text, image, PDF, code, unsupported files
• data viewers for JSON/table/raw/review modes
• diff and metadata components for showing changed or structured data

These pieces are heavily reused in Live Test, Contract Analysis, AI Studio, and document preview flows.

Admin and form helpers

• AdminCRUDPage
• SelectField
• DatePicker
• DeleteConfirmInline
• MetadataBadges
• SideBySideDiff

Behavior that is worth preserving

• Workspace chrome should remain stable across route families because many pages assume the same top/bottom shell.
• Shared previewers should keep the same file-type fallback behavior; route-specific pages depend on them for document inspection.
• Error boundaries should stay localized so one bad page does not break the whole shell.

Focused tests

• src/components/sidebar/Sidebar.test.jsx
• src/components/Topbar/Topbar.test.jsx
• component tests adjacent to shared consumers, especially Live Test and document preview areas

Scope boundary

This page is not a directory dump. If a shared component is only used in one page family, it belongs in that page family’s docs instead of here. The goal is to document the reusable seams, not every JSX utility.