Change default shortcut tip in Quick Search to mod+k, add tip to settings (#29253)

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1,5 +1,6 @@
 import { mdiDevices } from "@mdi/js";
 import Fuse from "fuse.js";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -50,8 +51,10 @@ import {
   multiTermSortedSearch,
   type FuseWeightedKey,
 } from "../../resources/fuseMultiTerm";
+import { buttonLinkStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { isIosApp } from "../../util/is_ios";
+import { isMac } from "../../util/is_mac";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
 import { showShortcutsDialog } from "../shortcuts/show-shortcuts-dialog";
 import type { QuickBarParams, QuickBarSection } from "./show-dialog-quick-bar";
@@ -66,7 +69,7 @@ export class QuickBar extends LitElement {
 
   @state() private _loading = true;
 
-  @state() private _hint?: string;
+  @state() private _showHint = false;
 
   @state() private _selectedSection?: QuickBarSection;
 
@@ -96,7 +99,7 @@ export class QuickBar extends LitElement {
     }
     this._initialize();
     this._selectedSection = params.mode;
-    this._hint = params.hint;
+    this._showHint = params.showHint ?? false;
     this._open = true;
   }
 
@@ -256,9 +259,17 @@ export class QuickBar extends LitElement {
               clearable
             ></ha-picker-combo-box>`
           : nothing}
-        ${this._hint
+        ${this._showHint
           ? html`<ha-tip slot="footer" .hass=${this.hass}
-              >${this._hint}</ha-tip
+              >${this.hass.localize("ui.tips.key_shortcut_quick_search", {
+                keyboard_shortcut: html`<button
+                  class="link"
+                  @click=${this._openShortcutDialog}
+                >
+                  ${this.hass.localize("ui.tips.keyboard_shortcut")}
+                </button>`,
+                modifier: isMac ? "⌘" : "Ctrl",
+              })}</ha-tip
             >`
           : nothing}
       </ha-adaptive-dialog>
@@ -751,48 +762,59 @@ export class QuickBar extends LitElement {
     }
   }
 
+  private _openShortcutDialog(ev: Event): void {
+    ev.preventDefault();
+    showShortcutsDialog(this);
+    this.closeDialog();
+  }
+
   // #endregion interaction
 
   // #region styles
 
-  static styles = css`
-    :host {
-      --dialog-surface-margin-top: var(--ha-space-10);
-      --ha-dialog-min-height: 620px;
-      --ha-bottom-sheet-height: calc(
-        100vh - max(var(--safe-area-inset-top), 48px)
-      );
-      --ha-bottom-sheet-height: calc(
-        100dvh - max(var(--safe-area-inset-top), 48px)
-      );
-      --ha-bottom-sheet-max-height: calc(
-        100vh - max(var(--safe-area-inset-top), 48px)
-      );
-      --ha-bottom-sheet-max-height: calc(
-        100dvh - max(var(--safe-area-inset-top), 48px)
-      );
-      --dialog-content-padding: 0;
-      --safe-area-inset-bottom: 0px;
-    }
+  static get styles(): CSSResultGroup {
+    return [
+      buttonLinkStyle,
+      css`
+        :host {
+          --dialog-surface-margin-top: var(--ha-space-10);
+          --ha-dialog-min-height: 620px;
+          --ha-bottom-sheet-height: calc(
+            100vh - max(var(--safe-area-inset-top), 48px)
+          );
+          --ha-bottom-sheet-height: calc(
+            100dvh - max(var(--safe-area-inset-top), 48px)
+          );
+          --ha-bottom-sheet-max-height: calc(
+            100vh - max(var(--safe-area-inset-top), 48px)
+          );
+          --ha-bottom-sheet-max-height: calc(
+            100dvh - max(var(--safe-area-inset-top), 48px)
+          );
+          --dialog-content-padding: 0;
+          --safe-area-inset-bottom: 0px;
+        }
 
-    ha-tip {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: var(--secondary-text-color);
-      gap: var(--ha-space-1);
-    }
+        ha-tip {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: var(--secondary-text-color);
+          gap: var(--ha-space-1);
+        }
 
-    ha-tip a {
-      color: var(--primary-color);
-    }
+        ha-tip a {
+          color: var(--primary-color);
+        }
 
-    @media all and (max-width: 450px), all and (max-height: 690px) {
-      ha-tip {
-        display: none;
-      }
-    }
-  `;
+        @media all and (max-width: 450px), all and (max-height: 690px) {
+          ha-tip {
+            display: none;
+          }
+        }
+      `,
+    ];
+  }
 
   // #endregion styles
 }

src/dialogs/quick-bar/show-dialog-quick-bar.ts

@@ -11,7 +11,7 @@ export type QuickBarSection =
 export interface QuickBarParams {
   entityFilter?: string;
   mode?: QuickBarSection;
-  hint?: string;
+  showHint?: boolean;
 }
 
 export const loadQuickBar = () => import("./ha-quick-bar");

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -39,6 +39,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
+import { isMac } from "../../../util/is_mac";
 import { isMobileClient } from "../../../util/is_mobile";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
@@ -123,6 +124,14 @@ const randomTip = (openFn: any, hass: HomeAssistant, narrow: boolean) => {
         content: hass.localize("ui.tips.key_a_tip", localizeParam),
         weight: 1,
         narrow: false,
+      },
+      {
+        content: hass.localize("ui.tips.key_shortcut_quick_search", {
+          ...localizeParam,
+          modifier: isMac ? "⌘" : "Ctrl",
+        }),
+        weight: 1,
+        narrow: false,
       }
     );
   }
@@ -364,17 +373,7 @@ 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, {
-      hint: this.hass.enableShortcuts
-        ? this.hass.localize("ui.dialogs.quick-bar.key_c_tip", params)
-        : undefined,
-    });
+    showQuickBar(this, { showHint: true });
   }
 
   private async _handleMenuAction(

src/panels/lovelace/hui-root.ts

@@ -72,7 +72,6 @@ import {
 } from "../../dialogs/generic/show-dialog-box";
 import { showMoreInfoDialog } from "../../dialogs/more-info/show-ha-more-info-dialog";
 import { showQuickBar } from "../../dialogs/quick-bar/show-dialog-quick-bar";
-import { showShortcutsDialog } from "../../dialogs/shortcuts/show-shortcuts-dialog";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
@@ -863,17 +862,7 @@ class HUIRoot extends LitElement {
   };
 
   private _showQuickBar = () => {
-    const params = {
-      keyboard_shortcut: html`<a href="#" @click=${this._openShortcutDialog}
-        >${this.hass.localize("ui.tips.keyboard_shortcut")}</a
-      >`,
-    };
-
-    showQuickBar(this, {
-      hint: this.hass.enableShortcuts
-        ? this.hass.localize("ui.tips.key_e_tip", params)
-        : undefined,
-    });
+    showQuickBar(this, { showHint: true });
   };
 
   private _goBack(): void {
@@ -1220,11 +1209,6 @@ class HUIRoot extends LitElement {
     root.appendChild(view);
   }
 
-  private _openShortcutDialog(ev: Event) {
-    ev.preventDefault();
-    showShortcutsDialog(this);
-  }
-
   private async _applyUndoRedo(item: UndoStackItem) {
     this._configChangedByUndo = true;
     try {

src/translations/en.json

@@ -10178,7 +10178,8 @@
       "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"
+      "key_a_tip": "Press {keyboard_shortcut} 'a' on any page to open the Assist dialog",
+      "key_shortcut_quick_search": "Press {keyboard_shortcut} ''{modifier}+k'' on any page to open quick search"
     }
   },
   "landing-page": {