feat: do not use empty phrase for deleted chords

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