feat: do not use empty phrase for deleted chords

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