From ce784e58ab8ae4d051c4891901e804eb91889389 Mon Sep 17 00:00:00 2001 From: Jake Date: Fri, 15 May 2026 17:14:31 +0100 Subject: [PATCH] v0.3 Phase 5c polish: tighter header, disabled-record clarity, softer notice, attached action bar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/lib/pages/DictationPage.svelte | 172 +++++++++++++++-------------- src/lib/ui/LumotiaNotice.svelte | 4 +- 2 files changed, 90 insertions(+), 86 deletions(-) diff --git a/src/lib/pages/DictationPage.svelte b/src/lib/pages/DictationPage.svelte index 09713b3..9ad6a1a 100644 --- a/src/lib/pages/DictationPage.svelte +++ b/src/lib/pages/DictationPage.svelte @@ -953,59 +953,60 @@ The v0.2 path stays unchanged for non-quietware users. ================================================================= --> - + {#snippet header()} -
- -
-

- {#if page.recording}Recording… - {:else if modelLoading}Loading model - {:else if !tauriRuntimeAvailable}Desktop preview mode - {:else}Ready to capture +
+ +
+

-

- {#if page.recording}Press to stop, or use the global hotkey. - {:else if modelLoading}One moment. - {:else if !tauriRuntimeAvailable}Local transcription needs the Lumotia desktop app. - {:else}Press record, or Ctrl+Shift+R. - {/if} -

+ +
+

+ {#if page.recording}Recording… + {:else if modelLoading}Loading model + {:else if !tauriRuntimeAvailable}Desktop preview mode + {:else}Ready to capture + {/if} +

+

+ {#if page.recording}Press to stop, or use the global hotkey. + {:else if modelLoading}One moment. + {:else if !tauriRuntimeAvailable}Local transcription needs the Lumotia desktop app. + {:else}Press record, or Ctrl+Shift+R. + {/if} +

+
-
+
{page.timerText || "00:00"}
- {#if page.recording} - - {:else if modelLoading} - - {:else if tauriRuntimeAvailable} - - {/if}
{/snippet} @@ -1022,47 +1023,48 @@ {/snippet} {#snippet primary()} -
- {#if !transcript.trim()} -
-
- {:else} -
{transcript}
- {/if} -
- {/snippet} - - {#snippet actionBar()} -
- Copy - Save - Extract Tasks - { if (templates.length > 0) applyTemplate(templates[0]); }} - title={templates.length === 0 ? "No templates configured" : `Apply ${templates[0].name}`} - >Template - invoke("open_viewer_window").catch(() => {})} - >Open Viewer +
+ +
+ {#if !transcript.trim()} +
+
+ {:else} +
{transcript}
+ {/if} +
+
+ Copy + Save + Extract Tasks + { if (templates.length > 0) applyTemplate(templates[0]); }} + title={templates.length === 0 ? "No templates configured" : `Apply ${templates[0].name}`} + >Template + invoke("open_viewer_window").catch(() => {})} + >Open Viewer +
{/snippet} {#snippet metadata()} -
- Smart · {settings.modelSize} · {tauriRuntimeAvailable ? "Local only" : "Browser preview"} - {settings.formatMode} · {page.activeProfile === "None" ? "No profile" : page.activeProfile} +
+ {settings.formatMode} · {settings.modelSize} · {tauriRuntimeAvailable ? "Local only" : "Browser preview"} · {page.activeProfile === "None" ? "No profile" : page.activeProfile}
{/snippet} diff --git a/src/lib/ui/LumotiaNotice.svelte b/src/lib/ui/LumotiaNotice.svelte index 901d36f..ba8c7ad 100644 --- a/src/lib/ui/LumotiaNotice.svelte +++ b/src/lib/ui/LumotiaNotice.svelte @@ -118,7 +118,9 @@ role={ariaRole} class="rounded-r-lg rounded-l-sm border border-l-4 text-[13px] flex gap-2.5 {slim ? 'px-3 py-2 items-center' : 'px-4 py-3 items-start'} - {tonePal.bar} {tonePal.border} {tonePal.bg} {counterline ? tonePal.shadow : ''} {classes}" + {tonePal.bar} + {slim ? 'border-border-subtle' : tonePal.border} + {tonePal.bg} {counterline ? tonePal.shadow : ''} {classes}" >