video_translate/docs/plans/2026-03-21-upload-inline-panel-swap.md

Upload Inline Panel Swap Implementation Plan

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

Goal: Reorder the embedded sections inside the upload card so subtitle defaults render above the upload dropzone while preserving current upload, mode, language, and trim behavior.

Architecture: Keep the existing three-card top row and embedded subtitle-defaults approach. Add a focused regression test that locks the internal order of the upload card, then minimally reorder the JSX in src/components/UploadScreen.tsx and keep existing interaction tests green.

Tech Stack: React 19, TypeScript, Tailwind CSS v4 utilities, Vitest, React Testing Library

---

Task 1: Lock the new internal order 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 that checks the subtitle defaults panel appears before the upload surface inside the upload card:

it('renders subtitle defaults before the upload surface inside the upload card', () => {
  renderUploadScreen();

  const uploadCard = screen.getByTestId('upload-dropzone-card');
  const subtitlePanel = screen.getByTestId('upload-subtitle-defaults-panel');
  const uploadSurface = screen.getByTestId('upload-dropzone-surface');

  expect(uploadCard).toContainElement(subtitlePanel);
  expect(uploadCard).toContainElement(uploadSurface);
  expect(
    subtitlePanel.compareDocumentPosition(uploadSurface) & Node.DOCUMENT_POSITION_FOLLOWING,
  ).toBeTruthy();
});

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 upload surface currently renders before the subtitle defaults panel and does not yet expose the new marker.

Step 3: Write minimal implementation

Add the missing test id for the upload surface and reorder the upload-card sections.

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 order assertion.

Step 5: Commit

git add src/components/UploadScreen.tsx src/components/UploadScreen.test.tsx
git commit -m "test: lock upload card panel order"

Task 2: Reorder the upload card sections

Files:

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

Step 1: Write the failing test

If needed, add one more focused regression test to protect the upload input location:

it('keeps the upload interaction inside the lower upload section after the swap', () => {
  renderUploadScreen();

  expect(screen.getByTestId('upload-dropzone-surface')).toContainElement(
    screen.getByLabelText(/upload video file/i),
  );
});

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 new structure is in place.

Step 3: Write minimal implementation

Refactor src/components/UploadScreen.tsx to:

• move the embedded subtitle defaults block above the upload dropzone block
• keep the heading and description at the top of the card
• keep support text and the mode chip associated with the upload section
• preserve all existing handlers and controls

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 structure tests and existing interaction tests.

Step 5: Commit

git add src/components/UploadScreen.tsx src/components/UploadScreen.test.tsx
git commit -m "feat: swap upload card panel order"

Task 3: Full verification

Files:

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

Step 1: Write the failing test

If a regression appears during final polish, add the smallest possible 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 tweaks needed to restore parity.

Step 4: Run test to verify it passes

Run:

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

Expected:

• all tests PASS
• lint PASS
• build PASS

Step 5: Commit

git add src/components/UploadScreen.tsx src/components/UploadScreen.test.tsx docs/plans/2026-03-21-upload-inline-panel-swap-design.md docs/plans/2026-03-21-upload-inline-panel-swap.md
git commit -m "test: verify swapped upload card layout"