feat: generate and display thumbnails asynchronously

frontend/src/lib/components/TileCard.svelte

@@ -40,9 +40,9 @@
     class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg border transition-all hover:border-sky-400/50
         {selected ? 'border-sky-400/50 ring-1 ring-sky-400/50' : 'border-sky-200/20'}"
 >
-    {#if isImage}
+    {#if isImage && file.thumbnailStoragePath}
         <img
-            src={`/api/files/${file.id}/download`}
+            src={`/api/files/${file.id}/thumbnail`}
             alt={file.name}
             class="h-full w-full object-cover"
         />

frontend/src/lib/types.ts

@@ -4,4 +4,5 @@ export type FileRecord = {
     size: number;
     fileType: string;
     uploadedAt: string;
+    thumbnailStoragePath: string | null;
 };

frontend/src/routes/+page.svelte

@@ -82,6 +82,19 @@
         window.location.href = '/auth';
     }
 
+    $effect(() => {
+        const pending = fileRecords.some(
+            (f) => f.fileType.includes('image') && !f.thumbnailStoragePath
+        );
+
+        if (!pending) {
+            return;
+        }
+
+        const id = setInterval(refresh, 1000);
+        return () => clearInterval(id);
+    });
+
     onMount(() => {
         const saved = localStorage.getItem('viewMode');
         if (saved === 'rows' || saved === 'tiles') viewMode = saved;