feat: use factory default meta

feat: clear chords button
resolves #64

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

@@ -4,7 +4,6 @@
   import { action } from "$lib/title";
   import LL from "$i18n/i18n-svelte";
   import EditActions from "./EditActions.svelte";
-  import { sync, syncStatus } from "$lib/serial/connection";
 </script>
 
 <nav>

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

@@ -5,7 +5,7 @@
   import { action } from "$lib/title";
   import { onDestroy, onMount, setContext, tick } from "svelte";
   import { changes, ChangeType, chords } from "$lib/undo-redo";
-  import type { ChordInfo } from "$lib/undo-redo";
+  import type { ChordChange, ChordInfo } from "$lib/undo-redo";
   import { derived, writable } from "svelte/store";
   import ChordEdit from "./ChordEdit.svelte";
   import { crossfade, fly } from "svelte/transition";
@@ -14,6 +14,8 @@
   import { expoOut } from "svelte/easing";
   import { osLayout } from "$lib/os-layout";
   import randomTips from "$lib/assets/random-tips/en.json";
+  import { deviceMeta } from "$lib/serial/connection";
+  import { restoreFromFile } from "$lib/backup/backup";
 
   const resultSize = 38;
   let results: HTMLElement;
@@ -182,12 +184,14 @@
       return;
     }
     changes.update((changes) => {
-      changes.push({
-        type: ChangeType.Chord,
-        id: actions,
-        actions,
-        phrase: [],
-      });
+      changes.push([
+        {
+          type: ChangeType.Chord,
+          id: actions,
+          actions,
+          phrase: [],
+        },
+      ]);
       return changes;
     });
   }
@@ -212,6 +216,21 @@
     URL.revokeObjectURL(url);
   }
 
+  function clearChords() {
+    changes.update((changes) => {
+      changes.push(
+        $chords.map<ChordChange>((it) => ({
+          type: ChangeType.Chord,
+          id: it.id,
+          actions: it.actions,
+          phrase: it.phrase,
+          deleted: true,
+        })),
+      );
+      return changes;
+    });
+  }
+
   const items = derived(
     [searchFilter, chords],
     ([filter, chords]) =>
@@ -292,6 +311,17 @@
           "\n\nDid you know? " +
           randomTips[Math.floor(randomTips.length * Math.random())]}
       ></textarea>
+      <button onclick={clearChords}
+        ><span class="icon">delete_sweep</span>
+        Clear Chords</button
+      >
+      <div>
+        {#each Object.entries($deviceMeta?.factoryDefaults?.chords ?? {}) as [title, library]}
+          <button onclick={() => restoreFromFile(library)}
+            ><span class="icon">library_add</span>{title}</button
+          >
+        {/each}
+      </div>
       <button onclick={downloadVocabulary}
         ><span class="icon">download</span>
         {$LL.configure.chords.VOCABULARY()}</button

src/routes/(app)/config/chords/ChordActionEdit.svelte

@@ -61,12 +61,14 @@
     if (pressedKeys.size < 1) return;
     if (!chord) return onsubmit(makeChordInput(...pressedKeys));
     changes.update((changes) => {
-      changes.push({
-        type: ChangeType.Chord,
-        id: chord!.id,
-        actions: makeChordInput(...pressedKeys),
-        phrase: chord!.phrase,
-      });
+      changes.push([
+        {
+          type: ChangeType.Chord,
+          id: chord!.id,
+          actions: makeChordInput(...pressedKeys),
+          phrase: chord!.phrase,
+        },
+      ]);
       return changes;
     });
     return undefined;
@@ -76,12 +78,14 @@
     event.stopPropagation();
     selectAction(event, (action) => {
       changes.update((changes) => {
-        changes.push({
-          type: ChangeType.Chord,
-          id: chord!.id,
-          actions: makeChordInput(...chordActions!, action),
-          phrase: chord!.phrase,
-        });
+        changes.push([
+          {
+            type: ChangeType.Chord,
+            id: chord!.id,
+            actions: makeChordInput(...chordActions!, action),
+            phrase: chord!.phrase,
+          },
+        ]);
         return changes;
       });
     });

src/routes/(app)/config/chords/ChordEdit.svelte

@@ -15,13 +15,15 @@
 
   function remove() {
     changes.update((changes) => {
-      changes.push({
-        type: ChangeType.Chord,
-        id: chord.id,
-        actions: chord.actions,
-        phrase: chord.phrase,
-        deleted: true,
-      });
+      changes.push([
+        {
+          type: ChangeType.Chord,
+          id: chord.id,
+          actions: chord.actions,
+          phrase: chord.phrase,
+          deleted: true,
+        },
+      ]);
       return changes;
     });
   }
@@ -35,9 +37,13 @@
 
   function restore() {
     changes.update((changes) =>
-      changes.filter(
-        (it) => !(it.type === ChangeType.Chord && isSameChord(it, chord)),
-      ),
+      changes
+        .map((it) =>
+          it.filter(
+            (it) => !(it.type === ChangeType.Chord && isSameChord(it, chord)),
+          ),
+        )
+        .filter((it) => it.length > 0),
     );
   }
 
@@ -50,12 +56,14 @@
     }
 
     changes.update((changes) => {
-      changes.push({
-        type: ChangeType.Chord,
-        id,
-        actions: [...chord.actions],
-        phrase: [...chord.phrase],
-      });
+      changes.push([
+        {
+          type: ChangeType.Chord,
+          id,
+          actions: [...chord.actions],
+          phrase: [...chord.phrase],
+        },
+      ]);
       return changes;
     });
 

src/routes/(app)/config/chords/ChordPhraseEdit.svelte

@@ -49,24 +49,28 @@
   function deleteAction(at: number, count = 1) {
     if (!(at in chord.phrase)) return;
     changes.update((changes) => {
-      changes.push({
-        type: ChangeType.Chord,
-        id: chord.id,
-        actions: chord.actions,
-        phrase: chord.phrase.toSpliced(at, count),
-      });
+      changes.push([
+        {
+          type: ChangeType.Chord,
+          id: chord.id,
+          actions: chord.actions,
+          phrase: chord.phrase.toSpliced(at, count),
+        },
+      ]);
       return changes;
     });
   }
 
   function insertAction(at: number, action: number) {
     changes.update((changes) => {
-      changes.push({
-        type: ChangeType.Chord,
-        id: chord.id,
-        actions: chord.actions,
-        phrase: chord.phrase.toSpliced(at, 0, action),
-      });
+      changes.push([
+        {
+          type: ChangeType.Chord,
+          id: chord.id,
+          actions: chord.actions,
+          phrase: chord.phrase.toSpliced(at, 0, action),
+        },
+      ]);
       return changes;
     });
   }

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

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   import Action from "$lib/components/Action.svelte";
   import { popup } from "$lib/popup";
-  import { serialPort } from "$lib/serial/connection";
+  import { deviceMeta, serialPort } from "$lib/serial/connection";
   import { setting } from "$lib/setting";
   import ResetPopup from "./ResetPopup.svelte";
   import LL from "$i18n/i18n-svelte";
@@ -12,8 +12,11 @@
     downloadBackup,
     downloadFile,
     restoreBackup,
+    restoreFromFile,
   } from "$lib/backup/backup";
   import { preference } from "$lib/preferences";
+  import { action } from "$lib/title";
+  import { fly } from "svelte/transition";
 </script>
 
 <svelte:head>
@@ -77,7 +80,15 @@
           use:setting={{ id: 0x92 }}
         /></label
       >
-      <button class="outline" use:popup={ResetPopup}>Reset...</button>
+      {#if $deviceMeta?.factoryDefaults?.settings}
+        <button
+          use:action={{ title: "Reset Settings" }}
+          transition:fly={{ x: -8 }}
+          onclick={() => restoreFromFile($deviceMeta.factoryDefaults!.settings)}
+          ><span class="icon">reset_settings</span>Reset Settings</button
+        >
+      {/if}
+      <button class="outline" use:popup={ResetPopup}>Recovery...</button>
     {/if}
   </fieldset>