docs: capture swapped upload panel design
This commit is contained in:
Song367
parent
0b50b0b432
commit
4d664abb26
64
docs/plans/2026-03-21-upload-inline-panel-swap-design.md
Normal file
64
docs/plans/2026-03-21-upload-inline-panel-swap-design.md
Normal file
@ -0,0 +1,64 @@
|
||||
# Upload Inline Panel Swap Design
|
||||
|
||||
**Goal:** Swap the vertical order of the embedded subtitle defaults module and the upload dropzone inside the main upload card so subtitle styling appears first and the upload area sits below it.
|
||||
|
||||
## Context
|
||||
|
||||
The current upload workbench already moved subtitle defaults into the main upload card, but the visual order still starts with the upload dropzone and places subtitle styling underneath it. That makes the page feel almost unchanged from the previous version and does not match the requested "position swap."
|
||||
|
||||
The user confirmed the desired interpretation: keep the same overall card structure, but swap the internal top and bottom order so the subtitle defaults module appears above and the upload surface appears below.
|
||||
|
||||
## Approved Direction
|
||||
|
||||
- keep the first row as three cards:
|
||||
- upload and prepare
|
||||
- mode and workflow
|
||||
- language and dubbing
|
||||
- keep subtitle defaults embedded inside the upload card
|
||||
- change the upload card so subtitle defaults render first
|
||||
- move the upload dropzone section below the subtitle defaults module
|
||||
- preserve the current approximate proportions as much as possible
|
||||
|
||||
## Recommended Layout
|
||||
|
||||
Use a two-part upload card with reversed emphasis:
|
||||
|
||||
- upper section:
|
||||
- upload heading
|
||||
- description
|
||||
- subtitle defaults module
|
||||
- lower section:
|
||||
- upload dropzone area
|
||||
- support text and mode chip beneath or beside it as space allows
|
||||
|
||||
This makes the position change obvious without undoing the broader three-card layout.
|
||||
|
||||
## Interaction Rules
|
||||
|
||||
The swap is structural only. Existing behavior stays the same:
|
||||
|
||||
- subtitle preview remains live
|
||||
- reset button still restores defaults
|
||||
- sliders still update preview
|
||||
- upload selection and trim flow remain unchanged
|
||||
- mode and language cards remain separate top-row cards
|
||||
|
||||
## Testing Strategy
|
||||
|
||||
Update upload-screen tests to verify:
|
||||
|
||||
- the subtitle defaults module is still inside the upload card
|
||||
- the subtitle defaults module appears before the upload surface in DOM order
|
||||
- the upload input remains inside the upload card after the swap
|
||||
- existing preview and upload-confirm flows still work
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- language list changes
|
||||
- trimming flow changes
|
||||
- backend behavior
|
||||
- page-level information architecture changes beyond this internal swap
|
||||
|
||||
## Success Criteria
|
||||
|
||||
Success means the upload card visibly reads as "configure subtitle style first, then upload video," while the page still fits the current three-card first-row workbench.
|
||||
171
docs/plans/2026-03-21-upload-inline-panel-swap.md
Normal file
171
docs/plans/2026-03-21-upload-inline-panel-swap.md
Normal file
@ -0,0 +1,171 @@
|
||||
# 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:
|
||||
|
||||
```tsx
|
||||
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:
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```bash
|
||||
node ./node_modules/vitest/vitest.mjs run src/components/UploadScreen.test.tsx
|
||||
```
|
||||
|
||||
Expected: PASS for the new order assertion.
|
||||
|
||||
**Step 5: Commit**
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```tsx
|
||||
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:
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```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 tweaks needed to restore parity.
|
||||
|
||||
**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
|
||||
- lint PASS
|
||||
- build PASS
|
||||
|
||||
**Step 5: Commit**
|
||||
|
||||
```bash
|
||||
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"
|
||||
```
|
||||
Loading…
x
Reference in New Issue
Block a user