Refactor: Split oversized frontend components (FileDetail, SettingsModal, TranscriptDisplay, Speakers)

[davidamacey]

Problem

Several Svelte components have grown to 2000+ lines, making them difficult to navigate, review, and test safely. These were flagged during a comprehensive code audit (Jan 2026) and deferred as lower-priority maintenance work.

Files to split

File	Current size	Concerns combined
frontend/src/routes/files/[id]/+page.svelte	~3,269 lines	Video player, transcript editor, speakers panel, comments, analytics, tags, collections, summary generation
frontend/src/components/SettingsModal.svelte	~2,815 lines	9+ settings sub-sections (ASR, LLM, prompts, transcription, recording, auth, appearance, download, user mgmt)
frontend/src/components/TranscriptDisplay.svelte	~2,709 lines	Segment rendering, editing, export, segmentation, speaker display, search highlighting
frontend/src/routes/speakers/+page.svelte	~2,262 lines	Cluster list, profile grid, inbox, merging, unassign, recluster

Proposed approach

Incremental, one file at a time. Big-bang refactors are risky; split each component in its own PR:

1. files/[id]/+page.svelte

Extract into sub-components under frontend/src/components/fileDetail/:

• FileDetailHeader.svelte — title, metadata strip, action buttons
• MediaPlayerSection.svelte — video/audio player + URL refresher
• TranscriptPanel.svelte — wraps existing TranscriptDisplay with detail-page specific state
• SpeakersPanel.svelte — speaker list + merge/rename
• SummarySection.svelte — generate/display summary
• CommentsSection.svelte — comments list
  The route page becomes a thin coordinator (~400 lines).

2. SettingsModal.svelte

Most settings sections are already components (e.g. TranscriptionSettings.svelte). Move the remaining inline sections into dedicated components under frontend/src/components/settings/. The modal becomes a tab switcher.

3. TranscriptDisplay.svelte

Extract:

• TranscriptSegmentList.svelte — the {#each segments} block
• TranscriptSegmentEditor.svelte — inline edit form
• TranscriptExportDialog.svelte — format selection + export buttons
• TranscriptSearchBar.svelte — already a component, verify it's fully used

4. speakers/+page.svelte

Extract:

• components/speakers/ClustersTab.svelte
• components/speakers/ProfilesTab.svelte
• components/speakers/InboxTab.svelte
• components/speakers/MergeDialog.svelte
• components/speakers/UnassignDialog.svelte
  The page becomes a tab switcher.

Acceptance criteria

• Each target file is under 1000 lines (ideally <500)
• No new TypeScript errors
• svelte-check passes with 0 new warnings
• npm run build succeeds
• Manual smoke test: open each affected page and verify all interactions still work
• Each split PR is reviewable in isolation (one component per PR)

Non-goals

• No functional changes — this is pure refactoring
• No new features — resist scope creep
• No CSS theme changes — preserve existing design

Priority

Low urgency, medium importance. Files work today; splitting is maintenance/developer-velocity investment. Tackle when code churn in these areas slows down contributions.