noteflow/docs/sprints/.archive/sprint-organization/components.md

Client Components Reorganization Plan

The client/src/components directory is currently cluttered with a mix of feature-specific components, layout elements, and shared UI utilities. This document outlines a plan to reorganize them into a structured, scalable hierarchy.

Analysis

1. Common / Shared UI

Target Directory: client/src/components/common/

Generic components used across multiple features.

File	Type	Target	Dependencies
empty-state.tsx	UI	components/common/empty-state.tsx	lucide-react, cn
stats-card.tsx	UI	components/common/stats-card.tsx	lucide-react, Card
error-boundary.tsx	Logic/UI	components/common/error-boundary.tsx	React
NavLink.tsx	UI	components/common/nav-link.tsx	react-router-dom
icons/status-icons.tsx	UI	components/common/icons/status-icons.tsx	lucide-react

Badges & Dialogs

Sub-groups for common UI patterns.

File	Type	Target
annotation-type-badge.tsx	Badge	components/common/badges/annotation-type-badge.tsx
priority-badge.tsx	Badge	components/common/badges/priority-badge.tsx
speaker-badge.tsx	Badge	components/common/badges/speaker-badge.tsx
confirmation-dialog.tsx	Dialog	components/common/dialogs/confirmation-dialog.tsx

2. Layout

Target Directory: client/src/components/layout/

Application shell and navigation.

File	Target	Notes
app-layout.tsx	components/layout/app-layout.tsx	Main shell
app-sidebar.tsx	components/layout/app-sidebar.tsx
top-bar.tsx	components/layout/top-bar.tsx

3. Feature Modules

Target Directory: client/src/components/features/

Components grouped by business domain.

Calendar

Target: components/features/calendar/

File
calendar-connection-panel.tsx
calendar-events-panel.tsx
upcoming-meetings.tsx

Connectivity

Target: components/features/connectivity/

File	Notes
connection-status.tsx
offline-banner.tsx
api-mode-indicator.tsx
server-switch-confirmation-dialog.tsx	Specific to connection logic

Entities

Target: components/features/entities/

File
entity-highlight.tsx
entity-management-panel.tsx

Integrations

Target: components/features/integrations/

File	Notes
integration-config-panel.tsx	Merge with integration-config-panel/ folder
webhook-settings-panel.tsx

Meetings & Processing

Target: components/features/meetings/

File
meeting-card.tsx
meeting-state-badge.tsx
processing-status.tsx

Notes

Target: components/features/notes/

File
timestamped-notes-editor.tsx

Sync

Target: components/features/sync/

File
sync-control-panel.tsx
sync-history-log.tsx
sync-status-indicator.tsx
preferences-sync-status.tsx
preferences-sync-bridge.tsx

Workspace

Target: components/features/workspace/

File
workspace-switcher.tsx

4. Existing Features (To Move)

Move these existing folders into components/features/:

• analytics -> components/features/analytics
• projects -> components/features/projects
• recording -> components/features/recording
• settings -> components/features/settings

5. System / Dev

Target Directory: client/src/components/system/ (and dev/)

File	Target
tauri-event-listener.tsx	components/system/tauri-event-listener.tsx
dev-profiler.tsx	components/dev/dev-profiler.tsx
secure-storage-recovery-dialog.tsx	components/system/secure-storage-recovery-dialog.tsx
simulation-confirmation-dialog.tsx	components/dev/simulation-confirmation-dialog.tsx

Execution Plan

1. Preparation:
   • Create new directory structure (components/features, components/common, components/layout, etc.).
2. Move & Rename:
   • Move files to their target destinations.
   • Move associated test files (*.test.tsx) along with their components.
3. Refactor Imports:
   • Update imports within the moved files (fixing relative paths).
   • Update global usage (search and replace imports in client/src).
4. Integration Panel Cleanup:
   • Verify integration-config-panel.tsx vs integration-config-panel/ folder. Consolidate into features/integrations/integration-config-panel/.
5. Verification:
   • Run build to check for missing imports.
   • Run linting.
   • Run tests.

Impacted Areas

• Routing: Routes in App.tsx or main.tsx importing pages/layouts.
• Pages: All page components importing these shared components.
• Tests: All tests importing these components.

Recommendations

• Barrel Files: Add index.ts to feature folders (e.g., components/features/calendar/index.ts) to simplify imports (e.g., import { UpcomingMeetings } from '@/components/features/calendar').
• Strict Boundaries: Avoid cross-feature imports where possible. Common logic should move to hooks or lib.