From 29776f6a487b07750dd9b2dcd758b9a8e9f82e65 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sat, 22 Aug 2026 09:55:15 +0200
Subject: [PATCH] refactor(ui): switch SettingsChat to in-app section
 navigation

---
 .../settings/SettingsChat/SettingsChat.svelte | 48 +++++++-------
 .../SettingsChatDesktopSidebar.svelte         | 49 ++++-----------
 .../settings/SettingsChatMobileHeader.svelte  | 63 ++++++-------------
 .../app/settings/SettingsFooter.svelte        |  2 +-
 .../app/settings/SettingsMcpServers.svelte    |  4 +-
 .../src/lib/components/app/settings/index.ts  |  6 +-
 6 files changed, 60 insertions(+), 112 deletions(-)

diff --git a/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte b/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte
index 347e8484bd..8793900759 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { RefreshCw } from '@lucide/svelte';
-	import { goto } from '$app/navigation';
-	import { page } from '$app/state';
 	import {
 		SettingsChatDesktopSidebar,
 		SettingsChatFields,
@@ -18,21 +16,29 @@
 		SETTINGS_SECTION_SLUGS
 	} from '$lib/constants';
 	import { ColorMode } from '$lib/enums/ui.enums';
-	import { RouterService } from '$lib/services/router.service';
-	import { modelsStore, serverStore, settingsReferrer, settingsStore } from '$lib/stores';
-	import type { SettingsSection } from '$lib/types';
+	import { modelsStore, serverStore, settingsStore } from '$lib/stores';
+	import type { SettingsSection, SettingsSectionTitle } from '$lib/types';
 	import { setMode } from 'mode-watcher';
 	import { fade } from 'svelte/transition';
 	interface Props {
 		initialSection?: string;
-		getSectionHref?: (section: SettingsSection) => string;
+		onSectionChange?: (section: SettingsSectionTitle) => void;
+		onClose?: () => void;
 	}
 
-	let { getSectionHref, initialSection }: Props = $props();
+	let { initialSection, onClose, onSectionChange }: Props = $props();
 
-	let activeSlug = $derived(
-		initialSection ?? (page.params as Record<string, string | undefined>).section ?? 'general'
-	);
+	let activeSlug = $derived(initialSection ?? 'general');
+
+	function handleSectionChange(section: SettingsSectionTitle) {
+		const found = SETTINGS_CHAT_SECTIONS.find((s) => s.title === section);
+
+		if (found) {
+			activeSlug = found.slug;
+		}
+
+		onSectionChange?.(section);
+	}
 
 	let currentSection = $derived(
 		SETTINGS_CHAT_SECTIONS.find((section) => section.slug === activeSlug) ||
@@ -115,7 +121,7 @@
 		}
 
 		settingsStore.updateMultipleConfig(processedConfig);
-		goto(settingsReferrer.url);
+		onClose?.();
 	}
 
 	export function reset() {
@@ -123,32 +129,24 @@
 	}
 </script>
 
-<div in:fade={{ duration: 150 }} class="mx-auto flex h-full w-full flex-col md:pl-8">
-	<div class="flex flex-1 flex-col gap-4 md:flex-row">
+<div in:fade={{ duration: 150 }} class="mx-auto flex h-full w-full flex-col">
+	<div class="flex flex-1 flex-col md:flex-row md:gap-4">
 		<SettingsChatDesktopSidebar
-			getHref={getSectionHref ??
-				((section: SettingsSection) => RouterService.settings(section.slug))}
 			isActive={(section: SettingsSection) => section.slug === activeSlug}
+			onSectionChange={handleSectionChange}
 			sections={SETTINGS_CHAT_SECTIONS}
 		/>
 
 		<SettingsChatMobileHeader
 			bind:this={mobileHeader}
-			getHref={getSectionHref ??
-				((section: SettingsSection) => RouterService.settings(section.slug))}
 			isActive={(section: SettingsSection) => section.slug === activeSlug}
+			onSectionChange={handleSectionChange}
 			sections={SETTINGS_CHAT_SECTIONS}
 		/>
 
-		<div class="mx-auto max-w-3xl flex-1">
-			<div class="space-y-6 p-4 md:p-6 md:pt-28">
+		<div class="mx-auto max-w-2xl px-4 flex-1 md:mt-4">
+			<div class="space-y-6 pt-3">
 				<div class="grid">
-					<div class="mb-6 flex items-center gap-2 border-b border-border/30 pb-6 md:flex">
-						<currentSection.icon class="h-5 w-5" />
-
-						<h3 class="text-lg font-semibold">{currentSection.title}</h3>
-					</div>
-
 					{#if currentSection.slug === SETTINGS_SECTION_SLUGS.TOOLS}
 						<SettingsChatToolsTab />
 					{:else if currentSection.slug === SETTINGS_SECTION_SLUGS.IMPORT_EXPORT}
diff --git a/tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte b/tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte
index 08671da2ff..68a73cc4e8 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte
@@ -1,54 +1,31 @@
 <script lang="ts">
-	import { Settings } from '@lucide/svelte';
 	import { ICON_CLASS_DEFAULT } from '$lib/constants';
 	import type { SettingsSection, SettingsSectionTitle } from '$lib/types';
 
 	interface Props {
 		sections: SettingsSection[];
 		isActive: (section: SettingsSection) => boolean;
-		getHref?: (section: SettingsSection) => string;
 		onSectionChange?: (section: SettingsSectionTitle) => void;
 	}
 
-	let { getHref, isActive, onSectionChange, sections }: Props = $props();
+	let { isActive, onSectionChange, sections }: Props = $props();
 </script>
 
-<div class="sticky top-2 hidden w-64 flex-col self-start bg-background py-4 md:flex gap-6">
-	<div class="flex items-center gap-2 py-2">
-		<Settings class="h-5 w-5 md:h-6 md:w-6" />
-
-		<h1 class="text-xl font-semibold md:text-2xl">Settings</h1>
-	</div>
-
+<div class="sticky top-12 hidden w-64 flex-col self-start bg-background md:flex gap-6">
 	<nav class="space-y-1">
 		{#each sections as section (section.title)}
-			{#if getHref}
-				<a
-					class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm no-underline transition-colors hover:bg-accent {isActive(
-						section
-					)
-						? 'bg-accent text-accent-foreground'
-						: 'text-muted-foreground'}"
-					href={getHref(section)}
-				>
-					<section.icon class={ICON_CLASS_DEFAULT} />
+			<button
+				class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-accent {isActive(
+					section
+				)
+					? 'bg-accent text-accent-foreground'
+					: 'text-muted-foreground'}"
+				onclick={() => onSectionChange?.(section.title)}
+			>
+				<section.icon class={ICON_CLASS_DEFAULT} />
 
-					<span class="ml-2">{section.title}</span>
-				</a>
-			{:else}
-				<button
-					class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-accent {isActive(
-						section
-					)
-						? 'bg-accent text-accent-foreground'
-						: 'text-muted-foreground'}"
-					onclick={() => onSectionChange?.(section.title)}
-				>
-					<section.icon class={ICON_CLASS_DEFAULT} />
-
-					<span class="ml-2">{section.title}</span>
-				</button>
-			{/if}
+				<span class="ml-2">{section.title}</span>
+			</button>
 		{/each}
 	</nav>
 </div>
diff --git a/tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte b/tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte
index 887d28489c..ab85ef5eee 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { Settings } from '@lucide/svelte';
 	import { ScrollCarousel } from '$lib/components/app';
 	import { ICON_CLASS_DEFAULT, UI_DATA_ATTRS } from '$lib/constants';
 	import { BooleanString } from '$lib/enums';
@@ -10,11 +9,10 @@
 	interface Props {
 		sections: SettingsSection[];
 		isActive: (section: SettingsSection) => boolean;
-		getHref?: (section: SettingsSection) => string;
 		onSectionChange?: (section: SettingsSectionTitle) => void;
 	}
 
-	let { getHref, isActive, onSectionChange, sections }: Props = $props();
+	let { isActive, onSectionChange, sections }: Props = $props();
 
 	const carousel = useScrollCarousel();
 
@@ -37,51 +35,26 @@
 	}
 </script>
 
-<div class="sticky top-0 z-10 flex flex-col bg-background md:hidden">
-	<div class="flex items-center gap-2 px-4 pt-4 pb-2 md:pt-6">
-		<Settings class="h-5 w-5 md:h-6 md:w-6" />
-
-		<h1 class="text-xl font-semibold md:text-2xl">Settings</h1>
-	</div>
-
-	<div class="border-b border-border/30 py-2">
+<div class="flex flex-col bg-background md:hidden sticky top-13 z-50">
+	<div class="border-b border-border/30">
 		<ScrollCarousel alwaysShowArrows {carousel} containerClass="py-2" innerClass="gap-2">
 			{#each sections as section (section.title)}
-				{#if getHref}
-					<a
-						class="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm whitespace-nowrap no-underline transition-colors first:ml-4 last:mr-4 hover:bg-accent {isActive(
-							section
-						)
-							? 'bg-accent text-accent-foreground'
-							: 'text-muted-foreground'}"
-						{...{ [UI_DATA_ATTRS.ACTIVE]: isActive(section) }}
-						href={getHref(section)}
-						onclick={(e: MouseEvent) => {
-							carousel.scrollToCenter(e.currentTarget as HTMLElement);
-						}}
-					>
-						<section.icon class="{ICON_CLASS_DEFAULT} flex-shrink-0" />
+				<button
+					class="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm whitespace-nowrap transition-colors first:ml-4 last:mr-4 hover:bg-accent {isActive(
+						section
+					)
+						? 'bg-accent text-accent-foreground'
+						: 'text-muted-foreground'}"
+					{...{ [UI_DATA_ATTRS.ACTIVE]: isActive(section) }}
+					onclick={(e: MouseEvent) => {
+						onSectionChange?.(section.title);
+						carousel.scrollToCenter(e.currentTarget as HTMLElement);
+					}}
+				>
+					<section.icon class="{ICON_CLASS_DEFAULT} flex-shrink-0" />
 
-						<span>{section.title}</span>
-					</a>
-				{:else}
-					<button
-						class="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm whitespace-nowrap transition-colors first:ml-4 last:mr-4 hover:bg-accent {isActive(
-							section
-						)
-							? 'bg-accent text-accent-foreground'
-							: 'text-muted-foreground'}"
-						{...{ [UI_DATA_ATTRS.ACTIVE]: isActive(section) }}
-						onclick={(e: MouseEvent) => {
-							onSectionChange?.(section.title);
-							carousel.scrollToCenter(e.currentTarget as HTMLElement);
-						}}
-					>
-						<section.icon class="{ICON_CLASS_DEFAULT} flex-shrink-0" />
-
-						<span>{section.title}</span>
-					</button>
-				{/if}
+					<span>{section.title}</span>
+				</button>
 			{/each}
 		</ScrollCarousel>
 	</div>
diff --git a/tools/ui/src/lib/components/app/settings/SettingsFooter.svelte b/tools/ui/src/lib/components/app/settings/SettingsFooter.svelte
index 0f59a831f9..04efde9df5 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsFooter.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsFooter.svelte
@@ -29,7 +29,7 @@
 	}
 </script>
 
-<div class="sticky bottom-0 mx-auto mt-4 flex w-full justify-between p-6">
+<div class="sticky bottom-0 mx-auto mt-4 flex w-full justify-between pb-4 md:pb-0">
 	<div class="flex gap-2">
 		<Button onclick={handleResetClick} variant="outline">
 			<RotateCcw class="h-3 w-3" />
diff --git a/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte b/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte
index 6857978338..127a035ad5 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte
@@ -78,8 +78,8 @@
 		</div>
 	{:else}
 		<div
-			class="grid gap-3 {className}"
-			style="grid-template-columns: repeat(auto-fill, minmax(min(25rem, calc(100dvw - 2rem)), 1fr));"
+			class="grid gap-4 {className}"
+			style="grid-template-columns: repeat(auto-fill, minmax(min(25rem, calc(100dvw - 4rem)), 1fr));"
 		>
 			{#each servers as server (server.id)}
 				{#if isServerPending(server.id, server.enabled)}
diff --git a/tools/ui/src/lib/components/app/settings/index.ts b/tools/ui/src/lib/components/app/settings/index.ts
index 9318fd4d30..7473e6af8e 100644
--- a/tools/ui/src/lib/components/app/settings/index.ts
+++ b/tools/ui/src/lib/components/app/settings/index.ts
@@ -1,21 +1,21 @@
 /**
  * Full chat settings page layout with sidebar, mobile header, and content area.
  * Manages local configuration state, section navigation, and context setup.
- * Accepts an optional `initialSection` prop to override the URL-based section resolution.
+ * Accepts an optional `initialSection` prop to set the initial active section.
  */
 export { default as SettingsChat } from './SettingsChat/SettingsChat.svelte';
 
 /**
  * Desktop sidebar navigation for chat settings.
  * Displays a list of settings sections with icons and titles.
- * Supports both hash-link navigation (via `getHref`) and in-app section switching (via `onSectionChange`).
+ * Switches sections in-app via `onSectionChange`.
  */
 export { default as SettingsChatDesktopSidebar } from './SettingsChatDesktopSidebar.svelte';
 
 /**
  * Mobile header with a horizontally scrollable section picker for chat settings.
  * Shows chevron buttons for scroll navigation and highlights the active section.
- * Supports both hash-link navigation (via `getHref`) and in-app section switching (via `onSectionChange`).
+ * Switches sections in-app via `onSectionChange`.
  */
 export { default as SettingsChatMobileHeader } from './SettingsChatMobileHeader.svelte';