From 1b2781960a7609b7051c20fb40116099e2af0de8 Mon Sep 17 00:00:00 2001
From: slothful-vassal <89943360+slothful-vassal@users.noreply.github.com>
Date: Sun, 10 May 2026 08:42:20 +0200
Subject: [PATCH] fix: resolve Svelte 5 reactivity warnings (#974)

- Use untrack() for $derived/$state initial values captured outside reactive context (scene.svelte, lists edit page)
- Add $state() to bind:this component references in settings account page

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Flomp <Flomp@users.noreply.github.com>
---
 web/src/lib/components/3D/scene.svelte       |  5 +++--
 web/src/routes/lists/edit/[id]/+page.svelte  |  2 +-
 web/src/routes/settings/account/+page.svelte | 10 +++++-----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/3D/scene.svelte b/web/src/lib/components/3D/scene.svelte
index 6938447b..7aa0ea4f 100644
--- a/web/src/lib/components/3D/scene.svelte
+++ b/web/src/lib/components/3D/scene.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { theme } from "$lib/stores/theme_store";
+    import { untrack } from "svelte";
     import { T, useTask } from "@threlte/core";
     import { backInOut } from "svelte/easing";
     import { Tween } from "svelte/motion";
@@ -56,7 +57,7 @@
         rotation += delta / 2;
     });
 
-    const sunZPosition = new Tween($theme == "light" ? sunUpPosition : 0, {
+    const sunZPosition = new Tween(untrack(() => ($theme == "light" ? sunUpPosition : 0)), {
         duration: 1000,
         easing: backInOut,
     });
@@ -71,7 +72,7 @@
         sunLightIntensity.set($theme == "light" ? 4 : 0);
     });
 
-    const moonZPosition = new Tween($theme == "dark" ? sunUpPosition : 0, {
+    const moonZPosition = new Tween(untrack(() => ($theme == "dark" ? sunUpPosition : 0)), {
         duration: 1000,
         easing: backInOut,
     });
diff --git a/web/src/routes/lists/edit/[id]/+page.svelte b/web/src/routes/lists/edit/[id]/+page.svelte
index 96b479e4..7fc01c1b 100644
--- a/web/src/routes/lists/edit/[id]/+page.svelte
+++ b/web/src/routes/lists/edit/[id]/+page.svelte
@@ -51,7 +51,7 @@
     let loading: boolean = $state(false);
 
     let newShares: TrailShare[] = [];
-    let publicList: boolean = $state(data.list?.public);
+    let publicList: boolean = $state(untrack(() => data.list?.public));
 
     let shareConfirmModal: ConfirmModal;
     let publishConfirmModal: ConfirmModal;
diff --git a/web/src/routes/settings/account/+page.svelte b/web/src/routes/settings/account/+page.svelte
index 1c830f54..ff5a41c3 100644
--- a/web/src/routes/settings/account/+page.svelte
+++ b/web/src/routes/settings/account/+page.svelte
@@ -32,11 +32,11 @@
 
     let citySearchQuery: string = "";
 
-    let confirmModal: ConfirmModal;
-    let emailModal: EmailModal;
-    let passwordModal: PasswordModal;
-    let tokenModal: ApiTokenModal;
-    let tokenSuccessModal: ApiTokenSuccessModal;
+    let confirmModal: ConfirmModal = $state()!;
+    let emailModal: EmailModal = $state()!;
+    let passwordModal: PasswordModal = $state()!;
+    let tokenModal: ApiTokenModal = $state()!;
+    let tokenSuccessModal: ApiTokenSuccessModal = $state()!;
 
     let tokenLoading: boolean = $state(false);
     let rawAPIToken: string | null = $state(null);