polish

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

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import { page } from "$app/stores";
-  import LL from "$i18n/i18n-svelte";
-  import type { Snippet } from "svelte";
-
-  let { children }: { children?: Snippet } = $props();
-
-  let paths = $derived([
-    {
-      href: "/config/chords/",
-      title: $LL.configure.chords.TITLE(),
-      icon: "piano",
-    },
-    {
-      href: "/config/layout/",
-      title: $LL.configure.layout.TITLE(),
-      icon: "keyboard",
-    },
-    {
-      href: "/config/settings/",
-      title: $LL.configure.settings.TITLE(),
-      icon: "settings",
-    },
-  ]);
-</script>
-
-<nav>
-  {#each paths as { href, title, icon }}
-    <a {href} class:active={$page.url.pathname.startsWith(href)}>
-      <span class="icon">{icon}</span>
-      {title}
-    </a>
-  {/each}
-</nav>
-
-{#if children}
-  {@render children()}
-{/if}
-
-<style lang="scss">
-  nav {
-    display: flex;
-    gap: 8px;
-
-    padding: 8px;
-
-    color: var(--md-sys-color-on-surface-variant);
-
-    background: var(--md-sys-color-surface-variant);
-    border: none;
-    border-radius: 32px;
-  }
-
-  a.active {
-    --icon-fill: 1;
-
-    color: var(--md-sys-color-on-primary);
-    background: var(--md-sys-color-primary);
-  }
-</style>

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

@@ -3,8 +3,8 @@
   import { canShare, triggerShare } from "$lib/share";
   import { action } from "$lib/title";
   import LL from "$i18n/i18n-svelte";
-  import ConfigTabs from "./ConfigTabs.svelte";
   import EditActions from "./EditActions.svelte";
+  import { sync, syncStatus } from "$lib/serial/connection";
 </script>
 
 <nav>
@@ -12,8 +12,6 @@
     <EditActions />
   </div>
 
-  <ConfigTabs />
-
   <div class="actions">
     {#if $canShare}
       <button
@@ -40,7 +38,7 @@
 <style lang="scss">
   nav {
     display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    grid-template-columns: 1fr 1fr;
 
     width: calc(min(100%, 28cm));
     margin-block: 8px;
@@ -48,6 +46,20 @@
     padding-inline: 16px;
   }
 
+  @keyframes syncing {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .syncing {
+    transform-origin: 50% 49%;
+    animation: syncing 1s linear infinite;
+  }
+
   .title {
     display: flex;
     align-items: center;

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

@@ -14,9 +14,9 @@
   let isNavigating = $state(false);
 
   const routeOrder = [
+    "/config/settings/",
     "/config/chords/",
     "/config/layout/",
-    "/config/settings/",
   ];
 
   beforeNavigate((navigation) => {
@@ -49,8 +49,8 @@
 
 {#if !isNavigating}
   <main
-    in:fly={{ x: inDirection * 24, duration: 150, easing: expoOut }}
-    out:fly={{ x: outDirection * 24, duration: 150, easing: expoIn }}
+    in:fly={{ y: inDirection * 24, duration: 150, easing: expoOut }}
+    out:fly={{ y: outDirection * 24, duration: 150, easing: expoIn }}
     onoutroend={outroEnd}
   >
     {@render children()}

src/routes/(app)/config/settings/+page.svelte

@@ -4,6 +4,16 @@
   import { serialPort } from "$lib/serial/connection";
   import { setting } from "$lib/setting";
   import ResetPopup from "./ResetPopup.svelte";
+  import LL from "$i18n/i18n-svelte";
+  import {
+    createChordBackup,
+    createLayoutBackup,
+    createSettingsBackup,
+    downloadBackup,
+    downloadFile,
+    restoreBackup,
+  } from "$lib/backup/backup";
+  import { preference } from "$lib/preferences";
 </script>
 
 <svelte:head>
@@ -11,8 +21,67 @@
   <meta name="description" content="Change your device's settings" />
 </svelte:head>
 
-{#if $serialPort}
-  <section>
+<section>
+  <fieldset>
+    <legend>{$LL.backup.TITLE()}</legend>
+    <label
+      ><input
+        type="checkbox"
+        use:preference={"backup"}
+      />{$LL.backup.AUTO_BACKUP()}</label
+    >
+    <p class="disclaimer">
+      {$LL.backup.DISCLAIMER()}
+    </p>
+    <div class="row" style="margin-top: auto">
+      <button onclick={() => downloadFile(createChordBackup())}>
+        <span class="icon">piano</span>
+        {$LL.configure.chords.TITLE()}
+      </button>
+      <button onclick={() => downloadFile(createLayoutBackup())}>
+        <span class="icon">keyboard</span>
+        {$LL.configure.layout.TITLE()}
+      </button>
+      <button onclick={() => downloadFile(createSettingsBackup())}>
+        <span class="icon">settings</span>
+        Settings
+      </button>
+    </div>
+    <div class="row">
+      <button class="primary" onclick={downloadBackup}
+        ><span class="icon">download</span>{$LL.backup.DOWNLOAD()}</button
+      >
+      <label class="button"
+        ><input oninput={restoreBackup} type="file" /><span class="icon"
+          >settings_backup_restore</span
+        >{$LL.backup.RESTORE()}</label
+      >
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <legend>Device</legend>
+    <label
+      >{$LL.deviceManager.AUTO_CONNECT()}<input
+        type="checkbox"
+        use:preference={"autoConnect"}
+      /></label
+    >
+    {#if $serialPort}
+      <label
+        >Boot message<input type="checkbox" use:setting={{ id: 0x93 }} /></label
+      >
+      <label
+        >GTM Realtime Feedback<input
+          type="checkbox"
+          use:setting={{ id: 0x92 }}
+        /></label
+      >
+      <button class="outline" use:popup={ResetPopup}>Reset...</button>
+    {/if}
+  </fieldset>
+
+  {#if $serialPort}
     <fieldset>
       <legend
         ><label
@@ -231,20 +300,6 @@
       >
     </fieldset>
 
-    <fieldset>
-      <legend>Device</legend>
-      <label
-        >Boot message<input type="checkbox" use:setting={{ id: 0x93 }} /></label
-      >
-      <label
-        >GTM Realtime Feedback<input
-          type="checkbox"
-          use:setting={{ id: 0x92 }}
-        /></label
-      >
-      <button class="outline" use:popup={ResetPopup}>Reset...</button>
-    </fieldset>
-
     {#if $serialPort.device === "LITE"}
       <fieldset>
         <legend
@@ -275,8 +330,8 @@
         </select>
       </fieldset>
     {/if}
-  </section>
-{/if}
+  {/if}
+</section>
 
 <style lang="scss">
   section {
@@ -319,14 +374,17 @@
   }
 
   fieldset {
+    display: flex;
+    flex-direction: column;
+
     max-width: 400px;
     border: 1px solid var(--md-sys-color-outline);
     border-radius: 24px;
 
-    &:has(> legend input:not(:checked)) > :not(legend) {
+    /*&:has(> legend input:not(:checked)) > :not(legend) {
       pointer-events: none;
       opacity: 0.7;
-    }
+    }*/
 
     > label {
       position: relative;
@@ -429,4 +487,14 @@
       content: "•";
     }
   }
+
+  .row {
+    display: flex;
+    justify-content: space-evenly;
+    margin-block: 8px;
+  }
+
+  input[type="file"] {
+    display: none;
+  }
 </style>