jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.3 Phase 5d refinements: title case + contained drop zone + central Browse + quieter dock

Browse Source 
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>
This commit is contained in:
Jake
2026-05-15 18:27:13 +01:00
parent f311fdc47f
commit 967f20f629
1 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/lib/pages/FilesPage.svelte
View File

@@ -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 -->
<!-- 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="flex-1 flex flex-col items-center justify-center text-center gap-3 rounded-xl border-2 border-dashed transition-colors duration-150
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={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>
<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>