From 967f20f629604e5e38abc471b3da4eb7ea965b76 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Fri, 15 May 2026 18:27:13 +0100
Subject: [PATCH] v0.3 Phase 5d refinements: title case + contained drop zone +
 central Browse + quieter dock
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Polish pass on Files per round-13 feedback. Four small refinements,
no colour exploration, no structural restructure.

1. Title case.

  "File transcription" -> "File Transcription". Sets the convention
  for future page titles (Tasks, History, Settings will follow).

2. Contained drop zone.

  Was: flex-1 dashed zone fills entire primary surface, reads as
  one vast empty void.

  Now: outer flex container centres a max-w-2xl + min-h-280px
  dashed card inside the primary surface. The primary surface
  retains its boundary; the drop target sits inside it with
  breathing room rather than dominating the whole panel.

3. Central Browse Files in the empty state.

  Added a primary blue Browse Files button directly under the
  support line. Empty state reads:

    [Upload icon]
    Drop an audio file.
    Or browse from your computer.
    [Browse Files]
    MP3 · WAV · M4A · MP4 · FLAC · OGG

  This is the primary browse affordance now; the action dock's
  Browse Files button moves to secondary so the two buttons do
  not compete for attention. Both still work — one is centred in
  the empty state, the other lives in the dock for once-a-file-
  is-loaded re-entry.

4. Quieter disabled dock actions.

  Export was reading too prominent in light mode while disabled.
  Variant logic now:
    - When no transcript: Export = tertiary disabled (low emphasis)
    - When transcript exists: Export = primary blue
  Copy stays tertiary throughout.
  Browse Files stays secondary in the dock (primary lives in empty
  state).

Compile clean: npm run check 0 errors / 0 warnings / 5707 files.

State screenshots captured separately (committed as no-op mock
changes that revert before this commit — see captures in email):

  files_EMPTY__quiet-{dark,light}      contained drop zone
  files_TRANSCRIBING__quiet-{dark,light}  Upload + filename + blue progress
  files_COMPLETE__quiet-{dark,light}    transcript textarea + Export
                                          primary blue + Copy enabled

Phase 5d Files is now complete. Phase 5f (History) is next per
Jake's direction.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/pages/FilesPage.svelte | 48 +++++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/lib/pages/FilesPage.svelte b/src/lib/pages/FilesPage.svelte
index 75aef89..254de44 100644
--- a/src/lib/pages/FilesPage.svelte
+++ b/src/lib/pages/FilesPage.svelte
@@ -214,7 +214,7 @@
     <LumotiaPageSkeleton>
       {#snippet header()}
         <div>
-          <h1 class="text-[18px] font-medium text-text leading-tight">File transcription</h1>
+          <h1 class="text-[18px] font-medium text-text leading-tight">File Transcription</h1>
           <p class="text-[12px] text-text-secondary mt-0.5">Transcribe audio files locally.</p>
         </div>
       {/snippet}
@@ -246,19 +246,27 @@
                 </div>
               </div>
             {:else if !fileTranscript}
-              <!-- Empty state: drop zone -->
-              <div
-                class="flex-1 flex flex-col items-center justify-center text-center gap-3 rounded-xl border-2 border-dashed transition-colors duration-150
-                  {isDragOver
-                    ? 'border-[var(--button-primary-bg)] bg-[var(--color-info-bg)]'
-                    : 'border-border-subtle text-text-tertiary'}"
-                role="region"
-                aria-label="Audio file drop zone"
-              >
-                <Upload size={56} class="opacity-50" aria-hidden="true" />
-                <p class="font-display italic text-[28px] text-text">Drop an audio file.</p>
-                <p class="text-[14px] text-text-secondary">Or use Browse files in the action bar.</p>
-                <p class="text-[12px] text-text-tertiary mt-2 font-mono">MP3 · WAV · M4A · MP4 · FLAC · OGG</p>
+              <!-- Empty state: drop zone. Contained within the primary
+                   surface so it doesn't read as one vast empty void. -->
+              <div class="flex-1 flex items-center justify-center">
+                <div
+                  class="w-full max-w-2xl min-h-[280px] flex flex-col items-center justify-center text-center gap-3 px-8 py-10 rounded-xl border-2 border-dashed transition-colors duration-150
+                    {isDragOver
+                      ? 'border-[var(--button-primary-bg)] bg-[var(--color-info-bg)]'
+                      : 'border-border-subtle text-text-tertiary'}"
+                  role="region"
+                  aria-label="Audio file drop zone"
+                >
+                  <Upload size={48} class="opacity-50" aria-hidden="true" />
+                  <p class="font-display italic text-[26px] text-text">Drop an audio file.</p>
+                  <p class="text-[13px] text-text-secondary">Or browse from your computer.</p>
+                  <div class="mt-2">
+                    <LumotiaButton variant="primary" size="sm" disabled={transcribing} onclick={handleBrowse}>
+                      Browse Files
+                    </LumotiaButton>
+                  </div>
+                  <p class="text-[11px] text-text-tertiary mt-3 font-mono">MP3 · WAV · M4A · MP4 · FLAC · OGG</p>
+                </div>
               </div>
             {:else}
               <!-- Transcript display -->
@@ -273,14 +281,18 @@
             {/if}
           </div>
 
-          <!-- Action dock attached to the surface. -->
+          <!-- Action dock attached to the surface. Browse Files stays
+               available as a secondary entry once a file is selected
+               (the empty state's central Browse button is the primary
+               browse affordance). Copy / Export are tertiary and very
+               quiet until transcript content exists. -->
           <div class="flex items-center gap-2 justify-end px-6 py-3 border-t border-border-subtle bg-bg-elevated/40">
             <LumotiaButton
-              variant={fileTranscript ? "secondary" : "primary"}
+              variant="secondary"
               size="sm"
               disabled={transcribing}
               onclick={handleBrowse}
-            >Browse files</LumotiaButton>
+            >Browse Files</LumotiaButton>
             <LumotiaButton variant="tertiary" size="sm" onclick={copyAll} disabled={!fileTranscript}>Copy</LumotiaButton>
             <LumotiaMenu
               align="start"
@@ -294,7 +306,7 @@
               ]}
             >
               {#snippet trigger()}
-                <LumotiaButton variant={fileTranscript ? "primary" : "secondary"} size="sm" disabled={!fileTranscript}>Export</LumotiaButton>
+                <LumotiaButton variant={fileTranscript ? "primary" : "tertiary"} size="sm" disabled={!fileTranscript}>Export</LumotiaButton>
               {/snippet}
             </LumotiaMenu>
           </div>