From 29729323d2f1468d9e1356042c6c7f3782b035fb Mon Sep 17 00:00:00 2001
From: Misiu <t.jagusz@gmail.com>
Date: Wed, 9 Nov 2022 21:27:00 +0100
Subject: [PATCH 1/3] wip

---
 package-lock.json                     |  38 ++++---
 package.json                          |   1 +
 src/components/esphome-icon-button.ts |  72 ++++++++++++
 src/components/esphome-textfield.ts   | 157 ++++++++++++++++++++++++++
 src/components/search-input.ts        |  97 ++++++++++++++++
 src/devices/devices-list.ts           |  79 ++++++++++---
 6 files changed, 408 insertions(+), 36 deletions(-)
 create mode 100644 src/components/esphome-icon-button.ts
 create mode 100644 src/components/esphome-textfield.ts
 create mode 100644 src/components/search-input.ts

diff --git a/package-lock.json b/package-lock.json
index 6ab698e7..520cdb47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "esp-web-flasher": "^5.1.4",
         "improv-wifi-serial-sdk": "^2.2.2",
         "lit": "^2.4.0",
+        "memoize-one": "^6.0.0",
         "tslib": "^2.4.0",
         "yaml": "^2.1.3"
       },
@@ -2259,6 +2260,11 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "dev": true,
@@ -4674,8 +4680,7 @@
     },
     "css-declaration-sorter": {
       "version": "6.3.1",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "css-select": {
       "version": "4.3.0",
@@ -4756,8 +4761,7 @@
     },
     "cssnano-utils": {
       "version": "3.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "csso": {
       "version": "4.2.0",
@@ -4952,8 +4956,7 @@
     },
     "icss-utils": {
       "version": "5.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ignore": {
       "version": "5.2.0",
@@ -5265,6 +5268,11 @@
       "version": "2.0.14",
       "dev": true
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "merge-stream": {
       "version": "2.0.0",
       "dev": true
@@ -5418,23 +5426,19 @@
     },
     "postcss-discard-comments": {
       "version": "5.1.2",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-load-config": {
       "version": "3.1.4",
@@ -5516,8 +5520,7 @@
     },
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -5544,8 +5547,7 @@
     },
     "postcss-normalize-charset": {
       "version": "5.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
diff --git a/package.json b/package.json
index d1d1a9f4..cd05896e 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "esp-web-flasher": "^5.1.4",
     "improv-wifi-serial-sdk": "^2.2.2",
     "lit": "^2.4.0",
+    "memoize-one": "^6.0.0",
     "tslib": "^2.4.0",
     "yaml": "^2.1.3"
   },
diff --git a/src/components/esphome-icon-button.ts b/src/components/esphome-icon-button.ts
new file mode 100644
index 00000000..c4cf6dab
--- /dev/null
+++ b/src/components/esphome-icon-button.ts
@@ -0,0 +1,72 @@
+import "@material/mwc-icon-button";
+import type { IconButton } from "@material/mwc-icon-button";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "./esphome-svg-icon";
+
+@customElement("esphome-icon-button")
+export class ESPHomeIconButton extends LitElement {
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  // SVG icon path (if you need a non SVG icon instead, use the provided slot to pass an <ha-icon> in)
+  @property({ type: String }) path?: string;
+
+  // Label that is used for ARIA support and as tooltip
+  @property({ type: String }) label?: string;
+
+  // These should always be set as properties, not attributes,
+  // so that only the <button> element gets the attribute
+  @property({ type: String, attribute: "aria-haspopup" })
+  override ariaHasPopup!: IconButton["ariaHasPopup"];
+
+  @property({ type: Boolean }) hideTitle = false;
+
+  @query("mwc-icon-button", true) private _button?: IconButton;
+
+  public override focus() {
+    this._button?.focus();
+  }
+
+  static shadowRootOptions: ShadowRootInit = {
+    mode: "open",
+    delegatesFocus: true,
+  };
+
+  protected render(): TemplateResult {
+    return html`
+      <mwc-icon-button
+        aria-label=${ifDefined(this.label)}
+        title=${ifDefined(this.hideTitle ? undefined : this.label)}
+        aria-haspopup=${ifDefined(this.ariaHasPopup)}
+        .disabled=${this.disabled}
+      >
+        ${this.path
+          ? html`<esphome-svg-icon .path=${this.path}></esphome-svg-icon>`
+          : html`<slot></slot>`}
+      </mwc-icon-button>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: inline-block;
+        outline: none;
+      }
+      :host([disabled]) {
+        pointer-events: none;
+      }
+      mwc-icon-button {
+        --mdc-theme-on-primary: currentColor;
+        --mdc-theme-text-disabled-on-light: var(--disabled-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "esphome-icon-button": ESPHomeIconButton;
+  }
+}
diff --git a/src/components/esphome-textfield.ts b/src/components/esphome-textfield.ts
new file mode 100644
index 00000000..550b7981
--- /dev/null
+++ b/src/components/esphome-textfield.ts
@@ -0,0 +1,157 @@
+import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
+import { styles } from "@material/mwc-textfield/mwc-textfield.css";
+import { TemplateResult, html, PropertyValues, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("esphome-textfield")
+export class ESPHomeTextField extends TextFieldBase {
+  @property({ type: Boolean }) public invalid?: boolean;
+
+  @property({ attribute: "error-message" }) public errorMessage?: string;
+
+  // @ts-ignore
+  @property({ type: Boolean }) public icon?: boolean;
+
+  // @ts-ignore
+  @property({ type: Boolean }) public iconTrailing?: boolean;
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (
+      (changedProperties.has("invalid") &&
+        (this.invalid || changedProperties.get("invalid") !== undefined)) ||
+      changedProperties.has("errorMessage")
+    ) {
+      this.setCustomValidity(
+        this.invalid ? this.errorMessage || "Invalid" : ""
+      );
+      this.reportValidity();
+    }
+  }
+
+  protected override renderIcon(
+    _icon: string,
+    isTrailingIcon = false
+  ): TemplateResult {
+    const type = isTrailingIcon ? "trailing" : "leading";
+
+    return html`
+      <span
+        class="mdc-text-field__icon mdc-text-field__icon--${type}"
+        tabindex=${isTrailingIcon ? 1 : -1}
+      >
+        <slot name="${type}Icon"></slot>
+      </span>
+    `;
+  }
+
+  static override styles = [
+    styles,
+    css`
+      .mdc-text-field__input {
+        width: var(--ha-textfield-input-width, 100%);
+      }
+      .mdc-text-field:not(.mdc-text-field--with-leading-icon) {
+        padding: var(--text-field-padding, 0px 16px);
+      }
+      .mdc-text-field__affix--suffix {
+        padding-left: var(--text-field-suffix-padding-left, 12px);
+        padding-right: var(--text-field-suffix-padding-right, 0px);
+        padding-inline-start: var(--text-field-suffix-padding-left, 12px);
+        padding-inline-end: var(--text-field-suffix-padding-right, 0px);
+        direction: var(--direction);
+      }
+      .mdc-text-field--with-leading-icon {
+        padding-inline-start: var(--text-field-suffix-padding-left, 0px);
+        padding-inline-end: var(--text-field-suffix-padding-right, 16px);
+        direction: var(--direction);
+      }
+
+      .mdc-text-field:not(.mdc-text-field--disabled)
+        .mdc-text-field__affix--suffix {
+        color: var(--secondary-text-color);
+      }
+
+      .mdc-text-field__icon {
+        color: var(--secondary-text-color);
+      }
+
+      .mdc-text-field__icon--leading {
+        margin-inline-start: 16px;
+        margin-inline-end: 8px;
+        direction: var(--direction);
+      }
+
+      .mdc-floating-label:not(.mdc-floating-label--float-above) {
+        text-overflow: ellipsis;
+        width: inherit;
+        padding-right: 30px;
+        box-sizing: border-box;
+      }
+
+      input {
+        text-align: var(--text-field-text-align, start);
+      }
+
+      /* Chrome, Safari, Edge, Opera */
+      :host([no-spinner]) input::-webkit-outer-spin-button,
+      :host([no-spinner]) input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      /* Firefox */
+      :host([no-spinner]) input[type="number"] {
+        -moz-appearance: textfield;
+      }
+
+      .mdc-text-field__ripple {
+        overflow: hidden;
+      }
+
+      .mdc-text-field {
+        overflow: var(--text-field-overflow);
+      }
+
+      .mdc-floating-label {
+        inset-inline-start: 16px !important;
+        inset-inline-end: initial !important;
+        transform-origin: var(--float-start);
+        direction: var(--direction);
+        transform-origin: var(--float-start);
+      }
+
+      .mdc-text-field--with-leading-icon.mdc-text-field--filled
+        .mdc-floating-label {
+        max-width: calc(100% - 48px);
+        inset-inline-start: 48px !important;
+        inset-inline-end: initial !important;
+        direction: var(--direction);
+      }
+
+      .mdc-text-field__input[type="number"] {
+        direction: var(--direction);
+      }
+    `,
+    // safari workaround - must be explicit
+    document.dir === "rtl"
+      ? css`
+          .mdc-text-field__affix--suffix,
+          .mdc-text-field--with-leading-icon,
+          .mdc-text-field__icon--leading,
+          .mdc-floating-label,
+          .mdc-text-field--with-leading-icon.mdc-text-field--filled
+            .mdc-floating-label,
+          .mdc-text-field__input[type="number"] {
+            direction: rtl;
+          }
+        `
+      : css``,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "esphome-textfield": ESPHomeTextField;
+  }
+}
diff --git a/src/components/search-input.ts b/src/components/search-input.ts
new file mode 100644
index 00000000..d43ffb54
--- /dev/null
+++ b/src/components/search-input.ts
@@ -0,0 +1,97 @@
+import "@material/mwc-textfield";
+import { mdiClose, mdiMagnify } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { fireEvent } from "../util/fire-event";
+import "./esphome-svg-icon";
+import { ESPHomeTextField } from "./esphome-textfield";
+import "./esphome-textfield";
+import "./esphome-icon-button";
+
+@customElement("search-input")
+class SearchInput extends LitElement {
+  @property() public filter?: string;
+
+  @property({ type: Boolean })
+  public suffix = false;
+
+  @property({ type: Boolean })
+  public autofocus = false;
+
+  @property({ type: String })
+  public label?: string;
+
+  public focus() {
+    this._input?.focus();
+  }
+
+  @query("esphome-textfield", true) private _input!: ESPHomeTextField;
+
+  protected render(): TemplateResult {
+    return html`
+      <esphome-textfield
+        .autofocus=${this.autofocus}
+        .label=${this.label || "Search"}
+        .value=${this.filter || ""}
+        icon
+        .iconTrailing=${this.filter || this.suffix}
+        @input=${this._filterInputChanged}
+      >
+        <slot name="prefix" slot="leadingIcon">
+          <esphome-svg-icon
+            tabindex="-1"
+            class="prefix"
+            .path=${mdiMagnify}
+          ></esphome-svg-icon>
+        </slot>
+        <div class="trailing" slot="trailingIcon">
+          ${this.filter &&
+          html`
+            <esphome-icon-button
+              @click=${this._clearSearch}
+              .path=${mdiClose}
+              class="clear-button"
+            ></esphome-icon-button>
+          `}
+          <slot name="suffix"></slot>
+        </div>
+      </esphome-textfield>
+    `;
+  }
+
+  private async _filterChanged(value: string) {
+    fireEvent(this, "value-changed", { value: String(value) });
+  }
+
+  private async _filterInputChanged(e: { target: { value: string } }) {
+    this._filterChanged(e.target.value);
+  }
+
+  private async _clearSearch() {
+    this._filterChanged("");
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: inline-flex;
+      }
+      .clear-button {
+        --mdc-icon-size: 20px;
+      }
+      esphome-textfield {
+        display: inherit;
+      }
+      .trailing {
+        display: flex;
+        align-items: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "search-input": SearchInput;
+  }
+}
diff --git a/src/devices/devices-list.ts b/src/devices/devices-list.ts
index befb94f3..0f498c72 100644
--- a/src/devices/devices-list.ts
+++ b/src/devices/devices-list.ts
@@ -1,19 +1,27 @@
 import { animate } from "@lit-labs/motion";
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { subscribeDevices, ListDevicesResult } from "../api/devices";
+import {
+  subscribeDevices,
+  ListDevicesResult,
+  ConfiguredDevice,
+} from "../api/devices";
 import { openWizardDialog } from "../wizard";
 import "@material/mwc-button";
 import { subscribeOnlineStatus } from "../api/online-status";
 import "./configured-device-card";
 import "./importable-device-card";
+import "../components/search-input";
+import memoizeOne from "memoize-one";
 
 @customElement("esphome-devices-list")
 class ESPHomeDevicesList extends LitElement {
   @state() private _devices?: ListDevicesResult;
   @state() private _onlineStatus?: Record<string, boolean>;
 
+  @state() private _filter?: string;
+
   private _devicesUnsub?: ReturnType<typeof subscribeDevices>;
   private _onlineStatusUnsub?: ReturnType<typeof subscribeOnlineStatus>;
   private _highlightOnAdd = false;
@@ -42,9 +50,21 @@ class ESPHomeDevicesList extends LitElement {
       `;
     }
 
+    let configured: TemplateResult[] = this.configuredDevices(
+      this._devices.configured,
+      this._filter
+    );
+
     const importable = this._devices.importable;
 
     return html`
+      <div class="search">
+        <search-input
+          .filter=${this._filter}
+          @value-changed=${this._filterChanged}
+          width="100%"
+        ></search-input>
+      </div>
       <div class="grid">
         ${importable.length
           ? html`
@@ -62,31 +82,54 @@ class ESPHomeDevicesList extends LitElement {
               )}
             `
           : ""}
-        ${repeat(
-          this._devices.configured,
-          (device) => device.name,
-          (device) => html`<esphome-configured-device-card
-            ${animate({
-              id: device.name,
-              inId: device.name,
-              skipInitial: true,
-            })}
-            .device=${device}
-            @deleted=${this._updateDevices}
-            .onlineStatus=${(this._onlineStatus || {})[device.configuration]}
-            data-name=${device.name}
-            .highlightOnAdd=${this._highlightOnAdd}
-          ></esphome-configured-device-card>`
-        )}
+        ${configured}
       </div>
     `;
   }
 
+  private configuredDevices = memoizeOne(
+    (devices: ConfiguredDevice[], filter?: string) =>
+      devices
+        .filter((device) => {
+          if (!filter) {
+            return true;
+          }
+          return (
+            device.name.toLowerCase().includes(filter.toLowerCase()) ||
+            device.comment.toLowerCase().includes(filter.toLowerCase())
+          );
+        })
+        .map((device) => {
+          return html`
+            <esphome-configured-device-card
+              ${animate({
+                id: device.name,
+                inId: device.name,
+                skipInitial: true,
+              })}
+              .device=${device}
+              @deleted=${this._updateDevices}
+              .onlineStatus=${(this._onlineStatus || {})[device.configuration]}
+              data-name=${device.name}
+              .highlightOnAdd=${this._highlightOnAdd}
+            ></esphome-configured-device-card>
+          `;
+        })
+  );
+
   private _handleOpenWizardClick() {
     openWizardDialog();
   }
 
+  private async _filterChanged(e: { detail: { value: any } }) {
+    this._filter = e.detail.value;
+  }
+
   static styles = css`
+    search-input {
+      display: block;
+      flex: 1;
+    }
     .grid {
       display: grid;
       grid-template-columns: 1fr;

From 35af2990e8c317dee036926c95fd777876253d90 Mon Sep 17 00:00:00 2001
From: Misiu <t.jagusz@gmail.com>
Date: Thu, 10 Nov 2022 15:41:36 +0100
Subject: [PATCH 2/3] add missing script

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index ee814361..18918cc2 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   "author": "ESPHome maintainers",
   "license": "Apache-2.0",
   "scripts": {
+    "develop": "script/develop",
     "prepublishOnly": "script/build"
   },
   "devDependencies": {

From 07f73f139ce6f0ffab449531dde3b72dfa0e1c6e Mon Sep 17 00:00:00 2001
From: Misiu <t.jagusz@gmail.com>
Date: Mon, 14 Nov 2022 13:39:56 +0100
Subject: [PATCH 3/3] toggle search, autofocus on search input, clear search on
 escape key press, header menu optimization (use esphome-icon-button), add
 icons to top right menu on mobile, decrease list item margin between icon and
 text

---
 raw_package/static/css/esphome-2.css  |  2 +
 src/components/esphome-header-menu.ts | 54 +++++++++++++++++++++------
 src/components/search-input.ts        | 23 +++++++++++-
 src/devices/devices-list.ts           | 35 +++++++++++------
 src/esphome-main.ts                   | 15 +++++++-
 5 files changed, 104 insertions(+), 25 deletions(-)

diff --git a/raw_package/static/css/esphome-2.css b/raw_package/static/css/esphome-2.css
index 1fc436d8..f3a8bc04 100644
--- a/raw_package/static/css/esphome-2.css
+++ b/raw_package/static/css/esphome-2.css
@@ -20,6 +20,8 @@
   --mdc-dialog-z-index: 998;
 
   --esphome-background-header: #e0e0e0;
+
+  --mdc-list-item-graphic-margin: 12px;
 }
 
 html {
diff --git a/src/components/esphome-header-menu.ts b/src/components/esphome-header-menu.ts
index 3d1fe520..3061cce8 100644
--- a/src/components/esphome-header-menu.ts
+++ b/src/components/esphome-header-menu.ts
@@ -1,6 +1,7 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import "./esphome-button-menu";
+import "./esphome-icon-button";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-icon-button";
 import "@material/mwc-button";
@@ -9,6 +10,8 @@ import { openEditDialog } from "../editor";
 import { SECRETS_FILE } from "../api/secrets";
 import { openUpdateAllDialog } from "../update-all";
 import { showConfirmationDialog } from "../dialogs";
+import { mdiCellphoneArrowDown, mdiLock, mdiMagnify } from "@mdi/js";
+import { fireEvent } from "../util/fire-event";
 
 const isWideListener = window.matchMedia("(min-width: 601px)");
 
@@ -21,16 +24,24 @@ export class ESPHomeHeaderMenu extends LitElement {
   protected render(): TemplateResult {
     if (this._isWide) {
       return html`
-        <mwc-button
-          icon="system_update"
-          label="Update All"
+        <esphome-icon-button
+          .path=${mdiMagnify}
+          .label=${"Toggle Search"}
+          @click=${() => fireEvent(this, "toggle-search")}
+        ></esphome-icon-button>
+
+        <esphome-icon-button
+          .path=${mdiCellphoneArrowDown}
+          .label=${"Update All"}
           @click=${this._handleUpdateAll}
-        ></mwc-button>
-        <mwc-button
-          icon="lock"
-          label="Secrets"
+        ></esphome-icon-button>
+
+        <esphome-icon-button
+          .path=${mdiLock}
+          .label=${"Secrets Editor"}
           @click=${this._handleEditSecrets}
-        ></mwc-button>
+        ></esphome-icon-button>
+
         ${this.logoutUrl
           ? html`
               <a href=${this.logoutUrl}
@@ -47,8 +58,26 @@ export class ESPHomeHeaderMenu extends LitElement {
         @action=${this._handleOverflowAction}
       >
         <mwc-icon-button slot="trigger" icon="more_vert"></mwc-icon-button>
-        <mwc-list-item>Update All</mwc-list-item>
-        <mwc-list-item>Secrets Editor</mwc-list-item>
+
+        <mwc-list-item graphic="icon"
+          >Toggle Search<esphome-svg-icon
+            slot="graphic"
+            .path=${mdiMagnify}
+          ></esphome-svg-icon
+        ></mwc-list-item>
+
+        <mwc-list-item graphic="icon"
+          >Update All<esphome-svg-icon
+            slot="graphic"
+            .path=${mdiCellphoneArrowDown}
+          ></esphome-svg-icon
+        ></mwc-list-item>
+        <mwc-list-item graphic="icon"
+          >Secrets Editor<esphome-svg-icon
+            slot="graphic"
+            .path=${mdiLock}
+          ></esphome-svg-icon
+        ></mwc-list-item>
         ${this.logoutUrl
           ? html`
               <a href=${this.logoutUrl}
@@ -96,9 +125,12 @@ export class ESPHomeHeaderMenu extends LitElement {
   private async _handleOverflowAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._handleUpdateAll();
+        fireEvent(this, "toggle-search");
         break;
       case 1:
+        this._handleUpdateAll();
+        break;
+      case 2:
         this._handleEditSecrets();
         break;
     }
diff --git a/src/components/search-input.ts b/src/components/search-input.ts
index d43ffb54..1433ac7e 100644
--- a/src/components/search-input.ts
+++ b/src/components/search-input.ts
@@ -1,6 +1,13 @@
 import "@material/mwc-textfield";
 import { mdiClose, mdiMagnify } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import { fireEvent } from "../util/fire-event";
 import "./esphome-svg-icon";
@@ -36,6 +43,7 @@ class SearchInput extends LitElement {
         icon
         .iconTrailing=${this.filter || this.suffix}
         @input=${this._filterInputChanged}
+        @keydown=${this._handleKeyDown}
       >
         <slot name="prefix" slot="leadingIcon">
           <esphome-svg-icon
@@ -59,6 +67,13 @@ class SearchInput extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    if (this.autofocus) {
+      setTimeout(() => this.focus(), 100);
+    }
+  }
+
   private async _filterChanged(value: string) {
     fireEvent(this, "value-changed", { value: String(value) });
   }
@@ -67,6 +82,12 @@ class SearchInput extends LitElement {
     this._filterChanged(e.target.value);
   }
 
+  private async _handleKeyDown(e: { keyCode: number }) {
+    if (e.keyCode === 27) {
+      this._clearSearch();
+    }
+  }
+
   private async _clearSearch() {
     this._filterChanged("");
   }
diff --git a/src/devices/devices-list.ts b/src/devices/devices-list.ts
index 0f498c72..d68698ac 100644
--- a/src/devices/devices-list.ts
+++ b/src/devices/devices-list.ts
@@ -1,6 +1,6 @@
 import { animate } from "@lit-labs/motion";
-import { LitElement, html, css, TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { LitElement, html, css, TemplateResult, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import {
   subscribeDevices,
@@ -17,6 +17,8 @@ import memoizeOne from "memoize-one";
 
 @customElement("esphome-devices-list")
 class ESPHomeDevicesList extends LitElement {
+  @property({ attribute: "show-search" }) showSearch: boolean = false;
+
   @state() private _devices?: ListDevicesResult;
   @state() private _onlineStatus?: Record<string, boolean>;
 
@@ -52,19 +54,23 @@ class ESPHomeDevicesList extends LitElement {
 
     let configured: TemplateResult[] = this.configuredDevices(
       this._devices.configured,
+      this.showSearch,
       this._filter
     );
 
     const importable = this._devices.importable;
 
     return html`
-      <div class="search">
-        <search-input
-          .filter=${this._filter}
-          @value-changed=${this._filterChanged}
-          width="100%"
-        ></search-input>
-      </div>
+      ${this.showSearch
+        ? html`<div class="search">
+            <search-input
+              autofocus
+              .filter=${this._filter}
+              @value-changed=${this._filterChanged}
+              width="100%"
+            ></search-input>
+          </div>`
+        : html``}
       <div class="grid">
         ${importable.length
           ? html`
@@ -87,11 +93,18 @@ class ESPHomeDevicesList extends LitElement {
     `;
   }
 
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (changedProps.has("showSearch") && !this.showSearch) {
+      this._filter = undefined;
+    }
+  }
+
   private configuredDevices = memoizeOne(
-    (devices: ConfiguredDevice[], filter?: string) =>
+    (devices: ConfiguredDevice[], showSearch: boolean, filter?: string) =>
       devices
         .filter((device) => {
-          if (!filter) {
+          if (!showSearch || !filter) {
             return true;
           }
           return (
diff --git a/src/esphome-main.ts b/src/esphome-main.ts
index 7de66b42..d1c93b5f 100644
--- a/src/esphome-main.ts
+++ b/src/esphome-main.ts
@@ -14,6 +14,8 @@ class ESPHomeMainView extends LitElement {
 
   @state() private editing?: string;
 
+  @state() private showSearch: boolean = false;
+
   protected render() {
     if (this.editing) {
       return html`
@@ -34,11 +36,16 @@ class ESPHomeMainView extends LitElement {
       <header class="esphome-header">
         <img src="static/images/logo-text.svg" alt="ESPHome Logo" />
         <div class="flex"></div>
-        <esphome-header-menu .logoutUrl=${this.logoutUrl}></esphome-header-menu>
+        <esphome-header-menu
+          .logoutUrl=${this.logoutUrl}
+          @toggle-search=${this._toggleSearch}
+        ></esphome-header-menu>
       </header>
 
       <main>
-        <esphome-devices-list></esphome-devices-list>
+        <esphome-devices-list
+          .showSearch=${this.showSearch}
+        ></esphome-devices-list>
       </main>
 
       <esphome-fab></esphome-fab>
@@ -74,6 +81,10 @@ class ESPHomeMainView extends LitElement {
   private _handleEditorClose() {
     this.editing = undefined;
   }
+
+  private _toggleSearch() {
+    this.showSearch = !this.showSearch;
+  }
 }
 
 declare global {