transcript/docs/superpowers/plans/2026-07-11-minimalist-front.md

Minimalist Front Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Make the Transcript desktop UI quieter, more minimal, and better organized without adding dependencies.

Architecture: Keep the current vanilla TypeScript DOM structure. Use the shortest safe path: CSS cleanup/overrides, small copy changes, and one keyboard behavior fix. No component split in this pass.

Tech Stack: Tauri, TypeScript, Vite, Vitest, CSS.

---

Task 1: Regression tests

Files:

• Modify: src/app.test.ts

• Add tests for Escape closing settings and minimalist CSS baseline.

• Run npm test -- --run src/app.test.ts --reporter=verbose; expect new tests to fail before implementation.

Task 2: Behavior and copy polish

Files:

• Modify: src/app.ts

• Add Escape handling to close the settings modal.

• Rename technical settings labels to calmer user-facing labels.

Task 3: Minimal visual pass

Files:

• Modify: src/styles.css

• Fix the invalid height: 100dvh declaration.

• Hide ambient decoration.

• Flatten shell, topbar, buttons, editor, settings, and dictation overlay.

• Keep reduced motion and existing accessibility styles.

Task 4: Verification

Files:

• Read-only verification.

• Run npm test -- --run.

• Run npm run build.

• Run cargo check --manifest-path src-tauri/Cargo.toml through VS Build Tools environment.