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.
This commit is contained in:
Aleksander Grygier
2026-08-17 09:42:00 +02:00
parent 67adbb18ab
commit dd02ae6a6b
@@ -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}