04072dc94b
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 1m6s
178 lines
5.5 KiB
Markdown
178 lines
5.5 KiB
Markdown
# 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**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```bash
|
|
git add src/components/EditorScreen.tsx src/components/EditorScreen.test.tsx src/types.ts
|
|
git commit -m "test: verify subtitle properties panel flow"
|
|
```
|