From ccfed89d46ec1ab5c14b8969dc68c68f2dcd3802 Mon Sep 17 00:00:00 2001
From: davidweb3-ctrl <prodavidweb3@gmail.com>
Date: Sat, 14 Mar 2026 09:11:14 +0000
Subject: [PATCH] fix(settings-sync): add confirmation dialog before import

Adds a confirmation step before applying imported settings to prevent
accidental overwrites of sync-managed local state.

- Added confirmImport state to track pending import
- Added pendingImport state to store file content
- Shows warning with Yes/No confirmation before import
- Cancel option discards the pending import

Fixes PlatformNetwork/bounty-challenge#27667
---
 src/components/settings/SettingsSyncPanel.tsx | 111 +++++++++++++-----
 1 file changed, 83 insertions(+), 28 deletions(-)

diff --git a/src/components/settings/SettingsSyncPanel.tsx b/src/components/settings/SettingsSyncPanel.tsx
index 906c5f25..e7105389 100644
--- a/src/components/settings/SettingsSyncPanel.tsx
+++ b/src/components/settings/SettingsSyncPanel.tsx
@@ -719,6 +719,8 @@ function ImportExportSection() {
   const [importing, setImporting] = createSignal(false);
   const [exporting, setExporting] = createSignal(false);
   const [importError, setImportError] = createSignal<string | null>(null);
+  const [confirmImport, setConfirmImport] = createSignal(false);
+  const [pendingImport, setPendingImport] = createSignal<string | null>(null);
 
   let fileInputRef: HTMLInputElement | undefined;
 
@@ -749,20 +751,39 @@ function ImportExportSection() {
     const file = input.files?.[0];
     if (!file) return;
 
-    setImporting(true);
     setImportError(null);
 
     try {
       const text = await file.text();
-      await importSettings(text);
+      setPendingImport(text);
+      setConfirmImport(true);
     } catch (e) {
       setImportError(e instanceof Error ? e.message : String(e));
     } finally {
-      setImporting(false);
       input.value = "";
     }
   };
 
+  const handleConfirmImport = async () => {
+    if (!pendingImport()) return;
+
+    setImporting(true);
+    try {
+      await importSettings(pendingImport()!);
+      setConfirmImport(false);
+      setPendingImport(null);
+    } catch (e) {
+      setImportError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  const handleCancelImport = () => {
+    setConfirmImport(false);
+    setPendingImport(null);
+  };
+
   return (
     <FormGroup title="Backup & Restore">
       <div class="space-y-3">
@@ -776,31 +797,65 @@ function ImportExportSection() {
           </InfoBox>
         </Show>
 
-        <div class="flex items-center gap-2">
-          <Button
-            variant="secondary"
-            onClick={handleExport}
-            loading={exporting()}
-            icon={<DownloadIcon />}
-          >
-            Export Settings
-          </Button>
-          <Button
-            variant="secondary"
-            onClick={handleImportClick}
-            loading={importing()}
-            icon={<UploadIcon />}
-          >
-            Import Settings
-          </Button>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept=".json"
-            class="hidden"
-            onChange={handleFileSelect}
-          />
-        </div>
+        <Show
+          when={confirmImport()}
+          fallback={
+            <div class="flex items-center gap-2">
+              <Button
+                variant="secondary"
+                onClick={handleExport}
+                loading={exporting()}
+                icon={<DownloadIcon />}
+              >
+                Export Settings
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={handleImportClick}
+                loading={importing()}
+                icon={<UploadIcon />}
+              >
+                Import Settings
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".json"
+                class="hidden"
+                onChange={handleFileSelect}
+              />
+            </div>
+          }
+        >
+          <div class="p-3 rounded-lg border border-yellow-500/30 bg-yellow-500/10">
+            <div class="flex items-start justify-between">
+              <div>
+                <span class="font-medium text-yellow-400">Confirm Import</span>
+                <p class="text-sm text-foreground-muted mt-1">
+                  This will overwrite your current sync-managed settings with the imported backup.
+                  This action cannot be undone.
+                </p>
+              </div>
+            </div>
+            <div class="mt-3 flex items-center gap-2">
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={handleConfirmImport}
+                loading={importing()}
+              >
+                Yes, Import
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleCancelImport}
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </Show>
       </div>
     </FormGroup>
   );