docs: add upload workbench redesign design
This commit is contained in:
Song367
parent
63784ed5f2
commit
9270691012
244
docs/plans/2026-03-21-upload-workbench-redesign-design.md
Normal file
244
docs/plans/2026-03-21-upload-workbench-redesign-design.md
Normal file
@ -0,0 +1,244 @@
|
||||
# Upload Workbench Redesign Design
|
||||
|
||||
**Goal:** Redesign the upload page so the right-side controls are always accessible, the layout adapts cleanly across viewport widths, and the page feels like a coherent product workbench instead of a squeezed form.
|
||||
|
||||
## Context
|
||||
|
||||
The current upload page uses a fixed two-column flex layout inside a constrained `max-w-6xl` shell. The left upload area grows aggressively while the right settings column is locked to `w-[400px]`. Combined with `h-screen`, centered alignment, and large outer padding, the layout runs out of horizontal space quickly and the right column becomes partially or fully clipped on narrower desktop windows.
|
||||
|
||||
Functionally, the page already collects the right information:
|
||||
|
||||
- upload source video
|
||||
- choose work mode
|
||||
- define initial subtitle defaults
|
||||
- choose TTS language
|
||||
|
||||
The redesign should preserve that workflow. This is a front-end layout and presentation change, not a product-flow rewrite.
|
||||
|
||||
## User-Approved Direction
|
||||
|
||||
The approved direction is:
|
||||
|
||||
- keep a desktop-friendly left/right split layout
|
||||
- automatically stack into a top/bottom layout on narrower viewports
|
||||
- preserve the current page flow and controls
|
||||
- make the upload area the primary focal point
|
||||
- keep settings visible, grouped, and readable without horizontal clipping
|
||||
|
||||
## Approaches Considered
|
||||
|
||||
### Option A: Responsive dual-column workbench
|
||||
|
||||
Keep the existing information architecture, but replace the rigid flex layout with a responsive grid that shifts from dual-column to single-column when space is limited.
|
||||
|
||||
**Pros**
|
||||
|
||||
- Solves the clipping problem directly
|
||||
- Preserves current user workflow
|
||||
- Requires changes mostly in the upload page shell and card structure
|
||||
- Keeps settings visible without hiding them behind extra clicks
|
||||
|
||||
**Cons**
|
||||
|
||||
- Requires reworking spacing, hierarchy, and card composition
|
||||
|
||||
### Option B: Settings drawer
|
||||
|
||||
Collapse the right-side controls into a slide-over drawer triggered by a button.
|
||||
|
||||
**Pros**
|
||||
|
||||
- Eliminates horizontal overflow entirely
|
||||
- Can simplify the initial page appearance
|
||||
|
||||
**Cons**
|
||||
|
||||
- Reduces discoverability of settings
|
||||
- Adds an extra interaction before upload
|
||||
- Makes subtitle default preview less immediately useful
|
||||
|
||||
### Option C: Multi-step wizard
|
||||
|
||||
Split upload and settings into separate steps.
|
||||
|
||||
**Pros**
|
||||
|
||||
- Very clear progressive flow
|
||||
- Maximum focus per step
|
||||
|
||||
**Cons**
|
||||
|
||||
- Changes the product flow more than requested
|
||||
- Adds more navigation state
|
||||
- Unnecessary for the current page complexity
|
||||
|
||||
### Recommendation
|
||||
|
||||
Use **Option A**. It fixes the visibility problem without changing the product's mental model.
|
||||
|
||||
## Architecture
|
||||
|
||||
### Page Shell
|
||||
|
||||
Replace the current `h-screen` centered flex shell with a top-aligned `min-h-screen` workbench container. The page should use:
|
||||
|
||||
- a lightweight header area with page title, support copy, and language switcher
|
||||
- a responsive content grid for the upload page body
|
||||
- natural document scrolling instead of forcing the full screen height
|
||||
|
||||
This removes the clipping pressure caused by vertical centering and fixed-height layout assumptions.
|
||||
|
||||
### Responsive Grid
|
||||
|
||||
The main upload page body should use a grid with these rules:
|
||||
|
||||
- large desktop: two columns with a wide primary upload column and a narrower settings column
|
||||
- medium desktop: still two columns, but with reduced gap and a flexible sidebar width
|
||||
- tablet and below: a single-column stack with the upload card first and the settings cards below
|
||||
|
||||
Implementation should avoid fixed-width overflow by:
|
||||
|
||||
- using `minmax(...)` for the sidebar column instead of a hard-coded width
|
||||
- adding `min-w-0` to grid children so nested content can shrink safely
|
||||
- limiting card internals rather than the full page height
|
||||
|
||||
### Visual Hierarchy
|
||||
|
||||
The page should read as a workbench with one primary action and three supporting settings groups:
|
||||
|
||||
1. Upload area
|
||||
2. Mode selection
|
||||
3. Subtitle defaults
|
||||
4. Language and dubbing settings
|
||||
|
||||
The upload card becomes the visual anchor of the page. The settings column becomes a structured sidebar of related control cards rather than a tall wall of similar white panels.
|
||||
|
||||
### Header
|
||||
|
||||
Move the language switcher into a clear page header that also introduces the page. The header should include:
|
||||
|
||||
- a concise title
|
||||
- one sentence explaining the workflow
|
||||
- the existing bilingual switcher aligned to the right on larger screens and wrapping naturally on smaller screens
|
||||
|
||||
This removes the current disconnected top-right floating control feeling.
|
||||
|
||||
## Layout Composition
|
||||
|
||||
### Upload Card
|
||||
|
||||
The upload card should be the largest surface in the page. It contains:
|
||||
|
||||
- a strong heading and short instruction copy
|
||||
- the drag-and-drop / click target
|
||||
- supported format text
|
||||
- optional contextual mode summary
|
||||
|
||||
The invisible file input should still power the interaction, but the visible button and dropzone should feel like one unified action surface.
|
||||
|
||||
### Mode Card
|
||||
|
||||
Keep the two work modes, but restyle them as a cleaner segmented card section:
|
||||
|
||||
- each option uses consistent spacing and iconography
|
||||
- selected state is obvious through background, border, and copy contrast
|
||||
- the section remains compact enough for narrower widths
|
||||
|
||||
### Subtitle Defaults Card
|
||||
|
||||
Preserve the existing subtitle preview and sliders, but make the card more compact and better balanced:
|
||||
|
||||
- preview area becomes shorter vertically
|
||||
- reset action remains in the header
|
||||
- control spacing is tightened
|
||||
- the preview remains visually useful without dominating the sidebar
|
||||
|
||||
### Language and Dubbing Card
|
||||
|
||||
Keep subtitle language and TTS language selection in one grouped card. The card should:
|
||||
|
||||
- present subtitle language as read-only contextual information
|
||||
- keep the alphabet/popular tabs compact
|
||||
- constrain the language list with internal scrolling
|
||||
- pin the primary action button near the bottom of the card flow
|
||||
|
||||
On desktop, the settings column should use `sticky` behavior so the user can keep context while scrolling the page.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Large Desktop
|
||||
|
||||
- two-column layout
|
||||
- upload card and settings sidebar visible simultaneously
|
||||
- settings sidebar can remain sticky
|
||||
|
||||
### Medium Desktop
|
||||
|
||||
- still two columns
|
||||
- reduced outer padding and inter-column gap
|
||||
- sidebar width narrows within safe limits
|
||||
|
||||
### Narrow Desktop / Tablet
|
||||
|
||||
- single-column stack
|
||||
- upload card first
|
||||
- settings cards follow underneath
|
||||
- sticky behavior disabled
|
||||
|
||||
### Mobile-Like Widths
|
||||
|
||||
Although the current use case is desktop-heavy, the layout should remain readable:
|
||||
|
||||
- all cards become full-width
|
||||
- header content wraps cleanly
|
||||
- button actions span full width where helpful
|
||||
- no content should overflow horizontally
|
||||
|
||||
## Interaction Details
|
||||
|
||||
### Primary Action Clarity
|
||||
|
||||
There should be one clearly dominant action:
|
||||
|
||||
- before a file is selected, the upload surface is primary
|
||||
- after a file is prepared, the final "Generate Translated Video" action remains the strongest button in the settings flow
|
||||
|
||||
The redesign should reduce the feeling of multiple competing calls to action.
|
||||
|
||||
### Scroll Ownership
|
||||
|
||||
The full page should scroll naturally. Only the TTS language list should own an internal scroll region. The page should avoid nested full-height scroll containers competing with each other.
|
||||
|
||||
### Behavior Preservation
|
||||
|
||||
The redesign must not change:
|
||||
|
||||
- the `onUpload(...)` contract
|
||||
- subtitle default values or payload structure
|
||||
- selected TTS language mapping
|
||||
- trim modal flow
|
||||
|
||||
## Testing Strategy
|
||||
|
||||
Add or update tests to cover:
|
||||
|
||||
- the upload page structure still renders all core controls after the redesign
|
||||
- the language switcher remains available from the upload page shell
|
||||
- subtitle preview still reflects size and bottom-offset changes
|
||||
- upload confirmation still forwards the same payload values
|
||||
|
||||
Because responsive behavior is mostly CSS-driven, automated tests should focus on stable structural markers and interaction continuity. Final visual validation should also include a manual browser check across multiple viewport widths.
|
||||
|
||||
## Out of Scope
|
||||
|
||||
This redesign does not include:
|
||||
|
||||
- changing the upload-to-editor workflow
|
||||
- adding new subtitle styling options
|
||||
- changing supported languages
|
||||
- redesigning the editor screen
|
||||
- altering backend request contracts
|
||||
|
||||
## Rollout Notes
|
||||
|
||||
This work should remain contained to the upload experience and its tests. The main success criterion is simple: at the viewport width shown in the reported issue, the right-side controls must remain fully accessible without horizontal clipping, while the overall page looks more intentional and usable.
|
||||
Loading…
x
Reference in New Issue
Block a user