Improve search and filtering in expose entity page (#16330)

src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts

@@ -3,10 +3,18 @@ import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
   mdiCloseBoxMultiple,
   mdiCloseCircleOutline,
+  mdiFilterVariant,
   mdiPlus,
   mdiPlusBoxMultiple,
 } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
@@ -197,6 +205,12 @@ export class VoiceAssistantsExpose extends LitElement {
             .path=${mdiCloseCircleOutline}
           ></ha-icon-button>`,
       },
+      // For search
+      entity_id: {
+        title: "",
+        hidden: true,
+        filterable: true,
+      },
     })
   );
 
@@ -560,6 +574,26 @@ export class VoiceAssistantsExpose extends LitElement {
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>
+        ${this.narrow && activeFilters?.length
+          ? html`
+              <ha-button-menu slot="filter-menu" multi>
+                <ha-icon-button
+                  slot="trigger"
+                  .label=${this.hass!.localize(
+                    "ui.panel.config.devices.picker.filter.filter"
+                  )}
+                  .path=${mdiFilterVariant}
+                ></ha-icon-button>
+                <mwc-list-item @click=${this._clearFilter}>
+                  ${this.hass.localize("ui.components.data-table.filtering_by")}
+                  ${activeFilters.join(", ")}
+                  <span class="clear">
+                    ${this.hass.localize("ui.common.clear")}
+                  </span>
+                </mwc-list-item>
+              </ha-button-menu>
+            `
+          : nothing}
       </hass-tabs-subpage-data-table>
     `;
   }