From 927069101223934f613fec74b505501a1ace2a9c Mon Sep 17 00:00:00 2001
From: Song367 <601337784@qq.com>
Date: Sat, 21 Mar 2026 12:38:48 +0800
Subject: [PATCH] docs: add upload workbench redesign design

---
 ...-03-21-upload-workbench-redesign-design.md | 244 ++++++++++++++++++
 1 file changed, 244 insertions(+)
 create mode 100644 docs/plans/2026-03-21-upload-workbench-redesign-design.md

diff --git a/docs/plans/2026-03-21-upload-workbench-redesign-design.md b/docs/plans/2026-03-21-upload-workbench-redesign-design.md
new file mode 100644
index 0000000..6d791a2
--- /dev/null
+++ b/docs/plans/2026-03-21-upload-workbench-redesign-design.md
@@ -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.