fix: crash when saving empty chords

src/routes/(app)/config/Navigation.svelte

@@ -1,12 +1,75 @@
 <script lang="ts">
-  import { fade, fly } from "svelte/transition";
+  import { fly, slide } from "svelte/transition";
   import { canShare, triggerShare } from "$lib/share";
-  import { action } from "$lib/title";
+  import { actionTooltip } from "$lib/title";
   import { activeProfile, serialPort } from "$lib/serial/connection";
   import LL from "$i18n/i18n-svelte";
   import EditActions from "./EditActions.svelte";
   import { page } from "$app/state";
   import { expoOut } from "svelte/easing";
+  import {
+    createChordBackup,
+    createLayoutBackup,
+    createSettingsBackup,
+    downloadFile,
+    restoreBackup,
+  } from "$lib/backup/backup";
+
+  const routeOrder = [
+    "/(app)/config/settings",
+    "/(app)/config/chords",
+    "/(app)/config/layout",
+  ];
+
+  let pageIndex = $derived(
+    routeOrder.findIndex((it) => page.route.id?.startsWith(it)),
+  );
+  let importExport: HTMLDivElement | undefined = $state(undefined);
+
+  $effect(() => {
+    pageIndex;
+    importExport?.animate(
+      [
+        { transform: "translateX(0)", opacity: 1 },
+        { transform: "translateX(-8px)", opacity: 0, offset: 0.2 },
+        { transform: "translateX(8px)", opacity: 0, offset: 0.7 },
+        { transform: "translateX(0)", opacity: 1 },
+      ],
+      {
+        duration: 1500,
+        easing: "cubic-bezier(0.19, 1, 0.22, 1)",
+      },
+    );
+  });
+
+  function importBackup(event: Event) {
+    switch (pageIndex) {
+      case 0:
+        restoreBackup(event, "settings");
+        break;
+      case 1:
+        restoreBackup(event, "chords");
+        break;
+      case 2:
+        restoreBackup(event, "layout");
+        break;
+    }
+    (event.target as HTMLInputElement).value = "";
+  }
+
+  function exportBackup() {
+    switch (pageIndex) {
+      case 0:
+        downloadFile(createSettingsBackup());
+        break;
+      case 1:
+        downloadFile(createChordBackup());
+        break;
+      case 2:
+        downloadFile(createLayoutBackup());
+        break;
+    }
+  }
 </script>
 
 <nav>
@@ -14,10 +77,10 @@
     <EditActions />
   </div>
 
-  <div>
+  <div class="profiles">
     {#if $serialPort && $serialPort.profileCount > 1 && !page.route.id?.startsWith("/(app)/config/chords")}
       <div
-        transition:fade={{ duration: 250, easing: expoOut }}
+        transition:fly={{ y: -8, duration: 250, easing: expoOut }}
         class="profiles"
       >
         {#each Array.from({ length: $serialPort.profileCount }, (_, i) => i) as profile}
@@ -37,13 +100,13 @@
   <div class="actions">
     {#if $canShare}
       <button
-        use:action={{ title: $LL.share.TITLE() }}
+        {@attach actionTooltip($LL.share.TITLE())}
         transition:fly={{ x: -8 }}
         class="icon"
         onclick={triggerShare}>share</button
       >
       <button
-        use:action={{ title: $LL.print.TITLE() }}
+        {@attach actionTooltip($LL.print.TITLE())}
         transition:fly={{ x: -8 }}
         class="icon"
         onclick={() => print()}>print</button
@@ -54,10 +117,32 @@
         <PwaStatus />
       {/await}
     {/if}
+    <div class="import-export" bind:this={importExport}>
+      <label
+        ><input type="file" oninput={importBackup} />
+        <span class="icon">upload_file</span>Import</label
+      >
+      <button onclick={exportBackup}
+        ><span class="icon">file_save</span>Export</button
+      >
+    </div>
   </div>
 </nav>
 
 <style lang="scss">
+  .profiles {
+    display: flex;
+    justify-content: center;
+  }
+
+  input[type="file"] {
+    display: none;
+  }
+
+  .import-export {
+    display: flex;
+  }
+
   nav {
     display: grid;
     grid-template-columns: 1fr auto 1fr;