agent: files — restyle with brand tokens and empty state

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/lib/pages/FilesPage.svelte

@@ -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,18 +144,34 @@
   <!-- Drop zone -->
   <div class="px-7 pb-3">
     <Card>
+      {#if !fileTranscript && !transcribing}
         <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'}"
+          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>
+      {: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">
-          <svg class="w-5 h-5 text-text-tertiary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <Upload size={20} class="text-text-tertiary" aria-hidden="true" />
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
-          </svg>
           </div>
           <p class="text-[13px] text-text-secondary text-center">
             Drop audio or video files here
@@ -163,6 +180,7 @@
             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)]"
+          class="h-full bg-accent rounded-full shadow-[0_0_8px_rgba(232,168,124,0.4)]"
-          style="width: {progress}%"
+          style="width: {progress}%; transition-duration: var(--duration-ui)"
         ></div>
       </div>
       {#if fileName}