From fe850f47ec5979a3f779ef4b98535ed42f194f4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Fri, 8 Dec 2023 23:04:38 +0100
Subject: [PATCH] feat: add info for current and after next save action

---
 src/i18n/de/index.ts                            | 1 +
 src/i18n/en/index.ts                            | 1 +
 src/lib/components/layout/ActionSelector.svelte | 7 +++++++
 src/lib/components/layout/GenericLayout.svelte  | 9 +++++++--
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/i18n/de/index.ts b/src/i18n/de/index.ts
index 154b169f..a88581d8 100644
--- a/src/i18n/de/index.ts
+++ b/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",
diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts
index 6c82a86d..5ce80e77 100644
--- a/src/i18n/en/index.ts
+++ b/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",
diff --git a/src/lib/components/layout/ActionSelector.svelte b/src/lib/components/layout/ActionSelector.svelte
index cd78654b..470ae8ad 100644
--- a/src/lib/components/layout/ActionSelector.svelte
+++ b/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}
diff --git a/src/lib/components/layout/GenericLayout.svelte b/src/lib/components/layout/GenericLayout.svelte
index 746278fb..5a043c32 100644
--- a/src/lib/components/layout/GenericLayout.svelte
+++ b/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