From dd02ae6a6b7085f95d7327208f49466f60de3c45 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 17 Aug 2026 09:42:00 +0200
Subject: [PATCH] ui : preview settings diff before importing from
 Import/Export tab

The Import/Export settings tab now opens the same settings diff dialog
used by drag-and-drop (showing which values would change) before applying
an imported settings file. It reuses computeSettingsDiff from the global
drop-import hook instead of importing immediately.
---
 .../SettingsChatImportExportTab.svelte        | 52 ++++++++++++++++---
 1 file changed, 46 insertions(+), 6 deletions(-)

diff --git a/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte b/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte
index 0fb5cd11a3..14ba166e29 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte
@@ -4,12 +4,16 @@
 	import {
 		DialogConfirmation,
 		DialogConversationSelection,
-		DialogExportSettings
+		DialogExportSettings,
+		DialogSettingsImportPreview
 	} from '$lib/components/app';
+	import type { SettingsDiffEntry } from '$lib/components/app/dialogs/DialogSettingsImportPreview.svelte';
 	import SettingsGroup from '$lib/components/app/settings/SettingsGroup.svelte';
 	import { ConversationSelectionMode, FileExtensionText, HtmlInputType } from '$lib/enums';
+	import { computeSettingsDiff } from '$lib/hooks/use-drop-import.svelte';
 	import { ConversationTransferService } from '$lib/services';
 	import { conversationsStore, settingsStore } from '$lib/stores';
+	import type { SettingsConfigType, SettingsExportType } from '$lib/types';
 	import { createMessageCountMap } from '$lib/utils';
 	import { fade } from 'svelte/transition';
 	import { toast } from 'svelte-sonner';
@@ -35,6 +39,9 @@
 	let showSettingsImportSummary = $state(false);
 	let showSettingsExportDialog = $state(false);
 	let includeSensitiveData = $state(false);
+	let showSettingsImportPreview = $state(false);
+	let pendingSettingsImport = $state<SettingsExportType | null>(null);
+	let settingsImportDiff = $state<SettingsDiffEntry[]>([]);
 
 	function handleSettingsExport() {
 		showSettingsExportDialog = true;
@@ -92,11 +99,12 @@
 						return;
 					}
 
-					settingsStore.importSettings(data);
-
-					showSettingsImportSummary = true;
-					showSettingsExportSummary = false;
-					toast.success('Settings imported successfully');
+					pendingSettingsImport = data as SettingsExportType;
+					settingsImportDiff = computeSettingsDiff(
+						$state.snapshot(settingsStore.config) as SettingsConfigType,
+						data.config
+					);
+					showSettingsImportPreview = true;
 				} catch (err) {
 					console.error('Failed to import settings:', err);
 					toast.error('Failed to import settings');
@@ -110,6 +118,31 @@
 		}
 	}
 
+	function handleSettingsImportConfirm() {
+		showSettingsImportPreview = false;
+
+		if (!pendingSettingsImport) return;
+
+		try {
+			settingsStore.importSettings(pendingSettingsImport);
+
+			pendingSettingsImport = null;
+			settingsImportDiff = [];
+			showSettingsImportSummary = true;
+			showSettingsExportSummary = false;
+			toast.success('Settings imported successfully');
+		} catch (err) {
+			console.error('Failed to import settings:', err);
+			toast.error('Failed to import settings');
+		}
+	}
+
+	function handleSettingsImportCancel() {
+		showSettingsImportPreview = false;
+		pendingSettingsImport = null;
+		settingsImportDiff = [];
+	}
+
 	async function handleExportClick() {
 		try {
 			const allConversations = conversationsStore.conversations;
@@ -321,6 +354,13 @@
 	onCancel={handleSettingsExportCancel}
 />
 
+<DialogSettingsImportPreview
+	bind:open={showSettingsImportPreview}
+	diff={settingsImportDiff}
+	onConfirm={handleSettingsImportConfirm}
+	onCancel={handleSettingsImportCancel}
+/>
+
 <DialogConversationSelection
 	conversations={availableConversations}
 	{messageCountMap}