v0.3 Phase 5c refinements: spacing, nested notice, conditional Save variant, paper edge

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>
This commit is contained in:
2026-05-15 17:44:01 +01:00
parent ce784e58ab
commit 48685f9dda
2 changed files with 32 additions and 18 deletions

View File

@@ -1010,24 +1010,29 @@
</div>
{/snippet}
{#snippet notice()}
{#if error === browserPreviewMessage}
<LumotiaNotice tone="info" slim dismissible onDismiss={() => { error = ""; errorDetail = ""; }}>
{browserPreviewSlim}
</LumotiaNotice>
{:else if error}
<LumotiaNotice tone="danger" slim dismissible onDismiss={() => { error = ""; errorDetail = ""; }}>
{error}
</LumotiaNotice>
{/if}
{/snippet}
{#snippet primary()}
<div class="h-full flex flex-col">
<!-- v0.3 Phase 5c polish: ambient info notice nested INSIDE
the transcript surface. Browser preview is contextual to
the capture surface, not a page-level banner. Real
errors still render here with danger tone. -->
{#if error === browserPreviewMessage}
<div class="px-6 pt-4">
<LumotiaNotice tone="info" slim dismissible onDismiss={() => { error = ""; errorDetail = ""; }}>
{browserPreviewSlim}
</LumotiaNotice>
</div>
{:else if error}
<div class="px-6 pt-4">
<LumotiaNotice tone="danger" slim dismissible onDismiss={() => { error = ""; errorDetail = ""; }}>
{error}
</LumotiaNotice>
</div>
{/if}
<!-- Transcript canvas. Action dock below sits inside the same
surface so it reads as transcript actions, not a generic
page footer. -->
<div class="flex-1 flex flex-col px-8 py-8 min-h-0 overflow-hidden">
<div class="flex-1 flex flex-col px-8 py-6 min-h-0 overflow-hidden">
{#if !transcript.trim()}
<div class="flex-1 flex flex-col items-center justify-center text-center gap-4 text-text-tertiary">
<Mic size={56} class="opacity-50" aria-hidden="true" />
@@ -1041,9 +1046,13 @@
>{transcript}</div>
{/if}
</div>
<!-- v0.3 Phase 5c polish: disabled actions stay neutral until
the transcript exists. Save promotes to primary blue only
when there is content to save. Other actions stay
secondary or tertiary regardless. -->
<div class="flex items-center gap-2 justify-end px-6 py-3 border-t border-border-subtle bg-bg-elevated/40">
<LumotiaButton variant="tertiary" size="sm" onclick={copyAll} disabled={!transcript.trim()}>Copy</LumotiaButton>
<LumotiaButton variant="primary" size="sm" onclick={saveTypedText} disabled={!transcript.trim()}>Save</LumotiaButton>
<LumotiaButton variant={transcript.trim() ? "primary" : "secondary"} size="sm" onclick={saveTypedText} disabled={!transcript.trim()}>Save</LumotiaButton>
<LumotiaButton variant="secondary" size="sm" onclick={manualExtractTasks} disabled={!transcript.trim()}>Extract Tasks</LumotiaButton>
<LumotiaButton
variant="secondary"

View File

@@ -51,19 +51,24 @@
<div class="flex flex-col h-full min-h-0 bg-bg {classes}">
{#if header}
<div class="shrink-0 px-7 pt-5 pb-3 border-b border-border-subtle">
<!-- v0.3 Phase 5c polish: tighter vertical rhythm. -->
<div class="shrink-0 px-7 pt-3 pb-2 border-b border-border-subtle">
{@render header()}
</div>
{/if}
{#if notice}
<div class="shrink-0 px-7 pt-3">
<div class="shrink-0 px-7 pt-2">
{@render notice()}
</div>
{/if}
<div class="flex-1 min-h-0 flex {rightRail ? 'gap-5' : ''} px-7 pt-5 pb-3">
<div class="flex-1 min-w-0 {primaryBleed ? '' : 'bg-bg-card border border-border-subtle rounded-lg overflow-hidden'}">
<div class="flex-1 min-h-0 flex {rightRail ? 'gap-5' : ''} px-7 pt-3 pb-2">
<!-- v0.3 Phase 5c polish: subtle inset top-shadow gives the
transcript surface a faint paper edge in light mode. The
shadow's near-zero opacity makes it invisible against the
dark surface — light-only effect by accident of luminance. -->
<div class="flex-1 min-w-0 {primaryBleed ? '' : 'bg-bg-card border border-border-subtle rounded-lg overflow-hidden shadow-[inset_0_1px_0_rgba(0,0,0,0.05)]'}">
{@render primary()}
</div>
{#if rightRail}