From 587375e6546f5f983f6d9985642d3f931bc3a28f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Fri, 26 Apr 2024 17:12:59 +0200
Subject: [PATCH] fix: chord conflict shows "undefined"

---
 src/i18n/de/index.ts                 | 2 +-
 src/i18n/en/index.ts                 | 2 +-
 src/lib/dialogs/ConfirmDialog.svelte | 4 ++++
 src/lib/dialogs/confirm-dialog.ts    | 2 ++
 src/routes/ConfigTabs.svelte         | 2 +-
 src/routes/EditActions.svelte        | 8 ++------
 6 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/i18n/de/index.ts b/src/i18n/de/index.ts
index 3b951b90..c6cba085 100644
--- a/src/i18n/de/index.ts
+++ b/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",
       },
diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts
index 5af8b2ed..60d6159a 100644
--- a/src/i18n/en/index.ts
+++ b/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",
       },
diff --git a/src/lib/dialogs/ConfirmDialog.svelte b/src/lib/dialogs/ConfirmDialog.svelte
index 13a7221d..c363cc62 100644
--- a/src/lib/dialogs/ConfirmDialog.svelte
+++ b/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")}
diff --git a/src/lib/dialogs/confirm-dialog.ts b/src/lib/dialogs/confirm-dialog.ts
index e0b9fea4..94cd2e2d 100644
--- a/src/lib/dialogs/confirm-dialog.ts
+++ b/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,
     },
   });
 
diff --git a/src/routes/ConfigTabs.svelte b/src/routes/ConfigTabs.svelte
index 8e803816..04932e42 100644
--- a/src/routes/ConfigTabs.svelte
+++ b/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}
diff --git a/src/routes/EditActions.svelte b/src/routes/EditActions.svelte
index bb3cd1d1..f4e08373 100644
--- a/src/routes/EditActions.svelte
+++ b/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(
-                  actions
-                    .map((it) => `<kbd>${KEYMAP_CODES.get(it)?.id}</kbd>`)
-                    .join(" "),
-                ),
+                $LL.configure.chords.conflict.DESCRIPTION(),
                 $LL.configure.chords.conflict.CONFIRM(),
                 $LL.configure.chords.conflict.ABORT(),
+                actions.slice(0, actions.lastIndexOf(0)),
               ))
             ) {
               changes.update((changes) =>