From edee98b552afd515a1f4cf6b7d4c11361fff072b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 8 Mar 2026 11:31:51 +0100
Subject: [PATCH] fix: use untrack() in \$state initialisers to silence
 state_referenced_locally warnings

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/admin/articles/+page.svelte    |  3 ++-
 .../routes/admin/articles/[id]/+page.svelte   | 21 ++++++++++---------
 .../src/routes/admin/comments/+page.svelte    |  3 ++-
 .../src/routes/admin/recordings/+page.svelte  |  3 ++-
 .../src/routes/admin/users/+page.svelte       |  3 ++-
 .../src/routes/admin/users/[id]/+page.svelte  | 15 ++++++-------
 .../src/routes/admin/videos/+page.svelte      |  3 ++-
 .../src/routes/admin/videos/[id]/+page.svelte | 21 ++++++++++---------
 .../frontend/src/routes/magazine/+page.svelte |  3 ++-
 packages/frontend/src/routes/me/+page.svelte  | 16 +++++++-------
 .../frontend/src/routes/models/+page.svelte   |  3 ++-
 .../frontend/src/routes/videos/+page.svelte   |  3 ++-
 .../src/routes/videos/[slug]/+page.svelte     |  5 +++--
 13 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/packages/frontend/src/routes/admin/articles/+page.svelte b/packages/frontend/src/routes/admin/articles/+page.svelte
index a556362..85ee88b 100644
--- a/packages/frontend/src/routes/admin/articles/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -20,7 +21,7 @@
   let deleteTarget: Article | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(data.search ?? "");
+  let searchValue = $state(untrack(() => data.search ?? ""));
   $effect(() => { searchValue = data.search ?? ""; });
   let searchTimeout: ReturnType<typeof setTimeout>;
 
diff --git a/packages/frontend/src/routes/admin/articles/[id]/+page.svelte b/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
index 86101f1..cc8a3cc 100644
--- a/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { goto } from "$app/navigation";
   import { toast } from "svelte-sonner";
   import { _ } from "svelte-i18n";
@@ -16,18 +17,18 @@
 
   const { data } = $props();
 
-  let title = $state(data.article.title);
-  let slug = $state(data.article.slug);
-  let excerpt = $state(data.article.excerpt ?? "");
-  let content = $state(data.article.content ?? "");
-  let category = $state(data.article.category ?? "");
-  let tags = $state<string[]>(data.article.tags ?? []);
-  let featured = $state(data.article.featured ?? false);
+  let title = $state(untrack(() => data.article.title));
+  let slug = $state(untrack(() => data.article.slug));
+  let excerpt = $state(untrack(() => data.article.excerpt ?? ""));
+  let content = $state(untrack(() => data.article.content ?? ""));
+  let category = $state(untrack(() => data.article.category ?? ""));
+  let tags = $state<string[]>(untrack(() => data.article.tags ?? []));
+  let featured = $state(untrack(() => data.article.featured ?? false));
   let publishDate = $state(
-    data.article.publish_date ? new Date(data.article.publish_date).toISOString().slice(0, 16) : "",
+    untrack(() => data.article.publish_date ? new Date(data.article.publish_date).toISOString().slice(0, 16) : ""),
   );
-  let imageId = $state<string | null>(data.article.image ?? null);
-  let authorId = $state(data.article.author?.id ?? "");
+  let imageId = $state<string | null>(untrack(() => data.article.image ?? null));
+  let authorId = $state(untrack(() => data.article.author?.id ?? ""));
   $effect(() => {
     title = data.article.title;
     slug = data.article.slug;
diff --git a/packages/frontend/src/routes/admin/comments/+page.svelte b/packages/frontend/src/routes/admin/comments/+page.svelte
index 0b51e50..1a63f5f 100644
--- a/packages/frontend/src/routes/admin/comments/+page.svelte
+++ b/packages/frontend/src/routes/admin/comments/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -17,7 +18,7 @@
   let deleteTarget: { id: number; comment: string } | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(data.search ?? "");
+  let searchValue = $state(untrack(() => data.search ?? ""));
   $effect(() => { searchValue = data.search ?? ""; });
   let searchTimeout: ReturnType<typeof setTimeout>;
 
diff --git a/packages/frontend/src/routes/admin/recordings/+page.svelte b/packages/frontend/src/routes/admin/recordings/+page.svelte
index 30ee7d1..e4fc3eb 100644
--- a/packages/frontend/src/routes/admin/recordings/+page.svelte
+++ b/packages/frontend/src/routes/admin/recordings/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -18,7 +19,7 @@
   let deleteTarget: Recording | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(data.search ?? "");
+  let searchValue = $state(untrack(() => data.search ?? ""));
   $effect(() => { searchValue = data.search ?? ""; });
   let searchTimeout: ReturnType<typeof setTimeout>;
 
diff --git a/packages/frontend/src/routes/admin/users/+page.svelte b/packages/frontend/src/routes/admin/users/+page.svelte
index 3e1eaa8..9bc6e76 100644
--- a/packages/frontend/src/routes/admin/users/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -15,7 +16,7 @@
 
   const { data } = $props();
 
-  let searchValue = $state(data.search ?? "");
+  let searchValue = $state(untrack(() => data.search ?? ""));
   $effect(() => { searchValue = data.search ?? ""; });
   let searchTimeout: ReturnType<typeof setTimeout>;
   let deleteTarget: User | null = $state(null);
diff --git a/packages/frontend/src/routes/admin/users/[id]/+page.svelte b/packages/frontend/src/routes/admin/users/[id]/+page.svelte
index 277b9ac..ec6a329 100644
--- a/packages/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { toast } from "svelte-sonner";
   import { invalidateAll } from "$app/navigation";
   import {
@@ -16,13 +17,13 @@
 
   const { data } = $props();
 
-  let firstName = $state(data.user.first_name ?? "");
-  let lastName = $state(data.user.last_name ?? "");
-  let artistName = $state(data.user.artist_name ?? "");
-  let avatarId = $state<string | null>(data.user.avatar ?? null);
-  let bannerId = $state<string | null>(data.user.banner ?? null);
-  let photoId = $state<string | null>(data.user.photo ?? null);
-  let isAdmin = $state(data.user.is_admin ?? false);
+  let firstName = $state(untrack(() => data.user.first_name ?? ""));
+  let lastName = $state(untrack(() => data.user.last_name ?? ""));
+  let artistName = $state(untrack(() => data.user.artist_name ?? ""));
+  let avatarId = $state<string | null>(untrack(() => data.user.avatar ?? null));
+  let bannerId = $state<string | null>(untrack(() => data.user.banner ?? null));
+  let photoId = $state<string | null>(untrack(() => data.user.photo ?? null));
+  let isAdmin = $state(untrack(() => data.user.is_admin ?? false));
   let saving = $state(false);
   $effect(() => {
     firstName = data.user.first_name ?? "";
diff --git a/packages/frontend/src/routes/admin/videos/+page.svelte b/packages/frontend/src/routes/admin/videos/+page.svelte
index 9ab0a83..059eccd 100644
--- a/packages/frontend/src/routes/admin/videos/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -17,7 +18,7 @@
   let deleteTarget: Video | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(data.search ?? "");
+  let searchValue = $state(untrack(() => data.search ?? ""));
   $effect(() => { searchValue = data.search ?? ""; });
   let searchTimeout: ReturnType<typeof setTimeout>;
 
diff --git a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
index 89670b1..1086572 100644
--- a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { goto } from "$app/navigation";
   import { toast } from "svelte-sonner";
   import { _ } from "svelte-i18n";
@@ -15,19 +16,19 @@
 
   const { data } = $props();
 
-  let title = $state(data.video.title);
-  let slug = $state(data.video.slug);
-  let description = $state(data.video.description ?? "");
-  let tags = $state<string[]>(data.video.tags ?? []);
-  let premium = $state(data.video.premium ?? false);
-  let featured = $state(data.video.featured ?? false);
+  let title = $state(untrack(() => data.video.title));
+  let slug = $state(untrack(() => data.video.slug));
+  let description = $state(untrack(() => data.video.description ?? ""));
+  let tags = $state<string[]>(untrack(() => data.video.tags ?? []));
+  let premium = $state(untrack(() => data.video.premium ?? false));
+  let featured = $state(untrack(() => data.video.featured ?? false));
   let uploadDate = $state(
-    data.video.upload_date ? new Date(data.video.upload_date).toISOString().slice(0, 16) : "",
+    untrack(() => data.video.upload_date ? new Date(data.video.upload_date).toISOString().slice(0, 16) : ""),
   );
-  let imageId = $state<string | null>(data.video.image ?? null);
-  let movieId = $state<string | null>(data.video.movie ?? null);
+  let imageId = $state<string | null>(untrack(() => data.video.image ?? null));
+  let movieId = $state<string | null>(untrack(() => data.video.movie ?? null));
   let selectedModelIds = $state<string[]>(
-    data.video.models?.map((m: { id: string }) => m.id) ?? [],
+    untrack(() => data.video.models?.map((m: { id: string }) => m.id) ?? []),
   );
   $effect(() => {
     title = data.video.title;
diff --git a/packages/frontend/src/routes/magazine/+page.svelte b/packages/frontend/src/routes/magazine/+page.svelte
index e342277..0504f83 100644
--- a/packages/frontend/src/routes/magazine/+page.svelte
+++ b/packages/frontend/src/routes/magazine/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { _ } from "svelte-i18n";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
@@ -17,7 +18,7 @@
   const timeAgo = new TimeAgo("en");
   const { data } = $props();
 
-  let searchValue = $state(data.search ?? "");
+  let searchValue = $state(untrack(() => data.search ?? ""));
   $effect(() => { searchValue = data.search ?? ""; });
   let searchTimeout: ReturnType<typeof setTimeout>;
 
diff --git a/packages/frontend/src/routes/me/+page.svelte b/packages/frontend/src/routes/me/+page.svelte
index be06733..fd1c8f9 100644
--- a/packages/frontend/src/routes/me/+page.svelte
+++ b/packages/frontend/src/routes/me/+page.svelte
@@ -12,7 +12,7 @@
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
   import SexyBackground from "$lib/components/background/background.svelte";
-  import { onMount } from "svelte";
+  import { onMount, untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { getAssetUrl, isModel } from "$lib/api";
   import * as Alert from "$lib/components/ui/alert";
@@ -27,18 +27,18 @@
 
   const { data } = $props();
 
-  let recordings = $state(data.recordings);
+  let recordings = $state(untrack(() => data.recordings));
   let deleteTarget = $state<string | null>(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
 
   let activeTab = $state("settings");
 
-  let firstName = $state(data.authStatus.user!.first_name);
-  let lastName = $state(data.authStatus.user!.last_name);
-  let artistName = $state(data.authStatus.user!.artist_name);
-  let description = $state(data.authStatus.user!.description);
-  let tags = $state(data.authStatus.user!.tags ?? undefined);
+  let firstName = $state(untrack(() => data.authStatus.user!.first_name));
+  let lastName = $state(untrack(() => data.authStatus.user!.last_name));
+  let artistName = $state(untrack(() => data.authStatus.user!.artist_name));
+  let description = $state(untrack(() => data.authStatus.user!.description));
+  let tags = $state(untrack(() => data.authStatus.user!.tags ?? undefined));
   $effect(() => {
     recordings = data.recordings;
     firstName = data.authStatus.user!.first_name;
@@ -49,7 +49,7 @@
     email = data.authStatus.user!.email;
   });
 
-  let email = $state(data.authStatus.user!.email);
+  let email = $state(untrack(() => data.authStatus.user!.email));
   let password = $state("");
   let confirmPassword = $state("");
 
diff --git a/packages/frontend/src/routes/models/+page.svelte b/packages/frontend/src/routes/models/+page.svelte
index 0d672bb..6e72e0e 100644
--- a/packages/frontend/src/routes/models/+page.svelte
+++ b/packages/frontend/src/routes/models/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { _ } from "svelte-i18n";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
@@ -14,7 +15,7 @@
 
   const { data } = $props();
 
-  let searchValue = $state(data.search ?? "");
+  let searchValue = $state(untrack(() => data.search ?? ""));
   $effect(() => { searchValue = data.search ?? ""; });
   let searchTimeout: ReturnType<typeof setTimeout>;
 
diff --git a/packages/frontend/src/routes/videos/+page.svelte b/packages/frontend/src/routes/videos/+page.svelte
index 64dd40e..aaefef3 100644
--- a/packages/frontend/src/routes/videos/+page.svelte
+++ b/packages/frontend/src/routes/videos/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { _ } from "svelte-i18n";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
@@ -17,7 +18,7 @@
   const timeAgo = new TimeAgo("en");
   const { data } = $props();
 
-  let searchValue = $state(data.search ?? "");
+  let searchValue = $state(untrack(() => data.search ?? ""));
   $effect(() => {
     searchValue = data.search ?? "";
   });
diff --git a/packages/frontend/src/routes/videos/[slug]/+page.svelte b/packages/frontend/src/routes/videos/[slug]/+page.svelte
index 170f34c..9a30d03 100644
--- a/packages/frontend/src/routes/videos/[slug]/+page.svelte
+++ b/packages/frontend/src/routes/videos/[slug]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { _ } from "svelte-i18n";
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
@@ -28,8 +29,8 @@
   const { data } = $props();
 
   const timeAgo = new TimeAgo("en");
-  let isLiked = $state(data.likeStatus.liked);
-  let likesCount = $state(data.video.likes_count || 0);
+  let isLiked = $state(untrack(() => data.likeStatus.liked));
+  let likesCount = $state(untrack(() => data.video.likes_count || 0));
   $effect(() => {
     isLiked = data.likeStatus.liked;
     likesCount = data.video.likes_count || 0;