noteflow/.rag/09-typescript-components-pages.md

NoteFlow TypeScript Components & Pages

Location

client/src/components/ and client/src/pages/

Component Architecture

UI Components (components/ui/)

40+ shadcn/ui primitives: button, input, dialog, form, toast, tabs, card, badge, etc.

Key UI components:

• sidebar/ - Sidebar primitives (context, group, layout, menu, primitives)
• markdown-editor.tsx - Rich text markdown editor
• loading-button.tsx - Button with loading state
• status-badge.tsx - Status indicator badge
• icon-circle.tsx - Circular icon container
• confirmation-dialog.tsx - Generic confirmation dialog

Common Components (components/common/)

Shared components across the application.

Badges (badges/):

• annotation-type-badge.tsx - Annotation type display
• speaker-badge.tsx - Speaker identification
• priority-badge.tsx - Priority indicator

Dialogs (dialogs/):

• confirmation-dialog.tsx - Reusable confirmation dialog

Other:

• error-boundary.tsx - React error boundary
• empty-state.tsx - Empty state template
• stats-card.tsx - Statistics display card
• nav-link.tsx - Navigation link wrapper

Feature Components (components/features/)

Directory	Purpose
analytics/	Analytics visualizations
assistant/	AI assistant chat UI
calendar/	Calendar integration UI
connectivity/	Connection status components
entities/	NER entity highlighting and management
integrations/	Integration management UI
meetings/	Meeting list and cards
notes/	Annotation editor with timestamps
projects/	Project management UI
recording/	Recording controls and status
settings/	Feature settings panels
sync/	Sync status and controls
tasks/	Task list and management
workspace/	Workspace switcher

Layout Components (components/layout/)

• app-layout.tsx - Main app shell
• app-sidebar.tsx - Navigation sidebar
• top-bar.tsx - Top navigation bar

Settings Components (components/settings/)

• medium-label.tsx - Settings label component

System Components (components/system/)

• tauri-event-listener.tsx - Tauri event subscription
• secure-storage-recovery-dialog.tsx - Storage recovery UI

Development Components (components/dev/)

• dev-profiler.tsx - Performance profiling
• simulation-confirmation-dialog.tsx - Simulation mode confirmation

Icon Components (components/icons/)

• status-icons.tsx - Status indicator icons

Pages (pages/)

Main Pages

Page	Path	Purpose
Home.tsx	/	Landing/onboarding
Recording.tsx	/recording	Active recording session
Meetings.tsx	/meetings	Meetings list with filters
MeetingDetail.tsx	/meetings/:id	Meeting transcript & details
Projects.tsx	/projects	Project list & create
ProjectSettings.tsx	/projects/:id/settings	Project configuration
Settings.tsx	/settings	Application settings
People.tsx	/people	Workspace members
Tasks.tsx	/tasks	Action items/tasks view
Analytics.tsx	/analytics	Application analytics/logs
NotFound.tsx	/*	404 fallback

Settings Sub-Pages (pages/settings/)

• AITab.tsx - AI provider configuration
• AudioTab.tsx - Audio device settings
• DiagnosticsTab.tsx - System diagnostics
• IntegrationsTab.tsx - Integration management
• StatusTab.tsx - System status
• SettingsDialogs.tsx - Settings modal dialogs

Meeting Detail Sub-Pages (pages/meeting-detail/)

• index.tsx - Main meeting detail layout
• header.tsx - Meeting header with controls
• transcript-row.tsx - Individual transcript segment
• summary-panel.tsx - AI summary display
• ask-panel.tsx - AI assistant chat panel
• entities-panel.tsx - NER entities panel

Page Integration Patterns

// Recording.tsx example
export default function Recording() {
  const { isConnected, isReadOnly } = useConnection();
  const { activeProject } = useProject();
  const { state, start, cancel } = useDiarization();
  const { devices } = useAudioDevices();

  // Conditional rendering based on connection state
  if (isReadOnly) return <OfflineBanner />;

  return (
    <AppLayout>
      <RecordingHeader />
      <AudioLevelMeter />
      <ProcessingStatus />
    </AppLayout>
  );
}

Component Exports

Component	Purpose
<ConnectionProvider>	Wraps app with connection state
<WorkspaceProvider>	Wraps app with workspace state
<ProjectProvider>	Wraps app with project state
<AppLayout>	Main app shell with sidebar
<EntityHighlight>	Inline NER entity highlighting
<AnnotationTypeBadge>	Action item/decision/risk badge
<OfflineBanner>	Cached/offline mode warning
<ConfirmationDialog>	Generic confirmation modal
<EmptyState>	Empty state placeholder
<StatsCard>	Statistics card

Component Organization

components/
├── ui/              # shadcn/ui primitives
│   ├── sidebar/     # Sidebar components
│   └── [40+ files]
├── common/          # Shared components
│   ├── badges/
│   ├── dialogs/
│   └── [utilities]
├── features/        # Feature-specific
│   ├── entities/
│   ├── notes/
│   └── workspace/
├── layout/          # App layout
├── settings/        # Settings panel
├── system/          # System components
├── dev/             # Dev tools
└── icons/           # Icon components