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.