Add profile importing/exporting

src/lib/components/Settings/Profiles/ManageProfilesModal.svelte

@@ -7,7 +7,7 @@
     renameProfile
   } from '$lib/settings';
   import { promptConfirmation, showSnackbar } from '$lib/util';
-  import { Listgroup, ListgroupItem, Modal, Input, Popover } from 'flowbite-svelte';
+  import { Listgroup, ListgroupItem, Modal, Input } from 'flowbite-svelte';
   import {
     CirclePlusSolid,
     CopySolid,

src/lib/components/Settings/Profiles/Profiles.svelte

@@ -2,6 +2,7 @@
   import { changeProfile, currentProfile, profiles } from '$lib/settings';
   import { AccordionItem, Button, Select } from 'flowbite-svelte';
   import ManageProfilesModal from './ManageProfilesModal.svelte';
+  import { showSnackbar } from '$lib/util';
 
   export let onClose: () => void;
 
@@ -16,6 +17,37 @@
     onClose();
   }
 
+  function exportProfiles() {
+    const link = document.createElement('a');
+    const json = localStorage.getItem('profiles') || '';
+    link.href = URL.createObjectURL(new Blob([json], { type: 'application/json' }));
+    link.download = 'profiles.json';
+    link.click();
+    showSnackbar('Profiles exported');
+  }
+
+  let files: FileList;
+  function importProfile() {
+    const [file] = files;
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      const imported = JSON.parse(reader.result?.toString() || '');
+      profiles.update((prev) => {
+        return {
+          ...prev,
+          ...imported
+        };
+      });
+      onClose();
+      showSnackbar('Profiles imported');
+    };
+
+    if (file) {
+      reader.readAsText(file);
+    }
+  }
+
   let manageModalOpen = false;
 </script>
 
@@ -30,5 +62,13 @@
         >Manage profiles</Button
       >
     </div>
+    <hr class="border-gray-100 opacity-10" />
+    <div class="flex flex-col gap-2">
+      <input class="border border-slate-700 rounded-lg" type="file" accept=".json" bind:files />
+      <Button on:click={importProfile} disabled={!files} size="sm" outline color="blue"
+        >Import profiles</Button
+      >
+      <Button on:click={exportProfiles} size="sm" color="light">Export profiles</Button>
+    </div>
   </div>
 </AccordionItem>