# 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.