feat: use factory default meta

feat: clear chords button
resolves #64

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;

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

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

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

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;
+      }
     }
   }