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

agent: files — restyle with brand tokens and empty state

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
2026-03-21 11:04:06 +00:00
parent 5caf886252
commit 1933604176
1 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,9 @@
import { listen } from "@tauri-apps/api/event";
import { settings, addToHistory } from "$lib/stores/page.svelte.js";
import Card from "$lib/components/Card.svelte";
import EmptyState from "$lib/components/EmptyState.svelte";
import { exportTranscript } from "$lib/utils/export.js";
import { Upload } from 'lucide-svelte';
let fileTranscript = $state("");
let segments = $state([]);
@@ -21,7 +23,6 @@
let unlistenLeave = null;
onMount(async () => {
// Native Tauri file drop events
unlistenDrop = await listen("tauri://drag-drop", async (event) => {
isDragOver = false;
if (event.payload?.paths?.length > 0) {
@@ -143,26 +144,43 @@
<!-- Drop zone -->
<div class="px-7 pb-3">
<Card>
<div
class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed m-3
transition-all duration-200
{isDragOver
? 'border-accent bg-accent-subtle scale-[1.01]'
: 'border-border hover:border-text-tertiary'}"
role="region"
>
<div class="w-10 h-10 rounded-full bg-bg-elevated flex items-center justify-center mb-3">
<svg class="w-5 h-5 text-text-tertiary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
</svg>
{#if !fileTranscript && !transcribing}
<div
class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed m-3
{isDragOver
? 'border-accent bg-accent-subtle scale-[1.01]'
: 'border-border hover:border-text-tertiary'}"
style="transition-duration: var(--duration-ui)"
role="region"
>
<EmptyState
icon={Upload}
message="Drop an audio file or click to browse"
/>
<p class="text-[11px] text-text-tertiary text-center mt-1.5">
MP3, WAV, M4A, MP4, FLAC, OGG
</p>
</div>
<p class="text-[13px] text-text-secondary text-center">
Drop audio or video files here
</p>
<p class="text-[11px] text-text-tertiary text-center mt-1.5">
MP3, WAV, M4A, MP4, FLAC, OGG
</p>
</div>
{:else}
<div
class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed m-3
{isDragOver
? 'border-accent bg-accent-subtle scale-[1.01]'
: 'border-border hover:border-text-tertiary'}"
style="transition-duration: var(--duration-ui)"
role="region"
>
<div class="w-10 h-10 rounded-full bg-bg-elevated flex items-center justify-center mb-3">
<Upload size={20} class="text-text-tertiary" aria-hidden="true" />
</div>
<p class="text-[13px] text-text-secondary text-center">
Drop audio or video files here
</p>
<p class="text-[11px] text-text-tertiary text-center mt-1.5">
MP3, WAV, M4A, MP4, FLAC, OGG
</p>
</div>
{/if}
</Card>
</div>
@@ -170,7 +188,8 @@
<div class="flex items-center gap-2 px-7 pb-3">
<button
class="btn-lg rounded-lg font-medium text-white bg-accent hover:bg-accent-hover
shadow-[0_2px_8px_rgba(232,168,124,0.2)] active:scale-[0.97] transition-all duration-150"
shadow-[0_2px_8px_rgba(232,168,124,0.2)] active:scale-[0.97]"
style="transition-duration: var(--duration-ui)"
onclick={handleBrowse}
disabled={transcribing}
>
@@ -196,8 +215,8 @@
<div class="px-7 pb-3 animate-fade-in">
<div class="h-[3px] bg-bg-elevated rounded-full overflow-hidden">
<div
class="h-full bg-accent rounded-full transition-all duration-500 shadow-[0_0_8px_rgba(232,168,124,0.4)]"
style="width: {progress}%"
class="h-full bg-accent rounded-full shadow-[0_0_8px_rgba(232,168,124,0.4)]"
style="width: {progress}%; transition-duration: var(--duration-ui)"
></div>
</div>
{#if fileName}