From 57786961400e14f32455cbd2235212b44f217dfb Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Thu, 7 May 2026 10:49:37 +0100
Subject: [PATCH] feat(dictation): surface "Talk now, think later" empty state
 and hide post-transcript actions

Reduces first-run cognitive load. Save / Copy / Clear / Export now appear only
once the user has a transcript or is recording, sliding in via animate-fade-in
(brand --duration-ui + ease-out-quart). Template and Extract Tasks remain
always-visible because they shape transcription rather than acting on completed
content.

Empty state now leads with the catchphrase as a brand statement
(font-display italic 28px) with the hotkey hint demoted to body-font tertiary.
EmptyState gains an optional headline prop; callers without it render unchanged.
---
 src/lib/components/EmptyState.svelte | 13 ++++--
 src/lib/pages/DictationPage.svelte   | 67 +++++++++++++++-------------
 2 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/EmptyState.svelte b/src/lib/components/EmptyState.svelte
index 43e0e25..5842092 100644
--- a/src/lib/components/EmptyState.svelte
+++ b/src/lib/components/EmptyState.svelte
@@ -1,12 +1,17 @@
 <script>
-  let { icon: Icon = null, message = '', actionLabel = '', onAction = null } = $props();
+  let { icon: Icon = null, headline = '', message = '', actionLabel = '', onAction = null } = $props();
 </script>
 
-<div class="flex flex-col items-center justify-center gap-4 py-16 text-text-secondary">
+<div class="flex flex-col items-center justify-center gap-3 py-16 text-text-secondary">
   {#if Icon}
-    <Icon size={48} strokeWidth={1} class="opacity-40" aria-hidden="true" />
+    <Icon size={48} strokeWidth={1} class="opacity-40 mb-1" aria-hidden="true" />
+  {/if}
+  {#if headline}
+    <p class="font-display italic text-[28px] text-text text-center leading-tight">{headline}</p>
+  {/if}
+  {#if message}
+    <p class="text-center max-w-xs leading-relaxed {headline ? 'text-text-tertiary' : ''}">{message}</p>
   {/if}
-  <p class="text-center max-w-xs leading-relaxed">{message}</p>
   {#if actionLabel && onAction}
     <button onclick={onAction}
       class="px-4 py-2 rounded-lg bg-accent text-bg text-sm font-medium hover:bg-accent-hover"
diff --git a/src/lib/pages/DictationPage.svelte b/src/lib/pages/DictationPage.svelte
index a26f24e..6210d9d 100644
--- a/src/lib/pages/DictationPage.svelte
+++ b/src/lib/pages/DictationPage.svelte
@@ -705,6 +705,7 @@
   }
 
   let taskCount = $derived(tasks.filter((t) => !t.done).length);
+  let hasTranscript = $derived(transcript.trim().length > 0);
 
   let wordCount = $derived.by(() => {
     const trimmed = transcript.trim();
@@ -937,37 +938,41 @@
         onclick={manualExtractTasks}
         disabled={aiProcessing || !transcript.trim()}
       >{aiProcessing ? "Extracting..." : "Extract Tasks"}</button>
-      <span class="w-px h-4 bg-border-subtle flex-shrink-0"></span>
-      <button
-        class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap
-          {!transcript.trim() ? 'opacity-40 cursor-default' : ''}"
-        onclick={saveTypedText}
-        disabled={!transcript.trim()}
-      >Save</button>
-      <button
-        class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap"
-        onclick={copyAll}
-      >Copy</button>
-      <button
-        class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap"
-        onclick={clearTranscript}
-      >Clear</button>
-      <div class="relative flex-shrink-0">
-        <button
-          class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text whitespace-nowrap"
-          onclick={() => { showExportMenu = !showExportMenu; showTemplateMenu = false; }}
-        >Export</button>
-        {#if showExportMenu}
-          <div class="absolute right-0 top-full mt-1 bg-bg-card border border-border rounded-lg shadow-lg py-1 z-10 animate-fade-in min-w-[120px]">
-            {#each [["txt", "Plain Text"], ["md", "Markdown"], ["csv", "CSV"], ["html", "HTML"], ["srt", "SRT Subtitles"], ["vtt", "WebVTT"]] as [fmt, label]}
-              <button
-                class="w-full text-left btn-md text-text-secondary hover:bg-hover hover:text-text"
-                onclick={() => handleExport(fmt)}
-              >{label}</button>
-            {/each}
+      {#if hasTranscript || page.recording}
+        <div class="flex items-center gap-1 animate-fade-in">
+          <span class="w-px h-4 bg-border-subtle flex-shrink-0"></span>
+          <button
+            class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap
+              {!transcript.trim() ? 'opacity-40 cursor-default' : ''}"
+            onclick={saveTypedText}
+            disabled={!transcript.trim()}
+          >Save</button>
+          <button
+            class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap"
+            onclick={copyAll}
+          >Copy</button>
+          <button
+            class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap"
+            onclick={clearTranscript}
+          >Clear</button>
+          <div class="relative flex-shrink-0">
+            <button
+              class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text whitespace-nowrap"
+              onclick={() => { showExportMenu = !showExportMenu; showTemplateMenu = false; }}
+            >Export</button>
+            {#if showExportMenu}
+              <div class="absolute right-0 top-full mt-1 bg-bg-card border border-border rounded-lg shadow-lg py-1 z-10 animate-fade-in min-w-[120px]">
+                {#each [["txt", "Plain Text"], ["md", "Markdown"], ["csv", "CSV"], ["html", "HTML"], ["srt", "SRT Subtitles"], ["vtt", "WebVTT"]] as [fmt, label]}
+                  <button
+                    class="w-full text-left btn-md text-text-secondary hover:bg-hover hover:text-text"
+                    onclick={() => handleExport(fmt)}
+                  >{label}</button>
+                {/each}
+              </div>
+            {/if}
           </div>
-        {/if}
-      </div>
+        </div>
+      {/if}
     </div>
 
     <!-- Template indicator -->
@@ -1008,7 +1013,7 @@
           </div>
         {:else if !transcript.trim() && !page.recording && !transcribing}
           <div class="flex-1 flex items-center justify-center">
-            <EmptyState icon={Mic} message={`Press record or ${settings.globalHotkey}`} />
+            <EmptyState icon={Mic} headline="Talk now, think later." message={`Press record, or ${settings.globalHotkey}.`} />
           </div>
           <textarea
             bind:this={textareaEl}