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,40 +142,52 @@ export class QuickBar extends LitElement {
         @closed=${this.closeDialog}
         hideActions
       >
-        <paper-input
+        <div slot="heading" class="heading">
-          dialogInitialFocus
+          <paper-input
-          no-label-float
+            dialogInitialFocus
-          slot="heading"
+            no-label-float
-          class="heading"
+            @value-changed=${this._handleSearchChange}
-          @value-changed=${this._handleSearchChange}
+            .label=${this.hass.localize(
-          .label=${this.hass.localize(
+              "ui.dialogs.quick-bar.filter_placeholder"
-            "ui.dialogs.quick-bar.filter_placeholder"
+            )}
-          )}
+            .value=${this._commandMode ? `>${this._search}` : this._search}
-          .value=${this._commandMode ? `>${this._search}` : this._search}
+            @keydown=${this._handleInputKeyDown}
-          @keydown=${this._handleInputKeyDown}
+            @focus=${this._setFocusFirstListItem}
-          @focus=${this._setFocusFirstListItem}
+          >
-        >
+            ${this._commandMode
-          ${this._commandMode
+              ? html`
-            ? html`<ha-svg-icon
+                  <ha-svg-icon
-                slot="prefix"
+                    slot="prefix"
-                class="prefix"
+                    class="prefix"
-                .path=${mdiConsoleLine}
+                    .path=${mdiConsoleLine}
-              ></ha-svg-icon>`
+                  ></ha-svg-icon>
-            : html`<ha-svg-icon
+                `
-                slot="prefix"
+              : html`
-                class="prefix"
+                  <ha-svg-icon
-                .path=${mdiMagnify}
+                    slot="prefix"
-              ></ha-svg-icon>`}
+                    class="prefix"
-          ${this._search &&
+                    .path=${mdiMagnify}
-          html`
+                  ></ha-svg-icon>
-            <ha-icon-button
+                `}
-              slot="suffix"
+            ${this._search &&
-              @click=${this._clearSearch}
+            html`
-              .label=${this.hass!.localize("ui.common.clear")}
+              <ha-icon-button
-              .path=${mdiClose}
+                slot="suffix"
-            ></ha-icon-button>
+                @click=${this._clearSearch}
-          `}
+                .label=${this.hass!.localize("ui.common.clear")}
-        </paper-input>
+                .path=${mdiClose}
+              ></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;
+      newCommandMode = true;
-      this._search = newFilter.substring(1);
+      newSearch = newFilter.substring(1);
     } else {
-      this._commandMode = false;
+      newCommandMode = false;
-      this._search = newFilter;
+      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",