Final small refinements on Dictation per round-11 feedback before
moving to Files/Tasks/History.
1. Vertical rhythm tightened.
LumotiaPageSkeleton header padding pt-5 pb-3 -> pt-3 pb-2.
Notice padding pt-3 -> pt-2.
Primary surface area pt-5 pb-3 -> pt-3 pb-2.
DictationPage primary inner py-8 -> py-6.
Net: about 16 px shaved off the top band. Transcript canvas
begins higher, no longer feels like a large header above empty
space.
2. Disabled actions go neutral when there is nothing to act on.
Save button variant is now conditional:
variant={transcript.trim() ? "primary" : "secondary"}
Previously Save kept the blue primary fill even when disabled.
Disabled blue under 50% opacity still read as a strong primary
cue. Now: no transcript = neutral secondary; transcript exists
= primary blue. Other actions (Copy / Extract / Template / Open
Viewer) stay neutral regardless and become enabled when
transcript exists.
3. Light-mode transcript surface gains a tactile paper edge.
LumotiaPageSkeleton primary surface gains:
shadow-[inset_0_1px_0_rgba(0,0,0,0.05)]
Subtle 1-px inset top shadow at 5% opacity. Invisible in dark
mode (against the dark surface), visible in light mode as a
faint paper edge. Skeleton-wide because it costs nothing in
dark and adds the warmth Jake asked for in light.
4. Ambient info notice nested inside transcript surface.
Browser-preview notice + real-error notice now render INSIDE
the transcript card via the primary snippet, not in the
skeleton's notice slot. Renders contained at the top of the
card rather than as a full-width page banner. The notice slot
on LumotiaPageSkeleton stays available for blocking/error-
banner cases on other pages.
5. Mock-ready screenshot delivered.
Captured two new screenshot pairs:
root_PREVIEW__quiet-{dark,light}.png browser-preview state
root_READY__quiet-{dark,light}.png mocked Tauri-available
Mock done by temporarily setting tauriRuntimeAvailable = true
for the capture run, then reverted to hasTauriRuntime() at
commit time. The headless context still has no real Tauri
runtime so the model-check call fails — that surfaces as a
danger-tone slim notice in the ready screenshots, which
happens to demonstrate the danger-slim notice rendering
alongside the enabled red Record button.
In the real Tauri desktop app the danger notice would not
appear; only the Record (red), empty-state typography, and
bottom action dock with all-disabled neutral controls would.
Verified.
- npm run check: 0 errors, 0 warnings across 5707 files.
No colour exploration. No new tokens. Same red/blue/green/yellow/
orange grammar from Phase 4k.
Phase 5c is now complete. Next focused commits: 5d (Files), 5e
(Tasks), 5f (History), then Phase 6 (icon — waiting on SVG) and
Phase 7 (motion audit).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Jake
48685f9dda