From ac16cfd3bf14559e43c301e970388614de796a9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Fri, 14 Feb 2025 14:52:07 +0100
Subject: [PATCH] feat: use factory default meta

feat: clear chords button
resolves #64
---
 icons.config.js                               |  4 ++
 src/lib/backup/backup.ts                      | 10 ++---
 .../components/layout/GenericLayout.svelte    | 14 +++---
 src/lib/components/layout/Layout.svelte       | 28 ++++++++++--
 src/lib/setting.ts                            | 12 ++---
 src/lib/undo-redo.ts                          | 34 +++++++-------
 src/routes/(app)/config/Navigation.svelte     |  1 -
 src/routes/(app)/config/chords/+page.svelte   | 44 ++++++++++++++++---
 .../config/chords/ChordActionEdit.svelte      | 28 +++++++-----
 .../(app)/config/chords/ChordEdit.svelte      | 40 ++++++++++-------
 .../config/chords/ChordPhraseEdit.svelte      | 28 +++++++-----
 src/routes/(app)/config/settings/+page.svelte | 17 +++++--
 12 files changed, 173 insertions(+), 87 deletions(-)

diff --git a/icons.config.js b/icons.config.js
index f90fc075..9678c836 100644
--- a/icons.config.js
+++ b/icons.config.js
@@ -73,6 +73,10 @@ const config = {
     "reply",
     "navigate_before",
     "navigate_next",
+    "library_add",
+    "reset_wrench",
+    "reset_settings",
+    "delete_sweep",
     "print",
     "restore_from_trash",
     "history",
diff --git a/src/lib/backup/backup.ts b/src/lib/backup/backup.ts
index e523f924..42687d2e 100644
--- a/src/lib/backup/backup.ts
+++ b/src/lib/backup/backup.ts
@@ -107,32 +107,32 @@ export function restoreFromFile(
       }
 
       changes.update((changes) => {
-        changes.push(
+        changes.push([
           ...getChangesFromChordFile(recent[0]),
           ...getChangesFromLayoutFile(recent[1]),
           ...getChangesFromSettingsFile(recent[2]),
-        );
+        ]);
         return changes;
       });
       break;
     }
     case "chords": {
       changes.update((changes) => {
-        changes.push(...getChangesFromChordFile(file));
+        changes.push(getChangesFromChordFile(file));
         return changes;
       });
       break;
     }
     case "layout": {
       changes.update((changes) => {
-        changes.push(...getChangesFromLayoutFile(file));
+        changes.push(getChangesFromLayoutFile(file));
         return changes;
       });
       break;
     }
     case "settings": {
       changes.update((changes) => {
-        changes.push(...getChangesFromSettingsFile(file));
+        changes.push(getChangesFromSettingsFile(file));
         return changes;
       });
       break;
diff --git a/src/lib/components/layout/GenericLayout.svelte b/src/lib/components/layout/GenericLayout.svelte
index bc2d0e8b..f33a41d7 100644
--- a/src/lib/components/layout/GenericLayout.svelte
+++ b/src/lib/components/layout/GenericLayout.svelte
@@ -137,12 +137,14 @@
         },
         onselect(action) {
           changes.update((changes) => {
-            changes.push({
-              type: ChangeType.Layout,
-              id: keyInfo.id,
-              layer: get(activeLayer),
-              action,
-            });
+            changes.push([
+              {
+                type: ChangeType.Layout,
+                id: keyInfo.id,
+                layer: get(activeLayer),
+                action,
+              },
+            ]);
             return changes;
           });
           closed();
diff --git a/src/lib/components/layout/Layout.svelte b/src/lib/components/layout/Layout.svelte
index 9b897f48..dbe62742 100644
--- a/src/lib/components/layout/Layout.svelte
+++ b/src/lib/components/layout/Layout.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { serialPort } from "$lib/serial/connection";
+  import { deviceMeta, serialPort } from "$lib/serial/connection";
   import { action } from "$lib/title";
   import GenericLayout from "$lib/components/layout/GenericLayout.svelte";
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
   import type { VisualLayout } from "$lib/serialization/visual-layout";
-  import { fade } from "svelte/transition";
+  import { fade, fly } from "svelte/transition";
+  import { restoreFromFile } from "$lib/backup/backup";
 
   let device = $derived($serialPort?.device);
   const activeLayer = getContext<Writable<number>>("active-layer");
@@ -58,6 +59,16 @@
             {icon}
           </button>
         {/each}
+        {#if $deviceMeta?.factoryDefaults?.layout}
+          <button
+            use:action={{ title: "Reset Layout" }}
+            transition:fly={{ x: -8 }}
+            class="icon reset-layout"
+            onclick={() =>
+              restoreFromFile($deviceMeta!.factoryDefaults!.layout)}
+            >reset_wrench</button
+          >
+        {/if}
       </fieldset>
 
       <GenericLayout {visualLayout} />
@@ -113,7 +124,7 @@
     }
 
     &:first-child,
-    &:last-child {
+    &:nth-child(3) {
       aspect-ratio: unset;
       height: unset;
     }
@@ -124,12 +135,21 @@
       border-radius: 16px 0 0 16px;
     }
 
-    &:last-child {
+    &:nth-child(3) {
       margin-inline-start: -8px;
       padding-inline: 24px 4px;
       border-radius: 0 16px 16px 0;
     }
 
+    &.reset-layout {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translate(100%, -50%);
+      background: none;
+      font-size: 24px;
+    }
+
     &.active {
       font-weight: 900;
       color: var(--md-sys-color-on-tertiary);
diff --git a/src/lib/setting.ts b/src/lib/setting.ts
index bec60dec..9a753b56 100644
--- a/src/lib/setting.ts
+++ b/src/lib/setting.ts
@@ -63,11 +63,13 @@ export const setting: Action<
     }
 
     changes.update((changes) => {
-      changes.push({
-        type: ChangeType.Setting,
-        id: id,
-        setting: value,
-      });
+      changes.push([
+        {
+          type: ChangeType.Setting,
+          id: id,
+          setting: value,
+        },
+      ]);
       return changes;
     });
   }
diff --git a/src/lib/undo-redo.ts b/src/lib/undo-redo.ts
index 2ecdaf73..f47e7f93 100644
--- a/src/lib/undo-redo.ts
+++ b/src/lib/undo-redo.ts
@@ -42,7 +42,7 @@ export interface ChangeInfo {
 
 export type Change = LayoutChange | ChordChange | SettingChange;
 
-export const changes = persistentWritable<Change[]>("changes", []);
+export const changes = persistentWritable<Change[][]>("changes", []);
 
 export interface Overlay {
   layout: [Map<number, number>, Map<number, number>, Map<number, number>];
@@ -57,21 +57,23 @@ export const overlay = derived(changes, (changes) => {
     settings: new Map(),
   };
 
-  for (const change of changes) {
-    switch (change.type) {
-      case ChangeType.Layout:
-        overlay.layout[change.layer]?.set(change.id, change.action);
-        break;
-      case ChangeType.Chord:
-        overlay.chords.set(JSON.stringify(change.id), {
-          actions: change.actions,
-          phrase: change.phrase,
-          deleted: change.deleted ?? false,
-        });
-        break;
-      case ChangeType.Setting:
-        overlay.settings.set(change.id, change.setting);
-        break;
+  for (const changeset of changes) {
+    for (const change of changeset) {
+      switch (change.type) {
+        case ChangeType.Layout:
+          overlay.layout[change.layer]?.set(change.id, change.action);
+          break;
+        case ChangeType.Chord:
+          overlay.chords.set(JSON.stringify(change.id), {
+            actions: change.actions,
+            phrase: change.phrase,
+            deleted: change.deleted ?? false,
+          });
+          break;
+        case ChangeType.Setting:
+          overlay.settings.set(change.id, change.setting);
+          break;
+      }
     }
   }
 
diff --git a/src/routes/(app)/config/Navigation.svelte b/src/routes/(app)/config/Navigation.svelte
index 4b5a1af3..ea750d10 100644
--- a/src/routes/(app)/config/Navigation.svelte
+++ b/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>
diff --git a/src/routes/(app)/config/chords/+page.svelte b/src/routes/(app)/config/chords/+page.svelte
index 9cd14aa6..444f5fb9 100644
--- a/src/routes/(app)/config/chords/+page.svelte
+++ b/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
diff --git a/src/routes/(app)/config/chords/ChordActionEdit.svelte b/src/routes/(app)/config/chords/ChordActionEdit.svelte
index 8705bf22..236b6174 100644
--- a/src/routes/(app)/config/chords/ChordActionEdit.svelte
+++ b/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;
       });
     });
diff --git a/src/routes/(app)/config/chords/ChordEdit.svelte b/src/routes/(app)/config/chords/ChordEdit.svelte
index 10ceaa44..37838e98 100644
--- a/src/routes/(app)/config/chords/ChordEdit.svelte
+++ b/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;
     });
 
diff --git a/src/routes/(app)/config/chords/ChordPhraseEdit.svelte b/src/routes/(app)/config/chords/ChordPhraseEdit.svelte
index 69451090..cbbb9351 100644
--- a/src/routes/(app)/config/chords/ChordPhraseEdit.svelte
+++ b/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;
     });
   }
diff --git a/src/routes/(app)/config/settings/+page.svelte b/src/routes/(app)/config/settings/+page.svelte
index affbc9cf..a705f3d8 100644
--- a/src/routes/(app)/config/settings/+page.svelte
+++ b/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>