feat: Improves chat settings and UI layout

Refactors the chat settings dialog to use localStorage for
persistence and introduces dedicated components for sections
and footer.

This change also adjusts the header's position relative to the
sidebar and adds border styling for improved visual clarity.

Author: allozaur

tools/server/webui/src/lib/components/app/chat/ChatHeader.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <header
-	class="md:background-transparent bg-background/40 pointer-events-none fixed left-0 right-0 top-0 z-50 flex w-full items-center justify-end p-4 backdrop-blur-xl"
+	class="md:background-transparent bg-background/40 pointer-events-none fixed left-[var(--sidebar-width)] right-0 top-0 z-50 flex items-center justify-end p-4 backdrop-blur-xl"
 >
 	<div class="pointer-events-auto flex items-center space-x-2">
 		<Button variant="ghost" size="sm" onclick={toggleSettings}>

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsDialog.svelte

@@ -6,7 +6,16 @@
 	import { ScrollArea } from '$lib/components/ui/scroll-area';
 	import { Textarea } from '$lib/components/ui/textarea';
 	import { Settings, Filter, Hand, MessageSquare, Plus, Beaker } from '@lucide/svelte';
-	import type { ConfigValue, FieldConfig } from '$lib/types/settings';
+	import type { FieldConfig } from '$lib/types/settings';
+	import {
+		getConfig,
+		setConfig,
+		resetConfig,
+		CONFIG_DEFAULT,
+		type ConfigType
+	} from '$lib/utils/settings';
+	import ChatSettingsFooter from './ChatSettingsFooter.svelte';
+	import ChatSettingsSection from './ChatSettingsSection.svelte';
 
 	interface Props {
 		onOpenChange?: (open: boolean) => void;
@@ -15,59 +24,22 @@
 
 	let { onOpenChange, open = false }: Props = $props();
 
-	// Mock configuration - will be replaced with real stores
-	let config: Record<string, ConfigValue> = $state({
-		// General
-		apiKey: '',
-		systemMessage: '',
-		temperature: 0.8,
-		top_k: 40,
-		top_p: 0.95,
-		min_p: 0.05,
-		max_tokens: 2048,
-		pasteLongTextToFileLen: 2000,
-		pdfAsImage: false,
+	// Load configuration from localStorage
+	let config: ConfigType = $state(getConfig());
 
-		// Samplers
-		samplers: 'top_k;tfs_z;typical_p;top_p;min_p;temperature',
-		dynatemp_range: 0.0,
-		dynatemp_exponent: 1.0,
-		typical_p: 1.0,
-		xtc_probability: 0.0,
-		xtc_threshold: 0.1,
-
-		// Penalties
-		repeat_last_n: 64,
-		repeat_penalty: 1.0,
-		presence_penalty: 0.0,
-		frequency_penalty: 0.0,
-		dry_multiplier: 0.0,
-		dry_base: 1.75,
-		dry_allowed_length: 2,
-		dry_penalty_last_n: -1,
-
-		// Reasoning
-		showThoughtInProgress: true,
-		excludeThoughtOnReq: false,
-
-		// Advanced
-		showTokensPerSecond: false,
-		custom: '',
-
-		// Experimental
-		pyInterpreterEnabled: false
-	});
-
-	const defaultConfig = $state.snapshot(config);
+	// Use CONFIG_DEFAULT for placeholders to avoid state reference issues
+	const defaultConfig = CONFIG_DEFAULT;
 
 	function handleSave() {
-		// TODO: Save to stores and localStorage
-		console.log('Saving config:', config);
+		// Save configuration to localStorage
+		setConfig(config);
+		console.log('Settings saved to localStorage');
 		onOpenChange?.(false);
 	}
 
 	function handleReset() {
-		Object.assign(config, defaultConfig);
+		// Reset to default configuration
+		config = resetConfig();
 	}
 
 	function handleClose() {
@@ -172,7 +144,7 @@
 <Dialog.Root {open} {onOpenChange}>
 	<Dialog.Content class="flex h-[64vh] flex-col gap-0 p-0" style="max-width: 48rem;">
 		<div class="flex flex-1 overflow-hidden">
-			<div class="w-64 border-r p-6">
+			<div class="border-border/30 w-64 border-r p-6">
 				<nav class="space-y-1 py-2">
 					<Dialog.Title class="mb-6 flex items-center gap-2">Settings</Dialog.Title>
 
@@ -193,12 +165,7 @@
 
 			<ScrollArea class="flex-1">
 				<div class="space-y-6 p-6">
-					<div class="flex items-center gap-2 border-b pb-2">
-						<currentSection.icon class="h-5 w-5" />
-						<h3 class="text-lg font-semibold">{currentSection.title}</h3>
-					</div>
-
-					<div class="space-y-6">
+					<ChatSettingsSection title={currentSection.title} icon={currentSection.icon}>
 						{#each currentSection.fields as field}
 							<div class="space-y-2">
 								{#if field.type === 'input'}
@@ -265,7 +232,7 @@
 								{/if}
 							</div>
 						{/each}
-					</div>
+					</ChatSettingsSection>
 
 					<div class="mt-8 border-t pt-6">
 						<p class="text-muted-foreground text-xs">
@@ -276,14 +243,6 @@
 			</ScrollArea>
 		</div>
 
-		<div class="flex justify-between border-t p-6">
-			<Button variant="outline" onclick={handleReset}>Reset to default</Button>
-
-			<div class="flex gap-2">
-				<Button variant="outline" onclick={handleClose}>Close</Button>
-
-				<Button variant="default" onclick={handleSave}>Save</Button>
-			</div>
-		</div>
+		<ChatSettingsFooter onSave={handleSave} onReset={handleReset} onClose={handleClose} />
 	</Dialog.Content>
 </Dialog.Root>

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFooter.svelte

@@ -22,7 +22,7 @@
 	}
 </script>
 
-<div class="flex justify-between border-t p-6">
+<div class="border-border/30 flex justify-between border-t p-6">
 	<Button variant="outline" onclick={handleReset}>Reset to default</Button>
 	<div class="flex gap-2">
 		<Button variant="outline" onclick={handleClose}>Close</Button>

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsSection.svelte

@@ -10,9 +10,11 @@
 	let { children, title, icon }: Props = $props();
 </script>
 
-<div class="flex-column flex items-center gap-2 border-b pb-2">
-	{@render icon({ class: 'h-5 w-5' })}
-	<h3 class="text-lg font-semibold">{title}</h3>
+<div>
+	<div class="border-border/30 flex items-center gap-2 border-b pb-2">
+		{@render icon({ class: 'h-5 w-5' })}
+		<h3 class="text-lg font-semibold">{title}</h3>
+	</div>
 
 	<div class="space-y-6">
 		{@render children()}

tools/server/webui/src/lib/components/ui/dialog/dialog-content.svelte

@@ -25,7 +25,7 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 border-border/30 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
 			className
 		)}
 		{...restProps}

tools/server/webui/src/lib/components/ui/sidebar/sidebar.svelte

@@ -42,7 +42,7 @@
 			data-sidebar="sidebar"
 			data-slot="sidebar"
 			data-mobile="true"
-			class="z-99999 bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+			class="z-99999 sm:z-99 bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
 			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
 			{side}
 		>
@@ -80,7 +80,7 @@
 		<div
 			data-slot="sidebar-container"
 			class={cn(
-				'w-(--sidebar-width) z-999 fixed inset-y-0 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex',
+				'w-(--sidebar-width) z-999 fixed inset-y-0 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:z-0 md:flex',
 				side === 'left'
 					? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
 					: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',

tools/server/webui/src/lib/utils/settings.ts

@@ -0,0 +1,99 @@
+// Settings management using localStorage, compatible with webui-old structure
+
+import { browser } from "$app/environment";
+
+export const CONFIG_DEFAULT: Record<string, string | number | boolean> = {
+	// Note: in order not to introduce breaking changes, please keep the same data type (number, string, etc) if you want to change the default value. Do not use null or undefined for default value.
+	// Do not use nested objects, keep it single level. Prefix the key if you need to group them.
+	apiKey: '',
+	systemMessage: '',
+	showTokensPerSecond: false,
+	showThoughtInProgress: true,
+	excludeThoughtOnReq: false,
+	pasteLongTextToFileLen: 2000,
+	pdfAsImage: false,
+	// make sure these default values are in sync with `common.h`
+	samplers: 'top_k;tfs_z;typical_p;top_p;min_p;temperature',
+	temperature: 0.8,
+	dynatemp_range: 0.0,
+	dynatemp_exponent: 1.0,
+	top_k: 40,
+	top_p: 0.95,
+	min_p: 0.05,
+	xtc_probability: 0.0,
+	xtc_threshold: 0.1,
+	typical_p: 1.0,
+	repeat_last_n: 64,
+	repeat_penalty: 1.0,
+	presence_penalty: 0.0,
+	frequency_penalty: 0.0,
+	dry_multiplier: 0.0,
+	dry_base: 1.75,
+	dry_allowed_length: 2,
+	dry_penalty_last_n: -1,
+	max_tokens: 2048,
+	custom: '', // custom json-stringified object
+	// experimental features
+	pyInterpreterEnabled: false
+};
+
+export type ConfigType = typeof CONFIG_DEFAULT & {
+	[key: string]: string | number | boolean;
+};
+
+/**
+ * Get configuration from localStorage
+ * Returns default values for missing keys to prevent breaking changes
+ */
+export function getConfig(): ConfigType {
+	if (!browser) return { ...CONFIG_DEFAULT };
+	try {
+		const savedVal = JSON.parse(localStorage.getItem('config') || '{}');
+		// to prevent breaking changes in the future, we always provide default value for missing keys
+		return {
+			...CONFIG_DEFAULT,
+			...savedVal,
+		};
+	} catch (error) {
+		console.warn('Failed to parse config from localStorage, using defaults:', error);
+		return { ...CONFIG_DEFAULT };
+	}
+}
+
+/**
+ * Save configuration to localStorage
+ */
+export function setConfig(config: ConfigType): void {
+	try {
+		localStorage.setItem('config', JSON.stringify(config));
+	} catch (error) {
+		console.error('Failed to save config to localStorage:', error);
+	}
+}
+
+/**
+ * Get theme from localStorage
+ */
+export function getTheme(): string {
+	return localStorage.getItem('theme') || 'auto';
+}
+
+/**
+ * Set theme in localStorage
+ */
+export function setTheme(theme: string): void {
+	if (theme === 'auto') {
+		localStorage.removeItem('theme');
+	} else {
+		localStorage.setItem('theme', theme);
+	}
+}
+
+/**
+ * Reset configuration to defaults
+ */
+export function resetConfig(): ConfigType {
+	const defaultConfig = { ...CONFIG_DEFAULT };
+	setConfig(defaultConfig);
+	return defaultConfig;
+}