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/)

30+ shadcn/ui primitives: button, input, dialog, form, toast, etc.

Recording Components (components/recording/)

Component	Purpose
audio-level-meter.tsx	Real-time VU meter visualization
confidence-indicator.tsx	ASR confidence display
vad-indicator.tsx	Voice activity indicator
buffering-indicator.tsx	Congestion/buffering display
recording-header.tsx	Recording session header
stat-card.tsx	Statistics display
speaker-distribution.tsx	Speaker time breakdown
idle-state.tsx	Idle/standby UI

Settings Components (components/settings/)

• developer-options-section.tsx
• quick-actions-section.tsx

Project Components (components/projects/)

• ProjectScopeFilter.tsx

Status & Badge Components

Component	Purpose
entity-highlight.tsx	NER entity highlighting
entity-management-panel.tsx	Entity CRUD UI
annotation-type-badge.tsx	Annotation type display
meeting-state-badge.tsx	Meeting state indicator
priority-badge.tsx	Priority indicator
speaker-badge.tsx	Speaker identification
processing-status.tsx	Post-processing indicator
api-mode-indicator.tsx	Connection mode indicator
offline-banner.tsx	Offline mode warning

Layout Components

• app-layout.tsx — Main app shell with sidebar
• app-sidebar.tsx — Navigation sidebar
• error-boundary.tsx — React error boundary
• empty-state.tsx — Empty state template
• meeting-card.tsx — Meeting item card
• NavLink.tsx — Navigation link wrapper

Integration Components

• calendar-connection-panel.tsx — Calendar OAuth setup
• calendar-events-panel.tsx — Calendar events list
• integration-config-panel/ — Integration setup wizard

Other Components

• connection-status.tsx — Connection status display
• confirmation-dialog.tsx — Generic confirm dialog
• timestamped-notes-editor.tsx — Annotation editor
• preferences-sync-bridge.tsx — Preferences sync coordinator
• preferences-sync-status.tsx — Sync status display

Pages (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/)

• IntegrationsTab.tsx — Integration management
• StatusTab.tsx — System status

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

Meeting detail components and sub-views.

Page Integration Patterns

// Recording.tsx example
export default function Recording() {
  const { isConnected, isReadOnly } = useConnection();
  const { activeProject } = useProjects();
  const { state, start, cancel } = useDiarization();
  const { data: audioDevices } = 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
<AudioLevelMeter>	Real-time audio VU meter
<RecordingHeader>	Recording session metadata
<EntityHighlight>	Inline NER entity highlighting
<AnnotationTypeBadge>	Action item/decision/risk badge
<MeetingStateBadge>	Meeting state indicator
<OfflineBanner>	Cached/offline mode warning
<ProcessingStatus>	Post-processing progress
<ApiModeIndicator>	Connection mode display

Analytics Components (components/analytics/)

• logs-tab.tsx — Log viewer
• performance-tab.tsx — Performance metrics
• analytics-utils.ts — Analytics utilities