From f0f60bae78702ce0c6767401332dc02fb31f5cea Mon Sep 17 00:00:00 2001
From: Jan-Philipp Benecke <jan-philipp@bnck.me>
Date: Tue, 8 Apr 2025 07:43:54 +0200
Subject: [PATCH] Make some parts of shortcuts in dialog translatable (#24955)

* Make some parts of shortcuts in dialog translatable

* Adjust translations
---
 src/dialogs/shortcuts/dialog-shortcuts.ts | 29 +++++++++++++++++------
 src/translations/en.json                  |  6 +++++
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/dialogs/shortcuts/dialog-shortcuts.ts b/src/dialogs/shortcuts/dialog-shortcuts.ts
index 831af3c693..c4b992fc52 100644
--- a/src/dialogs/shortcuts/dialog-shortcuts.ts
+++ b/src/dialogs/shortcuts/dialog-shortcuts.ts
@@ -14,9 +14,11 @@ interface Text {
   key: LocalizeKeys;
 }
 
+type ShortcutString = string | { key: LocalizeKeys };
+
 interface Shortcut {
   type: "shortcut";
-  shortcut: string[];
+  shortcut: ShortcutString[];
   key: LocalizeKeys;
 }
 
@@ -51,7 +53,7 @@ const _SHORTCUTS: Section[] = [
       },
       {
         type: "shortcut",
-        shortcut: ["CRTL/CMND", "F"],
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "F"],
         key: "ui.dialogs.shortcuts.searching.search_in_table",
       },
     ],
@@ -71,17 +73,23 @@ const _SHORTCUTS: Section[] = [
     items: [
       {
         type: "shortcut",
-        shortcut: ["CRTL/CMND", "DRAG"],
+        shortcut: [
+          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
+          { key: "ui.dialogs.shortcuts.shortcuts.drag" },
+        ],
         key: "ui.dialogs.shortcuts.charts.drag_to_zoom",
       },
       {
         type: "shortcut",
-        shortcut: ["CRTL/CMND", "SCROLL WHEEL"],
+        shortcut: [
+          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
+          { key: "ui.dialogs.shortcuts.shortcuts.scroll_wheel" },
+        ],
         key: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
       },
       {
         type: "shortcut",
-        shortcut: ["DOUBLE CLICK"],
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.double_click" }],
         key: "ui.dialogs.shortcuts.charts.double_click",
       },
     ],
@@ -113,10 +121,17 @@ class DialogShortcuts extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  private _renderShortcut(shortcut: string[], translationKey: LocalizeKeys) {
+  private _renderShortcut(
+    shortcuts: ShortcutString[],
+    translationKey: LocalizeKeys
+  ) {
+    const keys = shortcuts.map((shortcut) =>
+      typeof shortcut === "string" ? shortcut : this.hass.localize(shortcut.key)
+    );
+
     return html`
       <div class="shortcut">
-        ${shortcut.map((key) => html` <span>${key}</span>`)}
+        ${keys.map((key) => html` <span>${key.toUpperCase()}</span>`)}
         ${this.hass.localize(translationKey)}
       </div>
     `;
diff --git a/src/translations/en.json b/src/translations/en.json
index f0718bb6fa..66e3532241 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1895,6 +1895,12 @@
         "title": "Shortcuts",
         "enable_shortcuts_hint": "For keyboard shortcuts to work, make sure you have them enabled in your {user_profile}.",
         "enable_shortcuts_hint_user_profile": "user profile",
+        "shortcuts": {
+          "double_click": "Double-click",
+          "scroll_wheel": "Scroll",
+          "drag": "Drag",
+          "ctrl_cmd": "Ctrl/Cmd"
+        },
         "searching": {
           "title": "Searching",
           "on_any_page": "On any page",