docs: add subtitle revision redesign spec
This commit is contained in:
Daniil
@@ -0,0 +1,235 @@
|
||||
# Subtitle Revision Workspace Redesign
|
||||
|
||||
## Summary
|
||||
|
||||
Redesign the project subtitle-revision step at `/projects/[project_id]` into a more cohesive editorial workspace while staying inside the existing frontend design system.
|
||||
|
||||
The current screen works functionally, but it feels assembled from separate widgets:
|
||||
|
||||
- the stepper is visually louder than the actual editor
|
||||
- the player, transcription editor, and timeline feel disconnected
|
||||
- the transcription editor reads like a long raw form instead of a focused editing surface
|
||||
|
||||
The approved direction is a stronger redesign with a balanced desktop split and an editorial/premium tone, while preserving the current tokens, component language, accent color, and overall product identity.
|
||||
|
||||
## Goals
|
||||
|
||||
- Make the subtitle-revision step feel like one composed workspace instead of stacked modules
|
||||
- Keep the player and transcription editor equally important on desktop
|
||||
- Improve hierarchy, spacing, and consistency without introducing a new visual identity
|
||||
- Reduce control noise and make dense editing UI easier to scan
|
||||
- Preserve all existing behavior and workflow transitions
|
||||
|
||||
## Non-Goals
|
||||
|
||||
- No new global design tokens, typography system, or brand palette
|
||||
- No workflow changes to the wizard sequence
|
||||
- No API changes
|
||||
- No functional rewrite of the timeline or transcription editor logic
|
||||
- No cross-app redesign outside the stepper and subtitle-revision workspace chrome
|
||||
|
||||
## Constraints
|
||||
|
||||
- Use the current SCSS module approach and existing CSS variables
|
||||
- Keep user-facing copy in Russian
|
||||
- Stay within the existing app design system and Radix/SCSS visual language
|
||||
- Avoid turning the interface into a dense technical studio
|
||||
- Preserve the current balanced desktop split rather than making the player or editor dominant
|
||||
|
||||
## Target Files
|
||||
|
||||
- `cofee_frontend/src/shared/ui/Stepper/Stepper.module.scss`
|
||||
- `cofee_frontend/src/widgets/ProjectWizard/ProjectWizard.module.scss`
|
||||
- `cofee_frontend/src/features/project/SubtitleRevisionStep/SubtitleRevisionStep.tsx`
|
||||
- `cofee_frontend/src/features/project/SubtitleRevisionStep/SubtitleRevisionStep.module.scss`
|
||||
- `cofee_frontend/src/features/project/TranscriptionEditor/TranscriptionEditor.tsx`
|
||||
- `cofee_frontend/src/features/project/TranscriptionEditor/TranscriptionEditor.module.scss`
|
||||
- `cofee_frontend/src/widgets/TimelinePanel/TimelinePanel.module.scss`
|
||||
|
||||
## Existing Problems
|
||||
|
||||
### 1. Weak visual hierarchy
|
||||
|
||||
The page gives too much emphasis to the stepper, while the actual editor workspace lacks a strong shared frame.
|
||||
|
||||
### 2. Fragmented composition
|
||||
|
||||
The player area, editor area, timeline, and footer feel like separate containers placed one after another instead of one coordinated tool surface.
|
||||
|
||||
### 3. Form-heavy transcription editor
|
||||
|
||||
Each segment is structurally correct, but the card styling, spacing, and metadata layout make the editor feel operationally noisy.
|
||||
|
||||
### 4. Inconsistent control density
|
||||
|
||||
The timeline toolbar, transcript actions, and shell spacing do not share a unified rhythm, which makes the screen feel less premium.
|
||||
|
||||
## Design Direction
|
||||
|
||||
### Overall Tone
|
||||
|
||||
Use an editorial/premium interpretation of the current design system:
|
||||
|
||||
- restrained accent usage
|
||||
- clearer spacing rhythm
|
||||
- softer but more intentional panel boundaries
|
||||
- quieter metadata treatment
|
||||
- better grouping of related controls
|
||||
|
||||
The redesign should feel more composed, not more decorative.
|
||||
|
||||
### Desktop Layout
|
||||
|
||||
The subtitle-revision step becomes a single workspace shell with three coordinated layers:
|
||||
|
||||
1. A quieter progress area at the top
|
||||
2. A two-panel main canvas with a balanced split
|
||||
3. A docked timeline rail and stable footer inside the same shell
|
||||
|
||||
The player remains on the left and the transcription editor remains on the right, both with equal visual weight.
|
||||
|
||||
### Responsive Layout
|
||||
|
||||
- Desktop: balanced two-column split
|
||||
- Tablet: same structure with tighter spacing and slightly reduced panel chrome
|
||||
- Mobile: vertical stack in this order: player, editor, timeline, footer
|
||||
|
||||
## Component Changes
|
||||
|
||||
### Stepper
|
||||
|
||||
The stepper remains horizontally scrollable, but it should become less dominant:
|
||||
|
||||
- reduce visual heaviness of active/completed states
|
||||
- rely more on subtle surface contrast and typography than on a saturated filled pill
|
||||
- improve blending with the page shell below
|
||||
- preserve clear progress indication and current auto-centering behavior
|
||||
|
||||
The stepper should read as workflow context rather than the primary visual element.
|
||||
|
||||
### Wizard Shell
|
||||
|
||||
The project wizard content area should gain a more intentional outer structure:
|
||||
|
||||
- introduce a softer page canvas treatment
|
||||
- give the active step a single large rounded workspace surface
|
||||
- align internal padding and spacing across the player, editor, timeline, and footer
|
||||
- keep overflow behavior stable so the editor can scroll without destabilizing the whole page
|
||||
|
||||
### Subtitle Revision Step
|
||||
|
||||
The subtitle-revision step should feel like one editing environment:
|
||||
|
||||
- add compact panel headers for the player and the editor
|
||||
- visually connect the main grid, timeline rail, and footer as one system
|
||||
- keep the video area dark and focused, but frame it with better surrounding chrome
|
||||
- keep the timeline dock clearly separated without looking appended
|
||||
|
||||
Small structural markup changes are allowed where they improve grouping and semantics, but existing logic should remain intact.
|
||||
|
||||
### Transcription Editor
|
||||
|
||||
The transcription editor needs the strongest visual cleanup.
|
||||
|
||||
#### Header
|
||||
|
||||
- add a more informative but still compact header treatment
|
||||
- support a small status cue for auto-save state if useful, but do not introduce noisy persistent status messaging
|
||||
|
||||
#### Segment Cards
|
||||
|
||||
Each segment should read as an editable text block with metadata, not as a generic form section:
|
||||
|
||||
- cleaner top row with timing metadata grouped on one side and actions on the other
|
||||
- timing controls should read like refined chips/fields instead of raw mini-inputs
|
||||
- reduce reliance on uppercase label styling where it hurts readability
|
||||
- increase whitespace and breathing room between segment cards
|
||||
- make highlight/focus states feel intentional and consistent with the existing accent
|
||||
|
||||
#### Text Editing Area
|
||||
|
||||
- textarea should feel more like an editing surface than a default input
|
||||
- improve padding, line-height, and focus treatment
|
||||
- maintain support for inline segment splitting where available
|
||||
|
||||
#### Add Segment Action
|
||||
|
||||
- keep the action at the bottom, but visually connect it to the editor system
|
||||
- use an understated treatment consistent with the workspace instead of a generic dashed box
|
||||
|
||||
### Timeline Panel
|
||||
|
||||
The timeline should remain functionally the same, but its chrome should be refined to match the new shell:
|
||||
|
||||
- calmer toolbar styling
|
||||
- more consistent spacing and border behavior
|
||||
- cleaner label column and zoom controls
|
||||
- visual integration with the docked lower rail
|
||||
|
||||
No new timeline interactions are required.
|
||||
|
||||
## Interaction and Behavior
|
||||
|
||||
### Preserve
|
||||
|
||||
- current wizard navigation behavior
|
||||
- current media player behavior
|
||||
- current transcription loading and auto-save behavior
|
||||
- current segment split/remove/add behavior
|
||||
- current timeline interactions and frame extraction actions
|
||||
- current footer button actions
|
||||
|
||||
### Improve Visually
|
||||
|
||||
- focus states
|
||||
- hover states
|
||||
- selected/highlighted segment appearance
|
||||
- empty/placeholder states inside player/editor panels
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Maintain or improve contrast against current token values
|
||||
- Keep button targets and input hit areas usable at reduced viewport widths
|
||||
- Preserve semantic structure for headings, buttons, and fields
|
||||
- Do not rely on color alone to communicate active/editing state
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
- Prefer CSS and layout changes over component rewrites
|
||||
- Keep edits localized to the subtitle-revision workspace and shared stepper chrome
|
||||
- If markup changes are introduced in `TranscriptionEditor.tsx` or `SubtitleRevisionStep.tsx`, keep them minimal and presentation-driven
|
||||
- Reuse existing spacing, border radius, and color tokens from the current system
|
||||
- Avoid introducing one-off visual rules that imply a new design language
|
||||
|
||||
## Verification
|
||||
|
||||
### Required Checks
|
||||
|
||||
- `cd cofee_frontend && bunx tsc --noEmit`
|
||||
|
||||
### Manual Browser Verification
|
||||
|
||||
Check the target route in Chrome after implementation:
|
||||
|
||||
- `http://localhost:3000/projects/83eb1396-8217-4ceb-ae32-b3b63cd01982`
|
||||
|
||||
Verify:
|
||||
|
||||
- the stepper is calmer but still readable
|
||||
- the workspace reads as one composed shell
|
||||
- the desktop split remains balanced
|
||||
- the transcription editor cards are easier to scan
|
||||
- the timeline feels docked to the workspace
|
||||
- footer actions remain stable and visually integrated
|
||||
- the layout still behaves correctly at a narrower viewport
|
||||
|
||||
## Risks
|
||||
|
||||
- Over-styling the stepper could reduce progress clarity
|
||||
- Styling changes around the Vidstack player may accidentally clip controls
|
||||
- Tightening the editor chrome too aggressively could reduce perceived affordance on timing fields and actions
|
||||
- Timeline integration work could introduce overflow regressions if container boundaries are not kept explicit
|
||||
|
||||
## Rollout Decision
|
||||
|
||||
Proceed as a focused UI redesign of the subtitle-revision workspace only, using the existing design system and preserving all current functionality.
|
||||
Reference in New Issue
Block a user