profile json exports/imports

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.mjs

@@ -35,7 +35,7 @@ window.addEventListener('beforeunload', (event) => {
 
 const $main = web.html`<main class="main"></main>`,
   $sidebar = web.html`<article class="sidebar"></article>`,
-  $profile = web.html`<button class="profile-button">
+  $profile = web.html`<button class="profile-trigger">
     Profile: ${web.escape(registry.profileName)}
   </button>`,
   $options = web.html`<div class="options-container">
@@ -71,13 +71,50 @@ $profile.addEventListener('click', async (event) => {
         value="${web.escape(registry.profileName)}"
         pattern="/^[A-Za-z0-9_-]+$/"
       >`,
+      $export = web.html`<button class="profile-export">
+        ${web.icon('download', { class: 'profile-icon-action' })}
+      </button>`,
+      $import = web.html`<label class="profile-import">
+        <input type="file" class="hidden" accept="application/json">
+        ${web.icon('upload', { class: 'profile-icon-action' })}
+      </label>`,
       $save = web.html`<button class="profile-save">
-        ${web.icon('save', { class: 'button-icon' })} Save
+        ${web.icon('save', { class: 'profile-icon-text' })} Save
       </button>`,
       $delete = web.html`<button class="profile-delete">
-        ${web.icon('trash-2', { class: 'button-icon' })} Delete
+        ${web.icon('trash-2', { class: 'profile-icon-text' })} Delete
       </button>`,
       $error = web.html`<p class="profile-error"></p>`;
+    $export.addEventListener('click', async (event) => {
+      const now = new Date(),
+        $a = web.html`<a
+          class="hidden"
+          download="notion-enhancer_${web.escape($select.value)}_${now.getFullYear()}-${
+          now.getMonth() + 1
+        }-${now.getDate()}.json"
+          href="data:text/plain;charset=utf-8,${encodeURIComponent(
+            JSON.stringify(await storage.get(['profiles', $select.value], {}), null, 2)
+          )}"
+        ></a>`;
+      web.render(document.body, $a);
+      $a.click();
+      $a.remove();
+    });
+    $import.addEventListener('change', (event) => {
+      const file = event.target.files[0],
+        reader = new FileReader();
+      reader.onload = async (progress) => {
+        try {
+          const profileUpload = JSON.parse(progress.currentTarget.result);
+          if (!profileUpload) throw Error;
+          await storage.set(['profiles', $select.value], profileUpload);
+          location.reload();
+        } catch {
+          web.render(web.empty($error), 'Invalid JSON uploaded.');
+        }
+      };
+      reader.readAsText(file);
+    });
     $select.addEventListener('change', async (event) => {
       if ($select.value === '--') {
         $edit.value = '';
@@ -91,6 +128,10 @@ $profile.addEventListener('click', async (event) => {
         );
         return false;
       }
+      if (!$edit.value) {
+        web.render(web.empty($error), 'Profile names cannot be empty.');
+        return false;
+      }
       if (!$edit.value.match(/^[A-Za-z0-9_-]+$/)) {
         web.render(
           web.empty($error),
@@ -139,7 +180,7 @@ $profile.addEventListener('click', async (event) => {
         $edit,
         web.html`${web.icon('type', { class: 'input-icon' })}`
       ),
-      web.render(web.html`<p></p>`, $save, $delete),
+      web.render(web.html`<p class="profile-actions"></p>`, $export, $import, $save, $delete),
       $error
     );
   }

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs

@@ -59,14 +59,18 @@ const customClasses = {
   'mod-author': apply`flex items-center mb-2`,
   'mod-author-avatar': apply`inline object-cover w-5 h-5 rounded-full mr-2`,
   'sidebar': apply`h-full w-96 px-4 pt-3 pb-32 flex flex-col bg-notion-secondary border-l border-divider`,
-  'profile-button': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner
+  'profile-trigger': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner
     bg-accent-red-hover border border-accent-red text-accent-red focus:(outline-none ring ring-inset ring-accent-red)`,
-  'profile-save': apply`text-sm px-3 py-2 font-medium mt-2 bg-accent-blue text-accent-blue-text rounded-md
+  'profile-actions': apply`flex`,
-    hover:bg-accent-blue-hover focus:(bg-accent-blue-focus outline-none)`,
+  'profile-save': apply`text-sm px-3 py-2 font-medium mt-2 bg-accent-blue text-accent-blue-text rounded-md flex-grow
-  'profile-delete': apply`text-sm px-3 py-2 font-medium ml-3 mt-3 bg-red-tag text-red-tag-text rounded-md
+    hover:bg-accent-blue-hover focus:(bg-accent-blue-focus outline-none) text-center`,
-    border border-red-text hover:bg-red-text focus:(outline-none bg-red-text)`,
+  'profile-delete': apply`text-sm px-3 py-2 font-medium ml-3 mt-2 bg-red-tag text-red-tag-text rounded-md flex-grow
+    border border-red-text hover:bg-red-text focus:(outline-none bg-red-text) text-center`,
+  'profile-export': apply`profile-save mr-2`,
+  'profile-import': apply`profile-save mr-2`,
   'profile-error': apply`text-xs mt-2 text-red-text`,
-  'button-icon': apply`w-4 h-4 -mt-1 inline-block mr-1`,
+  'profile-icon-action': apply`w-4 h-4 -mt-1 inline-block`,
+  'profile-icon-text': apply`w-4 h-4 -mt-1 inline-block mr-1`,
   'options-container': apply`px-4 py-3 shadow-inner rounded-lg bg-notion border border-divider space-y-3`,
   'options-placeholder': apply`text-sm text-foreground-secondary`,
   'toggle-box': apply`w-9 h-5 p-0.5 flex items-center bg-toggle-off rounded-full duration-300 ease-in-out cursor-pointer`,