add backup feature

icons.config.ts

@@ -38,6 +38,8 @@ const config: IconsConfig = {
     "close",
     "arrow_back",
     "arrow_back_ios_new",
+    "save",
+    "settings_backup_restore",
   ],
   codePoints: {
     speed: "e9e4",

src/lib/components/Navigation.svelte

@@ -2,6 +2,7 @@
   import {serialPort, syncStatus} from "$lib/serial/connection"
   import {browser} from "$app/environment"
   import {page} from "$app/stores"
+  import {slide} from "svelte/transition"
 
   const training = [
     {slug: "cpm", title: "CPM - Characters Per Minute", icon: "music_note"},
@@ -39,13 +40,20 @@
         warning
       </abbr>
     {/if}
-    {#if $syncStatus === "downloading"}
-      <abbr title="Backing up settings" class="icon sync backup">backup</abbr>
-    {:else if $syncStatus === "uploading"}
-      <abbr title="Saving settings" class="icon sync save">cloud_download</abbr>
-    {:else if $syncStatus === "done"}
-      <abbr title="Device settings are up-to-date" class="icon">cloud_done</abbr>
-    {/if}
+    <a
+      title="Backup & Restore"
+      href="/backup/"
+      class="icon {$syncStatus}"
+      class:active={$page.url.pathname.startsWith("/backup/")}
+    >
+      {#if $syncStatus === "downloading"}
+        backup
+      {:else if $syncStatus === "uploading"}
+        cloud_download
+      {:else}
+        cloud_done
+      {/if}
+    </a>
     <a
       href="/config/"
       title="Device Manager"
@@ -82,7 +90,8 @@
     }
   }
 
-  .sync::after {
+  .uploading::after,
+  .downloading::after {
     content: "";
 
     position: absolute;
@@ -99,9 +108,14 @@
     animation: sync 1s linear infinite;
   }
 
-  .sync.save::after {
-    transform-origin: bottom;
+  .downloading.active::after,
+  .uploading.active::after {
+    background: var(--md-sys-color-primary);
+  }
+
+  .sync.downloading::after {
     top: 10px;
+    transform-origin: bottom;
     border-radius: 4px;
   }
 

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