remotion_service/docs/superpowers/specs/2026-04-04-subtitle-revision-workspace-design.md

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.