From 636658249887a60fa82792368a20c18cf946ef1a Mon Sep 17 00:00:00 2001
From: patrick <patrickjaroszewski@protonmail.com>
Date: Tue, 11 Aug 2026 20:08:16 -0400
Subject: [PATCH] fix: silence state_referenced_locally in vendored ui
 components

---
 .../ui/file-drop-zone/file-drop-zone.svelte        | 14 +++++++++-----
 .../components/ui/sidebar/sidebar-provider.svelte  |  3 ++-
 .../lib/components/ui/sidebar/sidebar-rail.svelte  |  4 +++-
 .../components/ui/toggle-group/toggle-group.svelte | 11 +++++++++--
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte b/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte
index 03af46e..f046849 100644
--- a/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte
+++ b/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte
@@ -3,6 +3,7 @@
 -->
 
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { cn } from '$lib/utils';
 	import UploadIcon from '@lucide/svelte/icons/upload';
 	import { displaySize } from '.';
@@ -26,11 +27,14 @@
 		...rest
 	}: FileDropZoneProps = $props();
 
-	if (maxFiles !== undefined && fileCount === undefined) {
-		console.warn(
-			'Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt'
-		);
-	}
+	// A one-off sanity check at init, not a reactive concern.
+	untrack(() => {
+		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/frontend/src/lib/components/ui/sidebar/sidebar-provider.svelte b/frontend/src/lib/components/ui/sidebar/sidebar-provider.svelte
index b760ca8..22c9659 100644
--- a/frontend/src/lib/components/ui/sidebar/sidebar-provider.svelte
+++ b/frontend/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -9,6 +9,7 @@
 		SIDEBAR_WIDTH_ICON
 	} from './constants.js';
 	import { setSidebar } from './context.svelte.js';
+	import { untrack } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -36,7 +37,7 @@
 			// This sets the cookie to keep the sidebar state.
 			document.cookie = `${SIDEBAR_COOKIE_NAME}_${contextKey}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 		},
-		contextKey: contextKey
+		contextKey: untrack(() => contextKey)
 	});
 </script>
 
diff --git a/frontend/src/lib/components/ui/sidebar/sidebar-rail.svelte b/frontend/src/lib/components/ui/sidebar/sidebar-rail.svelte
index d59c4be..789d101 100644
--- a/frontend/src/lib/components/ui/sidebar/sidebar-rail.svelte
+++ b/frontend/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -2,6 +2,7 @@
 	import { cn, type WithElementRef } from '$lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { useSidebar } from './context.svelte.js';
+	import { untrack } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +14,8 @@
 		contextKey?: string;
 	} = $props();
 
-	const sidebar = useSidebar(contextKey);
+	// contextKey selects which sidebar this rail drives; fixed per instance.
+	const sidebar = useSidebar(untrack(() => contextKey));
 </script>
 
 <button
diff --git a/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte b/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte
index f69f176..893f67b 100644
--- a/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte
+++ b/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -23,9 +23,16 @@
 		...restProps
 	}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
 
+	// Getters rather than values: consumers read `ctx.variant` / `ctx.size` as
+	// plain properties, so this stays source-compatible while making the props
+	// actually reactive — passing them by value captured the initial ones.
 	setToggleGroupCtx({
-		variant,
-		size
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		}
 	});
 </script>