Jake ce784e58ab v0.3 Phase 5c polish: tighter header, disabled-record clarity, softer notice, attached action bar ...

Focused polish pass on the Dictation quietware layout per round-10
feedback. No colour exploration; only the eight specific tweaks.

1. Capture header tightened.

  Record button + status block now grouped in their own flex
  container (gap-3) so they read as one capture component. Record
  size dropped from 72px to 64px so the group balances against the
  status text. Timer pushed to far right via flex-1 on the inner
  group. The trio (record / status / timer) feels like one unit.

2. Disabled Record affordance now reads as record.

  Browser-preview state no longer renders as a neutral grey blob.
  Instead:

    bg-transparent
    border-2 border-[color-mix(in_srgb,var(--button-record-bg)_45%,
                                transparent)]
    opacity-80
    cursor-not-allowed
    inner muted-red dot bg-[color-mix(in_srgb,var(--button-record-bg)
                                       _55%,transparent)]

  Result: clearly a record control, clearly disabled, doesn't look
  clickable. aria-label updated to "Record (desktop app only)" in
  that state so screen readers carry the same message.

3. Slim notice border softened.

  LumotiaNotice slim variant now uses border-border-subtle for the
  outer border instead of the role-coloured border. Left bar stays
  full role colour (the visible signal). Icon stays role colour.
  Background stays at the role tinted bg. Net effect: notice is
  ambient, not loud.

4. Action bar attached to transcript surface.

  Dropped the LumotiaPageSkeleton actionBar slot for Dictation;
  moved the buttons into the primary snippet as a bottom row inside
  the same surface. Internal border-t + bg-bg-elevated/40 separator
  keeps it visually nested. Reads as transcript actions, not a
  generic page footer.

  Also dropped primaryBleed so LumotiaPageSkeleton's default card
  chrome wraps the transcript + action dock together — that gives
  the surface boundary Jake asked for in light mode without
  introducing a card-heavy treatment.

5. Compact one-line metadata footer.

  Was: "Smart · {model} · Local only"  +  "{formatMode} · {profile}"
  Now: "{formatMode} · {model} · Local only / Browser preview · {profile}"

  Right-aligned. Single line. No duplicated "Smart". JetBrains Mono
  via the existing --font-family-mono. text-tertiary.

6. Typography corrected.

  Status title moved from Young Serif italic (font-display) to Work
  Sans medium-weight (default body). Young Serif italic is now
  reserved for the empty-state "Talk now, think later." line, which
  remains the only emotional moment in the page.

7. Light mode surface intentional.

  By dropping primaryBleed the skeleton's default surface chrome
  (bg-bg-card + border-border-subtle + rounded-lg) wraps the
  transcript canvas. Light mode now reads as a deliberate paper
  surface, not an open page. Same boundary applies in dark.

8. Colour restraint preserved.

  No token changes. Same red/blue/green/yellow/orange grammar.
  Wireline contract unchanged. Brand orange still reserved for
  logo/identity.

Verified.

  - npm run check: 0 errors, 0 warnings across 5707 files.
  - Headless screenshots confirm both quietware modes deliver the
    polish: tight header, recognisable disabled-record, softer
    notice border, attached action dock, compact metadata,
    Work Sans status title, clear surface boundary.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-15 17:14:31 +01:00

5.8 KiB

Raw Blame History

View Raw