From 452693126ccc72a9b569e3cb918fe4e3e3b15309 Mon Sep 17 00:00:00 2001 From: Daniil Date: Sat, 4 Apr 2026 14:54:58 +0300 Subject: [PATCH] docs: add subtitle revision redesign spec --- ...4-04-subtitle-revision-workspace-design.md | 235 ++++++++++++++++++ 1 file changed, 235 insertions(+) create mode 100644 docs/superpowers/specs/2026-04-04-subtitle-revision-workspace-design.md diff --git a/docs/superpowers/specs/2026-04-04-subtitle-revision-workspace-design.md b/docs/superpowers/specs/2026-04-04-subtitle-revision-workspace-design.md new file mode 100644 index 0000000..2e6c3fb --- /dev/null +++ b/docs/superpowers/specs/2026-04-04-subtitle-revision-workspace-design.md @@ -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.