Add Search Icon to Config Dashboard (#11375)

Co-authored-by: Philip Allgaier <mail@spacegaier.de>
Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

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

@@ -33,7 +33,6 @@ import {
 import { debounce } from "../../common/util/debounce";
 import "../../components/ha-chip";
 import "../../components/ha-circular-progress";
-import "../../components/ha-dialog";
 import "../../components/ha-header-bar";
 import "../../components/ha-icon-button";
 import { domainToName } from "../../data/integration";
@@ -95,6 +94,10 @@ export class QuickBar extends LitElement {
 
   @state() private _done = false;
 
+  @state() private _narrow = false;
+
+  @state() private _hint?: string;
+
   @query("paper-input", false) private _filterInputField?: HTMLElement;
 
   private _focusSet = false;
@@ -103,6 +106,8 @@ export class QuickBar extends LitElement {
 
   public async showDialog(params: QuickBarParams) {
     this._commandMode = params.commandMode || this._toggleIfAlreadyOpened();
+    this._hint = params.hint;
+    this._narrow = matchMedia("(max-width: 600px)").matches;
     this._initializeItemsIfNeeded();
     this._opened = true;
   }
@@ -137,11 +142,10 @@ export class QuickBar extends LitElement {
         @closed=${this.closeDialog}
         hideActions
       >
+        <div slot="heading" class="heading">
           <paper-input
             dialogInitialFocus
             no-label-float
-          slot="heading"
-          class="heading"
             @value-changed=${this._handleSearchChange}
             .label=${this.hass.localize(
               "ui.dialogs.quick-bar.filter_placeholder"
@@ -151,16 +155,20 @@ export class QuickBar extends LitElement {
             @focus=${this._setFocusFirstListItem}
           >
             ${this._commandMode
-            ? html`<ha-svg-icon
+              ? html`
+                  <ha-svg-icon
                     slot="prefix"
                     class="prefix"
                     .path=${mdiConsoleLine}
-              ></ha-svg-icon>`
-            : html`<ha-svg-icon
+                  ></ha-svg-icon>
+                `
+              : html`
+                  <ha-svg-icon
                     slot="prefix"
                     class="prefix"
                     .path=${mdiMagnify}
-              ></ha-svg-icon>`}
+                  ></ha-svg-icon>
+                `}
             ${this._search &&
             html`
               <ha-icon-button
@@ -171,6 +179,15 @@ export class QuickBar extends LitElement {
               ></ha-icon-button>
             `}
           </paper-input>
+          ${this._narrow
+            ? html`
+                <mwc-button
+                  .label=${this.hass!.localize("ui.common.close")}
+                  @click=${this.closeDialog}
+                ></mwc-button>
+              `
+            : ""}
+        </div>
         ${!items
           ? html`<ha-circular-progress
               size="small"
@@ -194,6 +211,9 @@ export class QuickBar extends LitElement {
                   this._renderItem(item, index),
               })}
             </mwc-list>`}
+        ${!this._narrow && this._hint
+          ? html`<div class="hint">${this._hint}</div>`
+          : ""}
       </ha-dialog>
     `;
   }
@@ -339,13 +359,27 @@ export class QuickBar extends LitElement {
   private _handleSearchChange(ev: CustomEvent): void {
     const newFilter = ev.detail.value;
     const oldCommandMode = this._commandMode;
+    const oldSearch = this._search;
+    let newCommandMode: boolean;
+    let newSearch: string;
 
     if (newFilter.startsWith(">")) {
-      this._commandMode = true;
-      this._search = newFilter.substring(1);
+      newCommandMode = true;
+      newSearch = newFilter.substring(1);
     } else {
-      this._commandMode = false;
-      this._search = newFilter;
+      newCommandMode = false;
+      newSearch = newFilter;
+    }
+
+    if (oldCommandMode === newCommandMode && oldSearch === newSearch) {
+      return;
+    }
+
+    this._commandMode = newCommandMode;
+    this._search = newSearch;
+
+    if (this._hint) {
+      this._hint = undefined;
     }
 
     if (oldCommandMode !== this._commandMode) {
@@ -628,6 +662,13 @@ export class QuickBar extends LitElement {
       css`
         .heading {
           padding: 8px 20px 0px;
+          display: flex;
+          align-items: center;
+          --mdc-theme-primary: var(--primary-text-color);
+        }
+
+        .heading paper-input {
+          flex-grow: 1;
         }
 
         ha-dialog {
@@ -688,6 +729,12 @@ export class QuickBar extends LitElement {
         mwc-list-item.command-item {
           text-transform: capitalize;
         }
+
+        .hint {
+          padding: 20px;
+          font-style: italic;
+          text-align: center;
+        }
       `,
     ];
   }

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

@@ -3,6 +3,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 export interface QuickBarParams {
   entityFilter?: string;
   commandMode?: boolean;
+  hint?: string;
 }
 
 export const loadQuickBar = () => import("./ha-quick-bar");

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

@@ -1,4 +1,4 @@
-import { mdiCloudLock } from "@mdi/js";
+import { mdiCloudLock, mdiMagnify } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
@@ -16,6 +16,7 @@ import "../../../components/ha-icon-next";
 import "../../../components/ha-menu-button";
 import { CloudStatus } from "../../../data/cloud";
 import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
+import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar";
 import {
   ExternalConfig,
   getExternalConfig,
@@ -65,6 +66,10 @@ class HaConfigDashboard extends LitElement {
               .narrow=${this.narrow}
             ></ha-menu-button>
             <div main-title>${this.hass.localize("panel.config")}</div>
+            <ha-icon-button
+              .path=${mdiMagnify}
+              @click=${this._showQuickBar}
+            ></ha-icon-button>
           </app-toolbar>
         </app-header>
 
@@ -123,6 +128,13 @@ class HaConfigDashboard extends LitElement {
     `;
   }
 
+  private _showQuickBar(): void {
+    showQuickBar(this, {
+      commandMode: true,
+      hint: this.hass.localize("ui.dialogs.quick-bar.key_c_hint"),
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/translations/en.json

@@ -626,7 +626,9 @@
             "server_control": "[%key:ui::panel::config::server_control::caption%]"
           }
         },
-        "filter_placeholder": "Entity Filter"
+        "filter_placeholder": "Entity Filter",
+        "title": "Quick Search",
+        "key_c_hint": "Press 'c' on any page to open this search bar"
       },
       "voice_command": {
         "did_not_hear": "Home Assistant did not hear anything",