Layout work, not a colour pass. DictationPage's existing 1 282-LOC
structure stays untouched for v0.2; under quietware a new layout
renders via LumotiaPageSkeleton with five zones matching the mockup:
Capture header large Record + status + secondary support + timer + pill
Slim notice info-classed browser-preview or danger-classed errors
Primary surface calm transcript canvas with empty-state typography
Action bar Copy / Save / Extract Tasks / Template / Open Viewer
Mono metadata Smart · model · Local-only or Browser-preview
Implementation pattern. Gated {#if isQuietware} branch inside the
existing {#if needsDownload}{:else} structure. The new layout
subscribes to ALL existing state bindings (page.recording,
page.timerText, transcript, error, tauriRuntimeAvailable, modelLoading,
settings.*, etc.) and reuses every existing handler:
toggleRecording, copyAll, saveTypedText, manualExtractTasks,
applyTemplate, invoke("open_viewer_window")
v0.2 surface unchanged — when data-design="quietware" is absent the
existing control-strip / toolbar / post-capture-card layout renders
as before.
Capture-header.
- Record button (72 px circular) carries the role-correct
--button-record-bg (red). Recording state pulses; modelLoading
shows spinner; non-Tauri state neutral-disabled.
- Status text uses Young Serif italic. Four states map to
"Ready to capture" / "Loading model" / "Desktop preview mode"
/ "Recording…".
- Secondary support text in Work Sans body weight, adapts per state.
- Timer in JetBrains Mono tabular-nums, right aligned.
- Status pill appears when useful (recording / transcribing / ready).
Slim notice.
- Browser-preview renders LumotiaNotice tone="info" slim dismissible
with the friendly Phase 5b copy.
- Real errors render tone="danger" slim dismissible.
- Slot stays empty otherwise — no permanent banner clutter.
Transcript surface.
- Empty state: 56-px Mic icon, Young Serif italic
"Talk now, think later.", Work Sans support "Press record, or
Ctrl+Shift+R." Centred, low-emphasis tertiary text on the calm
card surface.
- Populated: scrollable transcript at the user's accessibility
transcript-size preference.
Bottom action bar.
- Copy (tertiary), Save (primary blue), Extract Tasks (secondary),
Template (secondary, applies templates[0] when present), Open
Viewer (secondary, gated on Tauri).
- All disabled until transcript has content. Disabled controls
render neutral with no wireline per the Phase 4k token contract.
Mono metadata footer.
- Left: "Smart · {model} · Local only" or "Browser preview".
- Right: "{formatMode} · {activeProfile}".
- JetBrains Mono, text-tertiary, single line, below the action bar.
What's preserved (no behaviour change).
- Recording events, hotkey listeners (lumotia:toggle-recording).
- Tauri runtime branching (tauriRuntimeAvailable, browser-preview state).
- Live preview hooks (emit("preview-listening") etc.).
- Task extraction (manualExtractTasks -> extractTasksForTranscript).
- Template apply (applyTemplate(template)).
- Copy / Save paths (copyAll, saveTypedText).
- All existing state bindings on page.*, settings.*, prefs.*.
Out of scope for this commit (queued for follow-up).
- Files / Tasks / History page migrations (Phases 5d-5f).
- Real Lumotia wordmark / icon integration (Phase 6).
- Motion audit (Phase 7).
- Full Template-picker menu (currently auto-applies templates[0]).
Verified.
- npm run check: 0 errors, 0 warnings across 5707 files.
- Headless-Chromium screenshots confirm the new layout renders
correctly in quietware-dark and quietware-light with the
disabled-record state (Tauri APIs absent in browser preview),
slim info notice, and empty-state typography.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Jake
4de3acd426