feat: add info for current and after next save action

src/i18n/de/index.ts

@@ -26,6 +26,7 @@ const de = {
   actionSearch: {
     PLACEHOLDER: "Nach Aktionen suchen",
     CURRENT_ACTION: "Aktuelle Aktion",
+    NEXT_ACTION: "Aktion nach dem nächsten Speichern",
     DELETE: "Entfernen",
     filter: {
       ALL: "Alle",

src/i18n/en/index.ts

@@ -25,6 +25,7 @@ const en = {
   actionSearch: {
     PLACEHOLDER: "Search for actions",
     CURRENT_ACTION: "Current action",
+    NEXT_ACTION: "Action after next save",
     DELETE: "Remove",
     filter: {
       ALL: "All",

src/lib/components/layout/ActionSelector.svelte

@@ -8,6 +8,7 @@
   import {action} from "$lib/title"
 
   export let currentAction: number | undefined = undefined
+  export let nextAction: number | undefined = undefined
 
   const index = new Index({tokenize: "full"})
   for (const action of Object.values(KEYMAP_CODES)) {
@@ -121,6 +122,12 @@
         <h3>{$LL.actionSearch.CURRENT_ACTION()}</h3>
         <ActionListItem id={currentAction} />
       </aside>
+      <aside>
+        {#if nextAction}
+          <h3>{$LL.actionSearch.NEXT_ACTION()}</h3>
+          <ActionListItem id={nextAction} />
+        {/if}
+      </aside>
     {/if}
     <ul bind:this={resultList}>
       {#if exact !== undefined}

src/lib/components/layout/GenericLayout.svelte

@@ -9,7 +9,7 @@
   import KeyboardKey from "$lib/components/layout/KeyboardKey.svelte"
   import {getContext} from "svelte"
   import type {VisualLayoutConfig} from "./visual-layout.js"
-  import {changes, ChangeType} from "$lib/undo-redo"
+  import {changes, ChangeType, layout} from "$lib/undo-redo"
 
   const {scale, margin, strokeWidth, fontSize, iconFontSize} =
     getContext<VisualLayoutConfig>("visual-layout-config")
@@ -113,9 +113,14 @@
   function edit(index: number) {
     const keyInfo = layoutInfo.keys[index]
     const clickedGroup = groupParent.children.item(index) as SVGGElement
+    const nextAction = get(layout)[get(activeLayer)][keyInfo.id]
+    const currentAction = get(deviceLayout)[get(activeLayer)][keyInfo.id]
     const component = new ActionSelector({
       target: document.body,
-      props: {currentAction: get(deviceLayout)[get(activeLayer)][keyInfo.id]},
+      props: {
+        currentAction,
+        nextAction: nextAction.isApplied ? undefined : nextAction.action,
+      },
     })
     const dialog = document.querySelector("dialog > div") as HTMLDivElement
     const backdrop = document.querySelector("dialog") as HTMLDialogElement