add backup feature

src/routes/backup/+page.svelte

@@ -0,0 +1,23 @@
+<script>
+  import {getSharableUrl, stringifyCompressed} from "$lib/serial/serialization"
+  import {chords} from "$lib/serial/connection"
+
+  async function downloadBackup() {
+    const downloadUrl = URL.createObjectURL(await stringifyCompressed($chords))
+    const element = document.createElement("a")
+    element.setAttribute("download", "chords.chl")
+    element.href = downloadUrl
+    element.setAttribute("target", "_blank")
+    element.click()
+    URL.revokeObjectURL(downloadUrl)
+  }
+
+  async function createShareUrl() {
+    console.log(await getSharableUrl("chords", $chords))
+  }
+</script>
+
+<h1>Backup & Restore</h1>
+
+<button on:click={downloadBackup}><span class="icon">save</span> Backup</button>
+<button><span class="icon">settings_backup_restore</span> Restore</button>

src/routes/config/chords/+page.svelte

@@ -5,7 +5,6 @@
   import type {Index} from "flexsearch"
   import {tick} from "svelte"
   import type {Chord} from "$lib/serial/chord"
-  import {getSharableUrl, stringifyCompressed} from "$lib/serial/serialization"
 
   $: searchIndex = $chords?.length > 0 ? buildIndex($chords) : undefined
 
@@ -30,20 +29,6 @@
     })
   }
 
-  async function downloadBackup() {
-    const downloadUrl = URL.createObjectURL(await stringifyCompressed($chords))
-    const element = document.createElement("a")
-    element.setAttribute("download", "chords.json.gz")
-    element.href = downloadUrl
-    element.setAttribute("target", "_blank")
-    element.click()
-    URL.revokeObjectURL(downloadUrl)
-  }
-
-  async function createShareUrl() {
-    console.log(await getSharableUrl("chords", $chords))
-  }
-
   $: items = searchFilter?.map(it => [$chords[it], it]) ?? $chords.map((it, i) => [it, i])
 </script>
 
@@ -77,12 +62,6 @@
       </tr>
     {/each}
   </table>
-  <div class="backup">
-    <button class="icon" title="Sharable URL" on:click={createShareUrl()}>share</button>
-    <div class="icon" title="Chords have been backed up to this browser.">cloud_done</div>
-    <button class="icon" title="Restore local chord backup">backup</button>
-    <button class="icon" title="Download local chord backup" on:click={downloadBackup}>cloud_download</button>
-  </div>
 </section>
 
 <style lang="scss">
@@ -113,11 +92,6 @@
     }
   }
 
-  .backup {
-    display: flex;
-    flex-direction: column;
-  }
-
   section {
     --scrollbar-color: var(--md-sys-color-surface-variant);