Refactor settings bindings for Svelte 5 compatibility

Replaces direct store mutations with functional bindings for settings fields in model and application settings pages, ensuring proper updates via store methods. Also updates ToolUpdate.svelte to use $derived.by for availableTools and initializes state variables with explicit undefined values.

Author: gary149

src/lib/components/chat/ToolUpdate.svelte

@@ -23,11 +23,12 @@
 	let toolDone = $derived(tool.some(isMessageToolResultUpdate));
 	let eta = $derived(tool.find((update) => update.subtype === MessageToolUpdateType.ETA)?.eta);
 
-	const toolsData = page.data as { tools?: ToolFront[] } | undefined;
-	const availableTools: ToolFront[] = toolsData?.tools ?? [];
+	const availableTools: ToolFront[] = $derived.by(
+		() => (page.data as { tools?: ToolFront[] } | undefined)?.tools ?? []
+	);
 
-	let loadingBarEl: HTMLDivElement | undefined = $state();
-	let animation: Animation | undefined = $state();
+	let loadingBarEl: HTMLDivElement | undefined = $state(undefined);
+	let animation: Animation | undefined = $state(undefined);
 	let showingLoadingBar = $state(false);
 
 	const formatValue = (value: unknown): string => {

src/routes/settings/(nav)/[...model]/+page.svelte

@@ -19,6 +19,46 @@
 	const publicConfig = usePublicConfig();
 	const settings = useSettingsStore();
 
+	// Functional bindings for nested settings (Svelte 5):
+	// Avoid binding directly to $settings.*[modelId]; write via store update
+	function getToolsOverride() {
+		return $settings.toolsOverrides?.[page.params.model] ?? false;
+	}
+	function setToolsOverride(v: boolean) {
+		settings.update((s) => ({
+			...s,
+			toolsOverrides: { ...s.toolsOverrides, [page.params.model]: v },
+		}));
+	}
+	function getMultimodalOverride() {
+		return $settings.multimodalOverrides?.[page.params.model] ?? false;
+	}
+	function setMultimodalOverride(v: boolean) {
+		settings.update((s) => ({
+			...s,
+			multimodalOverrides: { ...s.multimodalOverrides, [page.params.model]: v },
+		}));
+	}
+	function getHidePromptExamples() {
+		return $settings.hidePromptExamples?.[page.params.model] ?? false;
+	}
+	function setHidePromptExamples(v: boolean) {
+		settings.update((s) => ({
+			...s,
+			hidePromptExamples: { ...s.hidePromptExamples, [page.params.model]: v },
+		}));
+	}
+
+	function getCustomPrompt() {
+		return $settings.customPrompts?.[page.params.model] ?? "";
+	}
+	function setCustomPrompt(v: string) {
+		settings.update((s) => ({
+			...s,
+			customPrompts: { ...s.customPrompts, [page.params.model]: v },
+		}));
+	}
+
 	type RouterProvider = { provider: string } & Record<string, unknown>;
 
 	$effect(() => {
@@ -172,7 +212,10 @@
 					class="ml-auto text-xs underline decoration-gray-300 hover:decoration-gray-700 dark:decoration-gray-700 dark:hover:decoration-gray-400"
 					onclick={(e) => {
 						e.stopPropagation();
-						$settings.customPrompts[page.params.model] = model.preprompt;
+						settings.update((s) => ({
+							...s,
+							customPrompts: { ...s.customPrompts, [page.params.model]: model.preprompt },
+						}));
 					}}
 				>
 					Reset
@@ -184,7 +227,7 @@
 			aria-label="Custom system prompt"
 			rows="8"
 			class="w-full resize-none rounded-md border border-gray-200 bg-gray-50 p-2 text-[13px] dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
-			bind:value={$settings.customPrompts[page.params.model]}
+			bind:value={getCustomPrompt, setCustomPrompt}
 		></textarea>
 		<!-- Capabilities -->
 		<div
@@ -200,7 +243,7 @@
 							Enable tools and allow the model to call them in chat.
 						</p>
 					</div>
-					<Switch name="forceTools" bind:checked={$settings.toolsOverrides[page.params.model]} />
+					<Switch name="forceTools" bind:checked={getToolsOverride, setToolsOverride} />
 				</div>
 
 				<div class="flex items-start justify-between py-3">
@@ -214,7 +257,7 @@
 					</div>
 					<Switch
 						name="forceMultimodal"
-						bind:checked={$settings.multimodalOverrides[page.params.model]}
+						bind:checked={getMultimodalOverride, setMultimodalOverride}
 					/>
 				</div>
 
@@ -230,7 +273,7 @@
 						</div>
 						<Switch
 							name="hidePromptExamples"
-							bind:checked={$settings.hidePromptExamples[page.params.model]}
+							bind:checked={getHidePromptExamples, setHidePromptExamples}
 						/>
 					</div>
 				{/if}

src/routes/settings/(nav)/application/+page.svelte

@@ -19,6 +19,26 @@
 	const publicConfig = usePublicConfig();
 	let settings = useSettingsStore();
 
+	// Functional bindings for store fields (Svelte 5): avoid mutating $settings directly
+	function getShareWithAuthors() {
+		return $settings.shareConversationsWithModelAuthors;
+	}
+	function setShareWithAuthors(v: boolean) {
+		settings.update((s) => ({ ...s, shareConversationsWithModelAuthors: v }));
+	}
+	function getDisableStream() {
+		return $settings.disableStream;
+	}
+	function setDisableStream(v: boolean) {
+		settings.update((s) => ({ ...s, disableStream: v }));
+	}
+	function getDirectPaste() {
+		return $settings.directPaste;
+	}
+	function setDirectPaste(v: boolean) {
+		settings.update((s) => ({ ...s, directPaste: v }));
+	}
+
 	const client = useAPIClient();
 
 	let OPENAI_BASE_URL: string | null = $state(null);
@@ -121,7 +141,7 @@
 						</div>
 						<Switch
 							name="shareConversationsWithModelAuthors"
-							bind:checked={$settings.shareConversationsWithModelAuthors}
+							bind:checked={getShareWithAuthors, setShareWithAuthors}
 						/>
 					</div>
 				{/if}
@@ -135,7 +155,7 @@
 							Show responses only when complete.
 						</p>
 					</div>
-					<Switch name="disableStream" bind:checked={$settings.disableStream} />
+					<Switch name="disableStream" bind:checked={getDisableStream, setDisableStream} />
 				</div>
 
 				<div class="flex items-start justify-between py-3">
@@ -147,7 +167,7 @@
 							Paste long text directly into chat instead of a file.
 						</p>
 					</div>
-					<Switch name="directPaste" bind:checked={$settings.directPaste} />
+					<Switch name="directPaste" bind:checked={getDirectPaste, setDirectPaste} />
 				</div>
 
 				<!-- Theme selector -->