feat: do not use empty phrase for deleted chords

src/lib/undo-redo.ts

@@ -19,6 +19,7 @@ export interface LayoutChange {
 
 export interface ChordChange {
   type: ChangeType.Chord
+  deleted?: true
   id: number[]
   actions: number[]
   phrase: number[]
@@ -41,7 +42,7 @@ export const changes = persistentWritable<Change[]>("changes", [])
 
 export interface Overlay {
   layout: [Map<number, number>, Map<number, number>, Map<number, number>]
-  chords: Map<string, Chord>
+  chords: Map<string, Chord & {deleted: boolean}>
   settings: Map<number, number>
 }
 
@@ -58,7 +59,11 @@ export const overlay = derived(changes, changes => {
         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})
+        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)
@@ -88,7 +93,10 @@ export const layout = derived([overlay, deviceLayout], ([overlay, layout]) =>
 )
 
 export type ChordInfo = Chord &
-  ChangeInfo & {phraseChanged: boolean; actionsChanged: boolean; sortBy: string} & {id: number[]}
+  ChangeInfo & {phraseChanged: boolean; actionsChanged: boolean; sortBy: string} & {
+    id: number[]
+    deleted: boolean
+  }
 export const chords = derived([overlay, deviceChords], ([overlay, chords]) => {
   const newChords = new Set(overlay.chords.keys())
 
@@ -106,6 +114,7 @@ export const chords = derived([overlay, deviceChords], ([overlay, chords]) => {
         actionsChanged: id !== JSON.stringify(changedChord.actions),
         phraseChanged: JSON.stringify(chord.phrase) !== JSON.stringify(changedChord.phrase),
         isApplied: false,
+        deleted: changedChord.deleted,
       }
     } else {
       return {
@@ -116,6 +125,7 @@ export const chords = derived([overlay, deviceChords], ([overlay, chords]) => {
         phraseChanged: false,
         actionsChanged: false,
         isApplied: true,
+        deleted: false,
       }
     }
   })
@@ -126,6 +136,7 @@ export const chords = derived([overlay, deviceChords], ([overlay, chords]) => {
       isApplied: false,
       actionsChanged: true,
       phraseChanged: false,
+      deleted: chord.deleted,
       id: JSON.parse(id),
       phrase: chord.phrase,
       actions: chord.actions,

src/routes/EditActions.svelte

@@ -39,8 +39,8 @@
     if (!port) return
     $syncStatus = "uploading"
 
-    for (const [id, {actions, phrase}] of $overlay.chords) {
-      if (phrase.length > 0) {
+    for (const [id, {actions, phrase, deleted}] of $overlay.chords) {
+      if (!deleted) {
         if (id !== JSON.stringify(actions)) {
           const existingChord = await port.getChordPhrase(actions)
           if (
@@ -109,9 +109,7 @@
       number[],
       number[],
     ]
-    $deviceChords = $chords
-      .map(({actions, phrase}) => ({actions, phrase}))
-      .filter(({phrase}) => phrase.length > 1)
+    $deviceChords = $chords.filter(({deleted}) => !deleted).map(({actions, phrase}) => ({actions, phrase}))
     $deviceSettings = $settings.map(({value}) => value)
     $changes = []
     $syncStatus = "done"

src/routes/config/chords/ChordActionEdit.svelte

@@ -47,7 +47,7 @@
 </script>
 
 <button
-  class:deleted={chord && chord.phrase.length === 0}
+  class:deleted={chord && chord.deleted}
   class:edited={chord && chord.actionsChanged}
   class:invalid={chord && chord.actions.toSorted(compare).some((it, i) => chord?.actions[i] !== it)}
   on:click={edit}

src/routes/config/chords/ChordEdit.svelte

@@ -13,7 +13,13 @@
 
   function remove() {
     changes.update(changes => {
-      changes.push({type: ChangeType.Chord, id: chord.id, actions: chord.actions, phrase: []})
+      changes.push({
+        type: ChangeType.Chord,
+        id: chord.id,
+        actions: chord.actions,
+        phrase: chord.phrase,
+        deleted: true,
+      })
       return changes
     })
   }
@@ -60,9 +66,9 @@
   <ChordPhraseEdit {chord} />
 </td>
 <td class="table-buttons">
-  {#if chord.phrase.length !== 0}
+  {#if !chord.deleted}
     <button transition:slide class="icon compact" on:click={remove}>delete</button>
-  {:else if chord.phraseChanged}
+  {:else}
     <button transition:slide class="icon compact" on:click={restore}>restore_from_trash</button>
   {/if}
   <button class="icon compact" class:disabled={chord.isApplied} on:click={restore}>undo</button>

src/routes/config/chords/ChordPhraseEdit.svelte

@@ -136,7 +136,7 @@
   role="textbox"
   tabindex="0"
   bind:this={box}
-  class:edited={chord.phrase.length !== 0 && chord.phraseChanged}
+  class:edited={!chord.deleted && chord.phraseChanged}
   on:focusin={() => (hasFocus = true)}
   on:focusout={event => {
     if (event.relatedTarget !== button) hasFocus = false