feat: chord editing

src/routes/EditActions.svelte

@@ -5,7 +5,8 @@
   import {fly} from "svelte/transition"
   import {action} from "$lib/title"
   import {deviceChords, deviceLayout, deviceSettings, serialPort, syncStatus} from "$lib/serial/connection"
-  import {deserializeActions} from "$lib/serial/chord"
+  import {askForConfirmation} from "$lib/confirm-dialog"
+  import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
 
   function undo(event: MouseEvent) {
     if (event.shiftKey) {
@@ -32,9 +33,29 @@
 
     $syncStatus = "uploading"
 
-    for (const [id, phrase] of $overlay.chords) {
-      const actions = deserializeActions(id)
-      if (actions.length > 0) {
+    for (const [id, {actions, phrase}] of $overlay.chords) {
+      if (phrase.length > 0) {
+        if (id !== JSON.stringify(actions)) {
+          const existingChord = await port.getChordPhrase(actions)
+          if (
+            existingChord !== undefined &&
+            !(await askForConfirmation(
+              $LL.configure.chords.conflict.TITLE(),
+              $LL.configure.chords.conflict.DESCRIPTION(
+                actions.map(it => `<kbd>${KEYMAP_CODES[it].id}</kbd>`).join(" "),
+              ),
+              $LL.configure.chords.conflict.CONFIRM(),
+              $LL.configure.chords.conflict.ABORT(),
+            ))
+          ) {
+            changes.update(changes =>
+              changes.filter(it => !(it.type === ChangeType.Chord && JSON.stringify(it.id) === id)),
+            )
+            continue
+          }
+
+          await port.deleteChord({actions: JSON.parse(id)})
+        }
         await port.setChord({actions, phrase})
       } else {
         await port.deleteChord({actions})
@@ -56,7 +77,9 @@
       number[],
       number[],
     ]
-    $deviceChords = $chords.map(({actions, phrase}) => ({actions, phrase}))
+    $deviceChords = $chords
+      .map(({actions, phrase}) => ({actions, phrase}))
+      .filter(({phrase}) => phrase.length > 1)
     $deviceSettings = $settings.map(({value}) => value)
     $changes = []
     $syncStatus = "done"

src/routes/config/chords/+page.svelte

@@ -92,8 +92,10 @@
 <section bind:this={results}>
   <table>
     {#if $lastPage !== -1}
-      {#each $items.slice(page * $pageSize, (page + 1) * $pageSize) as [chord], i (`${page}:${i}`)}
-        <ChordEdit {chord} isApplied={chord.isApplied} />
+      {#each $items.slice(page * $pageSize, (page + 1) * $pageSize) as [chord] (chord.id)}
+        <tr>
+          <ChordEdit {chord} />
+        </tr>
       {/each}
     {:else}
       <caption> No Results </caption>

src/routes/config/chords/ChordActionEdit.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import type {Chord} from "$lib/serial/chord"
   import {KEYMAP_CODES, KEYMAP_IDS} from "$lib/serial/keymap-codes"
+  import type {ChordInfo} from "$lib/undo-redo"
+  import {changes, ChangeType} from "$lib/undo-redo"
 
-  export let chord: Chord
+  export let chord: ChordInfo
 
   let pressedKeys = new Set<number>()
   let editing = false
@@ -13,18 +14,35 @@
   }
 
   function keydown(event: KeyboardEvent) {
-    // TODO...
+    if (!editing) return
+    event.preventDefault()
     pressedKeys.add(KEYMAP_IDS.get(event.key)!.code)
     pressedKeys = pressedKeys
   }
 
   function keyup() {
+    if (!editing) return
     editing = false
-    // TODO: apply
+    if (pressedKeys.size < 2) return
+    changes.update(changes => {
+      changes.push({
+        type: ChangeType.Chord,
+        id: chord.id,
+        actions: [...pressedKeys],
+        phrase: chord.phrase,
+      })
+      return changes
+    })
   }
 </script>
 
-<button class:deleted={chord.phrase.length === 0} on:click={edit} on:keydown={keydown} on:keyup={keyup}>
+<button
+  class:deleted={chord.phrase.length === 0}
+  class:edited={chord.actionsChanged}
+  on:click={edit}
+  on:keydown={keydown}
+  on:keyup={keyup}
+>
   {#if editing && pressedKeys.size === 0}
     <span>Press keys</span>
   {/if}
@@ -34,6 +52,7 @@
       {icon ?? id ?? `0x${code.toString(16)}`}
     </kbd>
   {/each}
+  <sup>•</sup>
 </button>
 
 <style lang="scss">
@@ -41,10 +60,19 @@
     opacity: 0.5;
   }
 
+  sup {
+    translate: 0 -60%;
+    opacity: 0;
+    transition: opacity 250ms ease;
+  }
+
   button {
     position: relative;
+
     display: inline-flex;
     gap: 4px;
+
+    height: 32px;
     margin-inline: 4px;
 
     &:focus-within {
@@ -53,6 +81,8 @@
   }
 
   kbd {
+    height: 24px;
+    padding-block: auto;
     transition: color 250ms ease;
   }
 
@@ -74,6 +104,14 @@
       color 250ms ease;
   }
 
+  .edited {
+    color: var(--md-sys-color-primary);
+
+    & > sup {
+      opacity: 1;
+    }
+  }
+
   .deleted {
     color: var(--md-sys-color-error);
 

src/routes/config/chords/ChordEdit.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import {changes, ChangeType} from "$lib/undo-redo.js"
+  import type {ChordInfo} from "$lib/undo-redo.js"
   import ChordPhraseEdit from "./ChordPhraseEdit.svelte"
   import ChordActionEdit from "./ChordActionEdit.svelte"
   import type {Chord} from "$lib/serial/chord"
   import {slide} from "svelte/transition"
 
-  export let chord: Chord
-  export let isApplied: boolean
+  export let chord: ChordInfo
 
   function remove() {
     changes.update(changes => {
-      changes.push({type: ChangeType.Chord, actions: chord.actions, phrase: []})
+      changes.push({type: ChangeType.Chord, id: chord.id, actions: chord.actions, phrase: []})
       return changes
     })
   }
@@ -24,24 +24,22 @@
   }
 </script>
 
-<tr>
-  <th>
-    <ChordActionEdit {chord} />
-  </th>
-  <td>
-    <ChordPhraseEdit {chord} edited={!isApplied} />
-  </td>
-  <td class="table-buttons">
-    {#if chord.phrase.length === 0}
-      <button transition:slide class="icon compact" on:click={restore}>restore_from_trash</button>
-    {:else}
-      <button transition:slide class="icon compact" on:click={remove}>delete</button>
-    {/if}
-    <button class="icon compact" class:disabled={isApplied} on:click={restore}>undo</button>
-    <div class="separator" />
-    <button class="icon compact">share</button>
-  </td>
-</tr>
+<th>
+  <ChordActionEdit {chord} />
+</th>
+<td>
+  <ChordPhraseEdit {chord} />
+</td>
+<td class="table-buttons">
+  {#if chord.phrase.length === 0}
+    <button transition:slide class="icon compact" on:click={restore}>restore_from_trash</button>
+  {:else}
+    <button transition:slide class="icon compact" on:click={remove}>delete</button>
+  {/if}
+  <button class="icon compact" class:disabled={chord.isApplied} on:click={restore}>undo</button>
+  <div class="separator" />
+  <button class="icon compact">share</button>
+</td>
 
 <style lang="scss">
   .separator {
@@ -63,8 +61,8 @@
     transition: opacity 75ms ease;
   }
 
-  tr:focus-within > .table-buttons,
-  tr:hover > .table-buttons {
+  :global(tr):focus-within > .table-buttons,
+  :global(tr):hover > .table-buttons {
     opacity: 1;
   }
 </style>

src/routes/config/chords/ChordPhraseEdit.svelte

@@ -2,12 +2,11 @@
   import {KEYMAP_CODES, KEYMAP_IDS, specialKeycodes} from "$lib/serial/keymap-codes"
   import {tick} from "svelte"
   import ActionSelector from "$lib/components/layout/ActionSelector.svelte"
-  import type {Chord} from "$lib/serial/chord"
   import {changes, ChangeType} from "$lib/undo-redo"
+  import type {ChordInfo} from "$lib/undo-redo"
   import {scale} from "svelte/transition"
 
-  export let chord: Chord
-  export let edited: boolean
+  export let chord: ChordInfo
 
   function keypress(event: KeyboardEvent) {
     if (event.key === "ArrowUp") {
@@ -37,9 +36,11 @@
   }
 
   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),
       })
@@ -51,6 +52,7 @@
     changes.update(changes => {
       changes.push({
         type: ChangeType.Chord,
+        id: chord.id,
         actions: chord.actions,
         phrase: chord.phrase.toSpliced(at, 0, action),
       })
@@ -132,7 +134,7 @@
   role="textbox"
   tabindex="0"
   bind:this={box}
-  class:edited
+  class:edited={chord.phraseChanged}
   on:focusin={() => (hasFocus = true)}
   on:focusout={() => (hasFocus = false)}
 >