ui : move reset settings button next to reload app, pad settings caption

Assisted-by: Claude (Opus 5.5 Medium)

tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte

@@ -6,7 +6,8 @@
 		SettingsChatImportExportTab,
 		SettingsChatMobileHeader,
 		SettingsChatToolsTab,
-		SettingsFooter
+		SettingsFooter,
+		SettingsResetButton
 	} from '$lib/components/app/settings';
 	import { Button } from '$lib/components/ui/button';
 	import {
@@ -182,7 +183,9 @@
 							/>
 
 							{#if currentSection.slug === SETTINGS_SECTION_SLUGS.GENERAL}
-								<div class="flex justify-end">
+								<div class="flex justify-end gap-2">
+									<SettingsResetButton onReset={handleReset} />
+
 									<Button onclick={() => window.location.reload()} variant="outline">
 										<RefreshCw class="h-3 w-3" />
 										Reload app
@@ -193,12 +196,12 @@
 					{/if}
 				</div>
 
-				<div class="mt-8 border-t border-border/30 pt-6">
+				<div class="mt-8 border-t border-border/30 pt-6 pb-6">
 					<p class="text-xs text-muted-foreground">Settings are saved in browser's localStorage</p>
 				</div>
 			</div>
 
-			<SettingsFooter {hasChanges} onReset={handleReset} onSave={handleSave} />
+			<SettingsFooter {hasChanges} onSave={handleSave} />
 		</div>
 	</div>
 </div>

tools/ui/src/lib/components/app/settings/SettingsFooter.svelte

@@ -1,67 +1,20 @@
 <script lang="ts">
-	import { RotateCcw } from '@lucide/svelte';
-	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 	import { Button } from '$lib/components/ui/button';
-	import { settingsStore } from '$lib/stores';
 
 	interface Props {
 		hasChanges?: boolean;
-		onReset?: () => void;
 		onSave?: () => void;
 	}
 
-	let { hasChanges = true, onReset, onSave }: Props = $props();
-
-	let showResetDialog = $state(false);
-
-	function handleResetClick() {
-		showResetDialog = true;
-	}
-
-	function handleConfirmReset() {
-		settingsStore.forceSyncWithServerDefaults();
-		onReset?.();
-
-		showResetDialog = false;
-	}
+	let { hasChanges = true, onSave }: Props = $props();
 
 	function handleSave() {
 		onSave?.();
 	}
 </script>
 
-<div class="sticky bottom-0 mx-auto mt-4 flex w-full justify-between pb-4 md:pb-0">
-	<div class="flex gap-2">
-		{#if settingsStore.hasCustomSettings}
-			<Button onclick={handleResetClick} variant="outline">
-				<RotateCcw class="h-3 w-3" />
-
-				Reset to default
-			</Button>
-		{/if}
-	</div>
-
-	{#if hasChanges}
+{#if hasChanges}
+	<div class="sticky bottom-0 mx-auto mt-4 flex w-full justify-end pb-4 md:pb-0">
 		<Button onclick={handleSave}>Save settings</Button>
-	{/if}
-</div>
-
-<AlertDialog.Root bind:open={showResetDialog}>
-	<AlertDialog.Content>
-		<AlertDialog.Header>
-			<AlertDialog.Title>Reset Settings to Default</AlertDialog.Title>
-
-			<AlertDialog.Description>
-				Are you sure you want to reset all settings to their default values? This will reset all
-				parameters to the values provided by the server's /props endpoint and remove all your custom
-				configurations.
-			</AlertDialog.Description>
-		</AlertDialog.Header>
-
-		<AlertDialog.Footer>
-			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-
-			<AlertDialog.Action onclick={handleConfirmReset}>Reset to Default</AlertDialog.Action>
-		</AlertDialog.Footer>
-	</AlertDialog.Content>
-</AlertDialog.Root>
+	</div>
+{/if}

tools/ui/src/lib/components/app/settings/SettingsResetButton.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { RotateCcw } from '@lucide/svelte';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { Button } from '$lib/components/ui/button';
+	import { settingsStore } from '$lib/stores';
+
+	interface Props {
+		onReset?: () => void;
+	}
+
+	let { onReset }: Props = $props();
+
+	let showResetDialog = $state(false);
+
+	function handleResetClick() {
+		showResetDialog = true;
+	}
+
+	function handleConfirmReset() {
+		settingsStore.forceSyncWithServerDefaults();
+		onReset?.();
+
+		showResetDialog = false;
+	}
+</script>
+
+{#if settingsStore.hasCustomSettings}
+	<Button onclick={handleResetClick} variant="outline">
+		<RotateCcw class="h-3 w-3" />
+
+		Reset to default
+	</Button>
+{/if}
+
+<AlertDialog.Root bind:open={showResetDialog}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Reset Settings to Default</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				Are you sure you want to reset all settings to their default values? This will reset all
+				parameters to the values provided by the server's /props endpoint and remove all your custom
+				configurations.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+
+			<AlertDialog.Action onclick={handleConfirmReset}>Reset to Default</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

tools/ui/src/lib/components/app/settings/index.ts

@@ -35,12 +35,17 @@ export { default as SettingsChatParameterSourceIndicator } from './SettingsChat/
 export { default as SettingsGroup } from './SettingsGroup.svelte';
 
 /**
- * Footer with save/cancel buttons for settings panel. Positioned at bottom
- * of settings dialog. Save button commits form state to config store,
- * cancel button triggers reset and close.
+ * Sticky footer with the save button for settings panel, shown only when
+ * there are unsaved changes. Save commits form state to config store.
  */
 export { default as SettingsFooter } from './SettingsFooter.svelte';
 
+/**
+ * "Reset to default" button with confirmation dialog, shown only when the
+ * saved config differs from the defaults.
+ */
+export { default as SettingsResetButton } from './SettingsResetButton.svelte';
+
 /**
  * Settings Import/Export panel.
  * Provides UI for importing and exporting chat conversations.