renders thumbnails

src/routes/+page.svelte

@@ -1,12 +1,41 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import Card from "$lib/components/Card.svelte";
     import ProcessedZipArchiveEditor from "$lib/components/ProcessedZipArchiveEditor.svelte";
     import ZipDropzone from "$lib/components/ZipDropzone.svelte";
     import { extractZipArchive, type ProcessedZipArchive } from "$lib/zip-processing";
 
+    const THUMBNAIL_WIDTH_STORAGE_KEY = "thumbnailWidth";
+
     let selectedZipFiles: File[] = $state([]);
     let processedZipFiles: ProcessedZipArchive[] = $state([]);
     let pendingZipCount = $state(0);
+    let thumbnailWidth = $state(200);
+    let thumbnailWidthHydrated = $state(false);
+
+    const clampThumbnailWidth = (value: number) => Math.min(400, Math.max(100, value));
+
+    onMount(() => {
+        const storedValue = localStorage.getItem(THUMBNAIL_WIDTH_STORAGE_KEY);
+
+        if (storedValue !== null) {
+            const parsedValue = Number(storedValue);
+
+            if (Number.isFinite(parsedValue)) {
+                thumbnailWidth = clampThumbnailWidth(parsedValue);
+            }
+        }
+
+        thumbnailWidthHydrated = true;
+    });
+
+    $effect(() => {
+        if (!thumbnailWidthHydrated) {
+            return;
+        }
+
+        localStorage.setItem(THUMBNAIL_WIDTH_STORAGE_KEY, String(thumbnailWidth));
+    });
 
     const handleFilesSelected = (files: File[]) => {
         selectedZipFiles = [...selectedZipFiles, ...files];
@@ -59,6 +88,7 @@
                         {#each processedZipFiles as file, index}
                             <ProcessedZipArchiveEditor
                                 archive={file}
+                                {thumbnailWidth}
                                 onArchiveChange={(updatedArchive) => updateProcessedZipFile(index, updatedArchive)}
                             />
                         {/each}
@@ -70,6 +100,34 @@
 {/snippet}
 
 <section class="px-4">
-    <h1 class="h1 text-[20px] font-bold py-6 text-primary-900">beA-Edit</h1>
+    <div class="flex flex-wrap items-center justify-between gap-3 py-6">
+        <h1 class="h1 text-[20px] font-bold text-primary-900">beA-Edit</h1>
+
+        <details class="relative">
+            <summary class="flex cursor-pointer list-none items-center rounded-md border border-primary-200 bg-white px-3 py-2 text-sm font-semibold text-primary-800 shadow-sm transition hover:border-primary-300 hover:bg-primary-50">
+                <span class="sr-only">Settings</span>
+                <span>⚙️</span>
+            </summary>
+
+            <div class="absolute right-0 z-10 mt-2 w-64 rounded-xl border border-primary-100 bg-white p-4 shadow-lg">
+                <label class="flex flex-col gap-2">
+                    <div class="flex items-center justify-between gap-3 text-sm font-medium text-primary-900">
+                        <span>Thumbnail width</span>
+                        <span class="tabular-nums text-primary-700">{thumbnailWidth}px</span>
+                    </div>
+
+                    <input
+                        class="w-full accent-primary-700"
+                        type="range"
+                        min="100"
+                        max="400"
+                        step="1"
+                        bind:value={thumbnailWidth}
+                    />
+                </label>
+            </div>
+        </details>
+    </div>
+
     <Card {content} class="h-full"/>
 </section>