video_translate/docs/plans/2026-03-19-subtitle-properties-panel.md

Subtitle Properties Panel Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Make the editor's right sidebar behave like a real current-subtitle properties panel with optional bulk style application.

Architecture: The implementation keeps EditorScreen as the orchestration layer while moving subtitle style data into each Subtitle. Subtitle data is normalized on load, the right sidebar binds to the active subtitle, and preview/export paths read from subtitle-level style settings instead of one shared top-level state object.

Tech Stack: React, TypeScript, Vite, Vitest, Testing Library, Tailwind utility classes

---

Task 1: Extend subtitle types for per-subtitle styles

Files:

• Modify: src/types.ts

Step 1: Write the failing test

Use existing component tests in the next task to drive type usage rather than adding a dedicated type-only test.

Step 2: Run test to verify it fails

Run: npm run test -- src/components/EditorScreen.test.tsx Expected: FAIL after the next test task starts referencing subtitle.textStyle

Step 3: Write minimal implementation

• Add a SubtitleTextStyle interface with font family, size, color, stroke color, stroke width, alignment, and font decoration flags
• Add optional textStyle?: SubtitleTextStyle to Subtitle

Step 4: Run test to verify it passes

Run after Task 2 implementation.

Step 5: Commit

git add src/types.ts src/components/EditorScreen.test.tsx src/components/EditorScreen.tsx
git commit -m "feat: support per-subtitle style settings"

Task 2: Add failing editor tests for the properties panel behavior

Files:

• Modify: src/components/EditorScreen.test.tsx

Step 1: Write the failing test

Add tests that:

• render subtitles with different speakers and styles
• verify the right panel shows the active speaker label
• toggle bold with bulk apply disabled and assert only one subtitle changes
• toggle bulk apply on, change a style, and assert all subtitles update

Step 2: Run test to verify it fails

Run: npm run test -- src/components/EditorScreen.test.tsx Expected: FAIL because the current panel is static and does not update subtitle-level style data

Step 3: Write minimal implementation

Do not implement here; proceed to Tasks 3 and 4.

Step 4: Run test to verify it passes

Run after Tasks 3 and 4.

Step 5: Commit

git add src/components/EditorScreen.test.tsx src/components/EditorScreen.tsx src/types.ts
git commit -m "test: cover subtitle properties panel interactions"

Task 3: Normalize subtitle style data and bind the sidebar to the active subtitle

Files:

• Modify: src/components/EditorScreen.tsx

Step 1: Write the failing test

Covered by Task 2.

Step 2: Run test to verify it fails

Run: npm run test -- src/components/EditorScreen.test.tsx Expected: FAIL with missing active-speaker and style-update assertions

Step 3: Write minimal implementation

• Add a default subtitle style constant and normalization helper
• Normalize generated subtitles before storing them in state
• Derive activeSubtitle and activeSubtitleStyle
• Replace hard-coded speaker/name fields with active subtitle data
• Add applyToAllSubtitles state
• Add helper functions that update subtitle styles per subtitle or across all subtitles

Step 4: Run test to verify it passes

Run: npm run test -- src/components/EditorScreen.test.tsx Expected: PASS for sidebar interaction assertions

Step 5: Commit

git add src/components/EditorScreen.tsx src/components/EditorScreen.test.tsx src/types.ts
git commit -m "feat: wire subtitle properties panel to active subtitle"

Task 4: Render subtitle preview with subtitle-level styles

Files:

• Modify: src/components/EditorScreen.tsx

Step 1: Write the failing test

Covered by Task 2 by asserting the preview subtitle reflects changed style controls.

Step 2: Run test to verify it fails

Run: npm run test -- src/components/EditorScreen.test.tsx Expected: FAIL because the overlay still reads the old shared style state

Step 3: Write minimal implementation

• Replace shared overlay style usage with the currently visible subtitle's style
• Map size presets to concrete font sizes
• Add stroke rendering through textShadow

Step 4: Run test to verify it passes

Run: npm run test -- src/components/EditorScreen.test.tsx Expected: PASS

Step 5: Commit

git add src/components/EditorScreen.tsx src/components/EditorScreen.test.tsx
git commit -m "feat: preview subtitle-level style changes"

Task 5: Verify targeted editor behavior

Files:

• Modify: src/components/EditorScreen.tsx if any verification fixes are needed
• Modify: src/components/EditorScreen.test.tsx if any verification fixes are needed

Step 1: Write the failing test

No new test unless verification exposes a gap.

Step 2: Run test to verify it fails

Only if a regression is found during verification.

Step 3: Write minimal implementation

Apply only the smallest follow-up fixes needed to make the targeted suite green.

Step 4: Run test to verify it passes

Run: npm run test -- src/components/EditorScreen.test.tsx Expected: PASS

Optional broader check:

Run: npm run test -- src/components/EditorScreen.test.tsx src/services/subtitleService.test.ts Expected: PASS

Step 5: Commit

git add src/components/EditorScreen.tsx src/components/EditorScreen.test.tsx src/types.ts
git commit -m "test: verify subtitle properties panel flow"