167 lines
4.3 KiB
Markdown
167 lines
4.3 KiB
Markdown
# Upload Inline Subtitle Style Implementation Plan
|
|
|
|
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
|
|
|
**Goal:** Embed the subtitle defaults controls into the lower-left area of the upload card while preserving the three-card top-row layout for upload, mode, and language.
|
|
|
|
**Architecture:** Keep the existing upload page behavior and TTS/mode card layout, but remove the standalone subtitle defaults card. Move the preview and sliders into a compact embedded module inside `src/components/UploadScreen.tsx`, and update upload-screen tests to lock in the new structure.
|
|
|
|
**Tech Stack:** React 19, TypeScript, Tailwind CSS v4 utilities, Vitest, React Testing Library
|
|
|
|
---
|
|
|
|
### Task 1: Lock the embedded subtitle module with a failing test
|
|
|
|
**Files:**
|
|
- Modify: `src/components/UploadScreen.test.tsx`
|
|
- Reference: `src/components/UploadScreen.tsx`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Add a structure test for the new placement:
|
|
|
|
```tsx
|
|
it('renders subtitle defaults inside the upload card footer area', () => {
|
|
renderUploadScreen();
|
|
|
|
expect(screen.getByTestId('upload-dropzone-card')).toContainElement(
|
|
screen.getByTestId('upload-subtitle-defaults-panel'),
|
|
);
|
|
expect(screen.queryByTestId('subtitle-defaults-card')).not.toBeInTheDocument();
|
|
});
|
|
```
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx
|
|
```
|
|
|
|
Expected: FAIL because the subtitle defaults controls still render as a standalone card.
|
|
|
|
**Step 3: Write minimal implementation**
|
|
|
|
Add the new `data-testid` for the embedded subtitle module and remove the old standalone-card marker.
|
|
|
|
**Step 4: Run test to verify it passes**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx
|
|
```
|
|
|
|
Expected: PASS for the new inline-module assertion.
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add src/components/UploadScreen.tsx src/components/UploadScreen.test.tsx
|
|
git commit -m "test: lock inline subtitle defaults layout"
|
|
```
|
|
|
|
### Task 2: Move subtitle defaults into the upload card
|
|
|
|
**Files:**
|
|
- Modify: `src/components/UploadScreen.tsx`
|
|
- Modify: `src/components/UploadScreen.test.tsx`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Add a second focused regression test:
|
|
|
|
```tsx
|
|
it('keeps subtitle preview controls active after moving them into the upload card', () => {
|
|
renderUploadScreen();
|
|
|
|
expect(screen.getByTestId('upload-subtitle-defaults-panel')).toContainElement(
|
|
screen.getByTestId('upload-subtitle-preview'),
|
|
);
|
|
});
|
|
```
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx
|
|
```
|
|
|
|
Expected: FAIL until the subtitle module is actually moved.
|
|
|
|
**Step 3: Write minimal implementation**
|
|
|
|
Refactor `src/components/UploadScreen.tsx` to:
|
|
|
|
- delete the standalone subtitle defaults card
|
|
- add a compact subtitle defaults module inside the upload card bottom-left region
|
|
- keep support text and mode chip in the upload card bottom-right region
|
|
- preserve preview and slider behavior exactly
|
|
|
|
**Step 4: Run test to verify it passes**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx
|
|
```
|
|
|
|
Expected: PASS for the new structure tests and existing subtitle interaction tests.
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add src/components/UploadScreen.tsx src/components/UploadScreen.test.tsx
|
|
git commit -m "feat: embed subtitle defaults in upload card"
|
|
```
|
|
|
|
### Task 3: Full verification
|
|
|
|
**Files:**
|
|
- Modify: `src/components/UploadScreen.tsx`
|
|
- Modify: `src/components/UploadScreen.test.tsx`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
If any final regression appears after the move, add the smallest targeted test first.
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx src/App.test.tsx
|
|
```
|
|
|
|
Expected: FAIL only if a real regression remains.
|
|
|
|
**Step 3: Write minimal implementation**
|
|
|
|
Apply only the final layout polish needed for the regression.
|
|
|
|
**Step 4: Run test to verify it passes**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
npm.cmd test
|
|
npm.cmd run lint
|
|
npm.cmd run build
|
|
```
|
|
|
|
Expected:
|
|
|
|
- all tests PASS
|
|
- typecheck PASS
|
|
- build PASS
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add src/components/UploadScreen.tsx src/components/UploadScreen.test.tsx src/App.tsx src/App.test.tsx
|
|
git commit -m "test: verify inline subtitle defaults layout"
|
|
```
|