import export works again || animation is weird

app/components/settings/Settings.tsx

@@ -652,71 +652,87 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       case 'im/export':
         return (
           <div className="settings-section">
-            <h2>Import & Export</h2>
-            <div className="settings-option">
-              <h3>Export the settings</h3>
-              <button onClick={() => exportSettings(currentSettings)} className='export-button'>Export Settings</button>
-            </div>
-            <div className="settings-option">
-              <h3>Import the settings</h3>
-              <input type="file" onChange={handleImport} accept=".json" className='import-file' />
-            </div>
+          <h2>Import & Export</h2>
+          <div className="settings-option">
+            <h3>Export the settings</h3>
+            <button onClick={handleExport} className="export-button">
+              Export Settings
+            </button>
           </div>
-        );
-
+          <div className="settings-option">
+            <h3>Import the settings</h3>
+            <input
+              type="file"
+              onChange={handleImport}
+              accept=".json"
+              className="import-file"
+            />
+          </div>
+        </div>
+      );
       default:
         return null;
     }
   };
 
-  // Handle file import
   const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files && event.target.files.length > 0) {
-      const file = event.target.files[0];
-      importSettings(file, applyCustomTheme);
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const fileContent = e.target?.result as string;
+        importSettings(fileContent); // Call the importSettings function with the file content
+      };
+      reader.readAsText(file);
     }
   };
 
-  const currentSettings = {
-    ...settings.userPreferences,
-    ...settings.theme,
-    ...settings.theme.faqSettings,
-    ...settings.theme.popupSettings,
-    ...settings.apiKeys,
-    ...settings.generalSettings,
+  const handleExport = () => {
+    const settingsData = exportSettings();
+
+    // Create a blob and download the exported settings
+    const blob = new Blob([settingsData], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'settings.json';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url); // Clean up the URL object
   };
 
   return (
-    <div className="popup-overlay">
-      <div className="settings-content">
-        <div className="settings-container">
-          <div className="sidebar">
-            <ul>
-              <li onClick={() => setActiveSection('general')}>General</li>
-              <li onClick={() => setActiveSection('privacy')}>Privacy</li>
-              <li onClick={() => setActiveSection('theme')}>Theme</li>
-              <li onClick={() => setActiveSection('foss')}>FOSS</li>
-              <li onClick={() => setActiveSection('account')}>Account</li>
-              <li onClick={() => setActiveSection('api')}>API Keys</li>
-              <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
-            </ul>
-          </div>
-          <div className="settings-main">
-            <h2>Settings for {accountName}</h2>
-            {renderSettingsContent()}
-            <button className="close-popup" onClick={closeSettings}>Close</button>
-            <button className="apply" onClick={async () => {
-              getAllLocalStorageItems();
-              closeSettings();
-              await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
-              window.location.reload();
-            }}>
-              Apply
-            </button>
+      <div className="popup-overlay">
+        <div className="settings-content">
+          <div className="settings-container">
+            <div className="sidebar">
+              <ul>
+                <li onClick={() => setActiveSection('general')}>General</li>
+                <li onClick={() => setActiveSection('privacy')}>Privacy</li>
+                <li onClick={() => setActiveSection('theme')}>Theme</li>
+                <li onClick={() => setActiveSection('foss')}>FOSS</li>
+                <li onClick={() => setActiveSection('account')}>Account</li>
+                <li onClick={() => setActiveSection('api')}>API Keys</li>
+                <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
+              </ul>
+            </div>
+            <div className="settings-main">
+              <h2>Settings for {accountName}</h2>
+              {renderSettingsContent()}
+              <button className="close-popup" onClick={closeSettings}>Close</button>
+              <button className="apply" onClick={async () => {
+                getAllLocalStorageItems();
+                closeSettings();
+                await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+                window.location.reload();
+              }}>
+                Apply
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
   );
 };
 

app/components/settings/settingUtils.ts

@@ -1,23 +1,36 @@
-// settingsUtils.ts
+// settingsManager.ts
 
-// Export the current settings as a JSON file
-export const exportSettings = (settings: any) => {
-    const blob = new Blob([JSON.stringify(settings)], { type: 'application/json' });
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(blob);
-    link.download = 'settings.json';
-    link.click();
-  };
-  
-  // Import settings from a JSON file
-  export const importSettings = (file: File, applySettings: (settings: any) => void) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const content = e.target?.result as string;
-      const importedSettings = JSON.parse(content);
-      applySettings(importedSettings);
-    };
-    reader.readAsText(file);
-  };
+// Method to export localStorage to a JSON object
+export function exportSettings(): string {
+  const settings: { [key: string]: any } = {};
 
-  
+  // Loop through all keys in localStorage and add them to the settings object
+  for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key) {
+          settings[key] = localStorage.getItem(key);
+      }
+  }
+
+  // Convert settings object to JSON string
+  return JSON.stringify(settings, null, 2);
+}
+
+// Method to import settings from a JSON object, clearing old localStorage
+export function importSettings(jsonData: string): void {
+  try {
+      const parsedSettings = JSON.parse(jsonData);
+
+      // Clear the current localStorage
+      localStorage.clear();
+
+      // Loop through parsed settings and save them in localStorage
+      Object.keys(parsedSettings).forEach((key) => {
+          localStorage.setItem(key, parsedSettings[key]);
+      });
+
+      console.log("Settings imported successfully!");
+  } catch (error) {
+      console.error("Invalid JSON data:", error);
+  }
+}