245 lines
8.3 KiB
Markdown
245 lines
8.3 KiB
Markdown
# 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.
|