refactor(frontend): extract types, API, helpers, and preview from +page.svelte

frontend/src/lib/components/FilePreview.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import type { FileRecord } from "$lib/types";
+    import { fade } from "svelte/transition";
+
+    let { file, onclose }: { file: FileRecord; onclose: () => void } = $props();
+</script>
+
+<svelte:window onkeydown={(e) => { if (e.key === 'Escape') onclose(); }} />
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+    class="fixed inset-0 bg-black/60 flex items-center justify-center z-50"
+    onclick={onclose}
+    transition:fade={{ duration: 150 }}
+>
+    <div
+        class="bg-[#0f1117] border border-sky-200/20 rounded-sm w-2/3 h-2/3 flex flex-col p-6"
+        onclick={(e) => e.stopPropagation()}
+    >
+        <div class="flex items-center justify-between mb-4">
+            <span class="text-white text-sm font-medium">{file.name}</span>
+            <button class="text-white/40 hover:text-white transition-colors cursor-pointer" onclick={onclose} aria-label="Close">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="18" y1="6" x2="6" y2="18"/>
+                    <line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
+        </div>
+        <div class="flex-1 flex items-center justify-center text-white/20 text-sm">
+            preview coming soon
+        </div>
+    </div>
+</div>