v0.3 Phase 5d refinements: title case + contained drop zone + central Browse + quieter dock
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:
@@ -214,7 +214,7 @@
|
|||||||
<LumotiaPageSkeleton>
|
<LumotiaPageSkeleton>
|
||||||
{#snippet header()}
|
{#snippet header()}
|
||||||
<div>
|
<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>
|
<p class="text-[12px] text-text-secondary mt-0.5">Transcribe audio files locally.</p>
|
||||||
</div>
|
</div>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
@@ -246,19 +246,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else if !fileTranscript}
|
{:else if !fileTranscript}
|
||||||
<!-- Empty state: drop zone -->
|
<!-- Empty state: drop zone. Contained within the primary
|
||||||
<div
|
surface so it doesn't read as one vast empty void. -->
|
||||||
class="flex-1 flex flex-col items-center justify-center text-center gap-3 rounded-xl border-2 border-dashed transition-colors duration-150
|
<div class="flex-1 flex items-center justify-center">
|
||||||
{isDragOver
|
<div
|
||||||
? 'border-[var(--button-primary-bg)] bg-[var(--color-info-bg)]'
|
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
|
||||||
: 'border-border-subtle text-text-tertiary'}"
|
{isDragOver
|
||||||
role="region"
|
? 'border-[var(--button-primary-bg)] bg-[var(--color-info-bg)]'
|
||||||
aria-label="Audio file drop zone"
|
: 'border-border-subtle text-text-tertiary'}"
|
||||||
>
|
role="region"
|
||||||
<Upload size={56} class="opacity-50" aria-hidden="true" />
|
aria-label="Audio file drop zone"
|
||||||
<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>
|
<Upload size={48} class="opacity-50" aria-hidden="true" />
|
||||||
<p class="text-[12px] text-text-tertiary mt-2 font-mono">MP3 · WAV · M4A · MP4 · FLAC · OGG</p>
|
<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>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<!-- Transcript display -->
|
<!-- Transcript display -->
|
||||||
@@ -273,14 +281,18 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</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">
|
<div class="flex items-center gap-2 justify-end px-6 py-3 border-t border-border-subtle bg-bg-elevated/40">
|
||||||
<LumotiaButton
|
<LumotiaButton
|
||||||
variant={fileTranscript ? "secondary" : "primary"}
|
variant="secondary"
|
||||||
size="sm"
|
size="sm"
|
||||||
disabled={transcribing}
|
disabled={transcribing}
|
||||||
onclick={handleBrowse}
|
onclick={handleBrowse}
|
||||||
>Browse files</LumotiaButton>
|
>Browse Files</LumotiaButton>
|
||||||
<LumotiaButton variant="tertiary" size="sm" onclick={copyAll} disabled={!fileTranscript}>Copy</LumotiaButton>
|
<LumotiaButton variant="tertiary" size="sm" onclick={copyAll} disabled={!fileTranscript}>Copy</LumotiaButton>
|
||||||
<LumotiaMenu
|
<LumotiaMenu
|
||||||
align="start"
|
align="start"
|
||||||
@@ -294,7 +306,7 @@
|
|||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
{#snippet trigger()}
|
{#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}
|
{/snippet}
|
||||||
</LumotiaMenu>
|
</LumotiaMenu>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user