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>
   );
 };