video_translate/docs/plans/2026-03-21-upload-inline-subtitle-style.md

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:

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:

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:

node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx

Expected: PASS for the new inline-module assertion.

Step 5: Commit

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:

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:

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:

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

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:

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:

npm.cmd test
npm.cmd run lint
npm.cmd run build

Expected:

• all tests PASS
• typecheck PASS
• build PASS

Step 5: Commit

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"