From 446e9f835b5cdfddcd609798924105016fdb0568 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 8 Mar 2026 11:46:15 +0100
Subject: [PATCH] fix: use writable \$derived for search inputs, remove
 unnecessary \$state wrap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace \$state + \$effect pattern with writable \$derived (Svelte 5.25+)
  for all searchValue instances across list pages — cleaner and lint-compliant
- Remove now-unused untrack imports from those files
- Drop \$state() wrapper around SvelteMap in device-mapping-dialog
  (SvelteMap is already reactive)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/frontend/src/routes/admin/articles/+page.svelte    | 4 +---
 packages/frontend/src/routes/admin/comments/+page.svelte    | 4 +---
 packages/frontend/src/routes/admin/recordings/+page.svelte  | 4 +---
 packages/frontend/src/routes/admin/users/+page.svelte       | 4 +---
 packages/frontend/src/routes/admin/videos/+page.svelte      | 4 +---
 packages/frontend/src/routes/magazine/+page.svelte          | 4 +---
 packages/frontend/src/routes/models/+page.svelte            | 4 +---
 .../src/routes/play/components/device-mapping-dialog.svelte | 2 +-
 packages/frontend/src/routes/videos/+page.svelte            | 6 +-----
 9 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/packages/frontend/src/routes/admin/articles/+page.svelte b/packages/frontend/src/routes/admin/articles/+page.svelte
index 85ee88b..d0f0e9c 100644
--- a/packages/frontend/src/routes/admin/articles/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -21,8 +20,7 @@
   let deleteTarget: Article | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {
diff --git a/packages/frontend/src/routes/admin/comments/+page.svelte b/packages/frontend/src/routes/admin/comments/+page.svelte
index 1a63f5f..e128459 100644
--- a/packages/frontend/src/routes/admin/comments/+page.svelte
+++ b/packages/frontend/src/routes/admin/comments/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -18,8 +17,7 @@
   let deleteTarget: { id: number; comment: string } | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {
diff --git a/packages/frontend/src/routes/admin/recordings/+page.svelte b/packages/frontend/src/routes/admin/recordings/+page.svelte
index e4fc3eb..1ec93d9 100644
--- a/packages/frontend/src/routes/admin/recordings/+page.svelte
+++ b/packages/frontend/src/routes/admin/recordings/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -19,8 +18,7 @@
   let deleteTarget: Recording | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {
diff --git a/packages/frontend/src/routes/admin/users/+page.svelte b/packages/frontend/src/routes/admin/users/+page.svelte
index 9bc6e76..49fee63 100644
--- a/packages/frontend/src/routes/admin/users/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -16,8 +15,7 @@
 
   const { data } = $props();
 
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
   let deleteTarget: User | null = $state(null);
   let deleteOpen = $state(false);
diff --git a/packages/frontend/src/routes/admin/videos/+page.svelte b/packages/frontend/src/routes/admin/videos/+page.svelte
index 059eccd..8f13460 100644
--- a/packages/frontend/src/routes/admin/videos/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -18,8 +17,7 @@
   let deleteTarget: Video | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {
diff --git a/packages/frontend/src/routes/magazine/+page.svelte b/packages/frontend/src/routes/magazine/+page.svelte
index 728e85f..08cbb52 100644
--- a/packages/frontend/src/routes/magazine/+page.svelte
+++ b/packages/frontend/src/routes/magazine/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { _ } from "svelte-i18n";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
@@ -18,8 +17,7 @@
   const timeAgo = new TimeAgo("en");
   const { data } = $props();
 
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   const featuredArticle = $derived(
diff --git a/packages/frontend/src/routes/models/+page.svelte b/packages/frontend/src/routes/models/+page.svelte
index 6e72e0e..3a278db 100644
--- a/packages/frontend/src/routes/models/+page.svelte
+++ b/packages/frontend/src/routes/models/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { _ } from "svelte-i18n";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
@@ -15,8 +14,7 @@
 
   const { data } = $props();
 
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {
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 1bda2f4..7401d6a 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 = $state(new SvelteMap<string, BluetoothDevice>());
+  let mappings = new SvelteMap<string, BluetoothDevice>();
 
   // Check if a connected device is compatible with a recorded device
   function isCompatible(recordedDevice: DeviceInfo, connectedDevice: BluetoothDevice): boolean {
diff --git a/packages/frontend/src/routes/videos/+page.svelte b/packages/frontend/src/routes/videos/+page.svelte
index aaefef3..31924d7 100644
--- a/packages/frontend/src/routes/videos/+page.svelte
+++ b/packages/frontend/src/routes/videos/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { _ } from "svelte-i18n";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
@@ -18,10 +17,7 @@
   const timeAgo = new TimeAgo("en");
   const { data } = $props();
 
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => {
-    searchValue = data.search ?? "";
-  });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {