fix: chord conflict shows "undefined"

src/i18n/de/index.ts

@@ -120,7 +120,7 @@ const de = {
       conflict: {
         TITLE: "Akkordkonflikt",
         DESCRIPTION:
-          "Der Akkord {0} würde einen bereits existierenden Akkord überschreiben. Wirklich fortfahren?",
+          "Der Akkord würde einen bereits existierenden Akkord überschreiben. Wirklich fortfahren?",
         CONFIRM: "Überschreiben",
         ABORT: "Überspringen",
       },

src/i18n/en/index.ts

@@ -119,7 +119,7 @@ const en = {
       conflict: {
         TITLE: "Chord conflict",
         DESCRIPTION:
-          "Your chord {0} conflicts with an existing chord. Are you sure you want to overwrite this chord?",
+          "Your chord conflicts with an existing chord. Are you sure you want to overwrite this chord?",
         CONFIRM: "Overwrite",
         ABORT: "Skip",
       },

src/lib/dialogs/ConfirmDialog.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import Dialog from "$lib/dialogs/Dialog.svelte";
+  import ActionString from "$lib/components/ActionString.svelte";
 
   export let title: string;
   export let message: string | undefined;
   export let abortTitle: string;
   export let confirmTitle: string;
 
+  export let actions: number[] = [];
+
   const dispatch = createEventDispatcher();
 </script>
 
@@ -15,6 +18,7 @@
   {#if message}
     <p>{@html message}</p>
   {/if}
+  <p><ActionString {actions} /></p>
   <div class="buttons">
     <button on:click={() => dispatch("abort")}>{abortTitle}</button>
     <button class="primary" on:click={() => dispatch("confirm")}

src/lib/dialogs/confirm-dialog.ts

@@ -5,6 +5,7 @@ export async function askForConfirmation(
   message: string,
   confirmTitle: string,
   abortTitle: string,
+  actions: number[],
 ): Promise<boolean> {
   const dialog = new ConfirmDialog({
     target: document.body,
@@ -13,6 +14,7 @@ export async function askForConfirmation(
       message,
       confirmTitle,
       abortTitle,
+      actions,
     },
   });
 

src/routes/ConfigTabs.svelte

@@ -22,7 +22,7 @@
 </script>
 
 <nav>
-  {#each paths as { href, title, icon }, i}
+  {#each paths as { href, title, icon }}
     <a {href} class:active={$page.url.pathname.startsWith(href)}>
       <span class="icon">{icon}</span>
       {title}

src/routes/EditActions.svelte

@@ -20,7 +20,6 @@
     syncStatus,
   } from "$lib/serial/connection";
   import { askForConfirmation } from "$lib/dialogs/confirm-dialog";
-  import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
 
   function undo(event: MouseEvent) {
     if (event.shiftKey) {
@@ -56,13 +55,10 @@
               existingChord !== undefined &&
               !(await askForConfirmation(
                 $LL.configure.chords.conflict.TITLE(),
-                $LL.configure.chords.conflict.DESCRIPTION(
+                $LL.configure.chords.conflict.DESCRIPTION(),
-                  actions
-                    .map((it) => `<kbd>${KEYMAP_CODES.get(it)?.id}</kbd>`)
-                    .join(" "),
-                ),
                 $LL.configure.chords.conflict.CONFIRM(),
                 $LL.configure.chords.conflict.ABORT(),
+                actions.slice(0, actions.lastIndexOf(0)),
               ))
             ) {
               changes.update((changes) =>