From 422f97417e2867e98493ebfdf04e86a1050b02a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 8 Mar 2026 11:41:58 +0100
Subject: [PATCH] fix: resolve vite-plugin-svelte warnings

- image-viewer: replace backdrop div with button for a11y
- file-drop-zone: wrap prop check in \$effect to avoid state_referenced_locally
- about: use \$derived for stats array
- magazine: use \$derived for featuredArticle
- play: add role/keyboard support to seek bar slider; fix \$state on SvelteMap in device-mapping-dialog
- admin/videos/[id]: add <track kind="captions"> to video element

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/components/image-viewer/image-viewer.svelte  |  2 +-
 .../ui/file-drop-zone/file-drop-zone.svelte          | 12 +++++++-----
 packages/frontend/src/routes/about/+page.svelte      |  4 ++--
 .../src/routes/admin/videos/[id]/+page.svelte        |  4 +++-
 packages/frontend/src/routes/magazine/+page.svelte   |  5 +++--
 packages/frontend/src/routes/play/+page.svelte       | 10 ++++++++++
 .../play/components/device-mapping-dialog.svelte     |  2 +-
 7 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/lib/components/image-viewer/image-viewer.svelte b/packages/frontend/src/lib/components/image-viewer/image-viewer.svelte
index 03dbcb5..1c206b7 100644
--- a/packages/frontend/src/lib/components/image-viewer/image-viewer.svelte
+++ b/packages/frontend/src/lib/components/image-viewer/image-viewer.svelte
@@ -145,7 +145,7 @@
 {#if isViewerOpen}
   <div class="fixed inset-0 z-50 flex items-center justify-center animate-fade-in">
     <!-- Backdrop -->
-    <div class="absolute inset-0 bg-black/95 backdrop-blur-xl" onclick={closeViewer}></div>
+    <button type="button" class="absolute inset-0 bg-black/95 backdrop-blur-xl cursor-default" onclick={closeViewer} aria-label="Close viewer"></button>
 
     <!-- Viewer Content -->
     <div class="relative w-[90vw] h-[90vh] flex flex-col animate-slide-up">
diff --git a/packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte b/packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte
index 041e82a..5494508 100644
--- a/packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte
+++ b/packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte
@@ -23,11 +23,13 @@
     ...rest
   }: FileDropZoneProps = $props();
 
-  if (maxFiles !== undefined && fileCount === undefined) {
-    console.warn(
-      "Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt",
-    );
-  }
+  $effect(() => {
+    if (maxFiles !== undefined && fileCount === undefined) {
+      console.warn(
+        "Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt",
+      );
+    }
+  });
 
   let uploading = $state(false);
 
diff --git a/packages/frontend/src/routes/about/+page.svelte b/packages/frontend/src/routes/about/+page.svelte
index b1c1b59..2648db3 100644
--- a/packages/frontend/src/routes/about/+page.svelte
+++ b/packages/frontend/src/routes/about/+page.svelte
@@ -7,7 +7,7 @@
 
   const { data } = $props();
 
-  const stats = [
+  const stats = $derived([
     {
       icon: "icon-[ri--user-heart-line]",
       value: data.stats.viewers_count,
@@ -28,7 +28,7 @@
       value: $_("about.stats.yearsFormatted", { values: { years: 5 } }),
       label: $_("about.stats.experience"),
     },
-  ];
+  ]);
 
   const team = [
     {
diff --git a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
index 1086572..ead40b9 100644
--- a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
@@ -154,7 +154,9 @@
           poster={imageId ? (getAssetUrl(imageId, "preview") ?? undefined) : undefined}
           controls
           class="w-full rounded-lg bg-black max-h-72 mb-2"
-        ></video>
+        >
+          <track kind="captions" />
+        </video>
       {/if}
       <FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
     </div>
diff --git a/packages/frontend/src/routes/magazine/+page.svelte b/packages/frontend/src/routes/magazine/+page.svelte
index 0504f83..728e85f 100644
--- a/packages/frontend/src/routes/magazine/+page.svelte
+++ b/packages/frontend/src/routes/magazine/+page.svelte
@@ -22,8 +22,9 @@
   $effect(() => { searchValue = data.search ?? ""; });
   let searchTimeout: ReturnType<typeof setTimeout>;
 
-  const featuredArticle =
-    data.page === 1 && !data.search && !data.category ? data.items.find((a) => a.featured) : null;
+  const featuredArticle = $derived(
+    data.page === 1 && !data.search && !data.category ? data.items.find((a) => a.featured) : null,
+  );
 
   function debounceSearch(value: string) {
     clearTimeout(searchTimeout);
diff --git a/packages/frontend/src/routes/play/+page.svelte b/packages/frontend/src/routes/play/+page.svelte
index 1ec1564..19a9c0b 100644
--- a/packages/frontend/src/routes/play/+page.svelte
+++ b/packages/frontend/src/routes/play/+page.svelte
@@ -480,12 +480,22 @@
                   .padStart(2, "0")}
               </span>
               <div
+                role="slider"
+                tabindex="0"
+                aria-label="Seek"
+                aria-valuemin={0}
+                aria-valuemax={data.recording.duration}
+                aria-valuenow={playbackProgress}
                 class="flex-1 h-2 bg-muted rounded-full overflow-hidden cursor-pointer relative"
                 onclick={(e) => {
                   const rect = e.currentTarget.getBoundingClientRect();
                   const percentage = ((e.clientX - rect.left) / rect.width) * 100;
                   seek(percentage);
                 }}
+                onkeydown={(e) => {
+                  if (e.key === "ArrowRight") seek(((playbackProgress + 1) / data.recording.duration) * 100);
+                  else if (e.key === "ArrowLeft") seek(((playbackProgress - 1) / data.recording.duration) * 100);
+                }}
               >
                 <div
                   class="absolute inset-0 bg-gradient-to-r from-primary to-accent transition-all duration-150"
diff --git a/packages/frontend/src/routes/play/components/device-mapping-dialog.svelte b/packages/frontend/src/routes/play/components/device-mapping-dialog.svelte
index 7401d6a..1bda2f4 100644
--- a/packages/frontend/src/routes/play/components/device-mapping-dialog.svelte
+++ b/packages/frontend/src/routes/play/components/device-mapping-dialog.svelte
@@ -16,7 +16,7 @@
   let { open, recordedDevices, connectedDevices, onConfirm, onCancel }: Props = $props();
 
   // Device mappings: recorded device name -> connected device
-  let mappings = new SvelteMap<string, BluetoothDevice>();
+  let mappings = $state(new SvelteMap<string, BluetoothDevice>());
 
   // Check if a connected device is compatible with a recorded device
   function isCompatible(recordedDevice: DeviceInfo, connectedDevice: BluetoothDevice): boolean {