Add dialog to show keyboard shortcuts (#24918)

* Add dialog to show keyboard shortcuts we have * Add missing translation * No need for function anymore * Run updated prettier * Replace translation keys * Replace translation keys * Remove automations for now * Check whether shortcuts are enabled * Use plain css for shortcuts
2025-07-28 19:56:42 +00:00 · 2025-04-06 09:02:52 +02:00 · 2025-04-06 09:02:52 +02:00 · 671049beb2
commit 671049beb2
parent daf4158fa0
8 changed files with 378 additions and 25 deletions
--- a/src/dialogs/shortcuts/dialog-shortcuts.ts
+++ b/src/dialogs/shortcuts/dialog-shortcuts.ts
@ -0,0 +1,213 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-button";
+import { createCloseHeading } from "../../components/ha-dialog";
+import type { HomeAssistant } from "../../types";
+import { haStyleDialog } from "../../resources/styles";
+import "../../components/ha-alert";
+import "../../components/chips/ha-assist-chip";
+import type { LocalizeKeys } from "../../common/translations/localize";
+
+interface Text {
+  type: "text";
+  key: LocalizeKeys;
+}
+
+interface Shortcut {
+  type: "shortcut";
+  shortcut: string[];
+  key: LocalizeKeys;
+}
+
+interface Section {
+  key: LocalizeKeys;
+  items: (Text | Shortcut)[];
+}
+
+const _SHORTCUTS: Section[] = [
+  {
+    key: "ui.dialogs.shortcuts.searching.title",
+    items: [
+      { type: "text", key: "ui.dialogs.shortcuts.searching.on_any_page" },
+      {
+        type: "shortcut",
+        shortcut: ["C"],
+        key: "ui.dialogs.shortcuts.searching.search_command",
+      },
+      {
+        type: "shortcut",
+        shortcut: ["E"],
+        key: "ui.dialogs.shortcuts.searching.search_entities",
+      },
+      {
+        type: "shortcut",
+        shortcut: ["D"],
+        key: "ui.dialogs.shortcuts.searching.search_devices",
+      },
+      {
+        type: "text",
+        key: "ui.dialogs.shortcuts.searching.on_pages_with_tables",
+      },
+      {
+        type: "shortcut",
+        shortcut: ["CRTL/CMND", "F"],
+        key: "ui.dialogs.shortcuts.searching.search_in_table",
+      },
+    ],
+  },
+  {
+    key: "ui.dialogs.shortcuts.assist.title",
+    items: [
+      {
+        type: "shortcut",
+        shortcut: ["A"],
+        key: "ui.dialogs.shortcuts.assist.open_assist",
+      },
+    ],
+  },
+  {
+    key: "ui.dialogs.shortcuts.charts.title",
+    items: [
+      {
+        type: "shortcut",
+        shortcut: ["CRTL/CMND", "DRAG"],
+        key: "ui.dialogs.shortcuts.charts.drag_to_zoom",
+      },
+      {
+        type: "shortcut",
+        shortcut: ["CRTL/CMND", "SCROLL WHEEL"],
+        key: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
+      },
+      {
+        type: "shortcut",
+        shortcut: ["DOUBLE CLICK"],
+        key: "ui.dialogs.shortcuts.charts.double_click",
+      },
+    ],
+  },
+  {
+    key: "ui.dialogs.shortcuts.other.title",
+    items: [
+      {
+        type: "shortcut",
+        shortcut: ["M"],
+        key: "ui.dialogs.shortcuts.other.my_link",
+      },
+    ],
+  },
+];
+
+@customElement("dialog-shortcuts")
+class DialogShortcuts extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _opened = false;
+
+  public async showDialog(): Promise<void> {
+    this._opened = true;
+  }
+
+  public async closeDialog(): Promise<void> {
+    this._opened = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  private _renderShortcut(shortcut: string[], translationKey: LocalizeKeys) {
+    return html`
+      <div class="shortcut">
+        ${shortcut.map((key) => html` <span>${key}</span>`)}
+        ${this.hass.localize(translationKey)}
+      </div>
+    `;
+  }
+
+  protected render() {
+    if (!this._opened) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        hideActions
+        @closed=${this.closeDialog}
+        defaultAction="ignore"
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.dialogs.shortcuts.title")
+        )}
+      >
+        <div class="content">
+          ${_SHORTCUTS.map(
+            (section) => html`
+              <h3>${this.hass.localize(section.key)}</h3>
+              <div class="items">
+                ${section.items.map((item) => {
+                  if (item.type === "text") {
+                    return html`<p>${this.hass.localize(item.key)}</p>`;
+                  }
+                  if (item.type === "shortcut") {
+                    return this._renderShortcut(item.shortcut, item.key);
+                  }
+                  return nothing;
+                })}
+              </div>
+            `
+          )}
+        </div>
+
+        <ha-alert>
+          ${this.hass.localize("ui.dialogs.shortcuts.enable_shortcuts_hint", {
+            user_profile: html`<a href="/profile/general#shortcuts"
+              >${this.hass.localize(
+                "ui.dialogs.shortcuts.enable_shortcuts_hint_user_profile"
+              )}</a
+            >`,
+          })}
+        </ha-alert>
+      </ha-dialog>
+    `;
+  }
+
+  static styles = [
+    haStyleDialog,
+    css`
+      ha-dialog {
+        --dialog-z-index: 15;
+      }
+
+      h3:first-of-type {
+        margin-top: 0;
+      }
+
+      .content {
+        margin-bottom: 24px;
+      }
+
+      .shortcut {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        margin: 4px 0;
+      }
+
+      span {
+        padding: 8px;
+        border: 1px solid var(--divider-color);
+        border-radius: 8px;
+      }
+
+      .items p {
+        margin-bottom: 8px;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-shortcuts": DialogShortcuts;
+  }
+}
--- a/src/dialogs/shortcuts/show-shortcuts-dialog.ts
+++ b/src/dialogs/shortcuts/show-shortcuts-dialog.ts
@ -0,0 +1,8 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export const showShortcutsDialog = (element: HTMLElement) =>
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-shortcuts",
+    dialogImport: () => import("./dialog-shortcuts"),
+    dialogParams: {},
+  });
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@ -48,8 +48,9 @@ import { configSections } from "../ha-panel-config";
 import "../repairs/ha-config-repairs";
 import "./ha-config-navigation";
 import "./ha-config-updates";
+import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog";

-const randomTip = (hass: HomeAssistant, narrow: boolean) => {
+const randomTip = (openFn: any, hass: HomeAssistant, narrow: boolean) => {
  const weighted: string[] = [];
  let tips = [
    {
@ -105,18 +106,28 @@ const randomTip = (hass: HomeAssistant, narrow: boolean) => {
  ];

  if (hass?.enableShortcuts) {
+    const localizeParam = {
+      keyboard_shortcut: html`<a href="#" @click=${openFn}
+        >${hass.localize("ui.tips.keyboard_shortcut")}</a
+      >`,
+    };
+
    tips.push(
      {
-        content: hass.localize("ui.tips.key_c_hint"),
+        content: hass.localize("ui.tips.key_c_tip", localizeParam),
        weight: 1,
        narrow: false,
      },
      {
-        content: hass.localize("ui.tips.key_m_hint"),
+        content: hass.localize("ui.tips.key_m_tip", localizeParam),
        weight: 1,
        narrow: false,
      },
-      { content: hass.localize("ui.tips.key_a_hint"), weight: 1, narrow: false }
+      {
+        content: hass.localize("ui.tips.key_a_tip", localizeParam),
+        weight: 1,
+        narrow: false,
+      }
    );
  }

@ -318,10 +329,16 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
    super.updated(changedProps);

    if (!this._tip && changedProps.has("hass")) {
-      this._tip = randomTip(this.hass, this.narrow);
+      this._tip = randomTip(this._openShortcutDialog, this.hass, this.narrow);
    }
  }

+  private _openShortcutDialog(ev: Event) {
+    ev.preventDefault();
+
+    showShortcutsDialog(this);
+  }
+
  private _filterUpdateEntitiesWithInstall = memoizeOne(
    (
      entities: HomeAssistant["states"],
@ -339,10 +356,16 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
  );

  private _showQuickBar(): void {
+    const params = {
+      keyboard_shortcut: html`<a href="#" @click=${this._openShortcutDialog}
+        >${this.hass.localize("ui.tips.keyboard_shortcut")}</a
+      >`,
+    };
+
    showQuickBar(this, {
      mode: QuickBarMode.Command,
      hint: this.hass.enableShortcuts
-        ? this.hass.localize("ui.dialogs.quick-bar.key_c_hint")
+        ? this.hass.localize("ui.dialogs.quick-bar.key_c_tip", params)
        : undefined,
    });
  }
--- a/src/panels/config/info/ha-config-info.ts
+++ b/src/panels/config/info/ha-config-info.ts
@ -4,7 +4,9 @@ import {
  mdiFileDocument,
  mdiHandsPray,
  mdiHelp,
+  mdiKeyboard,
  mdiNewspaperVariant,
+  mdiOpenInNew,
  mdiTshirtCrew,
 } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
@ -23,6 +25,8 @@ import { mdiHomeAssistant } from "../../../resources/home-assistant-logo-svg";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
+import "../../../components/ha-icon-next";
+import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog";

 const JS_TYPE = __BUILD__;
 const JS_VERSION = __VERSION__;
@ -170,12 +174,26 @@ class HaConfigInfo extends LitElement {

          <ha-card outlined class="pages">
            <mwc-list>
+              <ha-list-item graphic="avatar" @click=${this._showShortcuts}>
+                <div
+                  slot="graphic"
+                  class="icon-background"
+                  style="background-color: #9e4dd1;"
+                >
+                  <ha-svg-icon .path=${mdiKeyboard}></ha-svg-icon>
+                </div>
+                <span
+                  >${this.hass.localize("ui.panel.config.info.shortcuts")}</span
+                >
+              </ha-list-item>
+
              ${PAGES.map(
                (page) => html`
                  <ha-clickable-list-item
                    graphic="avatar"
                    open-new-tab
                    href=${documentationUrl(this.hass, page.path)}
+                    hasMeta
                  >
                    <div
                      slot="graphic"
@ -189,6 +207,10 @@ class HaConfigInfo extends LitElement {
                        `ui.panel.config.info.items.${page.name}`
                      )}
                    </span>
+                    <ha-svg-icon
+                      slot="meta"
+                      .path=${mdiOpenInNew}
+                    ></ha-svg-icon>
                  </ha-clickable-list-item>
                `
              )}
@ -240,6 +262,11 @@ class HaConfigInfo extends LitElement {
    this._osInfo = osInfo;
  }

+  private _showShortcuts(ev): void {
+    ev.stopPropagation();
+    showShortcutsDialog(this);
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyle,
@ -331,11 +358,12 @@ class HaConfigInfo extends LitElement {
          --mdc-list-vertical-padding: 0;
        }

-        ha-clickable-list-item {
+        ha-clickable-list-item,
+        ha-list-item {
          height: 64px;
        }

-        ha-svg-icon {
+        .icon-background ha-svg-icon {
          height: 24px;
          width: 24px;
          display: block;
--- a/src/panels/developer-tools/state/developer-tools-state.ts
+++ b/src/panels/developer-tools/state/developer-tools-state.ts
@ -33,6 +33,7 @@ import "../../../components/search-input";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
+import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog";

@customElement("developer-tools-state")
 class HaPanelDevState extends LitElement {
@ -130,7 +131,13 @@ class HaPanelDevState extends LitElement {
            ></ha-entity-picker>
            ${this.hass.enableShortcuts
              ? html`<ha-tip .hass=${this.hass}
-                  >${this.hass.localize("ui.tips.key_e_hint")}</ha-tip
+                  >${this.hass.localize("ui.tips.key_e_tip", {
+                    keyboard_shortcut: html`<a
+                      href="#"
+                      @click=${this._openShortcutDialog}
+                      >${this.hass.localize("ui.tips.keyboard_shortcut")}</a
+                    >`,
+                  })}</ha-tip
                >`
              : nothing}
            <ha-textfield
@ -566,6 +573,11 @@ class HaPanelDevState extends LitElement {
    this._validJSON = ev.detail.isValid;
  }

+  private _openShortcutDialog(ev: Event) {
+    ev.preventDefault();
+    showShortcutsDialog(this);
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyle,
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@ -79,6 +79,7 @@ import "./views/hui-view";
 import "./views/hui-view-container";
 import type { HUIView } from "./views/hui-view";
 import "./views/hui-view-background";
+import { showShortcutsDialog } from "../../dialogs/shortcuts/show-shortcuts-dialog";

@customElement("hui-root")
 class HUIRoot extends LitElement {
@ -154,6 +155,7 @@ class HUIRoot extends LitElement {
      visible: boolean | undefined;
      overflow: boolean;
      overflow_can_promote?: boolean;
+      suffix?: string;
    }[] = [
      {
        icon: mdiFormatListBulletedTriangle,
@ -185,20 +187,22 @@ class HUIRoot extends LitElement {
      },
      {
        icon: mdiMagnify,
-        key: "ui.panel.lovelace.menu.search",
+        key: "ui.panel.lovelace.menu.search_entities",
        buttonAction: this._showQuickBar,
        overflowAction: this._handleShowQuickBar,
        visible: !this._editMode,
        overflow: this.narrow,
+        suffix: this.hass.enableShortcuts ? "(E)" : undefined,
      },
      {
        icon: mdiCommentProcessingOutline,
-        key: "ui.panel.lovelace.menu.assist",
+        key: "ui.panel.lovelace.menu.assist_tooltip",
        buttonAction: this._showVoiceCommandDialog,
        overflowAction: this._handleShowVoiceCommandDialog,
        visible:
          !this._editMode && this._conversation(this.hass.config.components),
        overflow: this.narrow,
+        suffix: this.hass.enableShortcuts ? "(A)" : undefined,
      },
      {
        icon: mdiRefresh,
@ -247,12 +251,16 @@ class HUIRoot extends LitElement {

    buttonItems.forEach((i) => {
      result.push(
-        html`<ha-icon-button
+        html`<ha-tooltip
          slot="actionItems"
-          .label=${this.hass!.localize(i.key)}
-          .path=${i.icon}
-          @click=${i.buttonAction}
-        ></ha-icon-button>`
+          placement="bottom"
+          .content=${[this.hass!.localize(i.key), i.suffix].join(" ")}
+        >
+          <ha-icon-button
+            .path=${i.icon}
+            @click=${i.buttonAction}
+          ></ha-icon-button>
+        </ha-tooltip>`
      );
    });
    if (overflowItems.length && !overflowCanPromote) {
@ -263,7 +271,7 @@ class HUIRoot extends LitElement {
            graphic="icon"
            @request-selected=${i.overflowAction}
          >
-            ${this.hass!.localize(i.key)}
+            ${[this.hass!.localize(i.key), i.suffix].join(" ")}
            <ha-svg-icon slot="graphic" .path=${i.icon}></ha-svg-icon>
          </mwc-list-item>`
        );
@ -689,10 +697,16 @@ class HUIRoot extends LitElement {
  }

  private _showQuickBar(): void {
+    const params = {
+      keyboard_shortcut: html`<a href="#" @click=${this._openShortcutDialog}
+        >${this.hass.localize("ui.tips.keyboard_shortcut")}</a
+      >`,
+    };
+
    showQuickBar(this, {
      mode: QuickBarMode.Entity,
      hint: this.hass.enableShortcuts
-        ? this.hass.localize("ui.tips.key_e_hint")
+        ? this.hass.localize("ui.tips.key_e_tip", params)
        : undefined,
    });
  }
@ -1005,6 +1019,11 @@ class HUIRoot extends LitElement {
    root.appendChild(view);
  }

+  private _openShortcutDialog(ev: Event) {
+    ev.preventDefault();
+    showShortcutsDialog(this);
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyle,
--- a/src/panels/profile/ha-profile-section-general.ts
+++ b/src/panels/profile/ha-profile-section-general.ts
@ -27,6 +27,7 @@ import "./ha-pick-time-zone-row";
 import "./ha-push-notifications-row";
 import "./ha-set-suspend-row";
 import "./ha-set-vibrate-row";
+import { nextRender } from "../../common/util/render-status";

@customElement("ha-profile-section-general")
 class HaProfileSectionGeneral extends LitElement {
@ -54,6 +55,8 @@ class HaProfileSectionGeneral extends LitElement {
    if (this.hass) {
      this._getCoreData();
    }
+
+    this._scrollToHash();
  }

  public firstUpdated() {
@ -70,6 +73,21 @@ class HaProfileSectionGeneral extends LitElement {
    }
  }

+  private async _scrollToHash() {
+    await nextRender();
+
+    const hash = window.location.hash.substring(1);
+    if (hash) {
+      const element = this.shadowRoot!.getElementById(hash);
+      element?.scrollIntoView();
+      this._clearHash();
+    }
+  }
+
+  private _clearHash() {
+    history.replaceState(null, "", window.location.pathname);
+  }
+
  protected render(): TemplateResult {
    return html`
      <hass-tabs-subpage
@ -202,6 +220,7 @@ class HaProfileSectionGeneral extends LitElement {
              .hass=${this.hass}
            ></ha-set-suspend-row>
            <ha-enable-shortcuts-row
+              id="shortcuts"
              .narrow=${this.narrow}
              .hass=${this.hass}
            ></ha-enable-shortcuts-row>
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -1225,7 +1225,7 @@
        "filter_placeholder": "Search entities",
        "filter_placeholder_devices": "Search devices",
        "title": "Quick search",
-        "key_c_hint": "Press 'c' on any page to open the command dialog",
+        "key_c_tip": "[%key:ui::tips::key_c_tip%]",
        "nothing_found": "Nothing found!"
      },
      "voice_command": {
@ -1890,6 +1890,34 @@
          "code_instructions": "Search for the sharing mode in the app of your controller, and activate it. You will get a setup code, enter that below.",
          "setup_code": "Setup code"
        }
+      },
+      "shortcuts": {
+        "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",
+        "searching": {
+          "title": "Searching",
+          "on_any_page": "On any page",
+          "on_pages_with_tables": "On pages with tables",
+          "search_command": "search command",
+          "search_entities": "search entities",
+          "search_devices": "search devices",
+          "search_in_table": "to search in tables"
+        },
+        "assist": {
+          "title": "Assist",
+          "open_assist": "open Assist dialog"
+        },
+        "charts": {
+          "title": "Charts",
+          "drag_to_zoom": "to zoom in part of a chart",
+          "scroll_to_zoom": "to zoom in or out",
+          "double_click": "to zoom in on part of the chart"
+        },
+        "other": {
+          "title": "Other",
+          "my_link": "get My Home Assistant link"
+        }
      }
    },
    "weekdays": {
@ -3052,7 +3080,8 @@
            "bug": "Bug reports",
            "help": "Help",
            "license": "License"
-          }
+          },
+          "shortcuts": "Shortcuts"
        },
        "logs": {
          "caption": "Logs",
@ -6507,8 +6536,9 @@
        "menu": {
          "configure_ui": "Edit dashboard",
          "help": "Help",
-          "search": "Entity search",
+          "search_entities": "Search entities",
          "assist": "Assist",
+          "assist_tooltip": "Assist",
          "reload_resources": "Reload resources",
          "exit_edit_mode": "Done",
          "close": "Close"
@ -8554,10 +8584,11 @@
      }
    },
    "tips": {
-      "key_c_hint": "Press 'c' on any page to open the command dialog",
-      "key_e_hint": "Press 'e' on any page to open the entity search dialog",
-      "key_m_hint": "Press 'm' on any page to get the My Home Assistant link",
-      "key_a_hint": "Press 'a' on any page to open the Assist dialog"
+      "keyboard_shortcut": "keyboard shortcut",
+      "key_c_tip": "Press {keyboard_shortcut} 'c' on any page to open the command dialog",
+      "key_e_tip": "Press {keyboard_shortcut} 'e' on any page to open the entity search dialog",
+      "key_m_tip": "Press {keyboard_shortcut} 'm' on any page to get the My Home Assistant link",
+      "key_a_tip": "Press {keyboard_shortcut} 'a' on any page to open the Assist dialog"
    }
  },
  "landing-page": {