Fix not found category

demo/src/stubs/area_registry.ts

@@ -4,11 +4,4 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockAreaRegistry = (
   hass: MockHomeAssistant,
   data: AreaRegistryEntry[] = []
-) => {
-  hass.mockWS("config/area_registry/list", () => data);
-  const areas = {};
-  data.forEach((area) => {
-    areas[area.area_id] = area;
-  });
-  hass.updateHass({ areas });
-};
+) => hass.mockWS("config/area_registry/list", () => data);

demo/src/stubs/device_registry.ts

@@ -4,11 +4,4 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockDeviceRegistry = (
   hass: MockHomeAssistant,
   data: DeviceRegistryEntry[] = []
-) => {
-  hass.mockWS("config/device_registry/list", () => data);
-  const devices = {};
-  data.forEach((device) => {
-    devices[device.id] = device;
-  });
-  hass.updateHass({ devices });
-};
+) => hass.mockWS("config/device_registry/list", () => data);

demo/src/stubs/floor_registry.ts

@@ -1,7 +0,0 @@
-import { FloorRegistryEntry } from "../../../src/data/floor_registry";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockFloorRegistry = (
-  hass: MockHomeAssistant,
-  data: FloorRegistryEntry[] = []
-) => hass.mockWS("config/floor_registry/list", () => data);

demo/src/stubs/label_registry.ts

@@ -1,7 +0,0 @@
-import { LabelRegistryEntry } from "../../../src/data/label_registry";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockLabelRegistry = (
-  hass: MockHomeAssistant,
-  data: LabelRegistryEntry[] = []
-) => hass.mockWS("config/label_registry/list", () => data);

gallery/src/pages/components/ha-control-select.ts

@@ -187,7 +187,7 @@ export class DemoHaControlSelect extends LitElement {
         --mdc-icon-size: 24px;
         --control-select-color: var(--state-fan-active-color);
         --control-select-thickness: 130px;
-        --control-select-border-radius: 36px;
+        --control-select-border-radius: 48px;
       }
       .vertical-selects {
         height: 300px;

gallery/src/pages/components/ha-control-slider.ts

@@ -151,7 +151,7 @@ export class DemoHaBarSlider extends LitElement {
         --control-slider-background: #ffcf4c;
         --control-slider-background-opacity: 0.2;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 36px;
+        --control-slider-border-radius: 48px;
       }
       .vertical-sliders {
         height: 300px;

gallery/src/pages/components/ha-control-switch.ts

@@ -118,7 +118,7 @@ export class DemoHaControlSwitch extends LitElement {
         --control-switch-on-color: var(--green-color);
         --control-switch-off-color: var(--red-color);
         --control-switch-thickness: 130px;
-        --control-switch-border-radius: 36px;
+        --control-switch-border-radius: 48px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }

gallery/src/pages/components/ha-selector.ts

@@ -17,10 +17,6 @@ import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
-import { FloorRegistryEntry } from "../../../../src/data/floor_registry";
-import { LabelRegistryEntry } from "../../../../src/data/label_registry";
-import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry";
-import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -104,7 +100,7 @@ const DEVICES = [
 const AREAS: AreaRegistryEntry[] = [
   {
     area_id: "backyard",
-    floor_id: "ground",
+    floor_id: null,
     name: "Backyard",
     icon: null,
     picture: null,
@@ -113,7 +109,7 @@ const AREAS: AreaRegistryEntry[] = [
   },
   {
     area_id: "bedroom",
-    floor_id: "first",
+    floor_id: null,
     name: "Bedroom",
     icon: "mdi:bed",
     picture: null,
@@ -122,7 +118,7 @@ const AREAS: AreaRegistryEntry[] = [
   },
   {
     area_id: "livingroom",
-    floor_id: "ground",
+    floor_id: null,
     name: "Livingroom",
     icon: "mdi:sofa",
     picture: null,
@@ -131,45 +127,6 @@ const AREAS: AreaRegistryEntry[] = [
   },
 ];
 
-const FLOORS: FloorRegistryEntry[] = [
-  {
-    floor_id: "ground",
-    name: "Ground floor",
-    level: 0,
-    icon: null,
-    aliases: [],
-  },
-  {
-    floor_id: "first",
-    name: "First floor",
-    level: 1,
-    icon: "mdi:numeric-1",
-    aliases: [],
-  },
-  {
-    floor_id: "second",
-    name: "Second floor",
-    level: 2,
-    icon: "mdi:numeric-2",
-    aliases: [],
-  },
-];
-
-const LABELS: LabelRegistryEntry[] = [
-  {
-    label_id: "energy",
-    name: "Energy",
-    icon: null,
-    color: "yellow",
-  },
-  {
-    label_id: "entertainment",
-    name: "Entertainment",
-    icon: "mdi:popcorn",
-    color: "blue",
-  },
-];
-
 const SCHEMAS: {
   name: string;
   input: Record<string, (BlueprintInput & { required?: boolean }) | null>;
@@ -177,12 +134,7 @@ const SCHEMAS: {
   {
     name: "One of each",
     input: {
-      label: { name: "Label", selector: { label: {} } },
-      floor: { name: "Floor", selector: { floor: {} } },
-      area: { name: "Area", selector: { area: {} } },
-      device: { name: "Device", selector: { device: {} } },
       entity: { name: "Entity", selector: { entity: {} } },
-      target: { name: "Target", selector: { target: {} } },
       state: {
         name: "State",
         selector: { state: { entity_id: "alarm_control_panel.alarm" } },
@@ -191,12 +143,15 @@ const SCHEMAS: {
         name: "Attribute",
         selector: { attribute: { entity_id: "" } },
       },
+      device: { name: "Device", selector: { device: {} } },
       config_entry: {
         name: "Integration",
         selector: { config_entry: {} },
       },
       duration: { name: "Duration", selector: { duration: {} } },
       addon: { name: "Addon", selector: { addon: {} } },
+      area: { name: "Area", selector: { area: {} } },
+      target: { name: "Target", selector: { target: {} } },
       number_box: {
         name: "Number Box",
         selector: {
@@ -345,8 +300,6 @@ const SCHEMAS: {
       entity: { name: "Entity", selector: { entity: { multiple: true } } },
       device: { name: "Device", selector: { device: { multiple: true } } },
       area: { name: "Area", selector: { area: { multiple: true } } },
-      floor: { name: "Floor", selector: { floor: { multiple: true } } },
-      label: { name: "Label", selector: { label: { multiple: true } } },
       select: {
         name: "Select Multiple",
         selector: {
@@ -403,8 +356,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     mockDeviceRegistry(hass, DEVICES);
     mockConfigEntries(hass);
     mockAreaRegistry(hass, AREAS);
-    mockFloorRegistry(hass, FLOORS);
-    mockLabelRegistry(hass, LABELS);
     mockHassioSupervisor(hass);
     hass.mockWS("auth/sign_path", (params) => params);
     hass.mockWS("media_player/browse_media", this._browseMedia);

package.json

@@ -33,7 +33,7 @@
     "@codemirror/legacy-modes": "6.3.3",
     "@codemirror/search": "6.5.6",
     "@codemirror/state": "6.4.1",
-    "@codemirror/view": "6.26.1",
+    "@codemirror/view": "6.26.0",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.12.3",
     "@formatjs/intl-displaynames": "6.6.6",
@@ -185,8 +185,8 @@
     "@types/tar": "6.1.11",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "7.4.0",
-    "@typescript-eslint/parser": "7.4.0",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20240403.1"
+version      = "20240327.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/components/chips/ha-assist-chip.ts

@@ -22,6 +22,14 @@ export class HaAssistChip extends MdAssistChip {
         );
         --md-assist-chip-outline-color: var(--outline-color);
         --md-assist-chip-label-text-weight: 400;
+        --ha-assist-chip-filled-container-color: rgba(
+          var(--rgb-primary-text-color),
+          0.15
+        );
+        --ha-assist-chip-active-container-color: rgba(
+          var(--rgb-primary-color),
+          0.15
+        );
       }
       /** Material 3 doesn't have a filled chip, so we have to make our own **/
       .filled {
@@ -44,17 +52,10 @@ export class HaAssistChip extends MdAssistChip {
         margin-inline-end: unset;
         margin-inline-start: var(--_icon-label-space);
       }
-      ::before {
-        background: var(--ha-assist-chip-container-color, transparent);
-        opacity: var(--ha-assist-chip-container-opacity, 1);
-      }
       :where(.active)::before {
         background: var(--ha-assist-chip-active-container-color);
         opacity: var(--ha-assist-chip-active-container-opacity);
       }
-      .label {
-        font-family: Roboto, sans-serif;
-      }
     `,
   ];
 

src/components/data-table/ha-data-table-labels.ts

@@ -5,22 +5,20 @@ import { LabelRegistryEntry } from "../../data/label_registry";
 import { computeCssColor } from "../../common/color/compute-color";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-label";
-import { stringCompare } from "../../common/string/compare";
 
 @customElement("ha-data-table-labels")
 class HaDataTableLabels extends LitElement {
   @property({ attribute: false }) public labels!: LabelRegistryEntry[];
 
   protected render(): TemplateResult {
-    const labels = this.labels.sort((a, b) => stringCompare(a.name, b.name));
     return html`
       <ha-chip-set>
         ${repeat(
-          labels.slice(0, 2),
+          this.labels.slice(0, 2),
           (label) => label.label_id,
           (label) => this._renderLabel(label, true)
         )}
-        ${labels.length > 2
+        ${this.labels.length > 2
           ? html`<ha-button-menu
               absolute
               role="button"
@@ -29,10 +27,10 @@ class HaDataTableLabels extends LitElement {
               @closed=${this._handleIconOverflowMenuClosed}
             >
               <ha-label slot="trigger" class="plus" dense>
-                +${labels.length - 2}
+                +${this.labels.length - 2}
               </ha-label>
               ${repeat(
-                labels.slice(2),
+                this.labels.slice(2),
                 (label) => label.label_id,
                 (label) => html`
                   <ha-list-item @click=${this._labelClicked} .item=${label}>
@@ -106,14 +104,13 @@ class HaDataTableLabels extends LitElement {
         flex-wrap: nowrap;
       }
       ha-label {
-        --ha-label-background-color: var(--color, var(--grey-color));
+        --ha-label-background-color: var(--color);
         --ha-label-background-opacity: 0.5;
       }
       ha-button-menu {
         border-radius: 10px;
       }
       .plus {
-        --ha-label-background-color: transparent;
         border: 1px solid var(--divider-color);
       }
     `;

src/components/data-table/ha-data-table.ts

@@ -33,7 +33,6 @@ import "../ha-svg-icon";
 import "../search-input";
 import { filterData, sortData } from "./sort-filter";
 import { groupBy } from "../../common/util/group-by";
-import { stringCompare } from "../../common/string/compare";
 
 declare global {
   // for fire event
@@ -182,13 +181,6 @@ export class HaDataTable extends LitElement {
     this._checkedRowsChanged();
   }
 
-  public selectAll(): void {
-    this._checkedRows = this._filteredData
-      .filter((data) => data.selectable !== false)
-      .map((data) => data[this.id]);
-    this._checkedRowsChanged();
-  }
-
   public connectedCallback() {
     super.connectedCallback();
     if (this._items.length) {
@@ -394,7 +386,7 @@ export class HaDataTable extends LitElement {
     `;
   }
 
-  private _keyFunction = (row: DataTableRowData) => row?.[this.id] || row;
+  private _keyFunction = (row: DataTableRowData) => row[this.id] || row;
 
   private _renderRow = (row: DataTableRowData, index: number) => {
     // not sure how this happens...
@@ -520,6 +512,10 @@ export class HaDataTable extends LitElement {
         items.push({ append: true, content: this.appendRow });
       }
 
+      if (this.hasFab) {
+        items.push({ empty: true });
+      }
+
       if (this.groupColumn) {
         const grouped = groupBy(items, (item) => item[this.groupColumn!]);
         if (grouped.undefined) {
@@ -530,13 +526,7 @@ export class HaDataTable extends LitElement {
         const sorted: {
           [key: string]: DataTableRowData[];
         } = Object.keys(grouped)
-          .sort((a, b) =>
-            stringCompare(
-              ["", "-", "—"].includes(a) ? "zzz" : a,
-              ["", "-", "—"].includes(b) ? "zzz" : b,
-              this.hass.locale.language
-            )
-          )
+          .sort()
           .reduce((obj, key) => {
             obj[key] = grouped[key];
             return obj;
@@ -565,10 +555,6 @@ export class HaDataTable extends LitElement {
       } else {
         this._items = items;
       }
-
-      if (this.hasFab) {
-        this._items = [...this._items, { empty: true }];
-      }
     } else {
       this._items = data;
     }
@@ -607,7 +593,10 @@ export class HaDataTable extends LitElement {
   private _handleHeaderRowCheckboxClick(ev: Event) {
     const checkbox = ev.target as HaCheckbox;
     if (checkbox.checked) {
-      this.selectAll();
+      this._checkedRows = this._filteredData
+        .filter((data) => data.selectable !== false)
+        .map((data) => data[this.id]);
+      this._checkedRowsChanged();
     } else {
       this._checkedRows = [];
       this._checkedRowsChanged();
@@ -634,13 +623,9 @@ export class HaDataTable extends LitElement {
       ev
         .composedPath()
         .find((el) =>
-          [
-            "ha-checkbox",
-            "mwc-button",
-            "ha-button",
-            "ha-icon-button",
-            "ha-assist-chip",
-          ].includes((el as HTMLElement).localName)
+          ["ha-checkbox", "mwc-button", "ha-button", "ha-assist-chip"].includes(
+            (el as HTMLElement).localName
+          )
         )
     ) {
       return;

src/components/ha-area-filter.ts

@@ -1,12 +1,12 @@
-import { mdiTextureBox } from "@mdi/js";
+import { mdiSofa } from "@mdi/js";
 import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { showAreaFilterDialog } from "../dialogs/area-filter/show-area-filter-dialog";
 import { HomeAssistant } from "../types";
-import "./ha-icon-next";
 import "./ha-svg-icon";
 import "./ha-textfield";
+import "./ha-icon-next";
 
 export type AreaFilterValue = {
   hidden?: string[];
@@ -51,7 +51,7 @@ export class HaAreaPicker extends LitElement {
         @keydown=${this._edit}
         .disabled=${this.disabled}
       >
-        <ha-svg-icon slot="graphic" .path=${mdiTextureBox}></ha-svg-icon>
+        <ha-svg-icon slot="graphic" .path=${mdiSofa}></ha-svg-icon>
         <span>${this.label}</span>
         <span slot="secondary">${description}</span>
         <ha-icon-next

src/components/ha-area-floor-picker.ts

@@ -1,18 +1,14 @@
-import { mdiTextureBox } from "@mdi/js";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import { LitElement, PropertyValues, TemplateResult, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
-import { stringCompare } from "../common/string/compare";
 import {
   ScorableTextItem,
   fuzzyFilterSort,
 } from "../common/string/filter/sequence-matching";
-import { computeRTL } from "../common/util/compute_rtl";
 import { AreaRegistryEntry } from "../data/area_registry";
 import {
   DeviceEntityDisplayLookup,
@@ -30,11 +26,10 @@ import { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
-import "./ha-floor-icon";
 import "./ha-icon-button";
 import "./ha-list-item";
 import "./ha-svg-icon";
-import "./ha-tree-indicator";
+import { stringCompare } from "../common/string/compare";
 
 type ScorableAreaFloorEntry = ScorableTextItem & FloorAreaEntry;
 
@@ -44,11 +39,22 @@ interface FloorAreaEntry {
   icon: string | null;
   strings: string[];
   type: "floor" | "area";
-  level: number | null;
   hasFloor?: boolean;
-  lastArea?: boolean;
 }
 
+const rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) =>
+  html`<ha-list-item
+    graphic="icon"
+    style=${item.type === "area" && item.hasFloor
+      ? "--mdc-list-side-padding-left: 48px;"
+      : ""}
+  >
+    ${item.icon
+      ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
+      : nothing}
+    ${item.name}
+  </ha-list-item>`;
+
 @customElement("ha-area-floor-picker")
 export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -137,44 +143,6 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
     await this.comboBox?.focus();
   }
 
-  private _rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) => {
-    const rtl = computeRTL(this.hass);
-    return html`
-      <ha-list-item
-        graphic="icon"
-        style=${item.type === "area" && item.hasFloor
-          ? rtl
-            ? "--mdc-list-side-padding-right: 48px;"
-            : "--mdc-list-side-padding-left: 48px;"
-          : ""}
-      >
-        ${item.type === "area" && item.hasFloor
-          ? html`<ha-tree-indicator
-              style=${styleMap({
-                width: "48px",
-                position: "absolute",
-                top: "0px",
-                left: rtl ? undefined : "8px",
-                right: rtl ? "8px" : undefined,
-                transform: rtl ? "scaleX(-1)" : "",
-              })}
-              .end=${item.lastArea}
-              slot="graphic"
-            ></ha-tree-indicator>`
-          : nothing}
-        ${item.type === "floor"
-          ? html`<ha-floor-icon slot="graphic" .floor=${item}></ha-floor-icon>`
-          : item.icon
-            ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
-            : html`<ha-svg-icon
-                slot="graphic"
-                .path=${mdiTextureBox}
-              ></ha-svg-icon>`}
-        ${item.name}
-      </ha-list-item>
-    `;
-  };
-
   private _getAreas = memoizeOne(
     (
       floors: FloorRegistryEntry[],
@@ -197,7 +165,6 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
             name: this.hass.localize("ui.components.area-picker.no_areas"),
             icon: null,
             strings: [],
-            level: null,
           },
         ];
       }
@@ -349,7 +316,6 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
             name: this.hass.localize("ui.components.area-picker.no_match"),
             icon: null,
             strings: [],
-            level: null,
           },
         ];
       }
@@ -384,19 +350,16 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
             name: floor.name,
             icon: floor.icon,
             strings: [floor.floor_id, ...floor.aliases, floor.name],
-            level: floor.level,
           });
         }
         output.push(
-          ...floorAreas.map((area, index, array) => ({
+          ...floorAreas.map((area) => ({
             id: area.area_id,
             type: "area" as const,
             name: area.name,
             icon: area.icon,
             strings: [area.area_id, ...area.aliases, area.name],
             hasFloor: true,
-            level: null,
-            lastArea: index === array.length - 1,
           }))
         );
       });
@@ -410,7 +373,6 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
           ),
           icon: null,
           strings: [],
-          level: null,
         });
       }
 
@@ -421,7 +383,6 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
           name: area.name,
           icon: area.icon,
           strings: [area.area_id, ...area.aliases, area.name],
-          level: null,
         }))
       );
 
@@ -470,7 +431,7 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
         .placeholder=${this.placeholder
           ? this.hass.areas[this.placeholder]?.name
           : undefined}
-        .renderer=${this._rowRenderer}
+        .renderer=${rowRenderer}
         @filter-changed=${this._filterChanged}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._areaChanged}

src/components/ha-area-picker.ts

@@ -1,15 +1,14 @@
-import { mdiTextureBox } from "@mdi/js";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { HassEntity } from "home-assistant-js-websocket";
-import { LitElement, PropertyValues, TemplateResult, html } from "lit";
+import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import {
-  ScorableTextItem,
   fuzzyFilterSort,
+  ScorableTextItem,
 } from "../common/string/filter/sequence-matching";
 import {
   AreaRegistryEntry,
@@ -21,8 +20,10 @@ import {
   getDeviceEntityDisplayLookup,
 } from "../data/device_registry";
 import { EntityRegistryDisplayEntry } from "../data/entity_registry";
-import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
-import { showAreaRegistryDetailDialog } from "../panels/config/areas/show-dialog-area-registry-detail";
+import {
+  showAlertDialog,
+  showPromptDialog,
+} from "../dialogs/generic/show-dialog-box";
 import { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
@@ -36,18 +37,14 @@ type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
 const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
   html`<ha-list-item
     graphic="icon"
-    class=${classMap({ "add-new": item.area_id === ADD_NEW_ID })}
+    class=${classMap({ "add-new": item.area_id === "add_new" })}
   >
     ${item.icon
       ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
-      : html`<ha-svg-icon slot="graphic" .path=${mdiTextureBox}></ha-svg-icon>`}
+      : nothing}
     ${item.name}
   </ha-list-item>`;
 
-const ADD_NEW_ID = "___ADD_NEW___";
-const NO_ITEMS_ID = "___NO_ITEMS___";
-const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
-
 @customElement("ha-area-picker")
 export class HaAreaPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -136,6 +133,20 @@ export class HaAreaPicker extends LitElement {
       noAdd: this["noAdd"],
       excludeAreas: this["excludeAreas"]
     ): AreaRegistryEntry[] => {
+      if (!areas.length) {
+        return [
+          {
+            area_id: "no_areas",
+            floor_id: null,
+            name: this.hass.localize("ui.components.area-picker.no_areas"),
+            picture: null,
+            icon: null,
+            aliases: [],
+            labels: [],
+          },
+        ];
+      }
+
       let deviceEntityLookup: DeviceEntityDisplayLookup = {};
       let inputDevices: DeviceRegistryEntry[] | undefined;
       let inputEntities: EntityRegistryDisplayEntry[] | undefined;
@@ -272,9 +283,9 @@ export class HaAreaPicker extends LitElement {
       if (!outputAreas.length) {
         outputAreas = [
           {
-            area_id: NO_ITEMS_ID,
+            area_id: "no_areas",
             floor_id: null,
-            name: this.hass.localize("ui.components.area-picker.no_areas"),
+            name: this.hass.localize("ui.components.area-picker.no_match"),
             picture: null,
             icon: null,
             aliases: [],
@@ -288,7 +299,7 @@ export class HaAreaPicker extends LitElement {
         : [
             ...outputAreas,
             {
-              area_id: ADD_NEW_ID,
+              area_id: "add_new",
               floor_id: null,
               name: this.hass.localize("ui.components.area-picker.add_new"),
               picture: null,
@@ -362,40 +373,20 @@ export class HaAreaPicker extends LitElement {
 
     const filteredItems = fuzzyFilterSort<ScorableAreaRegistryEntry>(
       filterString,
-      target.items?.filter(
-        (item) => ![NO_ITEMS_ID, ADD_NEW_ID].includes(item.label_id)
-      ) || []
+      target.items || []
     );
-    if (filteredItems.length === 0) {
-      if (!this.noAdd) {
-        this.comboBox.filteredItems = [
-          {
-            area_id: NO_ITEMS_ID,
-            floor_id: null,
-            name: this.hass.localize("ui.components.area-picker.no_match"),
-            icon: null,
-            picture: null,
-            labels: [],
-            aliases: [],
-          },
-        ] as AreaRegistryEntry[];
-      } else {
-        this._suggestion = filterString;
-        this.comboBox.filteredItems = [
-          {
-            area_id: ADD_NEW_SUGGESTION_ID,
-            floor_id: null,
-            name: this.hass.localize(
-              "ui.components.area-picker.add_new_sugestion",
-              { name: this._suggestion }
-            ),
-            icon: "mdi:plus",
-            picture: null,
-            labels: [],
-            aliases: [],
-          },
-        ] as AreaRegistryEntry[];
-      }
+    if (!this.noAdd && filteredItems?.length === 0) {
+      this._suggestion = filterString;
+      this.comboBox.filteredItems = [
+        {
+          area_id: "add_new_suggestion",
+          name: this.hass.localize(
+            "ui.components.area-picker.add_new_sugestion",
+            { name: this._suggestion }
+          ),
+          picture: null,
+        },
+      ];
     } else {
       this.comboBox.filteredItems = filteredItems;
     }
@@ -413,13 +404,11 @@ export class HaAreaPicker extends LitElement {
     ev.stopPropagation();
     let newValue = ev.detail.value;
 
-    if (newValue === NO_ITEMS_ID) {
+    if (newValue === "no_areas") {
       newValue = "";
-      this.comboBox.setInputValue("");
-      return;
     }
 
-    if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
+    if (!["add_new_suggestion", "add_new"].includes(newValue)) {
       if (newValue !== this._value) {
         this._setValue(newValue);
       }
@@ -427,14 +416,25 @@ export class HaAreaPicker extends LitElement {
     }
 
     (ev.target as any).value = this._value;
-
-    this.hass.loadFragmentTranslation("config");
-
-    showAreaRegistryDetailDialog(this, {
-      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
-      createEntry: async (values) => {
+    showPromptDialog(this, {
+      title: this.hass.localize("ui.components.area-picker.add_dialog.title"),
+      text: this.hass.localize("ui.components.area-picker.add_dialog.text"),
+      confirmText: this.hass.localize(
+        "ui.components.area-picker.add_dialog.add"
+      ),
+      inputLabel: this.hass.localize(
+        "ui.components.area-picker.add_dialog.name"
+      ),
+      defaultValue:
+        newValue === "add_new_suggestion" ? this._suggestion : undefined,
+      confirm: async (name) => {
+        if (!name) {
+          return;
+        }
         try {
-          const area = await createAreaRegistryEntry(this.hass, values);
+          const area = await createAreaRegistryEntry(this.hass, {
+            name,
+          });
           const areas = [...Object.values(this.hass.areas), area];
           this.comboBox.filteredItems = this._getAreas(
             areas,
@@ -454,16 +454,18 @@ export class HaAreaPicker extends LitElement {
         } catch (err: any) {
           showAlertDialog(this, {
             title: this.hass.localize(
-              "ui.components.area-picker.failed_create_area"
+              "ui.components.area-picker.add_dialog.failed_create_area"
             ),
             text: err.message,
           });
         }
       },
+      cancel: () => {
+        this._setValue(undefined);
+        this._suggestion = undefined;
+        this.comboBox.setInputValue("");
+      },
     });
-
-    this._suggestion = undefined;
-    this.comboBox.setInputValue("");
   }
 
   private _setValue(value?: string) {

src/components/ha-button-menu-new.ts

@@ -1,89 +0,0 @@
-import { Button } from "@material/mwc-button";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
-import type { HaIconButton } from "./ha-icon-button";
-import "./ha-menu";
-import type { HaMenu } from "./ha-menu";
-
-@customElement("ha-button-menu-new")
-export class HaButtonMenuNew extends LitElement {
-  protected readonly [FOCUS_TARGET];
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property() public positioning?: "fixed" | "absolute" | "popover";
-
-  @property({ type: Boolean, attribute: "has-overflow" }) public hasOverflow =
-    false;
-
-  @query("ha-menu", true) private _menu!: HaMenu;
-
-  public get items() {
-    return this._menu.items;
-  }
-
-  public override focus() {
-    if (this._menu.open) {
-      this._menu.focus();
-    } else {
-      this._triggerButton?.focus();
-    }
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <div @click=${this._handleClick}>
-        <slot name="trigger" @slotchange=${this._setTriggerAria}></slot>
-      </div>
-      <ha-menu
-        .positioning=${this.positioning}
-        .hasOverflow=${this.hasOverflow}
-      >
-        <slot></slot>
-      </ha-menu>
-    `;
-  }
-
-  private _handleClick(): void {
-    if (this.disabled) {
-      return;
-    }
-    this._menu.anchorElement = this;
-    if (this._menu.open) {
-      this._menu.close();
-    } else {
-      this._menu.show();
-    }
-  }
-
-  private get _triggerButton() {
-    return this.querySelector(
-      'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"], ha-assist-chip[slot="trigger"]'
-    ) as HaIconButton | Button | null;
-  }
-
-  private _setTriggerAria() {
-    if (this._triggerButton) {
-      this._triggerButton.ariaHasPopup = "menu";
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: inline-block;
-        position: relative;
-      }
-      ::slotted([disabled]) {
-        color: var(--disabled-text-color);
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-button-menu-new": HaButtonMenuNew;
-  }
-}

src/components/ha-color-picker.ts

@@ -6,7 +6,6 @@ import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-select";
-import "./ha-list-item";
 import { HomeAssistant } from "../types";
 import { LocalizeKeys } from "../common/translations/localize";
 
@@ -54,18 +53,18 @@ export class HaColorPicker extends LitElement {
             `
           : nothing}
         ${this.defaultColor
-          ? html` <ha-list-item value="default">
+          ? html` <mwc-list-item value="default">
               ${this.hass.localize(`ui.components.color-picker.default_color`)}
-            </ha-list-item>`
+            </mwc-list-item>`
           : nothing}
         ${Array.from(THEME_COLORS).map(
           (color) => html`
-            <ha-list-item .value=${color} graphic="icon">
+            <mwc-list-item .value=${color} graphic="icon">
               ${this.hass.localize(
                 `ui.components.color-picker.colors.${color}` as LocalizeKeys
               ) || color}
               <span slot="graphic">${this.renderColorCircle(color)}</span>
-            </ha-list-item>
+            </mwc-list-item>
           `
         )}
       </ha-select>

src/components/ha-filter-blueprints.ts

@@ -1,13 +1,12 @@
 import { SelectedDetail } from "@material/mwc-list";
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiFilterVariantRemove } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { Blueprints, fetchBlueprints } from "../data/blueprint";
 import { findRelated, RelatedResult } from "../data/search";
-import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
+import { haStyleScrollbar } from "../resources/styles";
+import { Blueprints, fetchBlueprints } from "../data/blueprint";
 
 @customElement("ha-filter-blueprints")
 export class HaFilterBlueprints extends LitElement {
@@ -36,11 +35,7 @@ export class HaFilterBlueprints extends LitElement {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.blueprint.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>
-                <ha-icon-button
-                  .path=${mdiFilterVariantRemove}
-                  @click=${this._clearFilter}
-                ></ha-icon-button>`
+            ? html`<div class="badge">${this.value?.length}</div>`
             : nothing}
         </div>
         ${this._blueprints && this._shouldRender
@@ -55,7 +50,7 @@ export class HaFilterBlueprints extends LitElement {
                     ? nothing
                     : html`<ha-check-list-item
                         .value=${id}
-                        .selected=${(this.value || []).includes(id)}
+                        .selected=${this.value?.includes(id)}
                       >
                         ${blueprint.metadata.name || id}
                       </ha-check-list-item>`
@@ -133,15 +128,6 @@ export class HaFilterBlueprints extends LitElement {
     });
   }
 
-  private _clearFilter(ev) {
-    ev.preventDefault();
-    this.value = undefined;
-    fireEvent(this, "data-table-filter-changed", {
-      value: undefined,
-      items: undefined,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -161,10 +147,6 @@ export class HaFilterBlueprints extends LitElement {
           display: flex;
           align-items: center;
         }
-        .header ha-icon-button {
-          margin-inline-start: auto;
-          margin-inline-end: 8px;
-        }
         .badge {
           display: inline-block;
           margin-left: 8px;
@@ -175,11 +157,11 @@ export class HaFilterBlueprints extends LitElement {
           border-radius: 50%;
           font-weight: 400;
           font-size: 11px;
-          background-color: var(--primary-color);
+          background-color: var(--accent-color);
           line-height: 16px;
           text-align: center;
           padding: 0px 2px;
-          color: var(--text-primary-color);
+          color: var(--text-accent-color, var(--text-primary-color));
         }
       `,
     ];

src/components/ha-filter-categories.ts

@@ -2,7 +2,6 @@ import { ActionDetail, SelectedDetail } from "@material/mwc-list";
 import {
   mdiDelete,
   mdiDotsVertical,
-  mdiFilterVariantRemove,
   mdiPencil,
   mdiPlus,
   mdiTag,
@@ -69,11 +68,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.category.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>
-                <ha-icon-button
-                  .path=${mdiFilterVariantRemove}
-                  @click=${this._clearFilter}
-                ></ha-icon-button>`
+            ? html`<div class="badge">${this.value?.length}</div>`
             : nothing}
         </div>
         ${this._shouldRender
@@ -83,15 +78,13 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
                 class="ha-scrollbar"
                 activatable
               >
-                ${this._categories.length > 0
-                  ? html`<ha-list-item
-                      .selected=${!this.value?.length}
-                      .activated=${!this.value?.length}
-                      >${this.hass.localize(
-                        "ui.panel.config.category.filter.show_all"
-                      )}</ha-list-item
-                    >`
-                  : nothing}
+                <ha-list-item
+                  .selected=${!this.value?.length}
+                  .activated=${!this.value?.length}
+                  >${this.hass.localize(
+                    "ui.panel.config.category.filter.show_all"
+                  )}</ha-list-item
+                >
                 ${this._categories.map(
                   (category) =>
                     html`<ha-list-item
@@ -149,11 +142,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
           : nothing}
       </ha-expansion-panel>
       ${this.expanded
-        ? html`<ha-list-item
-            graphic="icon"
-            @click=${this._addCategory}
-            class="add"
-          >
+        ? html`<ha-list-item graphic="icon" @click=${this._addCategory}>
             <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
             ${this.hass.localize("ui.panel.config.category.editor.add")}
           </ha-list-item>`
@@ -259,22 +248,12 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _clearFilter(ev) {
-    ev.preventDefault();
-    this.value = undefined;
-    fireEvent(this, "data-table-filter-changed", {
-      value: undefined,
-      items: undefined,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
       css`
         :host {
           border-bottom: 1px solid var(--divider-color);
-          position: relative;
         }
         :host([expanded]) {
           flex: 1;
@@ -288,10 +267,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
           display: flex;
           align-items: center;
         }
-        .header ha-icon-button {
-          margin-inline-start: auto;
-          margin-inline-end: 8px;
-        }
         .badge {
           display: inline-block;
           margin-left: 8px;
@@ -302,11 +277,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
           border-radius: 50%;
           font-weight: 400;
           font-size: 11px;
-          background-color: var(--primary-color);
+          background-color: var(--accent-color);
           line-height: 16px;
           text-align: center;
           padding: 0px 2px;
-          color: var(--text-primary-color);
+          color: var(--text-accent-color, var(--text-primary-color));
         }
         mwc-list {
           --mdc-list-item-meta-size: auto;
@@ -316,12 +291,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
         .warning {
           color: var(--error-color);
         }
-        .add {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          left: 0;
-        }
       `,
     ];
   }

src/components/ha-filter-devices.ts

@@ -1,4 +1,3 @@
-import { mdiFilterVariantRemove } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -14,11 +13,10 @@ import { stringCompare } from "../common/string/compare";
 import { computeDeviceName } from "../data/device_registry";
 import { findRelated, RelatedResult } from "../data/search";
 import { haStyleScrollbar } from "../resources/styles";
-import { loadVirtualizer } from "../resources/virtualizer";
 import type { HomeAssistant } from "../types";
-import "./ha-check-list-item";
 import "./ha-expansion-panel";
-import "./search-input-outlined";
+import "./ha-check-list-item";
+import { loadVirtualizer } from "../resources/virtualizer";
 
 @customElement("ha-filter-devices")
 export class HaFilterDevices extends LitElement {
@@ -34,8 +32,6 @@ export class HaFilterDevices extends LitElement {
 
   @state() private _shouldRender = false;
 
-  @state() private _filter?: string;
-
   public willUpdate(properties: PropertyValues) {
     super.willUpdate(properties);
 
@@ -55,49 +51,30 @@ export class HaFilterDevices extends LitElement {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.devices.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>
-                <ha-icon-button
-                  .path=${mdiFilterVariantRemove}
-                  @click=${this._clearFilter}
-                ></ha-icon-button>`
+            ? html`<div class="badge">${this.value?.length}</div>`
             : nothing}
         </div>
         ${this._shouldRender
-          ? html`<search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._filter}
-                @value-changed=${this._handleSearchChange}
+          ? html`<mwc-list class="ha-scrollbar">
+              <lit-virtualizer
+                .items=${this._devices(this.hass.devices)}
+                .renderItem=${this._renderItem}
+                @click=${this._handleItemClick}
               >
-              </search-input-outlined>
-              <mwc-list class="ha-scrollbar">
-                <lit-virtualizer
-                  .items=${this._devices(
-                    this.hass.devices,
-                    this._filter || "",
-                    this.value
-                  )}
-                  .keyFunction=${this._keyFunction}
-                  .renderItem=${this._renderItem}
-                  @click=${this._handleItemClick}
-                >
-                </lit-virtualizer>
-              </mwc-list>`
+              </lit-virtualizer>
+            </mwc-list>`
           : nothing}
       </ha-expansion-panel>
     `;
   }
 
-  private _keyFunction = (device) => device?.id;
-
   private _renderItem = (device) =>
-    !device
-      ? nothing
-      : html`<ha-check-list-item
-          .value=${device.id}
-          .selected=${this.value?.includes(device.id)}
-        >
-          ${computeDeviceName(device, this.hass)}
-        </ha-check-list-item>`;
+    html`<ha-check-list-item
+      .value=${device.id}
+      .selected=${this.value?.includes(device.id)}
+    >
+      ${computeDeviceName(device, this.hass)}
+    </ha-check-list-item>`;
 
   private _handleItemClick(ev) {
     const listItem = ev.target.closest("ha-check-list-item");
@@ -119,7 +96,7 @@ export class HaFilterDevices extends LitElement {
       setTimeout(() => {
         if (!this.expanded) return;
         this.renderRoot.querySelector("mwc-list")!.style.height =
-          `${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
+          `${this.clientHeight - 49}px`;
       }, 300);
     }
   }
@@ -132,28 +109,16 @@ export class HaFilterDevices extends LitElement {
     this.expanded = ev.detail.expanded;
   }
 
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value.toLowerCase();
-  }
-
-  private _devices = memoizeOne(
-    (devices: HomeAssistant["devices"], filter: string, _value) => {
-      const values = Object.values(devices);
-      return values
-        .filter(
-          (device) =>
-            !filter ||
-            computeDeviceName(device, this.hass).toLowerCase().includes(filter)
-        )
-        .sort((a, b) =>
-          stringCompare(
-            computeDeviceName(a, this.hass),
-            computeDeviceName(b, this.hass),
-            this.hass.locale.language
-          )
-        );
-    }
-  );
+  private _devices = memoizeOne((devices: HomeAssistant["devices"]) => {
+    const values = Object.values(devices);
+    return values.sort((a, b) =>
+      stringCompare(
+        a.name_by_user || a.name || "",
+        b.name_by_user || b.name || "",
+        this.hass.locale.language
+      )
+    );
+  });
 
   private async _findRelated() {
     const relatedPromises: Promise<RelatedResult>[] = [];
@@ -190,15 +155,6 @@ export class HaFilterDevices extends LitElement {
     });
   }
 
-  private _clearFilter(ev) {
-    ev.preventDefault();
-    this.value = undefined;
-    fireEvent(this, "data-table-filter-changed", {
-      value: undefined,
-      items: undefined,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -219,10 +175,6 @@ export class HaFilterDevices extends LitElement {
           display: flex;
           align-items: center;
         }
-        .header ha-icon-button {
-          margin-inline-start: auto;
-          margin-inline-end: 8px;
-        }
         .badge {
           display: inline-block;
           margin-left: 8px;
@@ -233,19 +185,15 @@ export class HaFilterDevices extends LitElement {
           border-radius: 50%;
           font-weight: 400;
           font-size: 11px;
-          background-color: var(--primary-color);
+          background-color: var(--accent-color);
           line-height: 16px;
           text-align: center;
           padding: 0px 2px;
-          color: var(--text-primary-color);
+          color: var(--text-accent-color, var(--text-primary-color));
         }
         ha-check-list-item {
           width: 100%;
         }
-        search-input-outlined {
-          display: block;
-          padding: 0 8px;
-        }
       `,
     ];
   }

src/components/ha-filter-entities.ts

@@ -1,4 +1,3 @@
-import { mdiFilterVariantRemove } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -15,11 +14,10 @@ import { computeStateName } from "../common/entity/compute_state_name";
 import { stringCompare } from "../common/string/compare";
 import { findRelated, RelatedResult } from "../data/search";
 import { haStyleScrollbar } from "../resources/styles";
-import { loadVirtualizer } from "../resources/virtualizer";
 import type { HomeAssistant } from "../types";
-import "./ha-check-list-item";
 import "./ha-state-icon";
-import "./search-input-outlined";
+import "./ha-check-list-item";
+import { loadVirtualizer } from "../resources/virtualizer";
 
 @customElement("ha-filter-entities")
 export class HaFilterEntities extends LitElement {
@@ -35,8 +33,6 @@ export class HaFilterEntities extends LitElement {
 
   @state() private _shouldRender = false;
 
-  @state() private _filter?: string;
-
   public willUpdate(properties: PropertyValues) {
     super.willUpdate(properties);
 
@@ -56,30 +52,14 @@ export class HaFilterEntities extends LitElement {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.entities.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>
-                <ha-icon-button
-                  .path=${mdiFilterVariantRemove}
-                  @click=${this._clearFilter}
-                ></ha-icon-button>`
+            ? html`<div class="badge">${this.value?.length}</div>`
             : nothing}
         </div>
         ${this._shouldRender
           ? html`
-              <search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._filter}
-                @value-changed=${this._handleSearchChange}
-              >
-              </search-input-outlined>
               <mwc-list class="ha-scrollbar">
                 <lit-virtualizer
-                  .items=${this._entities(
-                    this.hass.states,
-                    this.type,
-                    this._filter || "",
-                    this.value
-                  )}
-                  .keyFunction=${this._keyFunction}
+                  .items=${this._entities(this.hass.states, this.type)}
                   .renderItem=${this._renderItem}
                   @click=${this._handleItemClick}
                 >
@@ -96,28 +76,24 @@ export class HaFilterEntities extends LitElement {
       setTimeout(() => {
         if (!this.expanded) return;
         this.renderRoot.querySelector("mwc-list")!.style.height =
-          `${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
+          `${this.clientHeight - 49}px`;
       }, 300);
     }
   }
 
-  private _keyFunction = (entity) => entity?.entity_id;
-
   private _renderItem = (entity) =>
-    !entity
-      ? nothing
-      : html`<ha-check-list-item
-          .value=${entity.entity_id}
-          .selected=${this.value?.includes(entity.entity_id)}
-          graphic="icon"
-        >
-          <ha-state-icon
-            slot="graphic"
-            .hass=${this.hass}
-            .stateObj=${entity}
-          ></ha-state-icon>
-          ${computeStateName(entity)}
-        </ha-check-list-item>`;
+    html`<ha-check-list-item
+      .value=${entity.entity_id}
+      .selected=${this.value?.includes(entity.entity_id)}
+      graphic="icon"
+    >
+      <ha-state-icon
+        slot="graphic"
+        .hass=${this.hass}
+        .stateObj=${entity}
+      ></ha-state-icon>
+      ${computeStateName(entity)}
+    </ha-check-list-item>`;
 
   private _handleItemClick(ev) {
     const listItem = ev.target.closest("ha-check-list-item");
@@ -142,27 +118,12 @@ export class HaFilterEntities extends LitElement {
     this.expanded = ev.detail.expanded;
   }
 
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value.toLowerCase();
-  }
-
   private _entities = memoizeOne(
-    (
-      states: HomeAssistant["states"],
-      type: this["type"],
-      filter: string,
-      _value
-    ) => {
+    (states: HomeAssistant["states"], type: this["type"]) => {
       const values = Object.values(states);
       return values
         .filter(
-          (entityState) =>
-            (!type || computeStateDomain(entityState) !== type) &&
-            (!filter ||
-              entityState.entity_id.toLowerCase().includes(filter) ||
-              entityState.attributes.friendly_name
-                ?.toLowerCase()
-                .includes(filter))
+          (entityState) => !type || computeStateDomain(entityState) !== type
         )
         .sort((a, b) =>
           stringCompare(
@@ -209,15 +170,6 @@ export class HaFilterEntities extends LitElement {
     });
   }
 
-  private _clearFilter(ev) {
-    ev.preventDefault();
-    this.value = undefined;
-    fireEvent(this, "data-table-filter-changed", {
-      value: undefined,
-      items: undefined,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -237,10 +189,6 @@ export class HaFilterEntities extends LitElement {
           display: flex;
           align-items: center;
         }
-        .header ha-icon-button {
-          margin-inline-start: auto;
-          margin-inline-end: 8px;
-        }
         .badge {
           display: inline-block;
           margin-left: 8px;
@@ -251,20 +199,16 @@ export class HaFilterEntities extends LitElement {
           border-radius: 50%;
           font-weight: 400;
           font-size: 11px;
-          background-color: var(--primary-color);
+          background-color: var(--accent-color);
           line-height: 16px;
           text-align: center;
           padding: 0px 2px;
-          color: var(--text-primary-color);
+          color: var(--text-accent-color, var(--text-primary-color));
         }
         ha-check-list-item {
           --mdc-list-item-graphic-margin: 16px;
           width: 100%;
         }
-        search-input-outlined {
-          display: block;
-          padding: 0 8px;
-        }
       `,
     ];
   }

src/components/ha-filter-floor-areas.ts

@@ -1,27 +1,20 @@
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiFilterVariantRemove, mdiTextureBox } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
-import { computeRTL } from "../common/util/compute_rtl";
 import {
   FloorRegistryEntry,
   getFloorAreaLookup,
   subscribeFloorRegistry,
 } from "../data/floor_registry";
-import { RelatedResult, findRelated } from "../data/search";
+import { findRelated, RelatedResult } from "../data/search";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
-import "./ha-floor-icon";
-import "./ha-icon";
-import "./ha-svg-icon";
-import "./ha-tree-indicator";
 
 @customElement("ha-filter-floor-areas")
 export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
@@ -56,13 +49,9 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
           ${this.hass.localize("ui.panel.config.areas.caption")}
           ${this.value?.areas?.length || this.value?.floors?.length
             ? html`<div class="badge">
-                  ${(this.value?.areas?.length || 0) +
-                  (this.value?.floors?.length || 0)}
-                </div>
-                <ha-icon-button
-                  .path=${mdiFilterVariantRemove}
-                  @click=${this._clearFilter}
-                ></ha-icon-button>`
+                ${(this.value?.areas?.length || 0) +
+                (this.value?.floors?.length || 0)}
+              </div>`
             : nothing}
         </div>
         ${this._shouldRender
@@ -81,18 +70,18 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
                       graphic="icon"
                       @request-selected=${this._handleItemClick}
                     >
-                      <ha-floor-icon
-                        slot="graphic"
-                        .floor=${floor}
-                      ></ha-floor-icon>
+                      ${floor.icon
+                        ? html`<ha-icon
+                            slot="graphic"
+                            .icon=${floor.icon}
+                          ></ha-icon>`
+                        : nothing}
                       ${floor.name}
                     </ha-check-list-item>
                     ${repeat(
                       floor.areas,
-                      (area, index) =>
-                        `${area.area_id}${index === floor.areas.length - 1 ? "___last" : ""}`,
-                      (area, index) =>
-                        this._renderArea(area, index === floor.areas.length - 1)
+                      (area) => area.area_id,
+                      (area) => this._renderArea(area)
                     )}
                   `
                 )}
@@ -108,37 +97,20 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
     `;
   }
 
-  private _renderArea(area, last: boolean = false) {
-    const hasFloor = !!area.floor_id;
-    return html`
-      <ha-check-list-item
-        .value=${area.area_id}
-        .selected=${this.value?.areas?.includes(area.area_id) || false}
-        .type=${"areas"}
-        graphic="icon"
-        @request-selected=${this._handleItemClick}
-        class=${classMap({
-          rtl: computeRTL(this.hass),
-          floor: hasFloor,
-        })}
-      >
-        ${hasFloor
-          ? html`
-              <ha-tree-indicator
-                .end=${last}
-                slot="graphic"
-              ></ha-tree-indicator>
-            `
-          : nothing}
-        ${area.icon
-          ? html`<ha-icon slot="graphic" .icon=${area.icon}></ha-icon>`
-          : html`<ha-svg-icon
-              slot="graphic"
-              .path=${mdiTextureBox}
-            ></ha-svg-icon>`}
-        ${area.name}
-      </ha-check-list-item>
-    `;
+  private _renderArea(area) {
+    return html`<ha-check-list-item
+      .value=${area.area_id}
+      .selected=${this.value?.areas?.includes(area.area_id) || false}
+      .type=${"areas"}
+      graphic="icon"
+      class=${area.floor_id ? "floor" : ""}
+      @request-selected=${this._handleItemClick}
+    >
+      ${area.icon
+        ? html`<ha-icon slot="graphic" .icon=${area.icon}></ha-icon>`
+        : nothing}
+      ${area.name}
+    </ha-check-list-item>`;
   }
 
   private _handleItemClick(ev) {
@@ -261,15 +233,6 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _clearFilter(ev) {
-    ev.preventDefault();
-    this.value = undefined;
-    fireEvent(this, "data-table-filter-changed", {
-      value: undefined,
-      items: undefined,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -289,10 +252,6 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
           display: flex;
           align-items: center;
         }
-        .header ha-icon-button {
-          margin-inline-start: auto;
-          margin-inline-end: 8px;
-        }
         .badge {
           display: inline-block;
           margin-left: 8px;
@@ -303,36 +262,19 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
           border-radius: 50%;
           font-weight: 400;
           font-size: 11px;
-          background-color: var(--primary-color);
+          background-color: var(--accent-color);
           line-height: 16px;
           text-align: center;
           padding: 0px 2px;
-          color: var(--text-primary-color);
+          color: var(--text-accent-color, var(--text-primary-color));
         }
         ha-check-list-item {
           --mdc-list-item-graphic-margin: 16px;
         }
         .floor {
-          padding-left: 48px;
-          padding-inline-start: 48px;
-          padding-inline-end: 16px;
+          padding-left: 32px;
+          padding-inline-start: 32px;
         }
-        ha-tree-indicator {
-          width: 56px;
-          position: absolute;
-          top: 0px;
-          left: 0px;
-        }
-        .rtl ha-tree-indicator {
-          right: 0px;
-          left: initial;
-          transform: scaleX(-1);
-        }
-        .subdir {
-          margin-inline-end: 8px;
-          opacity: .6;
-        }
-        .
       `,
     ];
   }

src/components/ha-filter-integrations.ts

@@ -1,19 +1,16 @@
 import { SelectedDetail } from "@material/mwc-list";
-import { mdiFilterVariantRemove } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
 import {
   fetchIntegrationManifests,
   IntegrationManifest,
 } from "../data/integration";
-import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import "./ha-domain-icon";
-import "./search-input-outlined";
 
 @customElement("ha-filter-integrations")
 export class HaFilterIntegrations extends LitElement {
@@ -29,8 +26,6 @@ export class HaFilterIntegrations extends LitElement {
 
   @state() private _shouldRender = false;
 
-  @state() private _filter?: string;
-
   protected render() {
     return html`
       <ha-expansion-panel
@@ -42,34 +37,21 @@ export class HaFilterIntegrations extends LitElement {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.integrations.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>
-                <ha-icon-button
-                  .path=${mdiFilterVariantRemove}
-                  @click=${this._clearFilter}
-                ></ha-icon-button>`
+            ? html`<div class="badge">${this.value?.length}</div>`
             : nothing}
         </div>
         ${this._manifests && this._shouldRender
-          ? html`<search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._filter}
-                @value-changed=${this._handleSearchChange}
-              >
-              </search-input-outlined>
+          ? html`
               <mwc-list
                 @selected=${this._integrationsSelected}
                 multi
                 class="ha-scrollbar"
               >
-                ${repeat(
-                  this._integrations(this._manifests, this._filter, this.value),
-                  (i) => i.domain,
+                ${this._integrations(this._manifests).map(
                   (integration) =>
                     html`<ha-check-list-item
                       .value=${integration.domain}
-                      .selected=${(this.value || []).includes(
-                        integration.domain
-                      )}
+                      .selected=${this.value?.includes(integration.domain)}
                       graphic="icon"
                     >
                       <ha-domain-icon
@@ -81,7 +63,8 @@ export class HaFilterIntegrations extends LitElement {
                       ${integration.name || integration.domain}
                     </ha-check-list-item>`
                 )}
-              </mwc-list> `
+              </mwc-list>
+            `
           : nothing}
       </ha-expansion-panel>
     `;
@@ -92,7 +75,7 @@ export class HaFilterIntegrations extends LitElement {
       setTimeout(() => {
         if (!this.expanded) return;
         this.renderRoot.querySelector("mwc-list")!.style.height =
-          `${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
+          `${this.clientHeight - 49}px`;
       }, 300);
     }
   }
@@ -109,36 +92,26 @@ export class HaFilterIntegrations extends LitElement {
     this._manifests = await fetchIntegrationManifests(this.hass);
   }
 
-  private _integrations = memoizeOne(
-    (manifest: IntegrationManifest[], filter: string | undefined, _value) =>
-      manifest
-        .filter(
-          (mnfst) =>
-            (!mnfst.integration_type ||
-              !["entity", "system", "hardware"].includes(
-                mnfst.integration_type
-              )) &&
-            (!filter ||
-              mnfst.name.toLowerCase().includes(filter) ||
-              mnfst.domain.toLowerCase().includes(filter))
-        )
-        .sort((a, b) =>
-          stringCompare(
-            a.name || a.domain,
-            b.name || b.domain,
-            this.hass.locale.language
-          )
+  private _integrations = memoizeOne((manifest: IntegrationManifest[]) =>
+    manifest
+      .filter(
+        (mnfst) =>
+          !mnfst.integration_type ||
+          !["entity", "system", "hardware"].includes(mnfst.integration_type)
+      )
+      .sort((a, b) =>
+        stringCompare(
+          a.name || a.domain,
+          b.name || b.domain,
+          this.hass.locale.language
         )
+      )
   );
 
   private async _integrationsSelected(
     ev: CustomEvent<SelectedDetail<Set<number>>>
   ) {
-    const integrations = this._integrations(
-      this._manifests!,
-      this._filter,
-      this.value
-    );
+    const integrations = this._integrations(this._manifests!);
 
     if (!ev.detail.index.size) {
       fireEvent(this, "data-table-filter-changed", {
@@ -163,19 +136,6 @@ export class HaFilterIntegrations extends LitElement {
     });
   }
 
-  private _clearFilter(ev) {
-    ev.preventDefault();
-    this.value = undefined;
-    fireEvent(this, "data-table-filter-changed", {
-      value: undefined,
-      items: undefined,
-    });
-  }
-
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value.toLowerCase();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -195,10 +155,6 @@ export class HaFilterIntegrations extends LitElement {
           display: flex;
           align-items: center;
         }
-        .header ha-icon-button {
-          margin-inline-start: auto;
-          margin-inline-end: 8px;
-        }
         .badge {
           display: inline-block;
           margin-left: 8px;
@@ -209,15 +165,11 @@ export class HaFilterIntegrations extends LitElement {
           border-radius: 50%;
           font-weight: 400;
           font-size: 11px;
-          background-color: var(--primary-color);
+          background-color: var(--accent-color);
           line-height: 16px;
           text-align: center;
           padding: 0px 2px;
-          color: var(--text-primary-color);
-        }
-        search-input-outlined {
-          display: block;
-          padding: 0 8px;
+          color: var(--text-accent-color, var(--text-primary-color));
         }
       `,
     ];

src/components/ha-filter-labels.ts

@@ -1,13 +1,10 @@
 import { SelectedDetail } from "@material/mwc-list";
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
 import { computeCssColor } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
-import { navigate } from "../common/navigate";
 import {
   LabelRegistryEntry,
   subscribeLabelRegistry,
@@ -53,11 +50,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.labels.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>
-                <ha-icon-button
-                  .path=${mdiFilterVariantRemove}
-                  @click=${this._clearFilter}
-                ></ha-icon-button>`
+            ? html`<div class="badge">${this.value?.length}</div>`
             : nothing}
         </div>
         ${this._shouldRender
@@ -67,44 +60,30 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
                 class="ha-scrollbar"
                 multi
               >
-                ${repeat(
-                  this._labels,
-                  (label) => label.label_id,
-                  (label) => {
-                    const color = label.color
-                      ? computeCssColor(label.color)
-                      : undefined;
-                    return html`<ha-check-list-item
-                      .value=${label.label_id}
-                      .selected=${(this.value || []).includes(label.label_id)}
-                      hasMeta
-                    >
-                      <ha-label style=${color ? `--color: ${color}` : ""}>
-                        ${label.icon
-                          ? html`<ha-icon
-                              slot="icon"
-                              .icon=${label.icon}
-                            ></ha-icon>`
-                          : nothing}
-                        ${label.name}
-                      </ha-label>
-                    </ha-check-list-item>`;
-                  }
-                )}
+                ${this._labels.map((label) => {
+                  const color = label.color
+                    ? computeCssColor(label.color)
+                    : undefined;
+                  return html`<ha-check-list-item
+                    .value=${label.label_id}
+                    .selected=${this.value?.includes(label.label_id)}
+                    hasMeta
+                  >
+                    <ha-label style=${color ? `--color: ${color}` : ""}>
+                      ${label.icon
+                        ? html`<ha-icon
+                            slot="icon"
+                            .icon=${label.icon}
+                          ></ha-icon>`
+                        : nothing}
+                      ${label.name}
+                    </ha-label>
+                  </ha-check-list-item>`;
+                })}
               </mwc-list>
             `
           : nothing}
       </ha-expansion-panel>
-      ${this.expanded
-        ? html`<ha-list-item
-            graphic="icon"
-            @click=${this._manageLabels}
-            class="add"
-          >
-            <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
-            ${this.hass.localize("ui.panel.config.labels.manage_labels")}
-          </ha-list-item>`
-        : nothing}
     `;
   }
 
@@ -113,15 +92,11 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
       setTimeout(() => {
         if (!this.expanded) return;
         this.renderRoot.querySelector("mwc-list")!.style.height =
-          `${this.clientHeight - (49 + 48)}px`;
+          `${this.clientHeight - 49}px`;
       }, 300);
     }
   }
 
-  private _manageLabels() {
-    navigate("/config/labels");
-  }
-
   private _expandedWillChange(ev) {
     this._shouldRender = ev.detail.expanded;
   }
@@ -154,21 +129,11 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _clearFilter(ev) {
-    ev.preventDefault();
-    this.value = undefined;
-    fireEvent(this, "data-table-filter-changed", {
-      value: undefined,
-      items: undefined,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
       css`
         :host {
-          position: relative;
           border-bottom: 1px solid var(--divider-color);
         }
         :host([expanded]) {
@@ -183,10 +148,6 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
           display: flex;
           align-items: center;
         }
-        .header ha-icon-button {
-          margin-inline-start: auto;
-          margin-inline-end: 8px;
-        }
         .badge {
           display: inline-block;
           margin-left: 8px;
@@ -197,25 +158,19 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
           border-radius: 50%;
           font-weight: 400;
           font-size: 11px;
-          background-color: var(--primary-color);
+          background-color: var(--accent-color);
           line-height: 16px;
           text-align: center;
           padding: 0px 2px;
-          color: var(--text-primary-color);
+          color: var(--text-accent-color, var(--text-primary-color));
         }
         .warning {
           color: var(--error-color);
         }
         ha-label {
-          --ha-label-background-color: var(--color, var(--grey-color));
+          --ha-label-background-color: var(--color);
           --ha-label-background-opacity: 0.5;
         }
-        .add {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          left: 0;
-        }
       `,
     ];
   }

src/components/ha-filter-states.ts

@@ -1,12 +1,11 @@
 import { SelectedDetail } from "@material/mwc-list";
-import { mdiFilterVariantRemove } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
-import "./ha-check-list-item";
 import "./ha-expansion-panel";
+import "./ha-check-list-item";
 import "./ha-icon";
 
 @customElement("ha-filter-states")
@@ -44,11 +43,7 @@ export class HaFilterStates extends LitElement {
         <div slot="header" class="header">
           ${this.label}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>
-                <ha-icon-button
-                  .path=${mdiFilterVariantRemove}
-                  @click=${this._clearFilter}
-                ></ha-icon-button>`
+            ? html`<div class="badge">${this.value?.length}</div>`
             : nothing}
         </div>
         ${this._shouldRender
@@ -123,15 +118,6 @@ export class HaFilterStates extends LitElement {
     });
   }
 
-  private _clearFilter(ev) {
-    ev.preventDefault();
-    this.value = undefined;
-    fireEvent(this, "data-table-filter-changed", {
-      value: undefined,
-      items: undefined,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -151,10 +137,6 @@ export class HaFilterStates extends LitElement {
           display: flex;
           align-items: center;
         }
-        .header ha-icon-button {
-          margin-inline-start: auto;
-          margin-inline-end: 8px;
-        }
         .badge {
           display: inline-block;
           margin-left: 8px;
@@ -165,11 +147,11 @@ export class HaFilterStates extends LitElement {
           border-radius: 50%;
           font-weight: 400;
           font-size: 11px;
-          background-color: var(--primary-color);
+          background-color: var(--accent-color);
           line-height: 16px;
           text-align: center;
           padding: 0px 2px;
-          color: var(--text-primary-color);
+          color: var(--text-accent-color, var(--text-primary-color));
         }
       `,
     ];

src/components/ha-floor-icon.ts

@@ -1,56 +0,0 @@
-import {
-  mdiHome,
-  mdiHomeFloor0,
-  mdiHomeFloor1,
-  mdiHomeFloor2,
-  mdiHomeFloor3,
-  mdiHomeFloorNegative1,
-} from "@mdi/js";
-import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators";
-import { FloorRegistryEntry } from "../data/floor_registry";
-import "./ha-icon";
-import "./ha-svg-icon";
-
-export const floorDefaultIconPath = (
-  floor: Pick<FloorRegistryEntry, "level">
-) => {
-  switch (floor.level) {
-    case 0:
-      return mdiHomeFloor0;
-    case 1:
-      return mdiHomeFloor1;
-    case 2:
-      return mdiHomeFloor2;
-    case 3:
-      return mdiHomeFloor3;
-    case -1:
-      return mdiHomeFloorNegative1;
-  }
-  return mdiHome;
-};
-
-@customElement("ha-floor-icon")
-export class HaFloorIcon extends LitElement {
-  @property({ attribute: false }) public floor!: Pick<
-    FloorRegistryEntry,
-    "icon" | "level"
-  >;
-
-  @property() public icon?: string;
-
-  protected render() {
-    if (this.floor.icon) {
-      return html`<ha-icon .icon=${this.floor.icon}></ha-icon>`;
-    }
-    const defaultPath = floorDefaultIconPath(this.floor);
-
-    return html`<ha-svg-icon .path=${defaultPath}></ha-svg-icon>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-floor-icon": HaFloorIcon;
-  }
-}

src/components/ha-floor-picker.ts

@@ -1,19 +1,16 @@
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { LitElement, PropertyValues, TemplateResult, html } from "lit";
+import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import {
-  ScorableTextItem,
   fuzzyFilterSort,
+  ScorableTextItem,
 } from "../common/string/filter/sequence-matching";
-import {
-  AreaRegistryEntry,
-  updateAreaRegistryEntry,
-} from "../data/area_registry";
+import { AreaRegistryEntry } from "../data/area_registry";
 import {
   DeviceEntityDisplayLookup,
   DeviceRegistryEntry,
@@ -21,34 +18,34 @@ import {
 } from "../data/device_registry";
 import { EntityRegistryDisplayEntry } from "../data/entity_registry";
 import {
-  FloorRegistryEntry,
-  createFloorRegistryEntry,
-  getFloorAreaLookup,
-  subscribeFloorRegistry,
-} from "../data/floor_registry";
-import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
-import { SubscribeMixin } from "../mixins/subscribe-mixin";
-import { showFloorRegistryDetailDialog } from "../panels/config/areas/show-dialog-floor-registry-detail";
+  showAlertDialog,
+  showPromptDialog,
+} from "../dialogs/generic/show-dialog-box";
 import { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
-import "./ha-floor-icon";
 import "./ha-icon-button";
 import "./ha-list-item";
+import "./ha-svg-icon";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import {
+  createFloorRegistryEntry,
+  FloorRegistryEntry,
+  getFloorAreaLookup,
+  subscribeFloorRegistry,
+} from "../data/floor_registry";
 
 type ScorableFloorRegistryEntry = ScorableTextItem & FloorRegistryEntry;
 
-const ADD_NEW_ID = "___ADD_NEW___";
-const NO_FLOORS_ID = "___NO_FLOORS___";
-const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
-
 const rowRenderer: ComboBoxLitRenderer<FloorRegistryEntry> = (item) =>
   html`<ha-list-item
     graphic="icon"
-    class=${classMap({ "add-new": item.floor_id === ADD_NEW_ID })}
+    class=${classMap({ "add-new": item.floor_id === "add_new" })}
   >
-    <ha-floor-icon slot="graphic" .floor=${item}></ha-floor-icon>
+    ${item.icon
+      ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
+      : nothing}
     ${item.name}
   </ha-list-item>`;
 
@@ -151,6 +148,18 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
       noAdd: this["noAdd"],
       excludeFloors: this["excludeFloors"]
     ): FloorRegistryEntry[] => {
+      if (!floors.length) {
+        return [
+          {
+            floor_id: "no_floors",
+            name: this.hass.localize("ui.components.floor-picker.no_floors"),
+            icon: null,
+            level: 0,
+            aliases: [],
+          },
+        ];
+      }
+
       let deviceEntityLookup: DeviceEntityDisplayLookup = {};
       let inputDevices: DeviceRegistryEntry[] | undefined;
       let inputEntities: EntityRegistryDisplayEntry[] | undefined;
@@ -275,7 +284,7 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
       if (areaIds) {
         const floorAreaLookup = getFloorAreaLookup(areas);
         outputFloors = outputFloors.filter((floor) =>
-          floorAreaLookup[floor.floor_id]?.some((area) =>
+          floorAreaLookup[floor.floor_id].some((area) =>
             areaIds!.includes(area.area_id)
           )
         );
@@ -290,10 +299,10 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
       if (!outputFloors.length) {
         outputFloors = [
           {
-            floor_id: NO_FLOORS_ID,
-            name: this.hass.localize("ui.components.floor-picker.no_floors"),
+            floor_id: "no_floors",
+            name: this.hass.localize("ui.components.floor-picker.no_match"),
             icon: null,
-            level: null,
+            level: 0,
             aliases: [],
           },
         ];
@@ -304,10 +313,10 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
         : [
             ...outputFloors,
             {
-              floor_id: ADD_NEW_ID,
+              floor_id: "add_new",
               name: this.hass.localize("ui.components.floor-picker.add_new"),
               icon: "mdi:plus",
-              level: null,
+              level: 0,
               aliases: [],
             },
           ];
@@ -334,7 +343,7 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
         this.excludeFloors
       ).map((floor) => ({
         ...floor,
-        strings: [floor.floor_id, floor.name, ...floor.aliases],
+        strings: [floor.floor_id, floor.name], // ...floor.aliases
       }));
       this.comboBox.items = floors;
       this.comboBox.filteredItems = floors;
@@ -378,36 +387,20 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
 
     const filteredItems = fuzzyFilterSort<ScorableFloorRegistryEntry>(
       filterString,
-      target.items?.filter(
-        (item) => ![NO_FLOORS_ID, ADD_NEW_ID].includes(item.label_id)
-      ) || []
+      target.items || []
     );
-    if (filteredItems.length === 0) {
-      if (this.noAdd) {
-        this.comboBox.filteredItems = [
-          {
-            floor_id: NO_FLOORS_ID,
-            name: this.hass.localize("ui.components.floor-picker.no_match"),
-            icon: null,
-            level: null,
-            aliases: [],
-          },
-        ] as FloorRegistryEntry[];
-      } else {
-        this._suggestion = filterString;
-        this.comboBox.filteredItems = [
-          {
-            floor_id: ADD_NEW_SUGGESTION_ID,
-            name: this.hass.localize(
-              "ui.components.floor-picker.add_new_sugestion",
-              { name: this._suggestion }
-            ),
-            icon: "mdi:plus",
-            level: null,
-            aliases: [],
-          },
-        ] as FloorRegistryEntry[];
-      }
+    if (!this.noAdd && filteredItems?.length === 0) {
+      this._suggestion = filterString;
+      this.comboBox.filteredItems = [
+        {
+          floor_id: "add_new_suggestion",
+          name: this.hass.localize(
+            "ui.components.floor-picker.add_new_sugestion",
+            { name: this._suggestion }
+          ),
+          picture: null,
+        },
+      ];
     } else {
       this.comboBox.filteredItems = filteredItems;
     }
@@ -425,13 +418,11 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
     ev.stopPropagation();
     let newValue = ev.detail.value;
 
-    if (newValue === NO_FLOORS_ID) {
+    if (newValue === "no_floors") {
       newValue = "";
-      this.comboBox.setInputValue("");
-      return;
     }
 
-    if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
+    if (!["add_new_suggestion", "add_new"].includes(newValue)) {
       if (newValue !== this._value) {
         this._setValue(newValue);
       }
@@ -439,18 +430,24 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
     }
 
     (ev.target as any).value = this._value;
-
-    this.hass.loadFragmentTranslation("config");
-
-    showFloorRegistryDetailDialog(this, {
-      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
-      createEntry: async (values, addedAreas) => {
+    showPromptDialog(this, {
+      title: this.hass.localize("ui.components.floor-picker.add_dialog.title"),
+      text: this.hass.localize("ui.components.floor-picker.add_dialog.text"),
+      confirmText: this.hass.localize(
+        "ui.components.floor-picker.add_dialog.add"
+      ),
+      inputLabel: this.hass.localize(
+        "ui.components.floor-picker.add_dialog.name"
+      ),
+      defaultValue:
+        newValue === "add_new_suggestion" ? this._suggestion : undefined,
+      confirm: async (name) => {
+        if (!name) {
+          return;
+        }
         try {
-          const floor = await createFloorRegistryEntry(this.hass, values);
-          addedAreas.forEach((areaId) => {
-            updateAreaRegistryEntry(this.hass, areaId, {
-              floor_id: floor.floor_id,
-            });
+          const floor = await createFloorRegistryEntry(this.hass, {
+            name,
           });
           const floors = [...this._floors!, floor];
           this.comboBox.filteredItems = this._getFloors(
@@ -472,16 +469,18 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
         } catch (err: any) {
           showAlertDialog(this, {
             title: this.hass.localize(
-              "ui.components.floor-picker.failed_create_floor"
+              "ui.components.floor-picker.add_dialog.failed_create_floor"
             ),
             text: err.message,
           });
         }
       },
+      cancel: () => {
+        this._setValue(undefined);
+        this._suggestion = undefined;
+        this.comboBox.setInputValue("");
+      },
     });
-
-    this._suggestion = undefined;
-    this.comboBox.setInputValue("");
   }
 
   private _setValue(value?: string) {

src/components/ha-floors-picker.ts

@@ -1,169 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { SubscribeMixin } from "../mixins/subscribe-mixin";
-import type { HomeAssistant } from "../types";
-import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import "./ha-floor-picker";
-
-@customElement("ha-floors-picker")
-export class HaFloorsPicker extends SubscribeMixin(LitElement) {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public label?: string;
-
-  @property({ type: Array }) public value?: string[];
-
-  @property() public helper?: string;
-
-  @property() public placeholder?: string;
-
-  @property({ type: Boolean, attribute: "no-add" })
-  public noAdd = false;
-
-  /**
-   * Show only floors with entities from specific domains.
-   * @type {Array}
-   * @attr include-domains
-   */
-  @property({ type: Array, attribute: "include-domains" })
-  public includeDomains?: string[];
-
-  /**
-   * Show no floors with entities of these domains.
-   * @type {Array}
-   * @attr exclude-domains
-   */
-  @property({ type: Array, attribute: "exclude-domains" })
-  public excludeDomains?: string[];
-
-  /**
-   * Show only floors with entities of these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
-  @property({ attribute: false })
-  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
-  @property({ attribute: false })
-  public entityFilter?: (entity: HassEntity) => boolean;
-
-  @property({ attribute: "picked-floor-label" })
-  public pickedFloorLabel?: string;
-
-  @property({ attribute: "pick-floor-label" })
-  public pickFloorLabel?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  protected render() {
-    if (!this.hass) {
-      return nothing;
-    }
-
-    const currentFloors = this._currentFloors;
-    return html`
-      ${currentFloors.map(
-        (floor) => html`
-          <div>
-            <ha-floor-picker
-              .curValue=${floor}
-              .noAdd=${this.noAdd}
-              .hass=${this.hass}
-              .value=${floor}
-              .label=${this.pickedFloorLabel}
-              .includeDomains=${this.includeDomains}
-              .excludeDomains=${this.excludeDomains}
-              .includeDeviceClasses=${this.includeDeviceClasses}
-              .deviceFilter=${this.deviceFilter}
-              .entityFilter=${this.entityFilter}
-              .disabled=${this.disabled}
-              @value-changed=${this._floorChanged}
-            ></ha-floor-picker>
-          </div>
-        `
-      )}
-      <div>
-        <ha-floor-picker
-          .noAdd=${this.noAdd}
-          .hass=${this.hass}
-          .label=${this.pickFloorLabel}
-          .helper=${this.helper}
-          .includeDomains=${this.includeDomains}
-          .excludeDomains=${this.excludeDomains}
-          .includeDeviceClasses=${this.includeDeviceClasses}
-          .deviceFilter=${this.deviceFilter}
-          .entityFilter=${this.entityFilter}
-          .disabled=${this.disabled}
-          .placeholder=${this.placeholder}
-          .required=${this.required && !currentFloors.length}
-          @value-changed=${this._addFloor}
-          .excludeFloors=${currentFloors}
-        ></ha-floor-picker>
-      </div>
-    `;
-  }
-
-  private get _currentFloors(): string[] {
-    return this.value || [];
-  }
-
-  private async _updateFloors(floors) {
-    this.value = floors;
-
-    fireEvent(this, "value-changed", {
-      value: floors,
-    });
-  }
-
-  private _floorChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const curValue = (ev.currentTarget as any).curValue;
-    const newValue = ev.detail.value;
-    if (newValue === curValue) {
-      return;
-    }
-    const currentFloors = this._currentFloors;
-    if (!newValue || currentFloors.includes(newValue)) {
-      this._updateFloors(currentFloors.filter((ent) => ent !== curValue));
-      return;
-    }
-    this._updateFloors(
-      currentFloors.map((ent) => (ent === curValue ? newValue : ent))
-    );
-  }
-
-  private _addFloor(ev: CustomEvent) {
-    ev.stopPropagation();
-
-    const toAdd = ev.detail.value;
-    if (!toAdd) {
-      return;
-    }
-    (ev.currentTarget as any).value = "";
-    const currentFloors = this._currentFloors;
-    if (currentFloors.includes(toAdd)) {
-      return;
-    }
-
-    this._updateFloors([...currentFloors, toAdd]);
-  }
-
-  static override styles = css`
-    div {
-      margin-top: 8px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-floors-picker": HaFloorsPicker;
-  }
-}

src/components/ha-icon-picker.ts

@@ -118,7 +118,7 @@ export class HaIconPicker extends LitElement {
               <ha-icon .icon=${this._value || this.placeholder} slot="icon">
               </ha-icon>
             `
-          : html`<slot slot="icon" name="fallback"></slot>`}
+          : html`<slot name="fallback"></slot>`}
       </ha-combo-box>
     `;
   }

src/components/ha-label-picker.ts

@@ -385,8 +385,8 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
 
     const filteredItems = fuzzyFilterSort<ScorableLabelItem>(
       filterString,
-      target.items?.filter(
-        (item) => ![NO_LABELS_ID, ADD_NEW_ID].includes(item.label_id)
+      target.items?.filter((item) =>
+        [NO_LABELS_ID, ADD_NEW_ID].includes(item.ignoreFilter)
       ) || []
     );
     if (filteredItems.length === 0) {
@@ -445,8 +445,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
 
     (ev.target as any).value = this._value;
 
-    this.hass.loadFragmentTranslation("config");
-
     showLabelDetailDialog(this, {
       entry: undefined,
       suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",

src/components/ha-label.ts

@@ -43,7 +43,6 @@ class HaLabel extends LitElement {
           border-radius: 18px;
           color: var(--ha-label-text-color);
           --mdc-icon-size: 12px;
-          text-wrap: nowrap;
         }
         .content > * {
           position: relative;

src/components/ha-labels-picker.ts

@@ -2,10 +2,8 @@ import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import { LitElement, TemplateResult, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
 import { computeCssColor } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
-import { stringCompare } from "../common/string/compare";
 import {
   LabelRegistryEntry,
   subscribeLabelRegistry,
@@ -77,7 +75,7 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public required = false;
 
-  @state() private _labels?: { [id: string]: LabelRegistryEntry };
+  @state() private _labels?: LabelRegistryEntry[];
 
   @query("ha-label-picker", true) public labelPicker!: HaLabelPicker;
 
@@ -94,44 +92,28 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
   protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
     return [
       subscribeLabelRegistry(this.hass.connection, (labels) => {
-        const lookUp = {};
-        labels.forEach((label) => {
-          lookUp[label.label_id] = label;
-        });
-        this._labels = lookUp;
+        this._labels = labels;
       }),
     ];
   }
 
-  private _sortedLabels = memoizeOne(
-    (
-      value: string[] | undefined,
-      labels: { [id: string]: LabelRegistryEntry } | undefined,
-      language: string
-    ) =>
-      value
-        ?.map((id) => labels?.[id])
-        .sort((a, b) => stringCompare(a?.name || "", b?.name || "", language))
-  );
-
   protected render(): TemplateResult {
-    const labels = this._sortedLabels(
-      this.value,
-      this._labels,
-      this.hass.locale.language
-    );
     return html`
-      ${labels?.length
+      ${this.value?.length
         ? html`<ha-chip-set>
             ${repeat(
-              labels,
-              (label) => label?.label_id,
-              (label) => {
+              this.value,
+              (item) => item,
+              (item, idx) => {
+                const label = this._labels?.find(
+                  (lbl) => lbl.label_id === item
+                );
                 const color = label?.color
                   ? computeCssColor(label.color)
                   : undefined;
                 return html`
                   <ha-input-chip
+                    .idx=${idx}
                     .item=${label}
                     @remove=${this._removeItem}
                     @click=${this._openDetail}
@@ -172,12 +154,12 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
   }
 
   private _removeItem(ev) {
-    const label = ev.currentTarget.item;
-    this._setValue(this._value.filter((id) => id !== label.label_id));
+    this._value.splice(ev.target.idx, 1);
+    this._setValue([...this._value]);
   }
 
   private _openDetail(ev) {
-    const label = ev.currentTarget.item;
+    const label = ev.target.item;
     showLabelDetailDialog(this, {
       entry: label,
       updateEntry: async (values) => {
@@ -186,6 +168,9 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
           label.label_id,
           values
         );
+        this._labels = this._labels!.map((lbl) =>
+          lbl.label_id === updated.label_id ? updated : lbl
+        );
         return updated;
       },
     });
@@ -214,7 +199,7 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
       margin-bottom: 8px;
     }
     ha-input-chip {
-      --md-input-chip-selected-container-color: var(--color, var(--grey-color));
+      --md-input-chip-selected-container-color: var(--color);
       --ha-input-chip-selected-container-opacity: 0.5;
     }
   `;

src/components/ha-menu-item.ts

@@ -1,44 +0,0 @@
-import { MdMenuItem } from "@material/web/menu/menu-item";
-import "element-internals-polyfill";
-import { CSSResult, css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-menu-item")
-export class HaMenuItem extends MdMenuItem {
-  static override styles: CSSResult[] = [
-    ...MdMenuItem.styles,
-    css`
-      :host {
-        --ha-icon-display: block;
-        --md-sys-color-primary: var(--primary-text-color);
-        --md-sys-color-on-primary: var(--primary-text-color);
-        --md-sys-color-secondary: var(--secondary-text-color);
-        --md-sys-color-surface: var(--card-background-color);
-        --md-sys-color-on-surface: var(--primary-text-color);
-        --md-sys-color-on-surface-variant: var(--secondary-text-color);
-        --md-sys-color-secondary-container: rgba(
-          var(--rgb-primary-color),
-          0.15
-        );
-        --md-sys-color-on-secondary-container: var(--text-primary-color);
-        --mdc-icon-size: 16px;
-
-        --md-sys-color-on-primary-container: var(--primary-text-color);
-        --md-sys-color-on-secondary-container: var(--primary-text-color);
-      }
-      :host(.warning) {
-        --md-menu-item-label-text-color: var(--error-color);
-        --md-menu-item-leading-icon-color: var(--error-color);
-      }
-      ::slotted([slot="headline"]) {
-        text-wrap: nowrap;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-menu-item": HaMenuItem;
-  }
-}

src/components/ha-menu.ts

@@ -1,22 +0,0 @@
-import { customElement } from "lit/decorators";
-import "element-internals-polyfill";
-import { CSSResult, css } from "lit";
-import { MdMenu } from "@material/web/menu/menu";
-
-@customElement("ha-menu")
-export class HaMenu extends MdMenu {
-  static override styles: CSSResult[] = [
-    ...MdMenu.styles,
-    css`
-      :host {
-        --md-sys-color-surface-container: var(--card-background-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-menu": HaMenu;
-  }
-}

src/components/ha-outlined-text-field.ts

@@ -1,49 +0,0 @@
-import { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field";
-import "element-internals-polyfill";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-outlined-text-field")
-export class HaOutlinedTextField extends MdOutlinedTextField {
-  static override styles = [
-    ...super.styles,
-    css`
-      :host {
-        --md-sys-color-on-surface: var(--primary-text-color);
-        --md-sys-color-primary: var(--primary-text-color);
-        --md-outlined-text-field-input-text-color: var(--primary-text-color);
-        --md-sys-color-on-surface-variant: var(--secondary-text-color);
-        --md-outlined-field-outline-color: var(--outline-color);
-        --md-outlined-field-focus-outline-color: var(--primary-color);
-        --md-outlined-field-hover-outline-color: var(--outline-hover-color);
-      }
-      :host([dense]) {
-        --md-outlined-field-top-space: 5.5px;
-        --md-outlined-field-bottom-space: 5.5px;
-        --md-outlined-field-container-shape-start-start: 10px;
-        --md-outlined-field-container-shape-start-end: 10px;
-        --md-outlined-field-container-shape-end-end: 10px;
-        --md-outlined-field-container-shape-end-start: 10px;
-        --md-outlined-field-focus-outline-width: 1px;
-        --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
-      }
-      md-outlined-field {
-        background: var(--ha-outlined-text-field-container-color, transparent);
-        opacity: var(--ha-outlined-text-field-container-opacity, 1);
-        border-start-start-radius: var(--_container-shape-start-start);
-        border-start-end-radius: var(--_container-shape-start-end);
-        border-end-end-radius: var(--_container-shape-end-end);
-        border-end-start-radius: var(--_container-shape-end-start);
-      }
-      .input {
-        font-family: Roboto, sans-serif;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-outlined-text-field": HaOutlinedTextField;
-  }
-}

src/components/ha-selector/ha-selector-area.ts

@@ -87,12 +87,8 @@ export class HaAreaSelector extends LitElement {
           .label=${this.label}
           .helper=${this.helper}
           no-add
-          .deviceFilter=${this.selector.area?.device
-            ? this._filterDevices
-            : undefined}
-          .entityFilter=${this.selector.area?.entity
-            ? this._filterEntities
-            : undefined}
+          .deviceFilter=${this._filterDevices}
+          .entityFilter=${this._filterEntities}
           .disabled=${this.disabled}
           .required=${this.required}
         ></ha-area-picker>
@@ -106,12 +102,8 @@ export class HaAreaSelector extends LitElement {
         .helper=${this.helper}
         .pickAreaLabel=${this.label}
         no-add
-        .deviceFilter=${this.selector.area?.device
-          ? this._filterDevices
-          : undefined}
-        .entityFilter=${this.selector.area?.entity
-          ? this._filterEntities
-          : undefined}
+        .deviceFilter=${this._filterDevices}
+        .entityFilter=${this._filterEntities}
         .disabled=${this.disabled}
         .required=${this.required}
       ></ha-areas-picker>

src/components/ha-selector/ha-selector-floor.ts

@@ -1,153 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { ensureArray } from "../../common/array/ensure-array";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import { getDeviceIntegrationLookup } from "../../data/device_registry";
-import { fireEvent } from "../../common/dom/fire_event";
-import {
-  EntitySources,
-  fetchEntitySourcesWithCache,
-} from "../../data/entity_sources";
-import type { FloorSelector } from "../../data/selector";
-import {
-  filterSelectorDevices,
-  filterSelectorEntities,
-} from "../../data/selector";
-import { HomeAssistant } from "../../types";
-import "../ha-floor-picker";
-import "../ha-floors-picker";
-
-@customElement("ha-selector-floor")
-export class HaFloorSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public selector!: FloorSelector;
-
-  @property() public value?: any;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  @state() private _entitySources?: EntitySources;
-
-  private _deviceIntegrationLookup = memoizeOne(getDeviceIntegrationLookup);
-
-  private _hasIntegration(selector: FloorSelector) {
-    return (
-      (selector.floor?.entity &&
-        ensureArray(selector.floor.entity).some(
-          (filter) => filter.integration
-        )) ||
-      (selector.floor?.device &&
-        ensureArray(selector.floor.device).some((device) => device.integration))
-    );
-  }
-
-  protected willUpdate(changedProperties: PropertyValues): void {
-    if (changedProperties.has("selector") && this.value !== undefined) {
-      if (this.selector.floor?.multiple && !Array.isArray(this.value)) {
-        this.value = [this.value];
-        fireEvent(this, "value-changed", { value: this.value });
-      } else if (!this.selector.floor?.multiple && Array.isArray(this.value)) {
-        this.value = this.value[0];
-        fireEvent(this, "value-changed", { value: this.value });
-      }
-    }
-  }
-
-  protected updated(changedProperties: PropertyValues): void {
-    if (
-      changedProperties.has("selector") &&
-      this._hasIntegration(this.selector) &&
-      !this._entitySources
-    ) {
-      fetchEntitySourcesWithCache(this.hass).then((sources) => {
-        this._entitySources = sources;
-      });
-    }
-  }
-
-  protected render() {
-    if (this._hasIntegration(this.selector) && !this._entitySources) {
-      return nothing;
-    }
-
-    if (!this.selector.floor?.multiple) {
-      return html`
-        <ha-floor-picker
-          .hass=${this.hass}
-          .value=${this.value}
-          .label=${this.label}
-          .helper=${this.helper}
-          no-add
-          .deviceFilter=${this.selector.floor?.device
-            ? this._filterDevices
-            : undefined}
-          .entityFilter=${this.selector.floor?.entity
-            ? this._filterEntities
-            : undefined}
-          .disabled=${this.disabled}
-          .required=${this.required}
-        ></ha-floor-picker>
-      `;
-    }
-
-    return html`
-      <ha-floors-picker
-        .hass=${this.hass}
-        .value=${this.value}
-        .helper=${this.helper}
-        .pickFloorLabel=${this.label}
-        no-add
-        .deviceFilter=${this.selector.floor?.device
-          ? this._filterDevices
-          : undefined}
-        .entityFilter=${this.selector.floor?.entity
-          ? this._filterEntities
-          : undefined}
-        .disabled=${this.disabled}
-        .required=${this.required}
-      ></ha-floors-picker>
-    `;
-  }
-
-  private _filterEntities = (entity: HassEntity): boolean => {
-    if (!this.selector.floor?.entity) {
-      return true;
-    }
-
-    return ensureArray(this.selector.floor.entity).some((filter) =>
-      filterSelectorEntities(filter, entity, this._entitySources)
-    );
-  };
-
-  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
-    if (!this.selector.floor?.device) {
-      return true;
-    }
-
-    const deviceIntegrations = this._entitySources
-      ? this._deviceIntegrationLookup(
-          this._entitySources,
-          Object.values(this.hass.entities)
-        )
-      : undefined;
-
-    return ensureArray(this.selector.floor.device).some((filter) =>
-      filterSelectorDevices(filter, device, deviceIntegrations)
-    );
-  };
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-floor": HaFloorSelector;
-  }
-}

src/components/ha-selector/ha-selector-label.ts

@@ -30,7 +30,6 @@ export class HaLabelSelector extends LitElement {
     if (this.selector.label.multiple) {
       return html`
         <ha-labels-picker
-          no-add
           .hass=${this.hass}
           .value=${ensureArray(this.value ?? [])}
           .disabled=${this.disabled}
@@ -42,7 +41,6 @@ export class HaLabelSelector extends LitElement {
     }
     return html`
       <ha-label-picker
-        no-add
         .hass=${this.hass}
         .value=${this.value}
         .disabled=${this.disabled}

src/components/ha-selector/ha-selector.ts

@@ -30,7 +30,6 @@ const LOAD_ELEMENTS = {
   entity: () => import("./ha-selector-entity"),
   statistic: () => import("./ha-selector-statistic"),
   file: () => import("./ha-selector-file"),
-  floor: () => import("./ha-selector-floor"),
   label: () => import("./ha-selector-label"),
   language: () => import("./ha-selector-language"),
   navigation: () => import("./ha-selector-navigation"),

src/components/ha-sub-menu.ts

@@ -1,38 +0,0 @@
-import { customElement } from "lit/decorators";
-import "element-internals-polyfill";
-import { CSSResult, css } from "lit";
-import { MdSubMenu } from "@material/web/menu/sub-menu";
-
-@customElement("ha-sub-menu")
-// @ts-expect-error
-export class HaSubMenu extends MdSubMenu {
-  static override styles: CSSResult[] = [
-    MdSubMenu.styles,
-    css`
-      :host {
-        --ha-icon-display: block;
-        --md-sys-color-primary: var(--primary-text-color);
-        --md-sys-color-on-primary: var(--primary-text-color);
-        --md-sys-color-secondary: var(--secondary-text-color);
-        --md-sys-color-surface: var(--card-background-color);
-        --md-sys-color-on-surface: var(--primary-text-color);
-        --md-sys-color-on-surface-variant: var(--secondary-text-color);
-        --md-sys-color-secondary-container: rgba(
-          var(--rgb-primary-color),
-          0.15
-        );
-        --md-sys-color-on-secondary-container: var(--text-primary-color);
-        --mdc-icon-size: 16px;
-
-        --md-sys-color-on-primary-container: var(--primary-text-color);
-        --md-sys-color-on-secondary-container: var(--primary-text-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-sub-menu": HaSubMenu;
-  }
-}

src/components/ha-target-picker.ts

@@ -6,10 +6,10 @@ import "@material/mwc-menu/mwc-menu-surface";
 import {
   mdiClose,
   mdiDevices,
-  mdiHome,
+  mdiFloorPlan,
   mdiLabel,
   mdiPlus,
-  mdiTextureBox,
+  mdiSofa,
   mdiUnfoldMoreVertical,
 } from "@mdi/js";
 import { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
@@ -18,23 +18,30 @@ import {
   HassServiceTarget,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import { CSSResultGroup, LitElement, css, html, nothing, unsafeCSS } from "lit";
+import { css, CSSResultGroup, html, LitElement, nothing, unsafeCSS } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ensureArray } from "../common/array/ensure-array";
-import { computeCssColor } from "../common/color/compute-color";
-import { hex2rgb } from "../common/color/convert-color";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { isValidEntityId } from "../common/entity/valid_entity_id";
-import { AreaRegistryEntry } from "../data/area_registry";
 import {
-  DeviceRegistryEntry,
   computeDeviceName,
+  DeviceRegistryEntry,
 } from "../data/device_registry";
 import { EntityRegistryDisplayEntry } from "../data/entity_registry";
+import { HomeAssistant } from "../types";
+import "./device/ha-device-picker";
+import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
+import "./entity/ha-entity-picker";
+import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
+import "./ha-area-floor-picker";
+import "./ha-icon-button";
+import "./ha-input-helper-text";
+import "./ha-svg-icon";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import {
   FloorRegistryEntry,
   subscribeFloorRegistry,
@@ -43,17 +50,9 @@ import {
   LabelRegistryEntry,
   subscribeLabelRegistry,
 } from "../data/label_registry";
-import { SubscribeMixin } from "../mixins/subscribe-mixin";
-import { HomeAssistant } from "../types";
-import "./device/ha-device-picker";
-import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import "./entity/ha-entity-picker";
-import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
-import "./ha-area-floor-picker";
-import { floorDefaultIconPath } from "./ha-floor-icon";
-import "./ha-icon-button";
-import "./ha-input-helper-text";
-import "./ha-svg-icon";
+import { computeCssColor } from "../common/color/compute-color";
+import { AreaRegistryEntry } from "../data/area_registry";
+import { hex2rgb } from "../common/color/convert-color";
 
 @customElement("ha-target-picker")
 export class HaTargetPicker extends SubscribeMixin(LitElement) {
@@ -139,7 +138,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 floor?.name || floor_id,
                 undefined,
                 floor?.icon,
-                floor ? floorDefaultIconPath(floor) : mdiHome
+                mdiFloorPlan
               );
             })
           : ""}
@@ -152,7 +151,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 area?.name || area_id,
                 undefined,
                 area?.icon,
-                mdiTextureBox
+                mdiSofa
               );
             })
           : nothing}

src/components/ha-tree-indicator.ts

@@ -1,36 +0,0 @@
-import { LitElement, TemplateResult, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
-
-@customElement("ha-tree-indicator")
-export class HaTreeIndicator extends LitElement {
-  @property({ type: Boolean, reflect: true })
-  public end?: boolean = false;
-
-  protected render(): TemplateResult {
-    return html`
-      <svg width="100%" height="100%" viewBox="0 0 48 48">
-        <line x1="24" y1="0" x2="24" y2=${this.end ? "24" : "48"}></line>
-        <line x1="24" y1="24" x2="36" y2="24"></line>
-      </svg>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      width: 48px;
-      height: 48px;
-    }
-    line {
-      stroke: var(--divider-color);
-      stroke-width: 2;
-      stroke-dasharray: 2;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-tree-indicator": HaTreeIndicator;
-  }
-}

src/components/search-input-outlined.ts

@@ -1,18 +1,11 @@
-import { mdiClose, mdiMagnify } from "@mdi/js";
-import {
-  CSSResultGroup,
-  LitElement,
-  TemplateResult,
-  css,
-  html,
-  nothing,
-} from "lit";
+import "@material/web/textfield/outlined-text-field";
+import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field";
+import { mdiMagnify } from "@mdi/js";
+import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
-import "./ha-outlined-text-field";
-import type { HaOutlinedTextField } from "./ha-outlined-text-field";
 import "./ha-svg-icon";
 
 @customElement("search-input-outlined")
@@ -37,22 +30,19 @@ class SearchInputOutlined extends LitElement {
     this._input?.focus();
   }
 
-  @query("ha-outlined-text-field", true) private _input!: HaOutlinedTextField;
+  @query("md-outlined-text-field", true) private _input!: MdOutlinedTextField;
 
   protected render(): TemplateResult {
-    const placeholder =
-      this.placeholder || this.hass.localize("ui.common.search");
-
     return html`
-      <ha-outlined-text-field
+      <md-outlined-text-field
         .autofocus=${this.autofocus}
         .aria-label=${this.label || this.hass.localize("ui.common.search")}
-        .placeholder=${placeholder}
+        .placeholder=${this.placeholder ||
+        this.hass.localize("ui.common.search")}
         .value=${this.filter || ""}
         icon
         .iconTrailing=${this.filter || this.suffix}
         @input=${this._filterInputChanged}
-        dense
       >
         <slot name="prefix" slot="leading-icon">
           <ha-svg-icon
@@ -61,16 +51,7 @@ class SearchInputOutlined extends LitElement {
             .path=${mdiMagnify}
           ></ha-svg-icon>
         </slot>
-        ${this.filter
-          ? html`<ha-icon-button
-              aria-label="Clear input"
-              slot="trailing-icon"
-              @click=${this._clearSearch}
-              .path=${mdiClose}
-            >
-            </ha-icon-button>`
-          : nothing}
-      </ha-outlined-text-field>
+      </md-outlined-text-field>
     `;
   }
 
@@ -82,31 +63,44 @@ class SearchInputOutlined extends LitElement {
     this._filterChanged(e.target.value);
   }
 
-  private async _clearSearch() {
-    this._filterChanged("");
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-flex;
-        /* For iOS */
-        z-index: 0;
-        --mdc-icon-button-size: 24px;
       }
-      ha-outlined-text-field {
+      md-outlined-text-field {
         display: block;
         width: 100%;
-        --ha-outlined-text-field-container-color: var(--card-background-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-sys-color-primary: var(--primary-text-color);
+        --md-outlined-text-field-input-text-color: var(--primary-text-color);
+        --md-sys-color-on-surface-variant: var(--secondary-text-color);
+        --md-outlined-field-top-space: 5.5px;
+        --md-outlined-field-bottom-space: 5.5px;
+        --md-outlined-field-outline-color: var(--outline-color);
+        --md-outlined-field-container-shape-start-start: 10px;
+        --md-outlined-field-container-shape-start-end: 10px;
+        --md-outlined-field-container-shape-end-end: 10px;
+        --md-outlined-field-container-shape-end-start: 10px;
+        --md-outlined-field-focus-outline-width: 1px;
+        --md-outlined-field-focus-outline-color: var(--primary-color);
       }
       ha-svg-icon,
       ha-icon-button {
         display: flex;
+        --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
         color: var(--primary-text-color);
       }
       ha-svg-icon {
         outline: none;
       }
+      .clear-button {
+        --mdc-icon-size: 20px;
+      }
+      .trailing {
+        display: flex;
+        align-items: center;
+      }
     `;
   }
 }

src/data/entity_registry.ts

@@ -10,7 +10,7 @@ import { computeDomain } from "../common/entity/compute_domain";
 
 export { subscribeEntityRegistryDisplay } from "./ws-entity_registry_display";
 
-type EntityCategory = "config" | "diagnostic";
+type entityCategory = "config" | "diagnostic";
 
 export interface EntityRegistryDisplayEntry {
   entity_id: string;
@@ -20,7 +20,7 @@ export interface EntityRegistryDisplayEntry {
   area_id?: string;
   labels: string[];
   hidden?: boolean;
-  entity_category?: EntityCategory;
+  entity_category?: entityCategory;
   translation_key?: string;
   platform?: string;
   display_precision?: number;
@@ -40,7 +40,7 @@ export interface EntityRegistryDisplayEntryResponse {
     hb?: boolean;
     dp?: number;
   }[];
-  entity_categories: Record<number, EntityCategory>;
+  entity_categories: Record<number, entityCategory>;
 }
 
 export interface EntityRegistryEntry {
@@ -55,7 +55,7 @@ export interface EntityRegistryEntry {
   labels: string[];
   disabled_by: "user" | "device" | "integration" | "config_entry" | null;
   hidden_by: Exclude<EntityRegistryEntry["disabled_by"], "config_entry">;
-  entity_category: EntityCategory | null;
+  entity_category: entityCategory | null;
   has_entity_name: boolean;
   original_name?: string;
   unique_id: string;

src/data/floor_registry.ts

@@ -1,16 +1,16 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
 import { Store } from "home-assistant-js-websocket/dist/store";
 import { stringCompare } from "../common/string/compare";
-import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
 import { AreaRegistryEntry } from "./area_registry";
+import { debounce } from "../common/util/debounce";
 
 export { subscribeAreaRegistry } from "./ws-area_registry";
 
 export interface FloorRegistryEntry {
   floor_id: string;
   name: string;
-  level: number | null;
+  level: number;
   icon: string | null;
   aliases: string[];
 }

src/data/search.ts

@@ -28,7 +28,6 @@ export type ItemType =
   | "entity"
   | "floor"
   | "group"
-  | "label"
   | "scene"
   | "script"
   | "automation_blueprint"

src/data/selector.ts

@@ -31,7 +31,6 @@ export type Selector =
   | DateSelector
   | DateTimeSelector
   | DeviceSelector
-  | FloorSelector
   | LegacyDeviceSelector
   | DurationSelector
   | EntitySelector
@@ -171,14 +170,6 @@ export interface DeviceSelector {
   } | null;
 }
 
-export interface FloorSelector {
-  floor: {
-    entity?: EntitySelectorFilter | readonly EntitySelectorFilter[];
-    device?: DeviceSelectorFilter | readonly DeviceSelectorFilter[];
-    multiple?: boolean;
-  } | null;
-}
-
 export interface LegacyDeviceSelector {
   device: DeviceSelector["device"] & {
     /**

src/dialogs/more-info/components/lights/light-color-temp-picker.ts

@@ -190,7 +190,7 @@ class LightColorTempPicker extends LitElement {
           max-height: 320px;
           min-height: 200px;
           --control-slider-thickness: 130px;
-          --control-slider-border-radius: 36px;
+          --control-slider-border-radius: 48px;
           --control-slider-color: var(--primary-color);
           --control-slider-background: -webkit-linear-gradient(
             top,

src/dialogs/more-info/controls/more-info-alarm_control_panel.ts

@@ -1,8 +1,9 @@
+import { mdiShieldOff } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { stateColorCss } from "../../../common/entity/state_color";
-import "../../../components/ha-control-button";
+import "../../../components/ha-outlined-button";
 import "../../../components/ha-state-icon";
 import { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
 import "../../../state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes";
@@ -56,10 +57,15 @@ class MoreInfoAlarmControlPanel extends LitElement {
         ${["triggered", "arming", "pending"].includes(this.stateObj.state)
           ? html`
               <div class="status">
+                <span></span>
                 <div class="icon">
                   <ha-state-icon .hass=${this.hass} .stateObj=${this.stateObj}>
                   </ha-state-icon>
                 </div>
+                <ha-outlined-button @click=${this._disarm}>
+                  ${this.hass.localize("ui.card.alarm_control_panel.disarm")}
+                  <ha-svg-icon slot="icon" .path=${mdiShieldOff}></ha-svg-icon>
+                </ha-outlined-button>
               </div>
             `
           : html`
@@ -70,15 +76,7 @@ class MoreInfoAlarmControlPanel extends LitElement {
               </ha-state-control-alarm_control_panel-modes>
             `}
       </div>
-      <div>
-        ${["triggered", "arming", "pending"].includes(this.stateObj.state)
-          ? html`
-              <ha-control-button @click=${this._disarm} class="disarm">
-                ${this.hass.localize("ui.card.alarm_control_panel.disarm")}
-              </ha-control-button>
-            `
-          : nothing}
-      </div>
+      <span></span>
     `;
   }
 
@@ -129,12 +127,8 @@ class MoreInfoAlarmControlPanel extends LitElement {
           transition: background-color 180ms ease-in-out;
           opacity: 0.2;
         }
-        ha-control-button.disarm {
-          height: 60px;
-          min-width: 130px;
-          max-width: 200px;
-          margin: 0 auto;
-          --control-button-border-radius: 24px;
+        .status ha-outlined-button {
+          margin-top: 32px;
         }
       `,
     ];

src/dialogs/more-info/controls/more-info-lock.ts

@@ -170,7 +170,7 @@ class MoreInfoLock extends LitElement {
           --control-button-border-radius: 24px;
         }
         .open-button {
-          width: 130px;
+          width: 100px;
           --control-button-background-color: var(--state-color);
         }
         .open-button.confirm {

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -77,8 +77,6 @@ declare global {
   }
 }
 
-const DEFAULT_VIEW: View = "info";
-
 @customElement("ha-more-info-dialog")
 export class MoreInfoDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -87,9 +85,7 @@ export class MoreInfoDialog extends LitElement {
 
   @state() private _entityId?: string | null;
 
-  @state() private _currView: View = DEFAULT_VIEW;
-
-  @state() private _initialView: View = DEFAULT_VIEW;
+  @state() private _currView: View = "info";
 
   @state() private _childView?: ChildView;
 
@@ -106,8 +102,7 @@ export class MoreInfoDialog extends LitElement {
       this.closeDialog();
       return;
     }
-    this._currView = params.view || DEFAULT_VIEW;
-    this._initialView = params.view || DEFAULT_VIEW;
+    this._currView = params.view || "info";
     this._childView = undefined;
     this.large = false;
     this._loadEntityRegistryEntry();
@@ -132,7 +127,6 @@ export class MoreInfoDialog extends LitElement {
     this._entry = undefined;
     this._childView = undefined;
     this._infoEditMode = false;
-    this._initialView = DEFAULT_VIEW;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -189,15 +183,10 @@ export class MoreInfoDialog extends LitElement {
     if (this._childView) {
       this._childView = undefined;
     } else {
-      this.setView(this._initialView);
+      this.setView("info");
     }
   }
 
-  private _resetInitialView() {
-    this._initialView = DEFAULT_VIEW;
-    this.setView(DEFAULT_VIEW);
-  }
-
   private _goToHistory() {
     this.setView("history");
   }
@@ -273,10 +262,7 @@ export class MoreInfoDialog extends LitElement {
 
     const title = this._childView?.viewTitle ?? name;
 
-    const isDefaultView = this._currView === DEFAULT_VIEW && !this._childView;
-    const isSpecificInitialView =
-      this._initialView !== DEFAULT_VIEW && !this._childView;
-    const showCloseIcon = isDefaultView || isSpecificInitialView;
+    const isInfoView = this._currView === "info" && !this._childView;
 
     return html`
       <ha-dialog
@@ -288,7 +274,7 @@ export class MoreInfoDialog extends LitElement {
         flexContent
       >
         <ha-dialog-header slot="heading">
-          ${showCloseIcon
+          ${isInfoView
             ? html`
                 <ha-icon-button
                   slot="navigationIcon"
@@ -311,7 +297,7 @@ export class MoreInfoDialog extends LitElement {
           <span slot="title" .title=${title} @click=${this._enlarge}>
             ${title}
           </span>
-          ${isDefaultView
+          ${isInfoView
             ? html`
                 ${this.shouldShowHistory(domain)
                   ? html`
@@ -421,34 +407,7 @@ export class MoreInfoDialog extends LitElement {
                     `
                   : nothing}
               `
-            : isSpecificInitialView
-              ? html`
-                  <ha-button-menu
-                    corner="BOTTOM_END"
-                    menuCorner="END"
-                    slot="actionItems"
-                    @closed=${stopPropagation}
-                    fixed
-                  >
-                    <ha-icon-button
-                      slot="trigger"
-                      .label=${this.hass.localize("ui.common.menu")}
-                      .path=${mdiDotsVertical}
-                    ></ha-icon-button>
-
-                    <ha-list-item
-                      graphic="icon"
-                      @request-selected=${this._resetInitialView}
-                    >
-                      ${this.hass.localize("ui.dialogs.more_info_control.info")}
-                      <ha-svg-icon
-                        slot="graphic"
-                        .path=${mdiInformationOutline}
-                      ></ha-svg-icon>
-                    </ha-list-item>
-                  </ha-button-menu>
-                `
-              : nothing}
+            : nothing}
         </ha-dialog-header>
         <div
           class="content"

src/layouts/hass-subpage.ts

@@ -142,12 +142,9 @@ class HassSubpage extends LitElement {
           right: calc(16px + env(safe-area-inset-right));
           inset-inline-end: calc(16px + env(safe-area-inset-right));
           inset-inline-start: initial;
+
           bottom: calc(16px + env(safe-area-inset-bottom));
           z-index: 1;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-end;
-          gap: 8px;
         }
         :host([narrow]) #fab.tabs {
           bottom: calc(84px + env(safe-area-inset-bottom));

src/layouts/hass-tabs-subpage-data-table.ts

@@ -1,13 +1,12 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import "@material/mwc-button/mwc-button";
-import "@material/web/divider/divider";
 import {
   mdiArrowDown,
   mdiArrowUp,
   mdiClose,
+  mdiFilterRemove,
   mdiFilterVariant,
-  mdiFilterVariantRemove,
   mdiFormatListChecks,
   mdiMenuDown,
 } from "@mdi/js";
@@ -20,7 +19,6 @@ import {
   nothing,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { LocalizeFunc } from "../common/translations/localize";
 import "../components/chips/ha-assist-chip";
@@ -32,10 +30,7 @@ import type {
   HaDataTable,
   SortingDirection,
 } from "../components/data-table/ha-data-table";
-import "../components/ha-button-menu-new";
 import "../components/ha-dialog";
-import { HaMenu } from "../components/ha-menu";
-import "../components/ha-menu-item";
 import "../components/search-input-outlined";
 import type { HomeAssistant, Route } from "../types";
 import "./hass-tabs-subpage";
@@ -178,10 +173,6 @@ export class HaTabsSubpageDataTable extends LitElement {
 
   @query("ha-data-table", true) private _dataTable!: HaDataTable;
 
-  @query("#group-by-menu") private _groupByMenu!: HaMenu;
-
-  @query("#sort-by-menu") private _sortByMenu!: HaMenu;
-
   private _showPaneController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect.width > 750,
   });
@@ -196,14 +187,6 @@ export class HaTabsSubpageDataTable extends LitElement {
     }
   }
 
-  private _toggleGroupBy() {
-    this._groupByMenu.open = !this._groupByMenu.open;
-  }
-
-  private _toggleSortBy() {
-    this._sortByMenu.open = !this._sortByMenu.open;
-  }
-
   protected render(): TemplateResult {
     const localize = this.localizeFunc || this.hass.localize;
     const showPane = this._showPaneController.value ?? !this.narrow;
@@ -228,9 +211,6 @@ export class HaTabsSubpageDataTable extends LitElement {
             class="has-dropdown select-mode-chip"
             .active=${this._selectMode}
             @click=${this._enableSelectMode}
-            .title=${localize(
-              "ui.components.subpage-data-table.enter_selection_mode"
-            )}
           >
             <ha-svg-icon slot="icon" .path=${mdiFormatListChecks}></ha-svg-icon>
           </ha-assist-chip>`
@@ -246,38 +226,73 @@ export class HaTabsSubpageDataTable extends LitElement {
     </search-input-outlined>`;
 
     const sortByMenu = Object.values(this.columns).find((col) => col.sortable)
-      ? html`
+      ? html`<ha-button-menu fixed>
           <ha-assist-chip
             .label=${localize("ui.components.subpage-data-table.sort_by", {
               sortColumn: this._sortColumn
                 ? ` ${this.columns[this._sortColumn].title || this.columns[this._sortColumn].label}`
                 : "",
             })}
-            id="sort-by-anchor"
-            @click=${this._toggleSortBy}
+            slot="trigger"
           >
-            <ha-svg-icon
-              slot="trailing-icon"
-              .path=${mdiMenuDown}
-            ></ha-svg-icon>
-          </ha-assist-chip>
-        `
+            <ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon
+          ></ha-assist-chip>
+          ${Object.entries(this.columns).map(([id, column]) =>
+            column.sortable
+              ? html`<ha-list-item
+                  .value=${id}
+                  @request-selected=${this._handleSortBy}
+                  hasMeta
+                  .activated=${id === this._sortColumn}
+                >
+                  ${this._sortColumn === id
+                    ? html`<ha-svg-icon
+                        slot="meta"
+                        .path=${this._sortDirection === "desc"
+                          ? mdiArrowDown
+                          : mdiArrowUp}
+                      ></ha-svg-icon>`
+                    : nothing}
+                  ${column.title || column.label}
+                </ha-list-item>`
+              : nothing
+          )}
+        </ha-button-menu>`
       : nothing;
 
     const groupByMenu = Object.values(this.columns).find((col) => col.groupable)
-      ? html`
+      ? html`<ha-button-menu fixed>
           <ha-assist-chip
             .label=${localize("ui.components.subpage-data-table.group_by", {
               groupColumn: this._groupColumn
                 ? ` ${this.columns[this._groupColumn].title || this.columns[this._groupColumn].label}`
                 : "",
             })}
-            id="group-by-anchor"
-            @click=${this._toggleGroupBy}
+            slot="trigger"
           >
             <ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon
           ></ha-assist-chip>
-        `
+          ${Object.entries(this.columns).map(([id, column]) =>
+            column.groupable
+              ? html`<ha-list-item
+                  .value=${id}
+                  @request-selected=${this._handleGroupBy}
+                  .activated=${id === this._groupColumn}
+                >
+                  ${column.title || column.label}
+                </ha-list-item> `
+              : nothing
+          )}
+          <li divider role="separator"></li>
+          <ha-list-item
+            .value=${undefined}
+            @request-selected=${this._handleGroupBy}
+            .activated=${this._groupColumn === undefined}
+            >${localize(
+              "ui.components.subpage-data-table.dont_group_by"
+            )}</ha-list-item
+          >
+        </ha-button-menu>`
       : nothing;
 
     return html`
@@ -297,54 +312,11 @@ export class HaTabsSubpageDataTable extends LitElement {
       >
         ${this._selectMode
           ? html`<div class="selection-bar" slot="toolbar">
-              <div class="selection-controls">
+              <div class="center-vertical">
                 <ha-icon-button
                   .path=${mdiClose}
                   @click=${this._disableSelectMode}
-                  .label=${localize(
-                    "ui.components.subpage-data-table.exit_selection_mode"
-                  )}
                 ></ha-icon-button>
-                <ha-button-menu-new positioning="absolute">
-                  <ha-assist-chip
-                    .label=${localize(
-                      "ui.components.subpage-data-table.select"
-                    )}
-                    slot="trigger"
-                  >
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${mdiFormatListChecks}
-                    ></ha-svg-icon>
-                    <ha-svg-icon
-                      slot="trailing-icon"
-                      .path=${mdiMenuDown}
-                    ></ha-svg-icon
-                  ></ha-assist-chip>
-                  <ha-menu-item .value=${undefined} @click=${this._selectAll}>
-                    <div slot="headline">
-                      ${localize("ui.components.subpage-data-table.select_all")}
-                    </div>
-                  </ha-menu-item>
-                  <ha-menu-item .value=${undefined} @click=${this._selectNone}>
-                    <div slot="headline">
-                      ${localize(
-                        "ui.components.subpage-data-table.select_none"
-                      )}
-                    </div>
-                  </ha-menu-item>
-                  <md-divider role="separator" tabindex="-1"></md-divider>
-                  <ha-menu-item
-                    .value=${undefined}
-                    @click=${this._disableSelectMode}
-                  >
-                    <div slot="headline">
-                      ${localize(
-                        "ui.components.subpage-data-table.close_select_mode"
-                      )}
-                    </div>
-                  </ha-menu-item>
-                </ha-button-menu-new>
                 <p>
                   ${localize("ui.components.subpage-data-table.selected", {
                     selected: this.selected || "0",
@@ -358,7 +330,30 @@ export class HaTabsSubpageDataTable extends LitElement {
           : nothing}
         ${this.showFilters
           ? !showPane
-            ? nothing
+            ? html`<ha-dialog
+                open
+                hideActions
+                .heading=${localize("ui.components.subpage-data-table.filters")}
+              >
+                <ha-dialog-header slot="heading">
+                  <ha-icon-button
+                    slot="navigationIcon"
+                    .path=${mdiClose}
+                    @click=${this._toggleFilters}
+                  ></ha-icon-button>
+                  <span slot="title"
+                    >${localize(
+                      "ui.components.subpage-data-table.filters"
+                    )}</span
+                  >
+                  <ha-icon-button
+                    slot="actionItems"
+                    .path=${mdiFilterRemove}
+                  ></ha-icon-button>
+                </ha-dialog-header>
+                <div class="filter-dialog-content">
+                  <slot name="filter-pane"></slot></div
+              ></ha-dialog>`
             : html`<div class="pane" slot="pane">
                 <div class="table-header">
                   <ha-assist-chip
@@ -373,15 +368,10 @@ export class HaTabsSubpageDataTable extends LitElement {
                       .path=${mdiFilterVariant}
                     ></ha-svg-icon>
                   </ha-assist-chip>
-                  ${this.filters
-                    ? html`<ha-icon-button
-                        .path=${mdiFilterVariantRemove}
-                        @click=${this._clearFilters}
-                        .label=${localize(
-                          "ui.components.subpage-data-table.clear_filter"
-                        )}
-                      ></ha-icon-button>`
-                    : nothing}
+                  <ha-icon-button
+                    .path=${mdiFilterRemove}
+                    @click=${this._clearFilters}
+                  ></ha-icon-button>
                 </div>
                 <div class="pane-content">
                   <slot name="filter-pane"></slot>
@@ -441,91 +431,6 @@ export class HaTabsSubpageDataTable extends LitElement {
               </ha-data-table>`}
         <div slot="fab"><slot name="fab"></slot></div>
       </hass-tabs-subpage>
-      <ha-menu anchor="group-by-anchor" id="group-by-menu" positioning="fixed">
-        ${Object.entries(this.columns).map(([id, column]) =>
-          column.groupable
-            ? html`
-                <ha-menu-item
-                  .value=${id}
-                  @click=${this._handleGroupBy}
-                  .selected=${id === this._groupColumn}
-                  class=${classMap({ selected: id === this._groupColumn })}
-                >
-                  ${column.title || column.label}
-                </ha-menu-item>
-              `
-            : nothing
-        )}
-        <md-divider role="separator" tabindex="-1"></md-divider>
-        <ha-menu-item
-          .value=${undefined}
-          @click=${this._handleGroupBy}
-          .selected=${this._groupColumn === undefined}
-          class=${classMap({ selected: this._groupColumn === undefined })}
-        >
-          ${localize("ui.components.subpage-data-table.dont_group_by")}
-        </ha-menu-item>
-      </ha-menu>
-      <ha-menu anchor="sort-by-anchor" id="sort-by-menu" positioning="fixed">
-        ${Object.entries(this.columns).map(([id, column]) =>
-          column.sortable
-            ? html`
-                <ha-menu-item
-                  .value=${id}
-                  @click=${this._handleSortBy}
-                  keep-open
-                  .selected=${id === this._sortColumn}
-                  class=${classMap({ selected: id === this._sortColumn })}
-                >
-                  ${this._sortColumn === id
-                    ? html`
-                        <ha-svg-icon
-                          slot="end"
-                          .path=${this._sortDirection === "desc"
-                            ? mdiArrowDown
-                            : mdiArrowUp}
-                        ></ha-svg-icon>
-                      `
-                    : nothing}
-                  ${column.title || column.label}
-                </ha-menu-item>
-              `
-            : nothing
-        )}
-      </ha-menu>
-      ${this.showFilters && !showPane
-        ? html`<ha-dialog
-            open
-            hideActions
-            .heading=${localize("ui.components.subpage-data-table.filters")}
-          >
-            <ha-dialog-header slot="heading">
-              <ha-icon-button
-                slot="navigationIcon"
-                .path=${mdiClose}
-                @click=${this._toggleFilters}
-                .label=${localize(
-                  "ui.components.subpage-data-table.close_filter"
-                )}
-              ></ha-icon-button>
-              <span slot="title"
-                >${localize("ui.components.subpage-data-table.filters")}</span
-              >
-              ${this.filters
-                ? html`<ha-icon-button
-                    slot="actionItems"
-                    @click=${this._clearFilters}
-                    .path=${mdiFilterVariantRemove}
-                    .label=${localize(
-                      "ui.components.subpage-data-table.clear_filter"
-                    )}
-                  ></ha-icon-button>`
-                : nothing}
-            </ha-dialog-header>
-            <div class="filter-dialog-content">
-              <slot name="filter-pane"></slot></div
-          ></ha-dialog>`
-        : nothing}
     `;
   }
 
@@ -543,6 +448,7 @@ export class HaTabsSubpageDataTable extends LitElement {
   }
 
   private _handleSortBy(ev) {
+    ev.stopPropagation();
     const columnId = ev.currentTarget.value;
     if (!this._sortDirection || this._sortColumn !== columnId) {
       this._sortDirection = "asc";
@@ -567,14 +473,6 @@ export class HaTabsSubpageDataTable extends LitElement {
     this._dataTable.clearSelection();
   }
 
-  private _selectAll() {
-    this._dataTable.selectAll();
-  }
-
-  private _selectNone() {
-    this._dataTable.clearSelection();
-  }
-
   private _handleSearchChange(ev: CustomEvent) {
     if (this.filter === ev.detail.value) {
       return;
@@ -587,7 +485,6 @@ export class HaTabsSubpageDataTable extends LitElement {
     return css`
       :host {
         display: block;
-        height: 100%;
       }
 
       ha-data-table {
@@ -709,18 +606,16 @@ export class HaTabsSubpageDataTable extends LitElement {
         position: absolute;
         top: -4px;
         right: -4px;
-        inset-inline-end: -4px;
-        inset-inline-start: initial;
         min-width: 16px;
         box-sizing: border-box;
         border-radius: 50%;
         font-weight: 400;
         font-size: 11px;
-        background-color: var(--primary-color);
+        background-color: var(--accent-color);
         line-height: 16px;
         text-align: center;
         padding: 0px 2px;
-        color: var(--text-primary-color);
+        color: var(--text-accent-color, var(--text-primary-color));
       }
 
       .narrow-header-row {
@@ -743,34 +638,30 @@ export class HaTabsSubpageDataTable extends LitElement {
         padding: 8px 12px;
         box-sizing: border-box;
         font-size: 14px;
-        --ha-assist-chip-container-color: var(--card-background-color);
-      }
-
-      .selection-controls {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .selection-controls p {
-        margin-left: 8px;
-        margin-inline-start: 8px;
-        margin-inline-end: initial;
       }
 
       .center-vertical {
         display: flex;
         align-items: center;
-        gap: 8px;
       }
 
       .relative {
         position: relative;
       }
 
+      .selection-bar p {
+        margin-left: 16px;
+      }
+
       ha-assist-chip {
         --ha-assist-chip-container-shape: 10px;
-        --ha-assist-chip-container-color: var(--card-background-color);
+      }
+      ha-button-menu {
+        --mdc-list-item-meta-size: 16px;
+        --mdc-list-item-meta-display: flex;
+      }
+      ha-button-menu ha-assist-chip {
+        --md-assist-chip-trailing-space: 8px;
       }
 
       .select-mode-chip {
@@ -779,7 +670,6 @@ export class HaTabsSubpageDataTable extends LitElement {
       }
 
       ha-dialog {
-        --dialog-z-index: 100;
         --mdc-dialog-min-width: calc(
           100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
         );
@@ -798,12 +688,6 @@ export class HaTabsSubpageDataTable extends LitElement {
         display: flex;
         flex-direction: column;
       }
-
-      #sort-by-anchor,
-      #group-by-anchor,
-      ha-button-menu-new ha-assist-chip {
-        --md-assist-chip-trailing-space: 8px;
-      }
     `;
   }
 }

src/layouts/hass-tabs-subpage.ts

@@ -344,10 +344,6 @@ class HassTabsSubpage extends LitElement {
           inset-inline-start: initial;
           bottom: calc(16px + env(safe-area-inset-bottom));
           z-index: 1;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-end;
-          gap: 8px;
         }
         :host([narrow]) #fab.tabs {
           bottom: calc(84px + env(safe-area-inset-bottom));

src/managers/notification-manager.ts

@@ -27,7 +27,7 @@ class NotificationManager extends LitElement {
   @query("ha-toast") private _toast!: HaToast | undefined;
 
   public async showDialog(parameters: ShowToastParams) {
-    if (this._parameters && this._parameters.message !== parameters.message) {
+    if (this._parameters) {
       this._parameters = undefined;
       await this.updateComplete;
     }

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -52,9 +52,7 @@ class DialogAreaDetail extends LitElement {
   ): Promise<void> {
     this._params = params;
     this._error = undefined;
-    this._name = this._params.entry
-      ? this._params.entry.name
-      : this._params.suggestedName || "";
+    this._name = this._params.entry ? this._params.entry.name : "";
     this._aliases = this._params.entry ? this._params.entry.aliases : [];
     this._labels = this._params.entry ? this._params.entry.labels : [];
     this._picture = this._params.entry?.picture || null;

src/panels/config/areas/dialog-floor-registry-detail.ts

@@ -1,30 +1,19 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list";
-import { mdiTextureBox } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/chips/ha-chip-set";
-import "../../../components/chips/ha-input-chip";
 import "../../../components/ha-alert";
 import "../../../components/ha-aliases-editor";
 import { createCloseHeading } from "../../../components/ha-dialog";
-import "../../../components/ha-icon-picker";
 import "../../../components/ha-picture-upload";
 import "../../../components/ha-settings-row";
-import "../../../components/ha-svg-icon";
 import "../../../components/ha-textfield";
-import {
-  FloorRegistryEntry,
-  FloorRegistryEntryMutableParams,
-} from "../../../data/floor_registry";
-import { haStyle, haStyleDialog } from "../../../resources/styles";
+import "../../../components/ha-icon-picker";
+import { FloorRegistryEntryMutableParams } from "../../../data/floor_registry";
+import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { FloorRegistryDetailDialogParams } from "./show-dialog-floor-registry-detail";
-import { showAreaRegistryDetailDialog } from "./show-dialog-area-registry-detail";
-import { updateAreaRegistryEntry } from "../../../data/area_registry";
 
 class DialogFloorDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -43,59 +32,30 @@ class DialogFloorDetail extends LitElement {
 
   @state() private _submitting?: boolean;
 
-  @state() private _addedAreas = new Set<string>();
-
-  @state() private _removedAreas = new Set<string>();
-
-  public showDialog(params: FloorRegistryDetailDialogParams): void {
+  public async showDialog(
+    params: FloorRegistryDetailDialogParams
+  ): Promise<void> {
     this._params = params;
     this._error = undefined;
-    this._name = this._params.entry
-      ? this._params.entry.name
-      : this._params.suggestedName || "";
+    this._name = this._params.entry ? this._params.entry.name : "";
     this._aliases = this._params.entry?.aliases || [];
     this._icon = this._params.entry?.icon || null;
     this._level = this._params.entry?.level ?? null;
-    this._addedAreas.clear();
-    this._removedAreas.clear();
+    await this.updateComplete;
   }
 
   public closeDialog(): void {
     this._error = "";
     this._params = undefined;
-    this._addedAreas.clear();
-    this._removedAreas.clear();
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  private _floorAreas = memoizeOne(
-    (
-      entry: FloorRegistryEntry | undefined,
-      areas: HomeAssistant["areas"],
-      added: Set<string>,
-      removed: Set<string>
-    ) =>
-      Object.values(areas).filter(
-        (area) =>
-          (area.floor_id === entry?.floor_id || added.has(area.area_id)) &&
-          !removed.has(area.area_id)
-      )
-  );
-
   protected render() {
-    const areas = this._floorAreas(
-      this._params?.entry,
-      this.hass.areas,
-      this._addedAreas,
-      this._removedAreas
-    );
-
     if (!this._params) {
       return nothing;
     }
     const entry = this._params.entry;
     const nameInvalid = !this._isNameValid();
-
     return html`
       <ha-dialog
         open
@@ -150,62 +110,7 @@ class DialogFloorDetail extends LitElement {
               .value=${this._icon}
               @value-changed=${this._iconChanged}
               .label=${this.hass.localize("ui.panel.config.areas.editor.icon")}
-            >
-              ${!this._icon
-                ? html`
-                    <ha-floor-icon
-                      slot="fallback"
-                      .floor=${{ level: this._level }}
-                    ></ha-floor-icon>
-                  `
-                : nothing}
-            </ha-icon-picker>
-
-            <h3 class="header">
-              ${this.hass.localize(
-                "ui.panel.config.floors.editor.areas_section"
-              )}
-            </h3>
-
-            <p class="description">
-              ${this.hass.localize(
-                "ui.panel.config.floors.editor.areas_description"
-              )}
-            </p>
-            ${areas.length
-              ? html`<ha-chip-set>
-                  ${repeat(
-                    areas,
-                    (area) => area.area_id,
-                    (area) =>
-                      html`<ha-input-chip
-                        .area=${area}
-                        @click=${this._openArea}
-                        @remove=${this._removeArea}
-                        .label=${area?.name}
-                      >
-                        ${area.icon
-                          ? html`<ha-icon
-                              slot="icon"
-                              .icon=${area.icon}
-                            ></ha-icon>`
-                          : html`<ha-svg-icon
-                              slot="icon"
-                              .path=${mdiTextureBox}
-                            ></ha-svg-icon>`}
-                      </ha-input-chip>`
-                  )}
-                </ha-chip-set>`
-              : nothing}
-            <ha-area-picker
-              no-add
-              .hass=${this.hass}
-              @value-changed=${this._addArea}
-              .excludeAreas=${areas.map((a) => a.area_id)}
-              .label=${this.hass.localize(
-                "ui.panel.config.floors.editor.add_area"
-              )}
-            ></ha-area-picker>
+            ></ha-icon-picker>
 
             <h3 class="header">
               ${this.hass.localize(
@@ -241,41 +146,6 @@ class DialogFloorDetail extends LitElement {
     `;
   }
 
-  private _openArea(ev) {
-    const area = ev.target.area;
-    showAreaRegistryDetailDialog(this, {
-      entry: area,
-      updateEntry: (values) =>
-        updateAreaRegistryEntry(this.hass!, area.area_id, values),
-    });
-  }
-
-  private _removeArea(ev) {
-    const areaId = ev.target.area.area_id;
-    if (this._addedAreas.has(areaId)) {
-      this._addedAreas.delete(areaId);
-      this._addedAreas = new Set(this._addedAreas);
-      return;
-    }
-    this._removedAreas.add(areaId);
-    this._removedAreas = new Set(this._removedAreas);
-  }
-
-  private _addArea(ev) {
-    const areaId = ev.detail.value;
-    if (!areaId) {
-      return;
-    }
-    ev.target.value = "";
-    if (this._removedAreas.has(areaId)) {
-      this._removedAreas.delete(areaId);
-      this._removedAreas = new Set(this._removedAreas);
-      return;
-    }
-    this._addedAreas.add(areaId);
-    this._addedAreas = new Set(this._addedAreas);
-  }
-
   private _isNameValid() {
     return this._name.trim() !== "";
   }
@@ -287,7 +157,7 @@ class DialogFloorDetail extends LitElement {
 
   private _levelChanged(ev) {
     this._error = undefined;
-    this._level = ev.target.value === "" ? null : Number(ev.target.value);
+    this._level = Number(ev.target.value);
   }
 
   private _iconChanged(ev) {
@@ -306,13 +176,9 @@ class DialogFloorDetail extends LitElement {
         aliases: this._aliases,
       };
       if (create) {
-        await this._params!.createEntry!(values, this._addedAreas);
+        await this._params!.createEntry!(values);
       } else {
-        await this._params!.updateEntry!(
-          values,
-          this._addedAreas,
-          this._removedAreas
-        );
+        await this._params!.updateEntry!(values);
       }
       this.closeDialog();
     } catch (err: any) {
@@ -330,19 +196,12 @@ class DialogFloorDetail extends LitElement {
 
   static get styles(): CSSResultGroup {
     return [
-      haStyle,
       haStyleDialog,
       css`
         ha-textfield {
           display: block;
           margin-bottom: 16px;
         }
-        ha-floor-icon {
-          color: var(--secondary-text-color);
-        }
-        ha-chip-set {
-          margin-bottom: 8px;
-        }
       `,
     ];
   }

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

@@ -1,4 +1,3 @@
-import { ActionDetail } from "@material/mwc-list";
 import {
   mdiDelete,
   mdiDotsVertical,
@@ -18,16 +17,14 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
+import { ActionDetail } from "@material/mwc-list";
 import { formatListWithAnds } from "../../../common/string/format-list";
 import "../../../components/ha-fab";
-import "../../../components/ha-floor-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-sortable";
 import {
   AreaRegistryEntry,
   createAreaRegistryEntry,
-  updateAreaRegistryEntry,
 } from "../../../data/area_registry";
 import {
   FloorRegistryEntry,
@@ -42,7 +39,6 @@ import {
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage";
-import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant, Route } from "../../../types";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
@@ -51,10 +47,7 @@ import {
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
 import { showFloorRegistryDetailDialog } from "./show-dialog-floor-registry-detail";
-
-const UNASSIGNED_PATH = ["__unassigned__"];
-
-const SORT_OPTIONS = { sort: false, delay: 500, delayOnTouchOnly: true };
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 
 @customElement("ha-config-areas-dashboard")
 export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
@@ -161,7 +154,9 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
               html`<div class="floor">
                 <div class="header">
                   <h2>
-                    <ha-floor-icon .floor=${floor}></ha-floor-icon>
+                    ${floor.icon
+                      ? html`<ha-icon .icon=${floor.icon}></ha-icon>`
+                      : nothing}
                     ${floor.name}
                   </h2>
                   <ha-button-menu
@@ -193,22 +188,13 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
                     >
                   </ha-button-menu>
                 </div>
-                <ha-sortable
-                  handle-selector="a"
-                  draggable-selector="a"
-                  @item-moved=${this._areaMoved}
-                  group="floor"
-                  .options=${SORT_OPTIONS}
-                  .path=${[floor.floor_id]}
-                >
-                  <div class="areas">
-                    ${floor.areas.map((area) => this._renderArea(area))}
-                  </div>
-                </ha-sortable>
+                <div class="areas">
+                  ${floor.areas.map((area) => this._renderArea(area))}
+                </div>
               </div>`
           )}
           ${areasAndFloors?.unassisgnedAreas.length
-            ? html`<div class="floor">
+            ? html`<div class="unassigned">
                 <div class="header">
                   <h2>
                     ${this.hass.localize(
@@ -216,20 +202,11 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
                     )}
                   </h2>
                 </div>
-                <ha-sortable
-                  handle-selector="a"
-                  draggable-selector="a"
-                  @item-moved=${this._areaMoved}
-                  group="floor"
-                  .options=${SORT_OPTIONS}
-                  .path=${UNASSIGNED_PATH}
-                >
-                  <div class="areas">
-                    ${areasAndFloors?.unassisgnedAreas.map((area) =>
-                      this._renderArea(area)
-                    )}
-                  </div>
-                </ha-sortable>
+                <div class="areas">
+                  ${areasAndFloors?.unassisgnedAreas.map((area) =>
+                    this._renderArea(area)
+                  )}
+                </div>
               </div>`
             : nothing}
         </div>
@@ -271,14 +248,7 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
             ? html`<ha-icon .icon=${area.icon}></ha-icon>`
             : ""}
         </div>
-        <div class="card-header">
-          ${area.name}
-          <ha-icon-button
-            .area=${area}
-            .path=${mdiPencil}
-            @click=${this._openAreaDetails}
-          ></ha-icon-button>
-        </div>
+        <h1 class="card-header">${area.name}</h1>
         <div class="card-content">
           <div>
             ${formatListWithAnds(
@@ -312,39 +282,6 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
     loadAreaRegistryDetailDialog();
   }
 
-  private _openAreaDetails(ev) {
-    ev.preventDefault();
-    const area = ev.currentTarget.area;
-    showAreaRegistryDetailDialog(this, {
-      entry: area,
-      updateEntry: async (values) =>
-        updateAreaRegistryEntry(this.hass!, area.area_id, values),
-    });
-  }
-
-  private async _areaMoved(ev) {
-    const areasAndFloors = this._processAreas(
-      this.hass.areas,
-      this.hass.devices,
-      this.hass.entities,
-      this._floors!
-    );
-    let area: AreaRegistryEntry;
-    if (ev.detail.oldPath === UNASSIGNED_PATH) {
-      area = areasAndFloors.unassisgnedAreas[ev.detail.oldIndex];
-    } else {
-      const oldFloor = areasAndFloors.floors!.find(
-        (floor) => floor.floor_id === ev.detail.oldPath[0]
-      );
-      area = oldFloor!.areas[ev.detail.oldIndex];
-    }
-
-    await updateAreaRegistryEntry(this.hass, area.area_id, {
-      floor_id:
-        ev.detail.newPath === UNASSIGNED_PATH ? null : ev.detail.newPath[0],
-    });
-  }
-
   private _handleFloorAction(ev: CustomEvent<ActionDetail>) {
     const floor = (ev.currentTarget as any).floor;
     switch (ev.detail.index) {
@@ -414,31 +351,10 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
   private _openFloorDialog(entry?: FloorRegistryEntry) {
     showFloorRegistryDetailDialog(this, {
       entry,
-      createEntry: async (values, addedAreas) => {
-        const floor = await createFloorRegistryEntry(this.hass!, values);
-        addedAreas.forEach((areaId) => {
-          updateAreaRegistryEntry(this.hass, areaId, {
-            floor_id: floor.floor_id,
-          });
-        });
-      },
-      updateEntry: async (values, addedAreas, removedAreas) => {
-        const floor = await updateFloorRegistryEntry(
-          this.hass!,
-          entry!.floor_id,
-          values
-        );
-        addedAreas.forEach((areaId) => {
-          updateAreaRegistryEntry(this.hass, areaId, {
-            floor_id: floor.floor_id,
-          });
-        });
-        removedAreas.forEach((areaId) => {
-          updateAreaRegistryEntry(this.hass, areaId, {
-            floor_id: null,
-          });
-        });
-      },
+      createEntry: async (values) =>
+        createFloorRegistryEntry(this.hass!, values),
+      updateEntry: async (values) =>
+        updateFloorRegistryEntry(this.hass!, entry!.floor_id, values),
     });
   }
 
@@ -507,10 +423,9 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
         min-height: 16px;
         color: var(--secondary-text-color);
       }
-      .card-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+      .floor {
+        --primary-color: var(--secondary-text-color);
+        margin-inline-end: 8px;
       }
       .warning {
         color: var(--error-color);

src/panels/config/areas/show-dialog-area-registry-detail.ts

@@ -6,7 +6,6 @@ import {
 
 export interface AreaRegistryDetailDialogParams {
   entry?: AreaRegistryEntry;
-  suggestedName?: string;
   createEntry?: (values: AreaRegistryEntryMutableParams) => Promise<unknown>;
   updateEntry?: (
     updates: Partial<AreaRegistryEntryMutableParams>

src/panels/config/areas/show-dialog-floor-registry-detail.ts

@@ -6,15 +6,9 @@ import {
 
 export interface FloorRegistryDetailDialogParams {
   entry?: FloorRegistryEntry;
-  suggestedName?: string;
-  createEntry?: (
-    values: FloorRegistryEntryMutableParams,
-    addedAreas: Set<string>
-  ) => Promise<unknown>;
+  createEntry?: (values: FloorRegistryEntryMutableParams) => Promise<unknown>;
   updateEntry?: (
-    updates: Partial<FloorRegistryEntryMutableParams>,
-    addedAreas: Set<string>,
-    removedAreas: Set<string>
+    updates: Partial<FloorRegistryEntryMutableParams>
   ) => Promise<unknown>;
 }
 

src/panels/config/automation/add-automation-element-dialog.ts

@@ -556,7 +556,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                   ></ha-svg-icon
                   ><ha-svg-icon slot="end" .path=${mdiPlus}></ha-svg-icon>
                 </ha-list-item-new>
-                <md-divider role="separator" tabindex="-1"></md-divider>`
+                <md-divider></md-divider>`
             : ""}
           ${repeat(
             items,

src/panels/config/automation/ha-automation-picker.ts

@@ -1,22 +1,16 @@
 import { consume } from "@lit-labs/context";
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
-import "@material/web/divider/divider";
 import {
-  mdiChevronRight,
-  mdiCog,
   mdiContentDuplicate,
   mdiDelete,
-  mdiDotsVertical,
   mdiHelpCircle,
   mdiInformationOutline,
-  mdiMenuDown,
   mdiPlay,
+  mdiPlayCircleOutline,
   mdiPlus,
   mdiRobotHappy,
+  mdiStopCircleOutline,
   mdiTag,
-  mdiToggleSwitch,
-  mdiToggleSwitchOffOutline,
   mdiTransitConnection,
 } from "@mdi/js";
 import { differenceInDays } from "date-fns/esm";
@@ -24,16 +18,14 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,
   LitElement,
-  PropertyValues,
   TemplateResult,
   css,
   html,
   nothing,
 } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
-import { computeCssColor } from "../../../common/color/compute-color";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatShortDateTime } from "../../../common/datetime/format_date_time";
 import { relativeTime } from "../../../common/datetime/relative_time";
@@ -45,23 +37,16 @@ import "../../../components/chips/ha-assist-chip";
 import type {
   DataTableColumnContainer,
   RowClickedEvent,
-  SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
-import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-fab";
+import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-blueprints";
 import "../../../components/ha-filter-categories";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-entities";
-import "../../../components/ha-filter-floor-areas";
-import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
-import "../../../components/ha-menu";
-import type { HaMenu } from "../../../components/ha-menu";
-import "../../../components/ha-menu-item";
-import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import {
   AutomationEntity,
@@ -74,21 +59,11 @@ import {
 } from "../../../data/automation";
 import {
   CategoryRegistryEntry,
-  createCategoryRegistryEntry,
   subscribeCategoryRegistry,
 } from "../../../data/category_registry";
 import { fullEntitiesContext } from "../../../data/context";
 import { UNAVAILABLE } from "../../../data/entity";
-import {
-  EntityRegistryEntry,
-  UpdateEntityRegistryEntryResult,
-  updateEntityRegistryEntry,
-} from "../../../data/entity_registry";
-import {
-  LabelRegistryEntry,
-  createLabelRegistryEntry,
-  subscribeLabelRegistry,
-} from "../../../data/label_registry";
+import { EntityRegistryEntry } from "../../../data/entity_registry";
 import { findRelated } from "../../../data/search";
 import {
   showAlertDialog,
@@ -97,18 +72,20 @@ import {
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
-import { HomeAssistant, Route, ServiceCallResponse } from "../../../types";
+import { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
-import { turnOnOffEntity } from "../../lovelace/common/entity/turn-on-off-entity";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
-import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
 import { configSections } from "../ha-panel-config";
-import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 import { showNewAutomationDialog } from "./show-dialog-new-automation";
+import "../../../components/data-table/ha-data-table-labels";
+import {
+  LabelRegistryEntry,
+  subscribeLabelRegistry,
+} from "../../../data/label_registry";
+import "../../../components/ha-filter-labels";
 
 type AutomationItem = AutomationEntity & {
   name: string;
-  area: string | undefined;
   last_triggered?: string | undefined;
   formatted_state: string;
   category: string | undefined;
@@ -138,8 +115,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
 
   @state() private _expandedFilter?: string;
 
-  @state() private _selected: string[] = [];
-
   @state()
   _categories!: CategoryRegistryEntry[];
 
@@ -150,19 +125,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
-  @state() private _overflowAutomation?: AutomationItem;
-
-  @query("#overflow-menu") private _overflowMenu!: HaMenu;
-
-  private _sizeController = new ResizeController(this, {
-    callback: (entries) => entries[0]?.contentRect.width,
-  });
-
   private _automations = memoizeOne(
     (
       automations: AutomationEntity[],
       entityReg: EntityRegistryEntry[],
-      areas: HomeAssistant["areas"],
       categoryReg?: CategoryRegistryEntry[],
       labelReg?: LabelRegistryEntry[],
       filteredAutomations?: string[] | null
@@ -185,9 +151,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         return {
           ...automation,
           name: computeStateName(automation),
-          area: entityRegEntry?.area_id
-            ? areas[entityRegEntry?.area_id]?.name
-            : undefined,
           last_triggered: automation.attributes.last_triggered || undefined,
           formatted_state: this.hass.formatEntityState(automation),
           category: category
@@ -256,13 +219,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
             `;
           },
         },
-        area: {
-          title: localize("ui.panel.config.automation.picker.headers.area"),
-          hidden: true,
-          groupable: true,
-          filterable: true,
-          sortable: true,
-        },
         category: {
           title: localize("ui.panel.config.automation.picker.headers.category"),
           hidden: true,
@@ -277,32 +233,33 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           template: (automation) =>
             automation.labels.map((lbl) => lbl.name).join(" "),
         },
-        last_triggered: {
-          sortable: true,
-          width: "130px",
-          title: localize("ui.card.automation.last_triggered"),
-          hidden: narrow,
-          template: (automation) => {
-            if (!automation.last_triggered) {
-              return this.hass.localize("ui.components.relative_time.never");
-            }
-            const date = new Date(automation.last_triggered);
-            const now = new Date();
-            const dayDifference = differenceInDays(now, date);
-            return html`
-              ${dayDifference > 3
-                ? formatShortDateTime(date, locale, this.hass.config)
-                : relativeTime(date, locale)}
-            `;
-          },
+      };
+      columns.last_triggered = {
+        sortable: true,
+        width: "130px",
+        title: localize("ui.card.automation.last_triggered"),
+        hidden: narrow,
+        template: (automation) => {
+          if (!automation.last_triggered) {
+            return this.hass.localize("ui.components.relative_time.never");
+          }
+          const date = new Date(automation.last_triggered);
+          const now = new Date();
+          const dayDifference = differenceInDays(now, date);
+          return html`
+            ${dayDifference > 3
+              ? formatShortDateTime(date, locale, this.hass.config)
+              : relativeTime(date, locale)}
+          `;
         },
-        formatted_state: {
+      };
+
+      if (!this.narrow) {
+        columns.formatted_state = {
           width: "82px",
           sortable: true,
           groupable: true,
           title: "",
-          type: "overflow",
-          hidden: narrow,
           label: this.hass.localize("ui.panel.config.automation.picker.state"),
           template: (automation) => html`
             <ha-entity-toggle
@@ -310,38 +267,88 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
               .hass=${this.hass}
             ></ha-entity-toggle>
           `,
-        },
-        actions: {
-          title: "",
-          width: "64px",
-          type: "icon-button",
-          template: (automation) => html`
-            <ha-icon-button
-              .automation=${automation}
-              .label=${this.hass.localize("ui.common.overflow_menu")}
-              .path=${mdiDotsVertical}
-              @click=${this._showOverflowMenu}
-            ></ha-icon-button>
-          `,
-        },
+        };
+      }
+
+      columns.actions = {
+        title: "",
+        width: "64px",
+        type: "overflow-menu",
+        template: (automation) => html`
+          <ha-icon-overflow-menu
+            .hass=${this.hass}
+            narrow
+            .items=${[
+              {
+                path: mdiInformationOutline,
+                label: this.hass.localize(
+                  "ui.panel.config.automation.editor.show_info"
+                ),
+                action: () => this._showInfo(automation),
+              },
+              {
+                path: mdiTag,
+                label: this.hass.localize(
+                  `ui.panel.config.automation.picker.${automation.category ? "edit_category" : "assign_category"}`
+                ),
+                action: () => this._editCategory(automation),
+              },
+              {
+                path: mdiPlay,
+                label: this.hass.localize(
+                  "ui.panel.config.automation.editor.run"
+                ),
+                action: () => this._runActions(automation),
+              },
+              {
+                path: mdiTransitConnection,
+                label: this.hass.localize(
+                  "ui.panel.config.automation.editor.show_trace"
+                ),
+                action: () => this._showTrace(automation),
+              },
+              {
+                divider: true,
+              },
+              {
+                path: mdiContentDuplicate,
+                label: this.hass.localize(
+                  "ui.panel.config.automation.picker.duplicate"
+                ),
+                action: () => this.duplicate(automation),
+              },
+              {
+                path:
+                  automation.state === "off"
+                    ? mdiPlayCircleOutline
+                    : mdiStopCircleOutline,
+                label:
+                  automation.state === "off"
+                    ? this.hass.localize(
+                        "ui.panel.config.automation.editor.enable"
+                      )
+                    : this.hass.localize(
+                        "ui.panel.config.automation.editor.disable"
+                      ),
+                action: () => this._toggle(automation),
+              },
+              {
+                label: this.hass.localize(
+                  "ui.panel.config.automation.picker.delete"
+                ),
+                path: mdiDelete,
+                action: () => this._deleteConfirm(automation),
+                warning: true,
+              },
+            ]}
+          >
+          </ha-icon-overflow-menu>
+        `,
       };
       return columns;
     }
   );
 
-  private _showOverflowMenu = (ev) => {
-    if (
-      this._overflowMenu.open &&
-      ev.target === this._overflowMenu.anchorElement
-    ) {
-      this._overflowMenu.close();
-      return;
-    }
-    this._overflowAutomation = ev.target.automation;
-    this._overflowMenu.anchorElement = ev.target;
-    this._overflowMenu.show();
-  };
-
   protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
     return [
       subscribeCategoryRegistry(
@@ -358,88 +365,18 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
-    const categoryItems = html`${this._categories?.map(
-        (category) =>
-          html`<ha-menu-item
-            .value=${category.category_id}
-            @click=${this._handleBulkCategory}
-          >
-            ${category.icon
-              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
-            <div slot="headline">${category.name}</div>
-          </ha-menu-item>`
-      )}
-      <ha-menu-item .value=${null} @click=${this._handleBulkCategory}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_actions.no_category"
-          )}
-        </div>
-      </ha-menu-item>
-      <md-divider role="separator" tabindex="-1"></md-divider>
-      <ha-menu-item @click=${this._bulkCreateCategory}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.category.editor.add")}
-        </div>
-      </ha-menu-item>`;
-    const labelItems = html`${this._labels?.map((label) => {
-        const color = label.color ? computeCssColor(label.color) : undefined;
-        const selected = this._selected.every((entityId) =>
-          this.hass.entities[entityId]?.labels.includes(label.label_id)
-        );
-        const partial =
-          !selected &&
-          this._selected.some((entityId) =>
-            this.hass.entities[entityId]?.labels.includes(label.label_id)
-          );
-        return html`<ha-menu-item
-          .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
-          @click=${this._handleBulkLabel}
-          keep-open
-        >
-          <ha-checkbox
-            slot="start"
-            .checked=${selected}
-            .indeterminate=${partial}
-            reducedTouchTarget
-          ></ha-checkbox>
-          <ha-label style=${color ? `--color: ${color}` : ""}>
-            ${label.icon
-              ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
-              : nothing}
-            ${label.name}
-          </ha-label>
-        </ha-menu-item>`;
-      })}
-      <md-divider role="separator" tabindex="-1"></md-divider>
-      <ha-menu-item @click=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div></ha-menu-item
-      >`;
-    const labelsInOverflow =
-      (this._sizeController.value && this._sizeController.value < 700) ||
-      (!this._sizeController.value && this.hass.dockedSidebar === "docked");
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        back-path="/config"
         id="entity_id"
         .route=${this.route}
         .tabs=${configSections.automations}
-        selectable
-        .selected=${this._selected.length}
-        @selection-changed=${this._handleSelectionChanged}
         hasFilters
-        .filters=${
-          Object.values(this._filters).filter((filter) => filter.value?.length)
-            .length
-        }
+        .filters=${Object.values(this._filters).filter(
+          (filter) => filter.value?.length
+        ).length}
         .columns=${this._columns(
           this.narrow,
           this.hass.localize,
@@ -449,7 +386,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         .data=${this._automations(
           this.automations,
           this._entityReg,
-          this.hass.areas,
           this._categories,
           this._labels,
           this._filteredAutomations
@@ -529,156 +465,36 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-blueprints>
-          ${
-            !this.narrow
-              ? html`<ha-button-menu-new slot="selection-bar">
-                    <ha-assist-chip
-                      slot="trigger"
-                      .label=${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.move_category"
-                      )}
-                    >
-                      <ha-svg-icon
-                        slot="trailing-icon"
-                        .path=${mdiMenuDown}
-                      ></ha-svg-icon>
-                    </ha-assist-chip>
-                    ${categoryItems}
-                  </ha-button-menu-new>
-                  ${labelsInOverflow
-                    ? nothing
-                    : html`<ha-button-menu-new slot="selection-bar">
-                        <ha-assist-chip
-                          slot="trigger"
-                          .label=${this.hass.localize(
-                            "ui.panel.config.automation.picker.bulk_actions.add_label"
-                          )}
-                        >
-                          <ha-svg-icon
-                            slot="trailing-icon"
-                            .path=${mdiMenuDown}
-                          ></ha-svg-icon>
-                        </ha-assist-chip>
-                        ${labelItems}
-                      </ha-button-menu-new>`}`
-              : nothing
-          }
-          <ha-button-menu-new has-overflow slot="selection-bar">
-            ${
-              this.narrow
-                ? html`<ha-assist-chip
-                    .label=${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_action"
-                    )}
-                    slot="trigger"
-                  >
-                    <ha-svg-icon
-                      slot="trailing-icon"
-                      .path=${mdiMenuDown}
-                    ></ha-svg-icon>
-                  </ha-assist-chip>`
-                : html`<ha-icon-button
-                    .path=${mdiDotsVertical}
-                    .label=${"ui.panel.config.automation.picker.bulk_action"}
-                    slot="trigger"
-                  ></ha-icon-button>`
-            }
-              <ha-svg-icon
-                slot="trailing-icon"
-                .path=${mdiMenuDown}
-              ></ha-svg-icon
-            ></ha-assist-chip>
-            ${
-              this.narrow
-                ? html`<ha-sub-menu>
-                    <ha-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.move_category"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-menu-item>
-                    <ha-menu slot="menu">${categoryItems}</ha-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            ${
-              this.narrow || labelsInOverflow
-                ? html`<ha-sub-menu>
-                    <ha-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.add_label"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-menu-item>
-                    <ha-menu slot="menu">${labelItems}</ha-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            <ha-menu-item @click=${this._handleBulkEnable}>
-              <ha-svg-icon slot="start" .path=${mdiToggleSwitch}></ha-svg-icon>
-              <div slot="headline">
+        ${!this.automations.length
+          ? html`<div class="empty" slot="empty">
+              <ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
+              <h1>
                 ${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_actions.enable"
+                  "ui.panel.config.automation.picker.empty_header"
                 )}
-              </div>
-            </ha-menu-item>
-            <ha-menu-item @click=${this._handleBulkDisable}>
-              <ha-svg-icon
-                slot="start"
-                .path=${mdiToggleSwitchOffOutline}
-              ></ha-svg-icon>
-              <div slot="headline">
+              </h1>
+              <p>
                 ${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_actions.disable"
+                  "ui.panel.config.automation.picker.empty_text_1"
                 )}
-              </div>
-            </ha-menu-item>
-          </ha-button-menu-new>
-        ${
-          !this.automations.length
-            ? html`<div class="empty" slot="empty">
-                <ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
-                <h1>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.picker.empty_header"
-                  )}
-                </h1>
-                <p>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.picker.empty_text_1"
-                  )}
-                </p>
-                <p>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.picker.empty_text_2",
-                    { user: this.hass.user?.name || "Alice" }
-                  )}
-                </p>
-                <a
-                  href=${documentationUrl(
-                    this.hass,
-                    "/docs/automation/editor/"
-                  )}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <ha-button>
-                    ${this.hass.localize("ui.panel.config.common.learn_more")}
-                  </ha-button>
-                </a>
-              </div>`
-            : nothing
-        }
+              </p>
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.empty_text_2",
+                  { user: this.hass.user?.name || "Alice" }
+                )}
+              </p>
+              <a
+                href=${documentationUrl(this.hass, "/docs/automation/editor/")}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <ha-button>
+                  ${this.hass.localize("ui.panel.config.common.learn_more")}
+                </ha-button>
+              </a>
+            </div>`
+          : nothing}
         <ha-fab
           slot="fab"
           .label=${this.hass.localize(
@@ -690,97 +506,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>
       </hass-tabs-subpage-data-table>
-      <ha-menu id="overflow-menu" positioning="fixed">
-        <ha-menu-item @click=${this._showInfo}>
-          <ha-svg-icon
-            .path=${mdiInformationOutline}
-            slot="start"
-          ></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
-          </div>
-        </ha-menu-item>
-
-        <ha-menu-item @click=${this._showSettings}>
-          <ha-svg-icon .path=${mdiCog} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize(
-              "ui.panel.config.automation.picker.show_settings"
-            )}
-          </div>
-        </ha-menu-item>
-        <ha-menu-item @click=${this._editCategory}>
-          <ha-svg-icon .path=${mdiTag} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize(
-              `ui.panel.config.automation.picker.${this._overflowAutomation?.category ? "edit_category" : "assign_category"}`
-            )}
-          </div>
-        </ha-menu-item>
-        <ha-menu-item @click=${this._runActions}>
-          <ha-svg-icon .path=${mdiPlay} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize("ui.panel.config.automation.editor.run")}
-          </div>
-        </ha-menu-item>
-        <ha-menu-item @click=${this._showTrace}>
-          <ha-svg-icon .path=${mdiTransitConnection} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.show_trace"
-            )}
-          </div>
-        </ha-menu-item>
-        <md-divider role="separator" tabindex="-1"></md-divider>
-        <ha-menu-item @click=${this._duplicate}>
-          <ha-svg-icon .path=${mdiContentDuplicate} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize("ui.panel.config.automation.picker.duplicate")}
-          </div>
-        </ha-menu-item>
-        <ha-menu-item @click=${this._toggle}>
-          <ha-svg-icon
-            .path=${
-              this._overflowAutomation?.state === "off"
-                ? mdiToggleSwitch
-                : mdiToggleSwitchOffOutline
-            }
-            slot="start"
-          ></ha-svg-icon>
-          <div slot="headline">
-            ${
-              this._overflowAutomation?.state === "off"
-                ? this.hass.localize("ui.panel.config.automation.editor.enable")
-                : this.hass.localize(
-                    "ui.panel.config.automation.editor.disable"
-                  )
-            }
-          </div>
-        </ha-menu-item>
-        <ha-menu-item @click=${this._deleteConfirm} class="warning">
-          <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize("ui.panel.config.automation.picker.delete")}
-          </div>
-        </ha-menu-item>
-      </ha-menu>
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (changedProps.has("_entityReg")) {
-      this._applyFilters();
-    }
-  }
-
   firstUpdated() {
     if (this._searchParms.has("blueprint")) {
       this._filterBlueprint();
     }
-    if (this._searchParms.has("label")) {
-      this._filterLabel();
-    }
   }
 
   private _filterExpanded(ev) {
@@ -868,21 +600,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     this._filteredAutomations = items ? [...items] : undefined;
   }
 
-  private _filterLabel() {
-    const label = this._searchParms.get("label");
-    if (!label) {
-      return;
-    }
-    this._filters = {
-      ...this._filters,
-      "ha-filter-labels": {
-        value: [label],
-        items: undefined,
-      },
-    };
-    this._applyFilters();
-  }
-
   private async _filterBlueprint() {
     const blueprint = this._searchParms.get("blueprint");
     if (!blueprint) {
@@ -908,29 +625,15 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     this._applyFilters();
   }
 
-  private _showInfo(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+  private _showInfo(automation: any) {
     fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
   }
 
-  private _showSettings(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
-
-    fireEvent(this, "hass-more-info", {
-      entityId: automation.entity_id,
-      view: "settings",
-    });
-  }
-
-  private _runActions(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
-
+  private _runActions(automation: any) {
     triggerAutomationActions(this.hass, automation.entity_id);
   }
 
-  private _editCategory(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
-
+  private _editCategory(automation: any) {
     const entityReg = this._entityReg.find(
       (reg) => reg.entity_id === automation.entity_id
     );
@@ -951,9 +654,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _showTrace(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
-
+  private _showTrace(automation: any) {
     if (!automation.attributes.id) {
       showAlertDialog(this, {
         text: this.hass.localize(
@@ -967,18 +668,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     );
   }
 
-  private async _toggle(ev): Promise<void> {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
-
+  private async _toggle(automation): Promise<void> {
     const service = automation.state === "off" ? "turn_on" : "turn_off";
     await this.hass.callService("automation", service, {
       entity_id: automation.entity_id,
     });
   }
 
-  private async _deleteConfirm(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
-
+  private async _deleteConfirm(automation) {
     showConfirmationDialog(this, {
       title: this.hass.localize(
         "ui.panel.config.automation.picker.delete_confirm_title"
@@ -1012,9 +709,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async _duplicate(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
-
+  private async duplicate(automation) {
     try {
       const config = await fetchAutomationFileConfig(
         this.hass,
@@ -1073,12 +768,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _handleSelectionChanged(
-    ev: HASSDomEvent<SelectionChangedEvent>
-  ): void {
-    this._selected = ev.detail.value;
-  }
-
   private _createNew() {
     if (isComponentLoaded(this.hass, "blueprint")) {
       showNewAutomationDialog(this, { mode: "automation" });
@@ -1087,94 +776,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async _handleBulkCategory(ev) {
-    const category = ev.currentTarget.value;
-    this._bulkAddCategory(category);
-  }
-
-  private async _bulkAddCategory(category: string) {
-    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
-    this._selected.forEach((entityId) => {
-      promises.push(
-        updateEntityRegistryEntry(this.hass, entityId, {
-          categories: { automation: category },
-        })
-      );
-    });
-    await Promise.all(promises);
-  }
-
-  private async _handleBulkLabel(ev) {
-    const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
-    this._bulkLabel(label, action);
-  }
-
-  private async _bulkLabel(label: string, action: "add" | "remove") {
-    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
-    this._selected.forEach((entityId) => {
-      promises.push(
-        updateEntityRegistryEntry(this.hass, entityId, {
-          labels:
-            action === "add"
-              ? this.hass.entities[entityId].labels.concat(label)
-              : this.hass.entities[entityId].labels.filter(
-                  (lbl) => lbl !== label
-                ),
-        })
-      );
-    });
-    await Promise.all(promises);
-  }
-
-  private async _handleBulkEnable() {
-    const promises: Promise<ServiceCallResponse>[] = [];
-    this._selected.forEach((entityId) => {
-      promises.push(turnOnOffEntity(this.hass, entityId, true));
-    });
-    await Promise.all(promises);
-  }
-
-  private async _handleBulkDisable() {
-    const promises: Promise<ServiceCallResponse>[] = [];
-    this._selected.forEach((entityId) => {
-      promises.push(turnOnOffEntity(this.hass, entityId, false));
-    });
-    await Promise.all(promises);
-  }
-
-  private async _bulkCreateCategory() {
-    showCategoryRegistryDetailDialog(this, {
-      scope: "automation",
-      createEntry: async (values) => {
-        const category = await createCategoryRegistryEntry(
-          this.hass,
-          "automation",
-          values
-        );
-        this._bulkAddCategory(category.category_id);
-        return category;
-      },
-    });
-  }
-
-  private _bulkCreateLabel() {
-    showLabelDetailDialog(this, {
-      createEntry: async (values) => {
-        const label = await createLabelRegistryEntry(this.hass, values);
-        this._bulkLabel(label.label_id, "add");
-        return label;
-      },
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
-        :host {
-          display: block;
-        }
         hass-tabs-subpage-data-table {
           --data-table-row-height: 60px;
         }
@@ -1186,16 +791,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           --mdc-icon-size: 80px;
           max-width: 500px;
         }
-        ha-assist-chip {
-          --ha-assist-chip-container-shape: 10px;
-        }
-        ha-button-menu-new ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
-        }
-        ha-label {
-          --ha-label-background-color: var(--color, var(--grey-color));
-          --ha-label-background-opacity: 0.5;
-        }
       `,
     ];
   }

src/panels/config/category/dialog-assign-category.ts

@@ -85,7 +85,7 @@ class DialogAssignCategory extends LitElement {
 
   private _categoryChanged(ev: CustomEvent): void {
     if (!ev.detail.value) {
-      this._category = undefined;
+      return;
     }
     this._category = ev.detail.value;
   }

src/panels/config/category/ha-category-picker.ts

@@ -179,16 +179,16 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
 
     const filteredItems = fuzzyFilterSort<ScorableCategoryRegistryEntry>(
       filterString,
-      target.items?.filter(
-        (item) => ![NO_CATEGORIES_ID, ADD_NEW_ID].includes(item.category_id)
-      ) || []
+      target.items || []
     );
     if (filteredItems?.length === 0) {
       if (this.noAdd) {
         this.comboBox.filteredItems = [
           {
             category_id: NO_CATEGORIES_ID,
-            name: this.hass.localize("ui.components.category-picker.no_match"),
+            name: this.hass.localize(
+              "ui.components.category-picker.no_categories"
+            ),
             icon: null,
           },
         ] as ScorableCategoryRegistryEntry[];
@@ -237,8 +237,6 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
 
     (ev.target as any).value = this._value;
 
-    this.hass.loadFragmentTranslation("config");
-
     showCategoryRegistryDetailDialog(this, {
       scope: this.scope!,
       suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",

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

@@ -1,6 +1,6 @@
 import { consume } from "@lit-labs/context";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
-import { mdiChevronRight, mdiMenuDown, mdiPlus } from "@mdi/js";
+import { mdiPlus } from "@mdi/js";
 import {
   CSSResultGroup,
   LitElement,
@@ -10,10 +10,8 @@ import {
   nothing,
 } from "lit";
 
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { computeCssColor } from "../../../common/color/compute-color";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import {
@@ -25,29 +23,23 @@ import { LocalizeFunc } from "../../../common/translations/localize";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
-  SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
-import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-battery-icon";
-import "../../../components/ha-alert";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-check-list-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-integrations";
-import "../../../components/ha-filter-labels";
 import "../../../components/ha-filter-states";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-menu-item";
-import "../../../components/ha-sub-menu";
+import "../../../components/ha-alert";
 import { ConfigEntry, sortConfigEntries } from "../../../data/config_entries";
 import { fullEntitiesContext } from "../../../data/context";
 import {
   DeviceEntityLookup,
   DeviceRegistryEntry,
   computeDeviceName,
-  updateDeviceRegistryEntry,
 } from "../../../data/device_registry";
 import {
   EntityRegistryEntry,
@@ -55,31 +47,23 @@ import {
   findBatteryEntity,
 } from "../../../data/entity_registry";
 import { IntegrationManifest } from "../../../data/integration";
-import {
-  LabelRegistryEntry,
-  createLabelRegistryEntry,
-  subscribeLabelRegistry,
-} from "../../../data/label_registry";
 import "../../../layouts/hass-tabs-subpage-data-table";
-import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
-import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 
 interface DeviceRowData extends DeviceRegistryEntry {
   device?: DeviceRowData;
   area?: string;
   integration?: string;
   battery_entity?: [string | undefined, string | undefined];
-  label_entries: EntityRegistryEntry[];
 }
 
 @customElement("ha-config-devices-dashboard")
-export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
+export class HaConfigDeviceDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public narrow = false;
@@ -98,8 +82,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
-  @state() private _selected: string[] = [];
-
   @state() private _filter: string = history.state?.filter || "";
 
   @state() private _filters: Record<
@@ -109,9 +91,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
 
   @state() private _expandedFilter?: string;
 
-  @state()
-  _labels!: LabelRegistryEntry[];
-
   private _ignoreLocationChange = false;
 
   public connectedCallback() {
@@ -194,23 +173,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         },
       };
     }
-    if (this._searchParms.has("label")) {
-      this._filterLabel();
-    }
-  }
-
-  private _filterLabel() {
-    const label = this._searchParms.get("label");
-    if (!label) {
-      return;
-    }
-    this._filters = {
-      ...this._filters,
-      "ha-filter-labels": {
-        value: [label],
-        items: undefined,
-      },
-    };
   }
 
   private _clearFilter() {
@@ -228,17 +190,11 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         string,
         { value: string[] | undefined; items: Set<string> | undefined }
       >,
-      localize: LocalizeFunc,
-      labelReg?: LabelRegistryEntry[]
+      localize: LocalizeFunc
     ) => {
       // Some older installations might have devices pointing at invalid entryIDs
       // So we guard for that.
-      let outputDevices: DeviceRowData[] = Object.values(devices).map(
-        (device) => ({
-          ...device,
-          label_entries: [],
-        })
-      );
+      let outputDevices: DeviceRowData[] = Object.values(devices);
 
       const deviceEntityLookup: DeviceEntityLookup = {};
       for (const entity of entities) {
@@ -265,16 +221,16 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
 
       const filteredDomains = new Set<string>();
 
-      Object.entries(filters).forEach(([key, filter]) => {
-        if (key === "config_entry" && filter.value?.length) {
+      Object.entries(filters).forEach(([key, flter]) => {
+        if (key === "config_entry" && flter.value?.length) {
           outputDevices = outputDevices.filter((device) =>
             device.config_entries.some((entryId) =>
-              filter.value?.includes(entryId)
+              flter.value?.includes(entryId)
             )
           );
 
           const configEntries = entries.filter(
-            (entry) => entry.entry_id && filter.value?.includes(entry.entry_id)
+            (entry) => entry.entry_id && flter.value?.includes(entry.entry_id)
           );
 
           configEntries.forEach((configEntry) => {
@@ -283,21 +239,17 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
           if (configEntries.length === 1) {
             filteredConfigEntry = configEntries[0];
           }
-        } else if (key === "ha-filter-integrations" && filter.value?.length) {
+        } else if (key === "ha-filter-integrations" && flter.value?.length) {
           const entryIds = entries
-            .filter((entry) => filter.value!.includes(entry.domain))
+            .filter((entry) => flter.value!.includes(entry.domain))
             .map((entry) => entry.entry_id);
           outputDevices = outputDevices.filter((device) =>
             device.config_entries.some((entryId) => entryIds.includes(entryId))
           );
-          filter.value!.forEach((domain) => filteredDomains.add(domain));
-        } else if (key === "ha-filter-labels" && filter.value?.length) {
+          flter.value!.forEach((domain) => filteredDomains.add(domain));
+        } else if (flter.items) {
           outputDevices = outputDevices.filter((device) =>
-            device.labels.some((lbl) => filter.value!.includes(lbl))
-          );
-        } else if (filter.items) {
-          outputDevices = outputDevices.filter((device) =>
-            filter.items!.has(device.id)
+            flter.items!.has(device.id)
           );
         }
       });
@@ -318,12 +270,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
             .map((entId) => entryLookup[entId]),
           manifestLookup
         );
-
-        const labels = labelReg && device?.labels;
-        const labelsEntries = (labels || []).map(
-          (lbl) => labelReg!.find((label) => label.label_id === lbl)!
-        );
-
         return {
           ...device,
           name: computeDeviceName(
@@ -360,7 +306,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
             this.hass.states[
               this._batteryEntity(device.id, deviceEntityLookup) || ""
             ]?.state,
-          label_entries: labelsEntries,
         };
       });
 
@@ -406,15 +351,8 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         direction: "asc",
         grows: true,
         template: (device) => html`
-          <div style="font-size: 14px;">${device.name}</div>
+          ${device.name}
           <div class="secondary">${device.area} | ${device.integration}</div>
-          ${device.label_entries.length
-            ? html`
-                <ha-data-table-labels
-                  .labels=${device.label_entries}
-                ></ha-data-table-labels>
-              `
-            : nothing}
         `,
       };
     } else {
@@ -423,18 +361,8 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         main: true,
         sortable: true,
         filterable: true,
-        direction: "asc",
         grows: true,
-        template: (device) => html`
-          <div style="font-size: 14px;">${device.name}</div>
-          ${device.label_entries.length
-            ? html`
-                <ha-data-table-labels
-                  .labels=${device.label_entries}
-                ></ha-data-table-labels>
-              `
-            : nothing}
-        `,
+        direction: "asc",
       };
     }
 
@@ -513,25 +441,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
           ? this.hass.localize("ui.panel.config.devices.disabled")
           : "",
     };
-    columns.labels = {
-      title: "",
-      hidden: true,
-      filterable: true,
-      template: (device) =>
-        device.label_entries.map((lbl) => lbl.name).join(" "),
-    };
-
     return columns;
   });
 
-  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
-    return [
-      subscribeLabelRegistry(this.hass.connection, (labels) => {
-        this._labels = labels;
-      }),
-    ];
-  }
-
   protected render(): TemplateResult {
     const { devicesOutput } = this._devicesAndFilterDomains(
       this.hass.devices,
@@ -540,47 +452,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
       this.hass.areas,
       this.manifests,
       this._filters,
-      this.hass.localize,
-      this._labels
+      this.hass.localize
     );
 
-    const labelItems = html`${this._labels?.map((label) => {
-        const color = label.color ? computeCssColor(label.color) : undefined;
-        const selected = this._selected.every((deviceId) =>
-          this.hass.devices[deviceId]?.labels.includes(label.label_id)
-        );
-        const partial =
-          !selected &&
-          this._selected.some((deviceId) =>
-            this.hass.devices[deviceId]?.labels.includes(label.label_id)
-          );
-        return html`<ha-menu-item
-          .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
-          @click=${this._handleBulkLabel}
-          keep-open
-        >
-          <ha-checkbox
-            slot="start"
-            .checked=${selected}
-            .indeterminate=${partial}
-            reducedTouchTarget
-          ></ha-checkbox>
-          <ha-label style=${color ? `--color: ${color}` : ""}>
-            ${label.icon
-              ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
-              : nothing}
-            ${label.name}
-          </ha-label>
-        </ha-menu-item>`;
-      })}
-      <md-divider role="separator" tabindex="-1"></md-divider>
-      <ha-menu-item @click=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div></ha-menu-item
-      >`;
-
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -595,9 +469,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         )}
         .columns=${this._columns(this.hass.localize, this.narrow)}
         .data=${devicesOutput}
-        selectable
-        .selected=${this._selected.length}
-        @selection-changed=${this._handleSelectionChanged}
         .filter=${this._filter}
         hasFilters
         .filters=${Object.values(this._filters).filter(
@@ -608,7 +479,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         @row-click=${this._handleRowClicked}
         clickable
         hasFab
-        class=${this.narrow ? "narrow" : ""}
       >
         <ha-integration-overflow-menu
           .hass=${this.hass}
@@ -661,58 +531,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-states>
-        <ha-filter-labels
-          .hass=${this.hass}
-          .value=${this._filters["ha-filter-labels"]?.value}
-          @data-table-filter-changed=${this._filterChanged}
-          slot="filter-pane"
-          .expanded=${this._expandedFilter === "ha-filter-labels"}
-          .narrow=${this.narrow}
-          @expanded-changed=${this._filterExpanded}
-        ></ha-filter-labels>
-
-        ${!this.narrow
-          ? html`<ha-button-menu-new slot="selection-bar">
-              <ha-assist-chip
-                slot="trigger"
-                .label=${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_actions.add_label"
-                )}
-              >
-                <ha-svg-icon
-                  slot="trailing-icon"
-                  .path=${mdiMenuDown}
-                ></ha-svg-icon>
-              </ha-assist-chip>
-              ${labelItems}
-            </ha-button-menu-new>`
-          : html` <ha-button-menu-new has-overflow slot="selection-bar"
-              ><ha-assist-chip
-                .label=${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_action"
-                )}
-                slot="trigger"
-              >
-                <ha-svg-icon
-                  slot="trailing-icon"
-                  .path=${mdiMenuDown}
-                ></ha-svg-icon>
-              </ha-assist-chip>
-              <ha-sub-menu>
-                <ha-menu-item slot="item">
-                  <div slot="headline">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_actions.add_label"
-                    )}
-                  </div>
-                  <ha-svg-icon
-                    slot="end"
-                    .path=${mdiChevronRight}
-                  ></ha-svg-icon>
-                </ha-menu-item>
-                <ha-menu slot="menu">${labelItems}</ha-menu>
-              </ha-sub-menu>
-            </ha-button-menu-new>`}
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -772,10 +590,8 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         this.hass.areas,
         this.manifests,
         this._filters,
-        this.hass.localize,
-        this._labels
+        this.hass.localize
       );
-
     if (
       filteredDomains.size === 1 &&
       (PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(
@@ -792,54 +608,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _handleSelectionChanged(
-    ev: HASSDomEvent<SelectionChangedEvent>
-  ): void {
-    this._selected = ev.detail.value;
-  }
-
-  private async _handleBulkLabel(ev) {
-    const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
-    this._bulkLabel(label, action);
-  }
-
-  private async _bulkLabel(label: string, action: "add" | "remove") {
-    const promises: Promise<DeviceRegistryEntry>[] = [];
-    this._selected.forEach((deviceId) => {
-      promises.push(
-        updateDeviceRegistryEntry(this.hass, deviceId, {
-          labels:
-            action === "add"
-              ? this.hass.devices[deviceId].labels.concat(label)
-              : this.hass.devices[deviceId].labels.filter(
-                  (lbl) => lbl !== label
-                ),
-        })
-      );
-    });
-    await Promise.all(promises);
-  }
-
-  private _bulkCreateLabel() {
-    showLabelDetailDialog(this, {
-      createEntry: async (values) => {
-        const label = await createLabelRegistryEntry(this.hass, values);
-        this._bulkLabel(label.label_id, "add");
-        return label;
-      },
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       css`
-        hass-tabs-subpage-data-table {
-          --data-table-row-height: 60px;
-        }
-        hass-tabs-subpage-data-table.narrow {
-          --data-table-row-height: 72px;
-        }
         ha-button-menu {
           margin-left: 8px;
           margin-inline-start: 8px;
@@ -852,16 +623,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
           text-transform: uppercase;
           direction: var(--direction);
         }
-        ha-assist-chip {
-          --ha-assist-chip-container-shape: 10px;
-        }
-        ha-button-menu-new ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
-        }
-        ha-label {
-          --ha-label-background-color: var(--color, var(--grey-color));
-          --ha-label-background-opacity: 0.5;
-        }
       `,
       haStyle,
     ];

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

@@ -3,19 +3,14 @@ import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
   mdiAlertCircle,
   mdiCancel,
-  mdiChevronRight,
   mdiDelete,
-  mdiDotsVertical,
-  mdiEye,
   mdiEyeOff,
-  mdiMenuDown,
   mdiPencilOff,
   mdiPlus,
   mdiRestoreAlert,
-  mdiToggleSwitch,
-  mdiToggleSwitchOffOutline,
+  mdiUndo,
 } from "@mdi/js";
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import { HassEntity } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,
   LitElement,
@@ -29,7 +24,6 @@ import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { until } from "lit/directives/until";
 import memoize from "memoize-one";
-import { computeCssColor } from "../../../common/color/compute-color";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -43,36 +37,26 @@ import type {
   RowClickedEvent,
   SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
-import "../../../components/data-table/ha-data-table-labels";
-import "../../../components/ha-alert";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-check-list-item";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-integrations";
-import "../../../components/ha-filter-labels";
 import "../../../components/ha-filter-states";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-menu-item";
-import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-alert";
 import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
 import { fullEntitiesContext } from "../../../data/context";
 import { UNAVAILABLE } from "../../../data/entity";
 import {
   EntityRegistryEntry,
-  UpdateEntityRegistryEntryResult,
   computeEntityRegistryName,
   removeEntityRegistryEntry,
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
 import { entryIcon } from "../../../data/icons";
-import {
-  LabelRegistryEntry,
-  createLabelRegistryEntry,
-  subscribeLabelRegistry,
-} from "../../../data/label_registry";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -81,17 +65,11 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
-import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
-import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
-import {
-  EntitySources,
-  fetchEntitySourcesWithCache,
-} from "../../../data/entity_sources";
 
 export interface StateEntity
   extends Omit<EntityRegistryEntry, "id" | "unique_id"> {
@@ -108,11 +86,10 @@ export interface EntityRow extends StateEntity {
   status: string | undefined;
   area?: string;
   localized_platform: string;
-  label_entries: LabelRegistryEntry[];
 }
 
 @customElement("ha-config-entities")
-export class HaConfigEntities extends SubscribeMixin(LitElement) {
+export class HaConfigEntities extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public isWide = false;
@@ -138,15 +115,10 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     { value: string[] | undefined; items: Set<string> | undefined }
   > = {};
 
-  @state() private _selected: string[] = [];
+  @state() private _selectedEntities: string[] = [];
 
   @state() private _expandedFilter?: string;
 
-  @state()
-  _labels!: LabelRegistryEntry[];
-
-  @state() private _entitySources?: EntitySources;
-
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
 
@@ -230,21 +202,14 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         filterable: true,
         direction: "asc",
         grows: true,
-        template: (entry) => html`
-          <div style="font-size: 14px;">${entry.name}</div>
-          ${narrow
-            ? html`<div class="secondary">
+        template: narrow
+          ? (entry) => html`
+              ${entry.name}<br />
+              <div class="secondary">
                 ${entry.entity_id} | ${entry.localized_platform}
-              </div>`
-            : nothing}
-          ${entry.label_entries.length
-            ? html`
-                <ha-data-table-labels
-                  .labels=${entry.label_entries}
-                ></ha-data-table-labels>
-              `
-            : nothing}
-        `,
+              </div>
+            `
+          : undefined,
       },
       entity_id: {
         title: localize("ui.panel.config.entities.picker.headers.entity_id"),
@@ -336,13 +301,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
               `
             : "—",
       },
-      labels: {
-        title: "",
-        hidden: true,
-        filterable: true,
-        template: (entry) =>
-          entry.label_entries.map((lbl) => lbl.name).join(" "),
-      },
     })
   );
 
@@ -357,8 +315,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         string,
         { value: string[] | undefined; items: Set<string> | undefined }
       >,
-      entries?: ConfigEntry[],
-      labelReg?: LabelRegistryEntry[]
+      entries?: ConfigEntry[]
     ) => {
       const result: EntityRow[] = [];
 
@@ -380,12 +337,12 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       let filteredConfigEntry: ConfigEntry | undefined;
       const filteredDomains = new Set<string>();
 
-      Object.entries(filters).forEach(([key, filter]) => {
-        if (key === "config_entry" && filter.value?.length) {
+      Object.entries(filters).forEach(([key, flter]) => {
+        if (key === "config_entry" && flter.value?.length) {
           filteredEntities = filteredEntities.filter(
             (entity) =>
               entity.config_entry_id &&
-              filter.value?.includes(entity.config_entry_id)
+              flter.value?.includes(entity.config_entry_id)
           );
 
           if (!entries) {
@@ -394,7 +351,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           }
 
           const configEntries = entries.filter(
-            (entry) => entry.entry_id && filter.value?.includes(entry.entry_id)
+            (entry) => entry.entry_id && flter.value?.includes(entry.entry_id)
           );
 
           configEntries.forEach((configEntry) => {
@@ -403,29 +360,23 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           if (configEntries.length === 1) {
             filteredConfigEntry = configEntries[0];
           }
-        } else if (key === "ha-filter-integrations" && filter.value?.length) {
+        } else if (key === "ha-filter-integrations" && flter.value?.length) {
           if (!entries) {
             this._loadConfigEntries();
             return;
           }
           const entryIds = entries
-            .filter((entry) => filter.value!.includes(entry.domain))
+            .filter((entry) => flter.value!.includes(entry.domain))
             .map((entry) => entry.entry_id);
-
           filteredEntities = filteredEntities.filter(
             (entity) =>
-              filter.value?.includes(entity.platform) ||
-              (entity.config_entry_id &&
-                entryIds.includes(entity.config_entry_id))
+              entity.config_entry_id &&
+              entryIds.includes(entity.config_entry_id)
           );
-          filter.value!.forEach((domain) => filteredDomains.add(domain));
-        } else if (key === "ha-filter-labels" && filter.value?.length) {
+          flter.value!.forEach((domain) => filteredDomains.add(domain));
+        } else if (flter.items) {
           filteredEntities = filteredEntities.filter((entity) =>
-            entity.labels.some((lbl) => filter.value!.includes(lbl))
-          );
-        } else if (filter.items) {
-          filteredEntities = filteredEntities.filter((entity) =>
-            filter.items!.has(entity.entity_id)
+            flter.items!.has(entity.entity_id)
           );
         }
       });
@@ -453,11 +404,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           continue;
         }
 
-        const labels = labelReg && entry?.labels;
-        const labelsEntries = (labels || []).map(
-          (lbl) => labelReg!.find((label) => label.label_id === lbl)!
-        );
-
         result.push({
           ...entry,
           entity,
@@ -485,7 +431,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                     : localize(
                         "ui.panel.config.entities.picker.status.available"
                       ),
-          label_entries: labelsEntries,
         });
       }
 
@@ -493,14 +438,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     }
   );
 
-  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
-    return [
-      subscribeLabelRegistry(this.hass.connection, (labels) => {
-        this._labels = labels;
-      }),
-    ];
-  }
-
   protected render() {
     if (!this.hass || this._entities === undefined) {
       return html` <hass-loading-screen></hass-loading-screen> `;
@@ -514,8 +451,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         this.hass.areas,
         this._stateEntities,
         this._filters,
-        this._entries,
-        this._labels
+        this._entries
       );
 
     const includeAddDeviceFab =
@@ -524,50 +460,13 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         [...filteredDomains][0]
       );
 
-    const labelItems = html` ${this._labels?.map((label) => {
-        const color = label.color ? computeCssColor(label.color) : undefined;
-        const selected = this._selected.every((entityId) =>
-          this.hass.entities[entityId]?.labels.includes(label.label_id)
-        );
-        const partial =
-          !selected &&
-          this._selected.some((entityId) =>
-            this.hass.entities[entityId]?.labels.includes(label.label_id)
-          );
-        return html`<ha-menu-item
-          .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
-          @click=${this._handleBulkLabel}
-          keep-open
-        >
-          <ha-checkbox
-            slot="start"
-            .checked=${selected}
-            .indeterminate=${partial}
-            reducedTouchTarget
-          ></ha-checkbox>
-          <ha-label style=${color ? `--color: ${color}` : ""}>
-            ${label.icon
-              ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
-              : nothing}
-            ${label.name}
-          </ha-label>
-        </ha-menu-item>`;
-      })}
-      <md-divider role="separator" tabindex="-1"></md-divider>
-      <ha-menu-item @click=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div></ha-menu-item
-      >`;
-
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        .backPath=${this._searchParms.has("historyBack")
+          ? undefined
+          : "/config"}
         .route=${this.route}
         .tabs=${configSections.devices}
         .columns=${this._columns(
@@ -580,151 +479,118 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           "ui.panel.config.entities.picker.search"
         )}
         hasFilters
-        .filters=${
-          Object.values(this._filters).filter((filter) => filter.value?.length)
-            .length
-        }
+        .filters=${Object.values(this._filters).filter(
+          (filter) => filter.value?.length
+        ).length}
+        .selected=${this._selectedEntities.length}
         .filter=${this._filter}
         selectable
-        .selected=${this._selected.length}
-        @selection-changed=${this._handleSelectionChanged}
         clickable
+        @selection-changed=${this._handleSelectionChanged}
         @clear-filter=${this._clearFilter}
         @search-changed=${this._handleSearchChange}
         @row-click=${this._openEditEntry}
         id="entity_id"
         .hasFab=${includeAddDeviceFab}
-        class=${this.narrow ? "narrow" : ""}
       >
         <ha-integration-overflow-menu
           .hass=${this.hass}
           slot="toolbar-icon"
         ></ha-integration-overflow-menu>
-
-
-${
-  !this.narrow
-    ? html`<ha-button-menu-new slot="selection-bar">
-        <ha-assist-chip
-          slot="trigger"
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_actions.add_label"
-          )}
-        >
-          <ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon>
-        </ha-assist-chip>
-        ${labelItems}
-      </ha-button-menu-new>`
-    : nothing
-}
-<ha-button-menu-new has-overflow slot="selection-bar">
-  ${
-    this.narrow
-      ? html`<ha-assist-chip
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_action"
-          )}
-          slot="trigger"
-        >
-          <ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon>
-        </ha-assist-chip>`
-      : html`<ha-icon-button
-          .path=${mdiDotsVertical}
-          .label=${"ui.panel.config.automation.picker.bulk_action"}
-          slot="trigger"
-        ></ha-icon-button>`
-  }
-    <ha-svg-icon
-      slot="trailing-icon"
-      .path=${mdiMenuDown}
-    ></ha-svg-icon
-  ></ha-assist-chip>
-  ${
-    this.narrow
-      ? html`<ha-sub-menu>
-            <ha-menu-item slot="item">
-              <div slot="headline">
-                ${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_actions.add_label"
-                )}
-              </div>
-              <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
-            </ha-menu-item>
-            <ha-menu slot="menu">${labelItems}</ha-menu>
-          </ha-sub-menu>
-          <md-divider role="separator" tabindex="-1"></md-divider>`
-      : nothing
-  }
-
-  <ha-menu-item @click=${this._enableSelected}>
-    <ha-svg-icon slot="start" .path=${mdiToggleSwitch}></ha-svg-icon>
-    <div slot="headline">
-      ${this.hass.localize(
-        "ui.panel.config.entities.picker.enable_selected.button"
-      )}
-    </div>
-  </ha-menu-item>
-  <ha-menu-item @click=${this._disableSelected}>
-    <ha-svg-icon
-      slot="start"
-      .path=${mdiToggleSwitchOffOutline}
-    ></ha-svg-icon>
-    <div slot="headline">
-      ${this.hass.localize(
-        "ui.panel.config.entities.picker.disable_selected.button"
-      )}
-    </div>
-  </ha-menu-item>
-  <md-divider role="separator" tabindex="-1"></md-divider>
-
-  <ha-menu-item @click=${this._unhideSelected}>
-    <ha-svg-icon
-      slot="start"
-      .path=${mdiEye}
-    ></ha-svg-icon>
-    <div slot="headline">
-      ${this.hass.localize(
-        "ui.panel.config.entities.picker.unhide_selected.button"
-      )}
-    </div>
-  </ha-menu-item>
-  <ha-menu-item @click=${this._hideSelected}>
-    <ha-svg-icon
-      slot="start"
-      .path=${mdiEyeOff}
-    ></ha-svg-icon>
-    <div slot="headline">
-      ${this.hass.localize(
-        "ui.panel.config.entities.picker.hide_selected.button"
-      )}
-    </div>
-  </ha-menu-item>
-  <md-divider role="separator" tabindex="-1"></md-divider>
-
-  <ha-menu-item @click=${this._removeSelected} class="warning">
-    <ha-svg-icon
-      slot="start"
-      .path=${mdiDelete}
-    ></ha-svg-icon>
-    <div slot="headline">
-      ${this.hass.localize(
-        "ui.panel.config.entities.picker.remove_selected.button"
-      )}
-    </div>
-  </ha-menu-item>
-
-</ha-button-menu-new>
-        ${
-          this._filters.config_entry?.value?.length
-            ? html`<ha-alert slot="filter-pane">
-                Filtering by config entry
-                ${this._entries?.find(
-                  (entry) =>
-                    entry.entry_id === this._filters.config_entry!.value![0]
-                )?.title || this._filters.config_entry.value[0]}
-              </ha-alert>`
-            : nothing
-        }
+        <div class="header-btns" slot="selection-bar">
+          ${!this.narrow
+            ? html`
+                <mwc-button
+                  @click=${this._enableSelected}
+                  .disabled=${!this._selectedEntities.length}
+                  >${this.hass.localize(
+                    "ui.panel.config.entities.picker.enable_selected.button"
+                  )}</mwc-button
+                >
+                <mwc-button
+                  @click=${this._disableSelected}
+                  .disabled=${!this._selectedEntities.length}
+                  >${this.hass.localize(
+                    "ui.panel.config.entities.picker.disable_selected.button"
+                  )}</mwc-button
+                >
+                <mwc-button
+                  @click=${this._hideSelected}
+                  .disabled=${!this._selectedEntities.length}
+                  >${this.hass.localize(
+                    "ui.panel.config.entities.picker.hide_selected.button"
+                  )}</mwc-button
+                >
+                <mwc-button
+                  @click=${this._removeSelected}
+                  .disabled=${!this._selectedEntities.length}
+                  class="warning"
+                  >${this.hass.localize(
+                    "ui.panel.config.entities.picker.remove_selected.button"
+                  )}</mwc-button
+                >
+              `
+            : html`
+                <ha-icon-button
+                  id="enable-btn"
+                  .disabled=${!this._selectedEntities.length}
+                  @click=${this._enableSelected}
+                  .path=${mdiUndo}
+                  .label=${this.hass.localize("ui.common.enable")}
+                ></ha-icon-button>
+                <simple-tooltip animation-delay="0" for="enable-btn">
+                  ${this.hass.localize(
+                    "ui.panel.config.entities.picker.enable_selected.button"
+                  )}
+                </simple-tooltip>
+                <ha-icon-button
+                  id="disable-btn"
+                  .disabled=${!this._selectedEntities.length}
+                  @click=${this._disableSelected}
+                  .path=${mdiCancel}
+                  .label=${this.hass.localize("ui.common.disable")}
+                ></ha-icon-button>
+                <simple-tooltip animation-delay="0" for="disable-btn">
+                  ${this.hass.localize(
+                    "ui.panel.config.entities.picker.disable_selected.button"
+                  )}
+                </simple-tooltip>
+                <ha-icon-button
+                  id="hide-btn"
+                  .disabled=${!this._selectedEntities.length}
+                  @click=${this._hideSelected}
+                  .path=${mdiEyeOff}
+                  .label=${this.hass.localize("ui.common.hide")}
+                ></ha-icon-button>
+                <simple-tooltip animation-delay="0" for="hide-btn">
+                  ${this.hass.localize(
+                    "ui.panel.config.entities.picker.hide_selected.button"
+                  )}
+                </simple-tooltip>
+                <ha-icon-button
+                  class="warning"
+                  id="remove-btn"
+                  .disabled=${!this._selectedEntities.length}
+                  @click=${this._removeSelected}
+                  .path=${mdiDelete}
+                  .label=${this.hass.localize("ui.common.remove")}
+                ></ha-icon-button>
+                <simple-tooltip animation-delay="0" for="remove-btn">
+                  ${this.hass.localize(
+                    "ui.panel.config.entities.picker.remove_selected.button"
+                  )}
+                </simple-tooltip>
+              `}
+        </div>
+        ${this._filters.config_entry?.value?.length
+          ? html`<ha-alert slot="filter-pane">
+              Filtering by config entry
+              ${this._entries?.find(
+                (entry) =>
+                  entry.entry_id === this._filters.config_entry!.value![0]
+              )?.title || this._filters.config_entry.value[0]}
+            </ha-alert>`
+          : nothing}
         <ha-filter-floor-areas
           .hass=${this.hass}
           type="entity"
@@ -767,29 +633,16 @@ ${
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-states>
-        <ha-filter-labels
-          .hass=${this.hass}
-          .value=${this._filters["ha-filter-labels"]?.value}
-          @data-table-filter-changed=${this._filterChanged}
-          slot="filter-pane"
-          .expanded=${this._expandedFilter === "ha-filter-labels"}
-          .narrow=${this.narrow}
-          @expanded-changed=${this._filterExpanded}
-        ></ha-filter-labels>
-        ${
-          includeAddDeviceFab
-            ? html`<ha-fab
-                .label=${this.hass.localize(
-                  "ui.panel.config.devices.add_device"
-                )}
-                extended
-                @click=${this._addDevice}
-                slot="fab"
-              >
-                <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-              </ha-fab>`
-            : nothing
-        }
+        ${includeAddDeviceFab
+          ? html`<ha-fab
+              .label=${this.hass.localize("ui.panel.config.devices.add_device")}
+              extended
+              @click=${this._addDevice}
+              slot="fab"
+            >
+              <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+            </ha-fab>`
+          : nothing}
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -815,9 +668,6 @@ ${
       },
     };
     this._setFiltersFromUrl();
-    fetchEntitySourcesWithCache(this.hass).then((sources) => {
-      this._entitySources = sources;
-    });
   }
 
   private _setFiltersFromUrl() {
@@ -853,41 +703,20 @@ ${
         },
       };
     }
-    if (this._searchParms.has("label")) {
-      this._filterLabel();
-    }
-  }
-
-  private _filterLabel() {
-    const label = this._searchParms.get("label");
-    if (!label) {
-      return;
-    }
-    this._filters = {
-      ...this._filters,
-      "ha-filter-labels": {
-        value: [label],
-        items: undefined,
-      },
-    };
   }
 
   private _clearFilter() {
     this._filters = {};
   }
 
-  public willUpdate(changedProps: PropertyValues): void {
+  public willUpdate(changedProps: PropertyValues<this>): void {
     super.willUpdate(changedProps);
     const oldHass = changedProps.get("hass");
     let changed = false;
     if (!this.hass || !this._entities) {
       return;
     }
-    if (
-      changedProps.has("hass") ||
-      changedProps.has("_entities") ||
-      changedProps.has("_entitySources")
-    ) {
+    if (changedProps.has("hass") || changedProps.has("_entities")) {
       const stateEntities: StateEntity[] = [];
       const regEntityIds = new Set(
         this._entities.map((entity) => entity.entity_id)
@@ -898,7 +727,6 @@ ${
         }
         if (
           !oldHass ||
-          changedProps.has("_entitySources") ||
           this.hass.states[entityId] !== oldHass.states[entityId]
         ) {
           changed = true;
@@ -906,8 +734,7 @@ ${
         stateEntities.push({
           name: computeStateName(this.hass.states[entityId]),
           entity_id: entityId,
-          platform:
-            this._entitySources?.[entityId]?.domain || computeDomain(entityId),
+          platform: computeDomain(entityId),
           disabled_by: null,
           hidden_by: null,
           area_id: null,
@@ -937,14 +764,14 @@ ${
   private _handleSelectionChanged(
     ev: HASSDomEvent<SelectionChangedEvent>
   ): void {
-    this._selected = ev.detail.value;
+    this._selectedEntities = ev.detail.value;
   }
 
   private async _enableSelected() {
     showConfirmationDialog(this, {
       title: this.hass.localize(
         "ui.panel.config.entities.picker.enable_selected.confirm_title",
-        { number: this._selected.length }
+        { number: this._selectedEntities.length }
       ),
       text: this.hass.localize(
         "ui.panel.config.entities.picker.enable_selected.confirm_text"
@@ -955,7 +782,7 @@ ${
         let require_restart = false;
         let reload_delay = 0;
         await Promise.all(
-          this._selected.map(async (entity) => {
+          this._selectedEntities.map(async (entity) => {
             const result = await updateEntityRegistryEntry(this.hass, entity, {
               disabled_by: null,
             });
@@ -992,7 +819,7 @@ ${
     showConfirmationDialog(this, {
       title: this.hass.localize(
         "ui.panel.config.entities.picker.disable_selected.confirm_title",
-        { number: this._selected.length }
+        { number: this._selectedEntities.length }
       ),
       text: this.hass.localize(
         "ui.panel.config.entities.picker.disable_selected.confirm_text"
@@ -1000,7 +827,7 @@ ${
       confirmText: this.hass.localize("ui.common.disable"),
       dismissText: this.hass.localize("ui.common.cancel"),
       confirm: () => {
-        this._selected.forEach((entity) =>
+        this._selectedEntities.forEach((entity) =>
           updateEntityRegistryEntry(this.hass, entity, {
             disabled_by: "user",
           })
@@ -1014,7 +841,7 @@ ${
     showConfirmationDialog(this, {
       title: this.hass.localize(
         "ui.panel.config.entities.picker.hide_selected.confirm_title",
-        { number: this._selected.length }
+        { number: this._selectedEntities.length }
       ),
       text: this.hass.localize(
         "ui.panel.config.entities.picker.hide_selected.confirm_text"
@@ -1022,7 +849,7 @@ ${
       confirmText: this.hass.localize("ui.common.hide"),
       dismissText: this.hass.localize("ui.common.cancel"),
       confirm: () => {
-        this._selected.forEach((entity) =>
+        this._selectedEntities.forEach((entity) =>
           updateEntityRegistryEntry(this.hass, entity, {
             hidden_by: "user",
           })
@@ -1032,66 +859,22 @@ ${
     });
   }
 
-  private _unhideSelected() {
-    this._selected.forEach((entity) =>
-      updateEntityRegistryEntry(this.hass, entity, {
-        hidden_by: null,
-      })
-    );
-    this._clearSelection();
-  }
-
-  private async _handleBulkLabel(ev) {
-    const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
-    await this._bulkLabel(label, action);
-  }
-
-  private async _bulkLabel(label: string, action: "add" | "remove") {
-    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
-    this._selected.forEach((entityId) => {
-      const entityReg =
-        this.hass.entities[entityId] ||
-        this._entities.find((entReg) => entReg.entity_id === entityId);
-      if (!entityReg) {
-        return;
-      }
-      promises.push(
-        updateEntityRegistryEntry(this.hass, entityId, {
-          labels:
-            action === "add"
-              ? entityReg.labels.concat(label)
-              : entityReg.labels.filter((lbl) => lbl !== label),
-        })
-      );
-    });
-    await Promise.all(promises);
-  }
-
-  private _bulkCreateLabel() {
-    showLabelDetailDialog(this, {
-      createEntry: async (values) => {
-        const label = await createLabelRegistryEntry(this.hass, values);
-        this._bulkLabel(label.label_id, "add");
-        return label;
-      },
-    });
-  }
-
   private _removeSelected() {
-    const removeableEntities = this._selected.filter((entity) => {
+    const removeableEntities = this._selectedEntities.filter((entity) => {
       const stateObj = this.hass.states[entity];
       return stateObj?.attributes.restored;
     });
     showConfirmationDialog(this, {
       title: this.hass.localize(
         `ui.panel.config.entities.picker.remove_selected.confirm_${
-          removeableEntities.length !== this._selected.length ? "partly_" : ""
+          removeableEntities.length !== this._selectedEntities.length
+            ? "partly_"
+            : ""
         }title`,
         { number: removeableEntities.length }
       ),
       text:
-        removeableEntities.length === this._selected.length
+        removeableEntities.length === this._selectedEntities.length
           ? this.hass.localize(
               "ui.panel.config.entities.picker.remove_selected.confirm_text"
             )
@@ -1099,7 +882,7 @@ ${
               "ui.panel.config.entities.picker.remove_selected.confirm_partly_text",
               {
                 removable: removeableEntities.length,
-                selected: this._selected.length,
+                selected: this._selectedEntities.length,
               }
             ),
       confirmText: this.hass.localize("ui.common.remove"),
@@ -1135,8 +918,7 @@ ${
         this.hass.areas,
         this._stateEntities,
         this._filters,
-        this._entries,
-        this._labels
+        this._entries
       );
     if (
       filteredDomains.size === 1 &&
@@ -1158,12 +940,6 @@ ${
     return [
       haStyle,
       css`
-        hass-tabs-subpage-data-table {
-          --data-table-row-height: 60px;
-        }
-        hass-tabs-subpage-data-table.narrow {
-          --data-table-row-height: 72px;
-        }
         hass-loading-screen {
           --app-header-background-color: var(--sidebar-background-color);
           --app-header-text-color: var(--sidebar-text-color);
@@ -1225,17 +1001,6 @@ ${
           text-transform: uppercase;
           direction: var(--direction);
         }
-
-        ha-assist-chip {
-          --ha-assist-chip-container-shape: 10px;
-        }
-        ha-button-menu-new ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
-        }
-        ha-label {
-          --ha-label-background-color: var(--color, var(--grey-color));
-          --ha-label-background-opacity: 0.5;
-        }
       `,
     ];
   }

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

@@ -1,30 +1,9 @@
-import { consume } from "@lit-labs/context";
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
-import {
-  mdiAlertCircle,
-  mdiChevronRight,
-  mdiCog,
-  mdiDotsVertical,
-  mdiMenuDown,
-  mdiPencilOff,
-  mdiPlus,
-  mdiTag,
-} from "@mdi/js";
+import { mdiAlertCircle, mdiPencilOff, mdiPlus } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  CSSResultGroup,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-  css,
-  html,
-  nothing,
-} from "lit";
+import { LitElement, PropertyValues, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { computeCssColor } from "../../../common/color/compute-color";
-import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { navigate } from "../../../common/navigate";
 import {
@@ -35,42 +14,21 @@ import { extractSearchParam } from "../../../common/url/search-params";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
-  SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
-import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-fab";
-import "../../../components/ha-filter-categories";
-import "../../../components/ha-filter-devices";
-import "../../../components/ha-filter-entities";
-import "../../../components/ha-filter-floor-areas";
-import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon";
-import "../../../components/ha-icon-overflow-menu";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
-import {
-  CategoryRegistryEntry,
-  createCategoryRegistryEntry,
-  subscribeCategoryRegistry,
-} from "../../../data/category_registry";
 import {
   ConfigEntry,
   subscribeConfigEntries,
 } from "../../../data/config_entries";
 import { getConfigFlowHandlers } from "../../../data/config_flow";
-import { fullEntitiesContext } from "../../../data/context";
 import {
   EntityRegistryEntry,
-  UpdateEntityRegistryEntryResult,
   subscribeEntityRegistry,
-  updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
 import { domainToName } from "../../../data/integration";
-import {
-  LabelRegistryEntry,
-  createLabelRegistryEntry,
-  subscribeLabelRegistry,
-} from "../../../data/label_registry";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
 import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-options-flow";
 import {
@@ -81,13 +39,9 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
-import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
-import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
-import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 import { isHelperDomain } from "./const";
 import { showHelperDetailDialog } from "./show-dialog-helper-detail";
 
@@ -100,8 +54,6 @@ type HelperItem = {
   type: string;
   configEntry?: ConfigEntry;
   entity?: HassEntity;
-  category: string | undefined;
-  label_entries: LabelRegistryEntry[];
 };
 
 // This groups items by a key but only returns last entry per key.
@@ -141,33 +93,6 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
 
   @state() private _configEntries?: Record<string, ConfigEntry>;
 
-  @state() private _selected: string[] = [];
-
-  @state() private _activeFilters?: string[];
-
-  @state() private _filters: Record<
-    string,
-    { value: string[] | undefined; items: Set<string> | undefined }
-  > = {};
-
-  @state() private _expandedFilter?: string;
-
-  @state()
-  _categories!: CategoryRegistryEntry[];
-
-  @state()
-  _labels!: LabelRegistryEntry[];
-
-  @state()
-  @consume({ context: fullEntitiesContext, subscribe: true })
-  _entityReg!: EntityRegistryEntry[];
-
-  @state() private _filteredStateItems?: string[] | null;
-
-  private _sizeController = new ResizeController(this, {
-    callback: (entries) => entries[0]?.contentRect.width,
-  });
-
   public hassSubscribe() {
     return [
       subscribeConfigEntries(
@@ -192,89 +117,58 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
       subscribeEntityRegistry(this.hass.connection!, (entries) => {
         this._entityEntries = groupByOne(entries, (entry) => entry.entity_id);
       }),
-      subscribeLabelRegistry(this.hass.connection, (labels) => {
-        this._labels = labels;
-      }),
-      subscribeCategoryRegistry(
-        this.hass.connection,
-        "helpers",
-        (categories) => {
-          this._categories = categories;
-        }
-      ),
     ];
   }
 
   private _columns = memoizeOne(
-    (
-      narrow: boolean,
-      localize: LocalizeFunc
-    ): DataTableColumnContainer<HelperItem> => ({
-      icon: {
-        title: "",
-        label: localize("ui.panel.config.helpers.picker.headers.icon"),
-        type: "icon",
-        template: (helper) =>
-          helper.entity
-            ? html`<ha-state-icon
-                .hass=${this.hass}
-                .stateObj=${helper.entity}
-              ></ha-state-icon>`
-            : html`<ha-svg-icon
-                .path=${helper.icon}
-                style="color: var(--error-color)"
-              ></ha-svg-icon>`,
-      },
-      name: {
-        title: localize("ui.panel.config.helpers.picker.headers.name"),
-        main: true,
-        sortable: true,
-        filterable: true,
-        grows: true,
-        direction: "asc",
-        template: (helper) => html`
-          <div style="font-size: 14px;">${helper.name}</div>
-          ${narrow
-            ? html`<div class="secondary">${helper.entity_id}</div> `
-            : nothing}
-          ${helper.label_entries.length
-            ? html`
-                <ha-data-table-labels
-                  .labels=${helper.label_entries}
-                ></ha-data-table-labels>
-              `
-            : nothing}
-        `,
-      },
-      entity_id: {
-        title: localize("ui.panel.config.helpers.picker.headers.entity_id"),
-        hidden: this.narrow,
-        sortable: true,
-        filterable: true,
-        width: "25%",
-      },
-      category: {
-        title: localize("ui.panel.config.helpers.picker.headers.category"),
-        hidden: true,
-        groupable: true,
-        filterable: true,
-        sortable: true,
-      },
-      labels: {
-        title: "",
-        hidden: true,
-        filterable: true,
-        template: (helper) =>
-          helper.label_entries.map((lbl) => lbl.name).join(" "),
-      },
-      localized_type: {
+    (narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
+      const columns: DataTableColumnContainer<HelperItem> = {
+        icon: {
+          title: "",
+          label: localize("ui.panel.config.helpers.picker.headers.icon"),
+          type: "icon",
+          template: (helper) =>
+            helper.entity
+              ? html`<ha-state-icon
+                  .hass=${this.hass}
+                  .stateObj=${helper.entity}
+                ></ha-state-icon>`
+              : html`<ha-svg-icon
+                  .path=${helper.icon}
+                  style="color: var(--error-color)"
+                ></ha-svg-icon>`,
+        },
+        name: {
+          title: localize("ui.panel.config.helpers.picker.headers.name"),
+          main: true,
+          sortable: true,
+          filterable: true,
+          grows: true,
+          direction: "asc",
+          template: (helper) => html`
+            ${helper.name}
+            ${narrow
+              ? html`<div class="secondary">${helper.entity_id}</div> `
+              : ""}
+          `,
+        },
+      };
+      if (!narrow) {
+        columns.entity_id = {
+          title: localize("ui.panel.config.helpers.picker.headers.entity_id"),
+          sortable: true,
+          filterable: true,
+          width: "25%",
+        };
+      }
+      columns.localized_type = {
         title: localize("ui.panel.config.helpers.picker.headers.type"),
         sortable: true,
         width: "25%",
         filterable: true,
         groupable: true,
-      },
-      editable: {
+      };
+      columns.editable = {
         title: "",
         label: this.hass.localize(
           "ui.panel.config.helpers.picker.headers.editable"
@@ -297,36 +191,9 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
               `
             : ""}
         `,
-      },
-      actions: {
-        title: "",
-        width: "64px",
-        type: "overflow-menu",
-        template: (helper) => html`
-          <ha-icon-overflow-menu
-            .hass=${this.hass}
-            narrow
-            .items=${[
-              {
-                path: mdiCog,
-                label: this.hass.localize(
-                  "ui.panel.config.automation.picker.show_settings"
-                ),
-                action: () => this._openSettings(helper),
-              },
-              {
-                path: mdiTag,
-                label: this.hass.localize(
-                  `ui.panel.config.automation.picker.${helper.category ? "edit_category" : "assign_category"}`
-                ),
-                action: () => this._editCategory(helper),
-              },
-            ]}
-          >
-          </ha-icon-overflow-menu>
-        `,
-      },
-    })
+      };
+      return columns;
+    }
   );
 
   private _getItems = memoizeOne(
@@ -334,16 +201,8 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
       localize: LocalizeFunc,
       stateItems: HassEntity[],
       entityEntries: Record<string, EntityRegistryEntry>,
-      configEntries: Record<string, ConfigEntry>,
-      entityReg: EntityRegistryEntry[],
-      categoryReg?: CategoryRegistryEntry[],
-      labelReg?: LabelRegistryEntry[],
-      filteredStateItems?: string[] | null
+      configEntries: Record<string, ConfigEntry>
     ): HelperItem[] => {
-      if (filteredStateItems === null) {
-        return [];
-      }
-
       const configEntriesCopy = { ...configEntries };
 
       const states = stateItems.map((entityState) => {
@@ -380,36 +239,16 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         type: configEntry.domain,
         configEntry,
         entity: undefined,
-        selectable: false,
       }));
 
-      return [...states, ...entries]
-        .filter((item) =>
-          filteredStateItems
-            ? filteredStateItems?.includes(item.entity_id)
-            : true
-        )
-        .map((item) => {
-          const entityRegEntry = entityReg.find(
-            (reg) => reg.entity_id === item.entity_id
-          );
-          const labels = labelReg && entityRegEntry?.labels;
-          const category = entityRegEntry?.categories.helpers;
-          return {
-            ...item,
-            localized_type: item.configEntry
-              ? domainToName(localize, item.type)
-              : localize(
-                  `ui.panel.config.helpers.types.${item.type}` as LocalizeKeys
-                ) || item.type,
-            label_entries: (labels || []).map(
-              (lbl) => labelReg!.find((label) => label.label_id === lbl)!
-            ),
-            category: category
-              ? categoryReg?.find((cat) => cat.category_id === category)?.name
-              : undefined,
-          };
-        });
+      return [...states, ...entries].map((item) => ({
+        ...item,
+        localized_type: item.configEntry
+          ? domainToName(localize, item.type)
+          : localize(
+              `ui.panel.config.helpers.types.${item.type}` as LocalizeKeys
+            ) || item.type,
+      }));
     }
   );
 
@@ -423,69 +262,6 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
-    const categoryItems = html`${this._categories?.map(
-        (category) =>
-          html`<ha-menu-item
-            .value=${category.category_id}
-            @click=${this._handleBulkCategory}
-          >
-            ${category.icon
-              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
-            <div slot="headline">${category.name}</div>
-          </ha-menu-item>`
-      )}
-      <ha-menu-item .value=${null} @click=${this._handleBulkCategory}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_actions.no_category"
-          )}
-        </div>
-      </ha-menu-item>
-      <md-divider role="separator" tabindex="-1"></md-divider>
-      <ha-menu-item @click=${this._bulkCreateCategory}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.category.editor.add")}
-        </div>
-      </ha-menu-item>`;
-    const labelItems = html`${this._labels?.map((label) => {
-        const color = label.color ? computeCssColor(label.color) : undefined;
-        const selected = this._selected.every((entityId) =>
-          this.hass.entities[entityId]?.labels.includes(label.label_id)
-        );
-        const partial =
-          !selected &&
-          this._selected.some((entityId) =>
-            this.hass.entities[entityId]?.labels.includes(label.label_id)
-          );
-        return html`<ha-menu-item
-          .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
-          @click=${this._handleBulkLabel}
-          keep-open
-        >
-          <ha-checkbox
-            slot="start"
-            .checked=${selected}
-            .indeterminate=${partial}
-            reducedTouchTarget
-          ></ha-checkbox>
-          <ha-label style=${color ? `--color: ${color}` : ""}>
-            ${label.icon
-              ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
-              : nothing}
-            ${label.name}
-          </ha-label>
-        </ha-menu-item> `;
-      })}<md-divider role="separator" tabindex="-1"></md-divider>
-      <ha-menu-item @click=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div>
-      </ha-menu-item>`;
-    const labelsInOverflow =
-      (this._sizeController.value && this._sizeController.value < 700) ||
-      (!this._sizeController.value && this.hass.dockedSidebar === "docked");
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -493,173 +269,20 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.devices}
-        selectable
-        .selected=${this._selected.length}
-        @selection-changed=${this._handleSelectionChanged}
-        hasFilters
-        .filters=${Object.values(this._filters).filter(
-          (filter) => filter.value?.length
-        ).length}
         .columns=${this._columns(this.narrow, this.hass.localize)}
         .data=${this._getItems(
           this.hass.localize,
           this._stateItems,
           this._entityEntries,
-          this._configEntries,
-          this._entityReg,
-          this._categories,
-          this._labels,
-          this._filteredStateItems
+          this._configEntries
         )}
-        initialGroupColumn="category"
-        .activeFilters=${this._activeFilters}
-        @clear-filter=${this._clearFilter}
         @row-click=${this._openEditDialog}
         hasFab
         clickable
         .noDataText=${this.hass.localize(
           "ui.panel.config.helpers.picker.no_helpers"
         )}
-        class=${this.narrow ? "narrow" : ""}
       >
-        <ha-filter-floor-areas
-          .hass=${this.hass}
-          .type=${"entity"}
-          .value=${this._filters["ha-filter-floor-areas"]?.value}
-          @data-table-filter-changed=${this._filterChanged}
-          slot="filter-pane"
-          .expanded=${this._expandedFilter === "ha-filter-floor-areas"}
-          .narrow=${this.narrow}
-          @expanded-changed=${this._filterExpanded}
-        ></ha-filter-floor-areas>
-        <ha-filter-devices
-          .hass=${this.hass}
-          .type=${"entity"}
-          .value=${this._filters["ha-filter-devices"]?.value}
-          @data-table-filter-changed=${this._filterChanged}
-          slot="filter-pane"
-          .expanded=${this._expandedFilter === "ha-filter-devices"}
-          .narrow=${this.narrow}
-          @expanded-changed=${this._filterExpanded}
-        ></ha-filter-devices>
-        <ha-filter-labels
-          .hass=${this.hass}
-          .value=${this._filters["ha-filter-labels"]?.value}
-          @data-table-filter-changed=${this._filterChanged}
-          slot="filter-pane"
-          .expanded=${this._expandedFilter === "ha-filter-labels"}
-          .narrow=${this.narrow}
-          @expanded-changed=${this._filterExpanded}
-        ></ha-filter-labels>
-        <ha-filter-categories
-          .hass=${this.hass}
-          scope="helpers"
-          .value=${this._filters["ha-filter-categories"]?.value}
-          @data-table-filter-changed=${this._filterChanged}
-          slot="filter-pane"
-          .expanded=${this._expandedFilter === "ha-filter-categories"}
-          .narrow=${this.narrow}
-          @expanded-changed=${this._filterExpanded}
-        ></ha-filter-categories>
-
-        ${!this.narrow
-          ? html`<ha-button-menu-new slot="selection-bar">
-                <ha-assist-chip
-                  slot="trigger"
-                  .label=${this.hass.localize(
-                    "ui.panel.config.automation.picker.bulk_actions.move_category"
-                  )}
-                >
-                  <ha-svg-icon
-                    slot="trailing-icon"
-                    .path=${mdiMenuDown}
-                  ></ha-svg-icon>
-                </ha-assist-chip>
-                ${categoryItems}
-              </ha-button-menu-new>
-              ${labelsInOverflow
-                ? nothing
-                : html`<ha-button-menu-new slot="selection-bar">
-                    <ha-assist-chip
-                      slot="trigger"
-                      .label=${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.add_label"
-                      )}
-                    >
-                      <ha-svg-icon
-                        slot="trailing-icon"
-                        .path=${mdiMenuDown}
-                      ></ha-svg-icon>
-                    </ha-assist-chip>
-                    ${labelItems}
-                  </ha-button-menu-new>`}`
-          : nothing}
-        ${this.narrow || labelsInOverflow
-          ? html`
-          <ha-button-menu-new has-overflow slot="selection-bar">
-            ${
-              this.narrow
-                ? html`<ha-assist-chip
-                    .label=${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_action"
-                    )}
-                    slot="trigger"
-                  >
-                    <ha-svg-icon
-                      slot="trailing-icon"
-                      .path=${mdiMenuDown}
-                    ></ha-svg-icon>
-                  </ha-assist-chip>`
-                : html`<ha-icon-button
-                    .path=${mdiDotsVertical}
-                    .label=${"ui.panel.config.automation.picker.bulk_action"}
-                    slot="trigger"
-                  ></ha-icon-button>`
-            }
-              <ha-svg-icon
-                slot="trailing-icon"
-                .path=${mdiMenuDown}
-              ></ha-svg-icon
-            ></ha-assist-chip>
-            ${
-              this.narrow
-                ? html`<ha-sub-menu>
-                    <ha-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.move_category"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-menu-item>
-                    <ha-menu slot="menu">${categoryItems}</ha-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            ${
-              this.narrow || this.hass.dockedSidebar === "docked"
-                ? html` <ha-sub-menu>
-                    <ha-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.add_label"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-menu-item>
-                    <ha-menu slot="menu">${labelItems}</ha-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-          </ha-button-menu-new>`
-          : nothing}
-
         <ha-integration-overflow-menu
           .hass=${this.hass}
           slot="toolbar-icon"
@@ -670,7 +293,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
             "ui.panel.config.helpers.picker.create_helper"
           )}
           extended
-          @click=${this._createHelper}
+          @click=${this._createHelpler}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>
@@ -678,151 +301,6 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
     `;
   }
 
-  private _filterExpanded(ev) {
-    if (ev.detail.expanded) {
-      this._expandedFilter = ev.target.localName;
-    } else if (this._expandedFilter === ev.target.localName) {
-      this._expandedFilter = undefined;
-    }
-  }
-
-  private _filterChanged(ev) {
-    const type = ev.target.localName;
-    this._filters[type] = ev.detail;
-    this._applyFilters();
-  }
-
-  private _applyFilters() {
-    const filters = Object.entries(this._filters);
-    let items: Set<string> | undefined;
-    for (const [key, filter] of filters) {
-      if (filter.items) {
-        if (!items) {
-          items = filter.items;
-          continue;
-        }
-        items =
-          "intersection" in items
-            ? // @ts-ignore
-              items.intersection(filter.items)
-            : new Set([...items].filter((x) => filter.items!.has(x)));
-      }
-      if (key === "ha-filter-labels" && filter.value?.length) {
-        const labelItems: Set<string> = new Set();
-        this._stateItems
-          .filter((stateItem) =>
-            this._entityReg
-              .find((reg) => reg.entity_id === stateItem.entity_id)
-              ?.labels.some((lbl) => filter.value!.includes(lbl))
-          )
-          .forEach((stateItem) => labelItems.add(stateItem.entity_id));
-        if (!items) {
-          items = labelItems;
-          continue;
-        }
-        items =
-          "intersection" in items
-            ? // @ts-ignore
-              items.intersection(labelItems)
-            : new Set([...items].filter((x) => labelItems!.has(x)));
-      }
-      if (key === "ha-filter-categories" && filter.value?.length) {
-        const categoryItems: Set<string> = new Set();
-        this._stateItems
-          .filter(
-            (stateItem) =>
-              filter.value![0] ===
-              this._entityReg.find(
-                (reg) => reg.entity_id === stateItem.entity_id
-              )?.categories.helpers
-          )
-          .forEach((stateItem) => categoryItems.add(stateItem.entity_id));
-        if (!items) {
-          items = categoryItems;
-          continue;
-        }
-        items =
-          "intersection" in items
-            ? // @ts-ignore
-              items.intersection(categoryItems)
-            : new Set([...items].filter((x) => categoryItems!.has(x)));
-      }
-    }
-    this._filteredStateItems = items ? [...items] : undefined;
-  }
-
-  private _clearFilter() {
-    this._filters = {};
-    this._applyFilters();
-  }
-
-  private _editCategory(helper: any) {
-    const entityReg = this._entityReg.find(
-      (reg) => reg.entity_id === helper.entity_id
-    );
-    if (!entityReg) {
-      showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.automation.picker.no_category_support"
-        ),
-        text: this.hass.localize(
-          "ui.panel.config.automation.picker.no_category_entity_reg"
-        ),
-      });
-      return;
-    }
-    showAssignCategoryDialog(this, {
-      scope: "helpers",
-      entityReg,
-    });
-  }
-
-  private async _handleBulkCategory(ev) {
-    const category = ev.currentTarget.value;
-    this._bulkAddCategory(category);
-  }
-
-  private async _bulkAddCategory(category: string) {
-    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
-    this._selected.forEach((entityId) => {
-      promises.push(
-        updateEntityRegistryEntry(this.hass, entityId, {
-          categories: { helpers: category },
-        })
-      );
-    });
-    await Promise.all(promises);
-  }
-
-  private async _handleBulkLabel(ev) {
-    const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
-    this._bulkLabel(label, action);
-  }
-
-  private async _bulkLabel(label: string, action: "add" | "remove") {
-    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
-    this._selected.forEach((entityId) => {
-      promises.push(
-        updateEntityRegistryEntry(this.hass, entityId, {
-          labels:
-            action === "add"
-              ? this.hass.entities[entityId].labels.concat(label)
-              : this.hass.entities[entityId].labels.filter(
-                  (lbl) => lbl !== label
-                ),
-        })
-      );
-    });
-    await Promise.all(promises);
-  }
-
-  private _handleSelectionChanged(
-    ev: HASSDomEvent<SelectionChangedEvent>
-  ): void {
-    this._selected = ev.detail.value;
-  }
-
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     if (this.route.path === "/add") {
@@ -940,72 +418,9 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _openSettings(helper: HelperItem) {
-    if (helper.entity) {
-      showMoreInfoDialog(this, {
-        entityId: helper.entity_id,
-        view: "settings",
-      });
-    } else {
-      showOptionsFlowDialog(this, helper.configEntry!);
-    }
-  }
-
-  private _createHelper() {
+  private _createHelpler() {
     showHelperDetailDialog(this, {});
   }
-
-  private async _bulkCreateCategory() {
-    showCategoryRegistryDetailDialog(this, {
-      scope: "helpers",
-      createEntry: async (values) => {
-        const category = await createCategoryRegistryEntry(
-          this.hass,
-          "helpers",
-          values
-        );
-        this._bulkAddCategory(category.category_id);
-        return category;
-      },
-    });
-  }
-
-  private _bulkCreateLabel() {
-    showLabelDetailDialog(this, {
-      createEntry: async (values) => {
-        const label = await createLabelRegistryEntry(this.hass, values);
-        this._bulkLabel(label.label_id, "add");
-        return label;
-      },
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        :host {
-          display: block;
-        }
-        hass-tabs-subpage-data-table {
-          --data-table-row-height: 60px;
-        }
-        hass-tabs-subpage-data-table.narrow {
-          --data-table-row-height: 72px;
-        }
-        ha-assist-chip {
-          --ha-assist-chip-container-shape: 10px;
-        }
-        ha-button-menu-new ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
-        }
-        ha-label {
-          --ha-label-background-color: var(--color, var(--grey-color));
-          --ha-label-background-opacity: 0.5;
-        }
-      `,
-    ];
-  }
 }
 
 declare global {

src/panels/config/labels/dialog-label-detail.ts

@@ -49,19 +49,11 @@ class DialogLabelDetail
       this._icon = "";
       this._color = "";
     }
-    document.body.addEventListener("keydown", this._handleKeyPress);
   }
 
-  private _handleKeyPress = (ev: KeyboardEvent) => {
-    if (ev.key === "Escape") {
-      ev.stopPropagation();
-    }
-  };
-
   public closeDialog(): void {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    document.body.removeEventListener("keydown", this._handleKeyPress);
   }
 
   protected render() {

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

@@ -1,11 +1,4 @@
-import {
-  mdiDelete,
-  mdiDevices,
-  mdiHelpCircle,
-  mdiPlus,
-  mdiRobot,
-  mdiShape,
-} from "@mdi/js";
+import { mdiHelpCircle, mdiPlus } from "@mdi/js";
 import { LitElement, PropertyValues, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -18,7 +11,6 @@ import {
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-relative-time";
-import "../../../components/ha-icon-overflow-menu";
 import {
   LabelRegistryEntry,
   LabelRegistryEntryMutableParams,
@@ -35,7 +27,6 @@ import "../../../layouts/hass-tabs-subpage-data-table";
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import { showLabelDetailDialog } from "./show-dialog-label-detail";
-import { navigate } from "../../../common/navigate";
 
 @customElement("ha-config-labels")
 export class HaConfigLabels extends LitElement {
@@ -80,41 +71,6 @@ export class HaConfigLabels extends LitElement {
         filterable: true,
         grows: true,
       },
-      actions: {
-        title: "",
-        width: "64px",
-        type: "overflow-menu",
-        template: (label) => html`
-          <ha-icon-overflow-menu
-            .hass=${this.hass}
-            narrow
-            .items=${[
-              {
-                label: this.hass.localize("ui.panel.config.entities.caption"),
-                path: mdiShape,
-                action: () => this._navigateEntities(label),
-              },
-              {
-                label: this.hass.localize("ui.panel.config.devices.caption"),
-                path: mdiDevices,
-                action: () => this._navigateDevices(label),
-              },
-              {
-                label: this.hass.localize("ui.panel.config.automation.caption"),
-                path: mdiRobot,
-                action: () => this._navigateAutomations(label),
-              },
-              {
-                label: this.hass.localize("ui.common.delete"),
-                path: mdiDelete,
-                action: () => this._removeLabel(label),
-                warning: true,
-              },
-            ]}
-          >
-          </ha-icon-overflow-menu>
-        `,
-      },
     };
     return columns;
   });
@@ -233,7 +189,6 @@ export class HaConfigLabels extends LitElement {
         }),
         dismissText: this.hass!.localize("ui.common.cancel"),
         confirmText: this.hass!.localize("ui.common.remove"),
-        destructive: true,
       }))
     ) {
       return false;
@@ -248,20 +203,6 @@ export class HaConfigLabels extends LitElement {
       return false;
     }
   }
-
-  private _navigateEntities(label: LabelRegistryEntry) {
-    navigate(`/config/entities?historyBack=1&label=${label.label_id}`);
-  }
-
-  private _navigateDevices(label: LabelRegistryEntry) {
-    navigate(`/config/devices/dashboard?historyBack=1&label=${label.label_id}`);
-  }
-
-  private _navigateAutomations(label: LabelRegistryEntry) {
-    navigate(
-      `/config/automation/dashboard?historyBack=1&label=${label.label_id}`
-    );
-  }
 }
 
 declare global {

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

@@ -1,15 +1,10 @@
 import { consume } from "@lit-labs/context";
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
-  mdiChevronRight,
-  mdiCog,
   mdiContentDuplicate,
   mdiDelete,
-  mdiDotsVertical,
   mdiHelpCircle,
   mdiInformationOutline,
-  mdiMenuDown,
   mdiPalette,
   mdiPencilOff,
   mdiPlay,
@@ -21,7 +16,6 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,
   LitElement,
-  PropertyValues,
   TemplateResult,
   css,
   html,
@@ -29,7 +23,6 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { computeCssColor } from "../../../common/color/compute-color";
 import { formatShortDateTime } from "../../../common/datetime/format_date_time";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event";
@@ -39,7 +32,6 @@ import { LocalizeFunc } from "../../../common/translations/localize";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
-  SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-button";
@@ -51,26 +43,18 @@ import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
-import "../../../components/ha-menu-item";
 import "../../../components/ha-state-icon";
-import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import {
   CategoryRegistryEntry,
-  createCategoryRegistryEntry,
   subscribeCategoryRegistry,
 } from "../../../data/category_registry";
 import { fullEntitiesContext } from "../../../data/context";
 import { isUnavailableState } from "../../../data/entity";
-import {
-  EntityRegistryEntry,
-  UpdateEntityRegistryEntryResult,
-  updateEntityRegistryEntry,
-} from "../../../data/entity_registry";
+import { EntityRegistryEntry } from "../../../data/entity_registry";
 import { forwardHaptic } from "../../../data/haptics";
 import {
   LabelRegistryEntry,
-  createLabelRegistryEntry,
   subscribeLabelRegistry,
 } from "../../../data/label_registry";
 import {
@@ -84,7 +68,6 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
-import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
@@ -92,13 +75,10 @@ import { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
-import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
 import { configSections } from "../ha-panel-config";
-import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 
 type SceneItem = SceneEntity & {
   name: string;
-  area: string | undefined;
   category: string | undefined;
   labels: LabelRegistryEntry[];
 };
@@ -115,10 +95,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
 
   @property({ attribute: false }) public scenes!: SceneEntity[];
 
-  @state() private _searchParms = new URLSearchParams(window.location.search);
-
-  @state() private _selected: string[] = [];
-
   @state() private _activeFilters?: string[];
 
   @state() private _filteredScenes?: string[] | null;
@@ -140,15 +116,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
-  private _sizeController = new ResizeController(this, {
-    callback: (entries) => entries[0]?.contentRect.width,
-  });
-
   private _scenes = memoizeOne(
     (
       scenes: SceneEntity[],
       entityReg: EntityRegistryEntry[],
-      areas: HomeAssistant["areas"],
       categoryReg?: CategoryRegistryEntry[],
       labelReg?: LabelRegistryEntry[],
       filteredScenes?: string[] | null
@@ -169,9 +140,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         return {
           ...scene,
           name: computeStateName(scene),
-          area: entityRegEntry?.area_id
-            ? areas[entityRegEntry?.area_id]?.name
-            : undefined,
           category: category
             ? categoryReg?.find((cat) => cat.category_id === category)?.name
             : undefined,
@@ -214,13 +182,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
               : nothing}
           `,
         },
-        area: {
-          title: localize("ui.panel.config.scene.picker.headers.area"),
-          hidden: true,
-          groupable: true,
-          filterable: true,
-          sortable: true,
-        },
         category: {
           title: localize("ui.panel.config.scene.picker.headers.category"),
           hidden: true,
@@ -234,13 +195,14 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           filterable: true,
           template: (scene) => scene.labels.map((lbl) => lbl.name).join(" "),
         },
-        state: {
+      };
+      if (!narrow) {
+        columns.state = {
           title: localize(
             "ui.panel.config.scene.picker.headers.last_activated"
           ),
           sortable: true,
           width: "30%",
-          hidden: narrow,
           template: (scene) => {
             const lastActivated = scene.state;
             if (!lastActivated || isUnavailableState(lastActivated)) {
@@ -255,100 +217,86 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                 : relativeTime(date, this.hass.locale)}
             `;
           },
-        },
-        only_editable: {
-          title: "",
-          width: "56px",
-          template: (scene) =>
-            !scene.attributes.id
-              ? html`
-                  <simple-tooltip animation-delay="0" position="left">
-                    ${this.hass.localize(
-                      "ui.panel.config.scene.picker.only_editable"
-                    )}
-                  </simple-tooltip>
-                  <ha-svg-icon
-                    .path=${mdiPencilOff}
-                    style="color: var(--secondary-text-color)"
-                  ></ha-svg-icon>
-                `
-              : "",
-        },
-        actions: {
-          title: "",
-          width: "64px",
-          type: "overflow-menu",
-          template: (scene) => html`
-            <ha-icon-overflow-menu
-              .hass=${this.hass}
-              narrow
-              .items=${[
-                {
-                  path: mdiInformationOutline,
-                  label: this.hass.localize(
-                    "ui.panel.config.scene.picker.show_info"
-                  ),
-                  action: () => this._showInfo(scene),
-                },
-                {
-                  path: mdiCog,
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.picker.show_settings"
-                  ),
-                  action: () => this._openSettings(scene),
-                },
-                {
-                  path: mdiPlay,
-                  label: this.hass.localize(
-                    "ui.panel.config.scene.picker.activate"
-                  ),
-                  action: () => this._activateScene(scene),
-                },
-                {
-                  path: mdiTag,
-                  label: this.hass.localize(
-                    `ui.panel.config.scene.picker.${scene.category ? "edit_category" : "assign_category"}`
-                  ),
-                  action: () => this._editCategory(scene),
-                },
-                {
-                  divider: true,
-                },
-                {
-                  path: mdiContentDuplicate,
-                  label: this.hass.localize(
-                    "ui.panel.config.scene.picker.duplicate"
-                  ),
-                  action: () => this._duplicate(scene),
-                  disabled: !scene.attributes.id,
-                },
-                {
-                  label: this.hass.localize(
-                    "ui.panel.config.scene.picker.delete"
-                  ),
-                  path: mdiDelete,
-                  action: () => this._deleteConfirm(scene),
-                  warning: scene.attributes.id,
-                  disabled: !scene.attributes.id,
-                },
-              ]}
-            >
-            </ha-icon-overflow-menu>
-          `,
-        },
+        };
+      }
+      columns.only_editable = {
+        title: "",
+        width: "56px",
+        template: (scene) =>
+          !scene.attributes.id
+            ? html`
+                <simple-tooltip animation-delay="0" position="left">
+                  ${this.hass.localize(
+                    "ui.panel.config.scene.picker.only_editable"
+                  )}
+                </simple-tooltip>
+                <ha-svg-icon
+                  .path=${mdiPencilOff}
+                  style="color: var(--secondary-text-color)"
+                ></ha-svg-icon>
+              `
+            : "",
+      };
+      columns.actions = {
+        title: "",
+        width: "64px",
+        type: "overflow-menu",
+        template: (scene) => html`
+          <ha-icon-overflow-menu
+            .hass=${this.hass}
+            narrow
+            .items=${[
+              {
+                path: mdiInformationOutline,
+                label: this.hass.localize(
+                  "ui.panel.config.scene.picker.show_info"
+                ),
+                action: () => this._showInfo(scene),
+              },
+              {
+                path: mdiPlay,
+                label: this.hass.localize(
+                  "ui.panel.config.scene.picker.activate"
+                ),
+                action: () => this._activateScene(scene),
+              },
+              {
+                path: mdiTag,
+                label: this.hass.localize(
+                  `ui.panel.config.scene.picker.${scene.category ? "edit_category" : "assign_category"}`
+                ),
+                action: () => this._editCategory(scene),
+              },
+              {
+                divider: true,
+              },
+              {
+                path: mdiContentDuplicate,
+                label: this.hass.localize(
+                  "ui.panel.config.scene.picker.duplicate"
+                ),
+                action: () => this._duplicate(scene),
+                disabled: !scene.attributes.id,
+              },
+              {
+                label: this.hass.localize(
+                  "ui.panel.config.scene.picker.delete"
+                ),
+                path: mdiDelete,
+                action: () => this._deleteConfirm(scene),
+                warning: scene.attributes.id,
+                disabled: !scene.attributes.id,
+              },
+            ]}
+          >
+          </ha-icon-overflow-menu>
+        `,
       };
 
       return columns;
     }
   );
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (changedProps.has("_entityReg")) {
-      this._applyFilters();
-    }
-  }
-
   protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
     return [
       subscribeCategoryRegistry(this.hass.connection, "scene", (categories) => {
@@ -361,70 +309,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
-    const categoryItems = html`${this._categories?.map(
-        (category) =>
-          html`<ha-menu-item
-            .value=${category.category_id}
-            @click=${this._handleBulkCategory}
-          >
-            ${category.icon
-              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
-            <div slot="headline">${category.name}</div>
-          </ha-menu-item>`
-      )}
-      <ha-menu-item .value=${null} @click=${this._handleBulkCategory}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_actions.no_category"
-          )}
-        </div>
-      </ha-menu-item>
-      <md-divider role="separator" tabindex="-1"></md-divider>
-      <ha-menu-item @click=${this._bulkCreateCategory}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.category.editor.add")}
-        </div>
-      </ha-menu-item>`;
-    const labelItems = html` ${this._labels?.map((label) => {
-        const color = label.color ? computeCssColor(label.color) : undefined;
-        const selected = this._selected.every((entityId) =>
-          this.hass.entities[entityId]?.labels.includes(label.label_id)
-        );
-        const partial =
-          !selected &&
-          this._selected.some((entityId) =>
-            this.hass.entities[entityId]?.labels.includes(label.label_id)
-          );
-        return html`<ha-menu-item
-          .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
-          @click=${this._handleBulkLabel}
-          keep-open
-        >
-          <ha-checkbox
-            slot="start"
-            .checked=${selected}
-            .indeterminate=${partial}
-            reducedTouchTarget
-          ></ha-checkbox>
-          <ha-label style=${color ? `--color: ${color}` : ""}>
-            ${label.icon
-              ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
-              : nothing}
-            ${label.name}
-          </ha-label>
-        </ha-menu-item>`;
-      })}
-      <md-divider role="separator" tabindex="-1"></md-divider>
-      <ha-menu-item @click=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div></ha-menu-item
-      >`;
-    const labelsInOverflow =
-      (this._sizeController.value && this._sizeController.value < 700) ||
-      (!this._sizeController.value && this.hass.dockedSidebar === "docked");
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -432,9 +316,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.automations}
-        selectable
-        .selected=${this._selected.length}
-        @selection-changed=${this._handleSelectionChanged}
         hasFilters
         .filters=${Object.values(this._filters).filter(
           (filter) => filter.value?.length
@@ -445,7 +326,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         .data=${this._scenes(
           this.scenes,
           this._entityReg,
-          this.hass.areas,
           this._categories,
           this._labels,
           this._filteredScenes
@@ -517,103 +397,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-categories>
 
-        ${!this.narrow
-          ? html`<ha-button-menu-new slot="selection-bar">
-                <ha-assist-chip
-                  slot="trigger"
-                  .label=${this.hass.localize(
-                    "ui.panel.config.automation.picker.bulk_actions.move_category"
-                  )}
-                >
-                  <ha-svg-icon
-                    slot="trailing-icon"
-                    .path=${mdiMenuDown}
-                  ></ha-svg-icon>
-                </ha-assist-chip>
-                ${categoryItems}
-              </ha-button-menu-new>
-              ${labelsInOverflow
-                ? nothing
-                : html`<ha-button-menu-new slot="selection-bar">
-                    <ha-assist-chip
-                      slot="trigger"
-                      .label=${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.add_label"
-                      )}
-                    >
-                      <ha-svg-icon
-                        slot="trailing-icon"
-                        .path=${mdiMenuDown}
-                      ></ha-svg-icon>
-                    </ha-assist-chip>
-                    ${labelItems}
-                  </ha-button-menu-new>`}`
-          : nothing}
-        ${this.narrow || labelsInOverflow
-          ? html`
-          <ha-button-menu-new has-overflow slot="selection-bar">
-            ${
-              this.narrow
-                ? html`<ha-assist-chip
-                    .label=${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_action"
-                    )}
-                    slot="trigger"
-                  >
-                    <ha-svg-icon
-                      slot="trailing-icon"
-                      .path=${mdiMenuDown}
-                    ></ha-svg-icon>
-                  </ha-assist-chip>`
-                : html`<ha-icon-button
-                    .path=${mdiDotsVertical}
-                    .label=${"ui.panel.config.automation.picker.bulk_action"}
-                    slot="trigger"
-                  ></ha-icon-button>`
-            }
-              <ha-svg-icon
-                slot="trailing-icon"
-                .path=${mdiMenuDown}
-              ></ha-svg-icon
-            ></ha-assist-chip>
-            ${
-              this.narrow
-                ? html`<ha-sub-menu>
-                    <ha-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.move_category"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-menu-item>
-                    <ha-menu slot="menu">${categoryItems}</ha-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            ${
-              this.narrow || this.hass.dockedSidebar === "docked"
-                ? html` <ha-sub-menu>
-                    <ha-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.add_label"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-menu-item>
-                    <ha-menu slot="menu">${labelItems}</ha-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-          </ha-button-menu-new>`
-          : nothing}
         ${!this.scenes.length
           ? html`<div class="empty" slot="empty">
               <ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
@@ -739,33 +522,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
     this._applyFilters();
   }
 
-  firstUpdated() {
-    if (this._searchParms.has("label")) {
-      this._filterLabel();
-    }
-  }
-
-  private _filterLabel() {
-    const label = this._searchParms.get("label");
-    if (!label) {
-      return;
-    }
-    this._filters = {
-      ...this._filters,
-      "ha-filter-labels": {
-        value: [label],
-        items: undefined,
-      },
-    };
-    this._applyFilters();
-  }
-
-  private _handleSelectionChanged(
-    ev: HASSDomEvent<SelectionChangedEvent>
-  ): void {
-    this._selected = ev.detail.value;
-  }
-
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const scene = this.scenes.find((a) => a.entity_id === ev.detail.id);
 
@@ -774,46 +530,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async _handleBulkCategory(ev) {
-    const category = ev.currentTarget.value;
-    this._bulkAddCategory(category);
-  }
-
-  private async _bulkAddCategory(category: string) {
-    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
-    this._selected.forEach((entityId) => {
-      promises.push(
-        updateEntityRegistryEntry(this.hass, entityId, {
-          categories: { scene: category },
-        })
-      );
-    });
-    await Promise.all(promises);
-  }
-
-  private async _handleBulkLabel(ev) {
-    const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
-    this._bulkLabel(label, action);
-  }
-
-  private async _bulkLabel(label: string, action: "add" | "remove") {
-    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
-    this._selected.forEach((entityId) => {
-      promises.push(
-        updateEntityRegistryEntry(this.hass, entityId, {
-          labels:
-            action === "add"
-              ? this.hass.entities[entityId].labels.concat(label)
-              : this.hass.entities[entityId].labels.filter(
-                  (lbl) => lbl !== label
-                ),
-        })
-      );
-    });
-    await Promise.all(promises);
-  }
-
   private _editCategory(scene: any) {
     const entityReg = this._entityReg.find(
       (reg) => reg.entity_id === scene.entity_id
@@ -839,13 +555,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
     fireEvent(this, "hass-more-info", { entityId: scene.entity_id });
   }
 
-  private _openSettings(scene: SceneEntity) {
-    showMoreInfoDialog(this, {
-      entityId: scene.entity_id,
-      view: "settings",
-    });
-  }
-
   private _activateScene = async (scene: SceneEntity) => {
     await activateScene(this.hass, scene.entity_id);
     showToast(this, {
@@ -909,38 +618,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
     });
   }
 
-  private async _bulkCreateCategory() {
-    showCategoryRegistryDetailDialog(this, {
-      scope: "scene",
-      createEntry: async (values) => {
-        const category = await createCategoryRegistryEntry(
-          this.hass,
-          "scene",
-          values
-        );
-        this._bulkAddCategory(category.category_id);
-        return category;
-      },
-    });
-  }
-
-  private _bulkCreateLabel() {
-    showLabelDetailDialog(this, {
-      createEntry: async (values) => {
-        const label = await createLabelRegistryEntry(this.hass, values);
-        this._bulkLabel(label.label_id, "add");
-        return label;
-      },
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
-        :host {
-          display: block;
-        }
         hass-tabs-subpage-data-table {
           --data-table-row-height: 60px;
         }
@@ -952,16 +633,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           --mdc-icon-size: 80px;
           max-width: 500px;
         }
-        ha-assist-chip {
-          --ha-assist-chip-container-shape: 10px;
-        }
-        ha-button-menu-new ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
-        }
-        ha-label {
-          --ha-label-background-color: var(--color, var(--grey-color));
-          --ha-label-background-opacity: 0.5;
-        }
       `,
     ];
   }

src/panels/config/script/ha-script-picker.ts

@@ -1,14 +1,9 @@
 import { consume } from "@lit-labs/context";
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import {
-  mdiChevronRight,
-  mdiCog,
   mdiContentDuplicate,
   mdiDelete,
-  mdiDotsVertical,
   mdiHelpCircle,
   mdiInformationOutline,
-  mdiMenuDown,
   mdiPlay,
   mdiPlus,
   mdiScriptText,
@@ -20,7 +15,6 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,
   LitElement,
-  PropertyValues,
   TemplateResult,
   css,
   html,
@@ -29,7 +23,6 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
-import { computeCssColor } from "../../../common/color/compute-color";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatShortDateTime } from "../../../common/datetime/format_date_time";
 import { relativeTime } from "../../../common/datetime/relative_time";
@@ -40,7 +33,6 @@ import { LocalizeFunc } from "../../../common/translations/localize";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
-  SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-fab";
@@ -52,24 +44,16 @@ import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
-import "../../../components/ha-menu-item";
-import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import {
   CategoryRegistryEntry,
-  createCategoryRegistryEntry,
   subscribeCategoryRegistry,
 } from "../../../data/category_registry";
 import { fullEntitiesContext } from "../../../data/context";
 import { UNAVAILABLE } from "../../../data/entity";
-import {
-  EntityRegistryEntry,
-  UpdateEntityRegistryEntryResult,
-  updateEntityRegistryEntry,
-} from "../../../data/entity_registry";
+import { EntityRegistryEntry } from "../../../data/entity_registry";
 import {
   LabelRegistryEntry,
-  createLabelRegistryEntry,
   subscribeLabelRegistry,
 } from "../../../data/label_registry";
 import {
@@ -85,7 +69,6 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
-import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
@@ -94,13 +77,10 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import { showNewAutomationDialog } from "../automation/show-dialog-new-automation";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
-import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
 import { configSections } from "../ha-panel-config";
-import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 
 type ScriptItem = ScriptEntity & {
   name: string;
-  area: string | undefined;
   category: string | undefined;
   labels: LabelRegistryEntry[];
 };
@@ -121,8 +101,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
-  @state() private _selected: string[] = [];
-
   @state() private _activeFilters?: string[];
 
   @state() private _filteredScripts?: string[] | null;
@@ -144,15 +122,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
-  private _sizeController = new ResizeController(this, {
-    callback: (entries) => entries[0]?.contentRect.width,
-  });
-
   private _scripts = memoizeOne(
     (
       scripts: ScriptEntity[],
       entityReg: EntityRegistryEntry[],
-      areas: HomeAssistant["areas"],
       categoryReg?: CategoryRegistryEntry[],
       labelReg?: LabelRegistryEntry[],
       filteredScripts?: string[] | null
@@ -175,9 +148,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         return {
           ...script,
           name: computeStateName(script),
-          area: entityRegEntry?.area_id
-            ? areas[entityRegEntry?.area_id]?.name
-            : undefined,
           last_triggered: script.attributes.last_triggered || undefined,
           category: category
             ? categoryReg?.find((cat) => cat.category_id === category)?.name
@@ -243,13 +213,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
             `;
           },
         },
-        area: {
-          title: localize("ui.panel.config.script.picker.headers.area"),
-          hidden: true,
-          groupable: true,
-          filterable: true,
-          sortable: true,
-        },
         category: {
           title: localize("ui.panel.config.script.picker.headers.category"),
           hidden: true,
@@ -263,8 +226,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           filterable: true,
           template: (script) => script.labels.map((lbl) => lbl.name).join(" "),
         },
-        last_triggered: {
-          hidden: narrow,
+      };
+      if (!narrow) {
+        columns.last_triggered = {
           sortable: true,
           width: "40%",
           title: localize("ui.card.automation.last_triggered"),
@@ -284,74 +248,66 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                 : this.hass.localize("ui.components.relative_time.never")}
             `;
           },
-        },
-        actions: {
-          title: "",
-          width: "64px",
-          type: "overflow-menu",
-          template: (script) => html`
-            <ha-icon-overflow-menu
-              .hass=${this.hass}
-              narrow
-              .items=${[
-                {
-                  path: mdiInformationOutline,
-                  label: this.hass.localize(
-                    "ui.panel.config.script.picker.show_info"
-                  ),
-                  action: () => this._showInfo(script),
-                },
-                {
-                  path: mdiCog,
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.picker.show_settings"
-                  ),
-                  action: () => this._openSettings(script),
-                },
-                {
-                  path: mdiTag,
-                  label: this.hass.localize(
-                    `ui.panel.config.script.picker.${script.category ? "edit_category" : "assign_category"}`
-                  ),
-                  action: () => this._editCategory(script),
-                },
-                {
-                  path: mdiPlay,
-                  label: this.hass.localize(
-                    "ui.panel.config.script.picker.run"
-                  ),
-                  action: () => this._runScript(script),
-                },
-                {
-                  path: mdiTransitConnection,
-                  label: this.hass.localize(
-                    "ui.panel.config.script.picker.show_trace"
-                  ),
-                  action: () => this._showTrace(script),
-                },
-                {
-                  divider: true,
-                },
-                {
-                  path: mdiContentDuplicate,
-                  label: this.hass.localize(
-                    "ui.panel.config.script.picker.duplicate"
-                  ),
-                  action: () => this._duplicate(script),
-                },
-                {
-                  label: this.hass.localize(
-                    "ui.panel.config.script.picker.delete"
-                  ),
-                  path: mdiDelete,
-                  action: () => this._deleteConfirm(script),
-                  warning: true,
-                },
-              ]}
-            >
-            </ha-icon-overflow-menu>
-          `,
-        },
+        };
+      }
+
+      columns.actions = {
+        title: "",
+        width: "64px",
+        type: "overflow-menu",
+        template: (script) => html`
+          <ha-icon-overflow-menu
+            .hass=${this.hass}
+            narrow
+            .items=${[
+              {
+                path: mdiInformationOutline,
+                label: this.hass.localize(
+                  "ui.panel.config.script.picker.show_info"
+                ),
+                action: () => this._showInfo(script),
+              },
+              {
+                path: mdiTag,
+                label: this.hass.localize(
+                  `ui.panel.config.script.picker.${script.category ? "edit_category" : "assign_category"}`
+                ),
+                action: () => this._editCategory(script),
+              },
+              {
+                path: mdiPlay,
+                label: this.hass.localize("ui.panel.config.script.picker.run"),
+                action: () => this._runScript(script),
+              },
+              {
+                path: mdiTransitConnection,
+                label: this.hass.localize(
+                  "ui.panel.config.script.picker.show_trace"
+                ),
+                action: () => this._showTrace(script),
+              },
+              {
+                divider: true,
+              },
+              {
+                path: mdiContentDuplicate,
+                label: this.hass.localize(
+                  "ui.panel.config.script.picker.duplicate"
+                ),
+                action: () => this._duplicate(script),
+              },
+              {
+                label: this.hass.localize(
+                  "ui.panel.config.script.picker.delete"
+                ),
+                path: mdiDelete,
+                action: () => this._deleteConfirm(script),
+                warning: true,
+              },
+            ]}
+          >
+          </ha-icon-overflow-menu>
+        `,
       };
 
       return columns;
@@ -374,69 +330,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
-    const categoryItems = html`${this._categories?.map(
-        (category) =>
-          html`<ha-menu-item
-            .value=${category.category_id}
-            @click=${this._handleBulkCategory}
-          >
-            ${category.icon
-              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
-            <div slot="headline">${category.name}</div>
-          </ha-menu-item>`
-      )}
-      <ha-menu-item .value=${null} @click=${this._handleBulkCategory}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_actions.no_category"
-          )}
-        </div> </ha-menu-item
-      ><md-divider role="separator" tabindex="-1"></md-divider>
-      <ha-menu-item @click=${this._bulkCreateCategory}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.category.editor.add")}
-        </div>
-      </ha-menu-item>`;
-    const labelItems = html`${this._labels?.map((label) => {
-        const color = label.color ? computeCssColor(label.color) : undefined;
-        const selected = this._selected.every((entityId) =>
-          this.hass.entities[entityId]?.labels.includes(label.label_id)
-        );
-        const partial =
-          !selected &&
-          this._selected.some((entityId) =>
-            this.hass.entities[entityId]?.labels.includes(label.label_id)
-          );
-        return html`<ha-menu-item
-          .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
-          @click=${this._handleBulkLabel}
-          keep-open
-          reducedTouchTarget
-        >
-          <ha-checkbox
-            slot="start"
-            .checked=${selected}
-            .indeterminate=${partial}
-          ></ha-checkbox>
-          <ha-label style=${color ? `--color: ${color}` : ""}>
-            ${label.icon
-              ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
-              : nothing}
-            ${label.name}
-          </ha-label>
-        </ha-menu-item>`;
-      })}
-      <md-divider role="separator" tabindex="-1"></md-divider>
-      <ha-menu-item @click=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div></ha-menu-item
-      >`;
-    const labelsInOverflow =
-      (this._sizeController.value && this._sizeController.value < 700) ||
-      (!this._sizeController.value && this.hass.dockedSidebar === "docked");
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -446,9 +339,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         .tabs=${configSections.automations}
         hasFilters
         initialGroupColumn="category"
-        selectable
-        .selected=${this._selected.length}
-        @selection-changed=${this._handleSelectionChanged}
         .filters=${Object.values(this._filters).filter(
           (filter) => filter.value?.length
         ).length}
@@ -460,7 +350,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         .data=${this._scripts(
           this.scripts,
           this._entityReg,
-          this.hass.areas,
           this._categories,
           this._labels,
           this._filteredScripts
@@ -542,104 +431,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-blueprints>
-
-        ${!this.narrow
-          ? html`<ha-button-menu-new slot="selection-bar">
-                <ha-assist-chip
-                  slot="trigger"
-                  .label=${this.hass.localize(
-                    "ui.panel.config.automation.picker.bulk_actions.move_category"
-                  )}
-                >
-                  <ha-svg-icon
-                    slot="trailing-icon"
-                    .path=${mdiMenuDown}
-                  ></ha-svg-icon>
-                </ha-assist-chip>
-                ${categoryItems}
-              </ha-button-menu-new>
-              ${labelsInOverflow
-                ? nothing
-                : html`<ha-button-menu-new slot="selection-bar">
-                    <ha-assist-chip
-                      slot="trigger"
-                      .label=${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.add_label"
-                      )}
-                    >
-                      <ha-svg-icon
-                        slot="trailing-icon"
-                        .path=${mdiMenuDown}
-                      ></ha-svg-icon>
-                    </ha-assist-chip>
-                    ${labelItems}
-                  </ha-button-menu-new>`}`
-          : nothing}
-        ${this.narrow || labelsInOverflow
-          ? html`
-          <ha-button-menu-new has-overflow slot="selection-bar">
-            ${
-              this.narrow
-                ? html`<ha-assist-chip
-                    .label=${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_action"
-                    )}
-                    slot="trigger"
-                  >
-                    <ha-svg-icon
-                      slot="trailing-icon"
-                      .path=${mdiMenuDown}
-                    ></ha-svg-icon>
-                  </ha-assist-chip>`
-                : html`<ha-icon-button
-                    .path=${mdiDotsVertical}
-                    .label=${"ui.panel.config.automation.picker.bulk_action"}
-                    slot="trigger"
-                  ></ha-icon-button>`
-            }
-              <ha-svg-icon
-                slot="trailing-icon"
-                .path=${mdiMenuDown}
-              ></ha-svg-icon
-            ></ha-assist-chip>
-            ${
-              this.narrow
-                ? html`<ha-sub-menu>
-                    <ha-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.move_category"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-menu-item>
-                    <ha-menu slot="menu">${categoryItems}</ha-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            ${
-              this.narrow || this.hass.dockedSidebar === "docked"
-                ? html` <ha-sub-menu>
-                    <ha-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.add_label"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-menu-item>
-                    <ha-menu slot="menu">${labelItems}</ha-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-          </ha-button-menu-new>`
-          : nothing}
         ${!this.scripts.length
           ? html` <div class="empty" slot="empty">
               <ha-svg-icon .path=${mdiScriptText}></ha-svg-icon>
@@ -769,35 +560,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     this._filteredScripts = items ? [...items] : undefined;
   }
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (changedProps.has("_entityReg")) {
-      this._applyFilters();
-    }
-  }
-
   firstUpdated() {
     if (this._searchParms.has("blueprint")) {
       this._filterBlueprint();
     }
-    if (this._searchParms.has("label")) {
-      this._filterLabel();
-    }
-  }
-
-  private _filterLabel() {
-    const label = this._searchParms.get("label");
-    if (!label) {
-      return;
-    }
-    this._filters = {
-      ...this._filters,
-      "ha-filter-labels": {
-        value: [label],
-        items: undefined,
-      },
-    };
-    this._applyFilters();
   }
 
   private async _filterBlueprint() {
@@ -837,52 +603,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _handleSelectionChanged(
-    ev: HASSDomEvent<SelectionChangedEvent>
-  ): void {
-    this._selected = ev.detail.value;
-  }
-
-  private async _handleBulkCategory(ev) {
-    const category = ev.currentTarget.value;
-    this._bulkAddCategory(category);
-  }
-
-  private async _bulkAddCategory(category: string) {
-    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
-    this._selected.forEach((entityId) => {
-      promises.push(
-        updateEntityRegistryEntry(this.hass, entityId, {
-          categories: { script: category },
-        })
-      );
-    });
-    await Promise.all(promises);
-  }
-
-  private async _handleBulkLabel(ev) {
-    const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
-    this._bulkLabel(label, action);
-  }
-
-  private async _bulkLabel(label: string, action: "add" | "remove") {
-    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
-    this._selected.forEach((entityId) => {
-      promises.push(
-        updateEntityRegistryEntry(this.hass, entityId, {
-          labels:
-            action === "add"
-              ? this.hass.entities[entityId].labels.concat(label)
-              : this.hass.entities[entityId].labels.filter(
-                  (lbl) => lbl !== label
-                ),
-        })
-      );
-    });
-    await Promise.all(promises);
-  }
-
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const entry = this.entityRegistry.find((e) => e.entity_id === ev.detail.id);
     if (entry) {
@@ -919,13 +639,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     fireEvent(this, "hass-more-info", { entityId: script.entity_id });
   }
 
-  private _openSettings(script: any) {
-    showMoreInfoDialog(this, {
-      entityId: script.entity_id,
-      view: "settings",
-    });
-  }
-
   private _showTrace(script: any) {
     const entry = this.entityRegistry.find(
       (e) => e.entity_id === script.entity_id
@@ -1025,38 +738,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async _bulkCreateCategory() {
-    showCategoryRegistryDetailDialog(this, {
-      scope: "script",
-      createEntry: async (values) => {
-        const category = await createCategoryRegistryEntry(
-          this.hass,
-          "script",
-          values
-        );
-        this._bulkAddCategory(category.category_id);
-        return category;
-      },
-    });
-  }
-
-  private _bulkCreateLabel() {
-    showLabelDetailDialog(this, {
-      createEntry: async (values) => {
-        const label = await createLabelRegistryEntry(this.hass, values);
-        this._bulkLabel(label.label_id, "add");
-        return label;
-      },
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
-        :host {
-          display: block;
-        }
         hass-tabs-subpage-data-table {
           --data-table-row-height: 60px;
         }
@@ -1071,16 +756,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           --mdc-icon-size: 80px;
           max-width: 500px;
         }
-        ha-assist-chip {
-          --ha-assist-chip-container-shape: 10px;
-        }
-        ha-button-menu-new ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
-        }
-        ha-label {
-          --ha-label-background-color: var(--color, var(--grey-color));
-          --ha-label-background-opacity: 0.5;
-        }
       `,
     ];
   }

src/panels/history/ha-panel-history.ts

@@ -9,7 +9,6 @@ import { property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { storage } from "../../common/decorators/storage";
-import { computeDomain } from "../../common/entity/compute_domain";
 import { navigate } from "../../common/navigate";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
@@ -28,29 +27,37 @@ import "../../components/ha-menu-button";
 import "../../components/ha-target-picker";
 import "../../components/ha-top-app-bar-fixed";
 import {
-  EntityHistoryState,
+  AreaDeviceLookup,
+  AreaEntityLookup,
+  getAreaDeviceLookup,
+  getAreaEntityLookup,
+} from "../../data/area_registry";
+import {
+  DeviceEntityLookup,
+  getDeviceEntityLookup,
+  subscribeDeviceRegistry,
+} from "../../data/device_registry";
+import { subscribeEntityRegistry } from "../../data/entity_registry";
+import {
   HistoryResult,
-  HistoryStates,
-  LineChartState,
-  LineChartUnit,
-  computeGroupKey,
   computeHistory,
   subscribeHistory,
+  HistoryStates,
+  EntityHistoryState,
+  LineChartUnit,
+  computeGroupKey,
+  LineChartState,
 } from "../../data/history";
-import { Statistics, fetchStatistics } from "../../data/recorder";
-import {
-  expandAreaTarget,
-  expandDeviceTarget,
-  expandFloorTarget,
-  expandLabelTarget,
-} from "../../data/selector";
+import { fetchStatistics, Statistics } from "../../data/recorder";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
-import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { fileDownload } from "../../util/file_download";
+import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
+import { computeDomain } from "../../common/entity/compute_domain";
 
-class HaPanelHistory extends LitElement {
+class HaPanelHistory extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) hass!: HomeAssistant;
 
   @property({ reflect: true, type: Boolean }) public narrow = false;
@@ -76,6 +83,12 @@ class HaPanelHistory extends LitElement {
 
   @state() private _statisticsHistory?: HistoryResult;
 
+  @state() private _deviceEntityLookup?: DeviceEntityLookup;
+
+  @state() private _areaEntityLookup?: AreaEntityLookup;
+
+  @state() private _areaDeviceLookup?: AreaDeviceLookup;
+
   @state()
   private _showBack?: boolean;
 
@@ -110,6 +123,18 @@ class HaPanelHistory extends LitElement {
     this._unsubscribeHistory();
   }
 
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeEntityRegistry(this.hass.connection!, (entities) => {
+        this._deviceEntityLookup = getDeviceEntityLookup(entities);
+        this._areaEntityLookup = getAreaEntityLookup(entities);
+      }),
+      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
+        this._areaDeviceLookup = getAreaDeviceLookup(devices);
+      }),
+    ];
+  }
+
   private _goBack(): void {
     history.back();
   }
@@ -307,9 +332,7 @@ class HaPanelHistory extends LitElement {
     const entityIds = searchParams.entity_id;
     const deviceIds = searchParams.device_id;
     const areaIds = searchParams.area_id;
-    const floorIds = searchParams.floor_id;
-    const labelsIds = searchParams.label_id;
-    if (entityIds || deviceIds || areaIds || floorIds || labelsIds) {
+    if (entityIds || deviceIds || areaIds) {
       this._targetPickerValue = {};
     }
     if (entityIds) {
@@ -324,14 +347,6 @@ class HaPanelHistory extends LitElement {
       const splitIds = areaIds.split(",");
       this._targetPickerValue!.area_id = splitIds;
     }
-    if (floorIds) {
-      const splitIds = floorIds.split(",");
-      this._targetPickerValue!.floor_id = splitIds;
-    }
-    if (labelsIds) {
-      const splitIds = labelsIds.split(",");
-      this._targetPickerValue!.label_id = splitIds;
-    }
 
     const startDate = searchParams.start_date;
     if (startDate) {
@@ -507,77 +522,95 @@ class HaPanelHistory extends LitElement {
   private _getEntityIds(): string[] {
     return this.__getEntityIds(
       this._targetPickerValue,
-      this.hass.entities,
-      this.hass.devices,
-      this.hass.areas
+      this._deviceEntityLookup,
+      this._areaEntityLookup,
+      this._areaDeviceLookup
     );
   }
 
   private __getEntityIds = memoizeOne(
     (
       targetPickerValue: HassServiceTarget,
-      entities: HomeAssistant["entities"],
-      devices: HomeAssistant["devices"],
-      areas: HomeAssistant["areas"]
+      deviceEntityLookup: DeviceEntityLookup | undefined,
+      areaEntityLookup: AreaEntityLookup | undefined,
+      areaDeviceLookup: AreaDeviceLookup | undefined
     ): string[] => {
-      if (!targetPickerValue) {
+      if (
+        !targetPickerValue ||
+        deviceEntityLookup === undefined ||
+        areaEntityLookup === undefined ||
+        areaDeviceLookup === undefined
+      ) {
         return [];
       }
 
-      const targetSelector = { target: {} };
-      const targetEntities = new Set(ensureArray(targetPickerValue.entity_id));
-      const targetDevices = new Set(ensureArray(targetPickerValue.device_id));
-      const targetAreas = new Set(ensureArray(targetPickerValue.area_id));
-      const targetFloors = new Set(ensureArray(targetPickerValue.floor_id));
-      const targetLabels = new Set(ensureArray(targetPickerValue.label_id));
+      const entityIds = new Set<string>();
+      let {
+        area_id: searchingAreaId,
+        device_id: searchingDeviceId,
+        entity_id: searchingEntityId,
+      } = targetPickerValue;
 
-      targetLabels.forEach((labelId) => {
-        const expanded = expandLabelTarget(
-          this.hass,
-          labelId,
-          areas,
-          devices,
-          entities,
-          targetSelector
-        );
-        expanded.devices.forEach((id) => targetDevices.add(id));
-        expanded.entities.forEach((id) => targetEntities.add(id));
-        expanded.areas.forEach((id) => targetAreas.add(id));
-      });
+      if (searchingAreaId) {
+        searchingAreaId = ensureArray(searchingAreaId);
+        for (const singleSearchingAreaId of searchingAreaId) {
+          const foundEntities = areaEntityLookup[singleSearchingAreaId];
+          if (foundEntities?.length) {
+            for (const foundEntity of foundEntities) {
+              if (foundEntity.entity_category === null) {
+                entityIds.add(foundEntity.entity_id);
+              }
+            }
+          }
 
-      targetFloors.forEach((floorId) => {
-        const expanded = expandFloorTarget(
-          this.hass,
-          floorId,
-          areas,
-          targetSelector
-        );
-        expanded.areas.forEach((id) => targetAreas.add(id));
-      });
+          const foundDevices = areaDeviceLookup[singleSearchingAreaId];
+          if (!foundDevices?.length) {
+            continue;
+          }
 
-      targetAreas.forEach((areaId) => {
-        const expanded = expandAreaTarget(
-          this.hass,
-          areaId,
-          devices,
-          entities,
-          targetSelector
-        );
-        expanded.devices.forEach((id) => targetDevices.add(id));
-        expanded.entities.forEach((id) => targetEntities.add(id));
-      });
+          for (const foundDevice of foundDevices) {
+            const foundDeviceEntities = deviceEntityLookup[foundDevice.id];
+            if (!foundDeviceEntities?.length) {
+              continue;
+            }
 
-      targetDevices.forEach((deviceId) => {
-        const expanded = expandDeviceTarget(
-          this.hass,
-          deviceId,
-          entities,
-          targetSelector
-        );
-        expanded.entities.forEach((id) => targetEntities.add(id));
-      });
+            for (const foundDeviceEntity of foundDeviceEntities) {
+              if (
+                (!foundDeviceEntity.area_id ||
+                  foundDeviceEntity.area_id === singleSearchingAreaId) &&
+                foundDeviceEntity.entity_category === null
+              ) {
+                entityIds.add(foundDeviceEntity.entity_id);
+              }
+            }
+          }
+        }
+      }
 
-      return Array.from(targetEntities);
+      if (searchingDeviceId) {
+        searchingDeviceId = ensureArray(searchingDeviceId);
+        for (const singleSearchingDeviceId of searchingDeviceId) {
+          const foundEntities = deviceEntityLookup[singleSearchingDeviceId];
+          if (!foundEntities?.length) {
+            continue;
+          }
+
+          for (const foundEntity of foundEntities) {
+            if (foundEntity.entity_category === null) {
+              entityIds.add(foundEntity.entity_id);
+            }
+          }
+        }
+      }
+
+      if (searchingEntityId) {
+        searchingEntityId = ensureArray(searchingEntityId);
+        for (const singleSearchingEntityId of searchingEntityId) {
+          entityIds.add(singleSearchingEntityId);
+        }
+      }
+
+      return [...entityIds];
     }
   );
 
@@ -606,12 +639,6 @@ class HaPanelHistory extends LitElement {
         ","
       );
     }
-    if (this._targetPickerValue.label_id) {
-      params.label_id = ensureArray(this._targetPickerValue.label_id).join(",");
-    }
-    if (this._targetPickerValue.floor_id) {
-      params.floor_id = ensureArray(this._targetPickerValue.floor_id).join(",");
-    }
     if (this._targetPickerValue.area_id) {
       params.area_id = ensureArray(this._targetPickerValue.area_id).join(",");
     }

src/panels/lovelace/cards/hui-stack-card.ts

@@ -35,9 +35,6 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
 
   @state() protected _config?: T;
 
-  @property({ type: Boolean, reflect: true })
-  public isPanel = false;
-
   public getCardSize(): number | Promise<number> {
     return 1;
   }
@@ -101,10 +98,10 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
         display: block;
         padding: 24px 16px 16px;
       }
-      :host([ispanel]) #root {
-        --ha-card-border-radius: var(--restore-card-border-radius);
-        --ha-card-border-width: var(--restore-card-border-width);
-        --ha-card-box-shadow: var(--restore-card-border-shadow);
+      :host {
+        --ha-card-border-radius: inherit !important;
+        --ha-card-border-width: inherit !important;
+        --ha-card-box-shadow: inherit !important;
       }
     `;
   }

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -35,7 +35,6 @@ import { ButtonsHeaderFooterConfig } from "../header-footer/types";
 const HIDE_DOMAIN = new Set([
   "automation",
   "configurator",
-  "conversation",
   "device_tracker",
   "geo_location",
   "persistent_notification",

src/panels/lovelace/common/validate-condition.ts

@@ -58,12 +58,18 @@ export interface AndCondition extends BaseCondition {
 
 function getValueFromEntityId(
   hass: HomeAssistant,
-  value: string
-): string | undefined {
-  if (isValidEntityId(value) && hass.states[value]) {
-    return hass.states[value]?.state;
+  value: string | string[]
+): string | string[] {
+  if (
+    typeof value === "string" &&
+    isValidEntityId(value) &&
+    hass.states[value]
+  ) {
+    value = hass.states[value]?.state;
+  } else if (Array.isArray(value)) {
+    value = value.map((v) => getValueFromEntityId(hass, v) as string);
   }
-  return undefined;
+  return value;
 }
 
 function checkStateCondition(
@@ -77,17 +83,8 @@ function checkStateCondition(
   let value = condition.state ?? condition.state_not;
 
   // Handle entity_id, UI should be updated for conditionnal card (filters does not have UI for now)
-  if (Array.isArray(value)) {
-    const entityValues = value
-      .map((v) => getValueFromEntityId(hass, v))
-      .filter((v): v is string => v !== undefined);
-    value = [...value, ...entityValues];
-  } else if (typeof value === "string") {
-    const entityValue = getValueFromEntityId(hass, value);
-    value = [value];
-    if (entityValue) {
-      value.push(entityValue);
-    }
+  if (Array.isArray(value) || typeof value === "string") {
+    value = getValueFromEntityId(hass, value);
   }
 
   return condition.state != null
@@ -106,10 +103,10 @@ function checkStateNumericCondition(
 
   // Handle entity_id, UI should be updated for conditionnal card (filters does not have UI for now)
   if (typeof above === "string") {
-    above = getValueFromEntityId(hass, above) ?? above;
+    above = getValueFromEntityId(hass, above) as string;
   }
   if (typeof below === "string") {
-    below = getValueFromEntityId(hass, below) ?? below;
+    below = getValueFromEntityId(hass, below) as string;
   }
 
   const numericState = Number(state);

src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts

@@ -172,14 +172,12 @@ class DialogDashboardStrategyEditor extends LitElement {
     `;
   }
 
-  private _takeControl(ev) {
-    ev.stopPropagation();
+  private _takeControl() {
     this._params!.takeControl();
     this.closeDialog();
   }
 
-  private _showRawConfigEditor(ev) {
-    ev.stopPropagation();
+  private _showRawConfigEditor() {
     this._params!.showRawConfigEditor();
     this.closeDialog();
   }

src/panels/lovelace/views/hui-panel-view.ts

@@ -130,9 +130,6 @@ export class PanelView extends LitElement implements LovelaceViewElement {
       :host {
         display: block;
         height: 100%;
-        --restore-card-border-radius: var(--ha-card-border-radius, 12px);
-        --restore-card-border-width: var(--ha-card-border-width, 1px);
-        --restore-card-box-shadow: var(--ha-card-box-shadow, none);
       }
 
       * {

src/panels/my/ha-panel-my.ts

@@ -116,9 +116,6 @@ export const getMyRedirects = (hasSupervisor: boolean): Redirects => ({
   entities: {
     redirect: "/config/entities",
   },
-  labels: {
-    redirect: "/config/labels",
-  },
   energy: {
     component: "energy",
     redirect: "/energy",

src/resources/ha-style.ts

@@ -32,7 +32,6 @@ const mainStyles = css`
     --accent-color: ${unsafeCSS(DEFAULT_ACCENT_COLOR)};
     --divider-color: rgba(0, 0, 0, 0.12);
     --outline-color: rgba(0, 0, 0, 0.12);
-    --outline-hover-color: rgba(0, 0, 0, 0.24);
 
     --scrollbar-thumb-color: rgb(194, 194, 194);
 

src/resources/styles-data.ts

@@ -15,7 +15,6 @@ export const darkStyles = {
   "switch-unchecked-track-color": "#9b9b9b",
   "divider-color": "rgba(225, 225, 225, .12)",
   "outline-color": "rgba(225, 225, 225, .12)",
-  "outline-hover-color": "rgba(225, 225, 225, .24)",
   "mdc-ripple-color": "#AAAAAA",
   "mdc-linear-progress-buffer-color": "rgba(255, 255, 255, 0.1)",
 
@@ -143,10 +142,7 @@ export const derivedStyles = {
   "mdc-select-disabled-ink-color": "var(--input-disabled-ink-color)",
   "mdc-select-dropdown-icon-color": "var(--input-dropdown-icon-color)",
   "mdc-select-disabled-dropdown-icon-color": "var(--input-disabled-ink-color)",
-  "ha-assist-chip-filled-container-color":
-    "rgba(var(--rgb-primary-text-color),0.15)",
-  "ha-assist-chip-active-container-color":
-    "rgba(var(--rgb-primary-color),0.15)",
+
   "chip-background-color": "rgba(var(--rgb-primary-text-color), 0.15)",
   // Vaadin
   "material-body-text-color": "var(--primary-text-color)",

src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts

@@ -129,7 +129,7 @@ export class HaStateControlAlarmControlPanelModes extends LitElement {
         max-height: max(320px, var(--modes-count, 1) * 80px);
         min-height: max(200px, var(--modes-count, 1) * 80px);
         --control-select-thickness: 130px;
-        --control-select-border-radius: 36px;
+        --control-select-border-radius: 48px;
         --control-select-color: var(--primary-color);
         --control-select-background: var(--disabled-color);
         --control-select-background-opacity: 0.2;

src/state-control/cover/ha-state-control-cover-position.ts

@@ -75,7 +75,7 @@ export class HaStateControlCoverPosition extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 36px;
+        --control-slider-border-radius: 48px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

src/state-control/cover/ha-state-control-cover-tilt-position.ts

@@ -112,7 +112,7 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 36px;
+        --control-slider-border-radius: 48px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

src/state-control/cover/ha-state-control-cover-toggle.ts

@@ -142,7 +142,7 @@ export class HaStateControlCoverToggle extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-switch-thickness: 130px;
-        --control-switch-border-radius: 36px;
+        --control-switch-border-radius: 48px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
@@ -159,7 +159,7 @@ export class HaStateControlCoverToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 36px;
+        --control-button-border-radius: 48px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {

src/state-control/fan/ha-state-control-fan-speed.ts

@@ -142,7 +142,7 @@ export class HaStateControlFanSpeed extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 36px;
+        --control-slider-border-radius: 48px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;
@@ -153,7 +153,7 @@ export class HaStateControlFanSpeed extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-select-thickness: 130px;
-        --control-select-border-radius: 36px;
+        --control-select-border-radius: 48px;
         --control-select-color: var(--primary-color);
         --control-select-background: var(--disabled-color);
         --control-select-background-opacity: 0.2;

src/state-control/ha-state-control-toggle.ts

@@ -133,7 +133,7 @@ export class HaStateControlToggle extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-switch-thickness: 130px;
-        --control-switch-border-radius: 36px;
+        --control-switch-border-radius: 48px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
@@ -150,7 +150,7 @@ export class HaStateControlToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 36px;
+        --control-button-border-radius: 48px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {

src/state-control/light/ha-state-control-light-brightness.ts

@@ -89,7 +89,7 @@ export class HaStateControlLightBrightness extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 36px;
+        --control-slider-border-radius: 48px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

src/state-control/lock/ha-state-control-lock-toggle.ts

@@ -167,7 +167,7 @@ export class HaStateControlLockToggle extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-switch-thickness: 130px;
-        --control-switch-border-radius: 36px;
+        --control-switch-border-radius: 48px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
@@ -187,7 +187,7 @@ export class HaStateControlLockToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 36px;
+        --control-button-border-radius: 48px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {

src/state-control/valve/ha-state-control-valve-position.ts

@@ -71,7 +71,7 @@ export class HaStateControlValvePosition extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 36px;
+        --control-slider-border-radius: 48px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

src/state-control/valve/ha-state-control-valve-toggle.ts

@@ -142,7 +142,7 @@ export class HaStateControlValveToggle extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-switch-thickness: 130px;
-        --control-switch-border-radius: 36px;
+        --control-switch-border-radius: 48px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
@@ -159,7 +159,7 @@ export class HaStateControlValveToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 36px;
+        --control-button-border-radius: 48px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {

src/translations/en.json

@@ -501,18 +501,11 @@
       },
       "subpage-data-table": {
         "filters": "Filters",
-        "clear_filter": "Clear filter",
-        "close_filter": "Close filters",
-        "exit_selection_mode": "Exit selection mode",
-        "enter_selection_mode": "Enter selection mode",
         "sort_by": "Sort by {sortColumn}",
         "group_by": "Group by {groupColumn}",
         "dont_group_by": "Don't group",
         "select": "Select",
-        "selected": "Selected {selected}",
-        "close_select_mode": "Close selection mode",
-        "select_all": "Select all",
-        "select_none": "Select none"
+        "selected": "Selected {selected}"
       },
       "config-entry-picker": {
         "config_entry": "Integration"
@@ -571,7 +564,6 @@
         "add_new_sugestion": "Add new category ''{name}''",
         "add_new": "Add new category…",
         "no_categories": "You don't have any categories",
-        "no_match": "No matching categories found",
         "add_dialog": {
           "title": "Add new category",
           "text": "Enter the name of the new category.",
@@ -600,7 +592,13 @@
         "no_areas": "You don't have any areas",
         "no_match": "No matching areas found",
         "unassigned_areas": "Unassigned areas",
-        "failed_create_area": "Failed to create area."
+        "add_dialog": {
+          "title": "Add new area",
+          "text": "Enter the name of the new area.",
+          "name": "Name",
+          "add": "Add",
+          "failed_create_area": "Failed to create area."
+        }
       },
       "floor-picker": {
         "clear": "Clear",
@@ -610,7 +608,13 @@
         "add_new": "Add new floor…",
         "no_floors": "You don't have any floors",
         "no_match": "No matching floors found",
-        "failed_create_floor": "Failed to create floor."
+        "add_dialog": {
+          "title": "Add new floor",
+          "text": "Enter the name of the new floor.",
+          "name": "Name",
+          "add": "Add",
+          "failed_create_floor": "Failed to create floor."
+        }
       },
       "area-filter": {
         "title": "Areas",
@@ -1114,7 +1118,6 @@
         "edit": "Edit entity",
         "details": "Details",
         "back_to_info": "Back to info",
-        "info": "Information",
         "related": "Related",
         "history": "History",
         "logbook": "Logbook",
@@ -1927,10 +1930,7 @@
             "aliases_section": "Aliases",
             "no_aliases": "No configured aliases",
             "configured_aliases": "{count} configured {count, plural,\n  one {alias}\n  other {aliases}\n}",
-            "aliases_description": "Aliases are alternative names used in voice assistants to refer to this floor.",
-            "areas_section": "Areas",
-            "areas_description": "Specify the areas that are on this floor.",
-            "add_area": "Add area"
+            "aliases_description": "Aliases are alternative names used in voice assistants to refer to this floor."
           }
         },
         "category": {
@@ -1959,13 +1959,8 @@
         "labels": {
           "caption": "Labels",
           "description": "Group devices and entities",
-          "headers": {
-            "name": "Name",
-            "icon": "Icon",
-            "color": "Color"
-          },
+          "headers": { "name": "Name", "icon": "Icon", "color": "Color" },
           "add_label": "Add label",
-          "manage_labels": "Manage labels",
           "no_labels": "You don't have any labels",
           "introduction": "Labels can help you organize your areas, devices and entities. They can be used to filter in the UI, or use them as a target in automations.",
           "introduction2": "Go to the area, device or entity you want to add a label to, and click on the edit button to assign labels to them.",
@@ -2266,8 +2261,7 @@
               "name": "Name",
               "entity_id": "Entity ID",
               "type": "Type",
-              "editable": "Editable",
-              "category": "Category"
+              "editable": "Editable"
             },
             "create_helper": "Create helper",
             "no_helpers": "Looks like you don't have any helpers yet!"
@@ -2671,7 +2665,6 @@
             "edit_automation": "Edit automation",
             "dev_automation": "Debug automation",
             "show_info_automation": "Show info about automation",
-            "show_settings": "Show settings",
             "delete": "[%key:ui::common::delete%]",
             "delete_confirm_title": "Delete automation?",
             "delete_confirm_text": "{name} will be permanently deleted.",
@@ -2690,16 +2683,7 @@
               "trigger": "Trigger",
               "actions": "Actions",
               "state": "State",
-              "category": "Category",
-              "area": "Area"
-            },
-            "bulk_action": "Action",
-            "bulk_actions": {
-              "move_category": "Move to category",
-              "no_category": "No category",
-              "add_label": "Add label",
-              "enable": "Enable",
-              "disable": "Disable"
+              "category": "Category"
             },
             "empty_header": "Start automating",
             "empty_text_1": "Automations make Home Assistant automatically respond to things happening in and around your home.",
@@ -3565,8 +3549,7 @@
             "headers": {
               "name": "Name",
               "state": "State",
-              "category": "Category",
-              "area": "Area"
+              "category": "Category"
             },
             "edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
             "assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",
@@ -3675,8 +3658,7 @@
               "state": "State",
               "name": "Name",
               "last_activated": "Last activated",
-              "category": "Category",
-              "area": "Area"
+              "category": "Category"
             },
             "edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
             "assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",
@@ -4060,9 +4042,6 @@
               "button": "Hide selected",
               "confirm_title": "Do you want to hide {number} {number, plural,\n  one {entity}\n  other {entities}\n}?",
               "confirm_text": "Hidden entities will not be shown on your dashboard. Their history is still tracked and you can still interact with them with services."
-            },
-            "unhide_selected": {
-              "button": "Unhide selected"
             }
           }
         },
@@ -5409,6 +5388,7 @@
             "type": "View type",
             "type_warning_sections": "You can not change your view to use the 'sections' view type because migration is not supported yet. Start from scratch with a new view if you want to experiment with the 'sections' view.",
             "type_warning_others": "You can not change your view to an other type because migration is not supported yet. Start from scratch with a new view if you want to use another view type.",
+
             "types": {
               "masonry": "Masonry (default)",
               "sidebar": "Sidebar",

yarn.lock

@@ -1526,14 +1526,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:6.26.1, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0":
-  version: 6.26.1
-  resolution: "@codemirror/view@npm:6.26.1"
+"@codemirror/view@npm:6.26.0, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0":
+  version: 6.26.0
+  resolution: "@codemirror/view@npm:6.26.0"
   dependencies:
     "@codemirror/state": "npm:^6.4.0"
     style-mod: "npm:^4.1.0"
     w3c-keyname: "npm:^2.2.4"
-  checksum: 10/6d2b19b2439c36b2712d3560eeb0c198ad2ee442ad22641c2b4bce94077812cffbb52ca12328219d3b9663b2dd0ffc63481432a2550839e5c7a7a53704e82a9a
+  checksum: 10/d4ef249044cbc293a7267c83e08671a68646fd7bbe1efb8d205c01385f157c93918eabeaedb62a4cc10598ab63818ac749cec4f6355fe0404d9d4beb7857c31f
   languageName: node
   linkType: hard
 
@@ -4543,15 +4543,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:7.4.0"
+"@typescript-eslint/eslint-plugin@npm:7.3.1":
+  version: 7.3.1
+  resolution: "@typescript-eslint/eslint-plugin@npm:7.3.1"
   dependencies:
     "@eslint-community/regexpp": "npm:^4.5.1"
-    "@typescript-eslint/scope-manager": "npm:7.4.0"
-    "@typescript-eslint/type-utils": "npm:7.4.0"
-    "@typescript-eslint/utils": "npm:7.4.0"
-    "@typescript-eslint/visitor-keys": "npm:7.4.0"
+    "@typescript-eslint/scope-manager": "npm:7.3.1"
+    "@typescript-eslint/type-utils": "npm:7.3.1"
+    "@typescript-eslint/utils": "npm:7.3.1"
+    "@typescript-eslint/visitor-keys": "npm:7.3.1"
     debug: "npm:^4.3.4"
     graphemer: "npm:^1.4.0"
     ignore: "npm:^5.2.4"
@@ -4564,44 +4564,44 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/9bd8852c7e4e9608c3fded94f7c60506cc7d2b6d8a8c1cad6d48969a7363751b20282874e55ccdf180635cf204cb10b3e1e5c3d1cff34d4fcd07762be3fc138e
+  checksum: 10/8ed276113a714d93ab3ababb1179e4785bd9378e6d97726519ea1d2ac502a94475e0be988c2ec427dcfc1e6950329d58da6e64131ee87028fce63493461cc51a
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@typescript-eslint/parser@npm:7.4.0"
+"@typescript-eslint/parser@npm:7.3.1":
+  version: 7.3.1
+  resolution: "@typescript-eslint/parser@npm:7.3.1"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:7.4.0"
-    "@typescript-eslint/types": "npm:7.4.0"
-    "@typescript-eslint/typescript-estree": "npm:7.4.0"
-    "@typescript-eslint/visitor-keys": "npm:7.4.0"
+    "@typescript-eslint/scope-manager": "npm:7.3.1"
+    "@typescript-eslint/types": "npm:7.3.1"
+    "@typescript-eslint/typescript-estree": "npm:7.3.1"
+    "@typescript-eslint/visitor-keys": "npm:7.3.1"
     debug: "npm:^4.3.4"
   peerDependencies:
     eslint: ^8.56.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/142a9e1187d305ed43b4fef659c36fa4e28359467198c986f0955c70b4067c9799f4c85d9881fbf099c55dfb265e30666e28b3ef290520e242b45ca7cb8e4ca9
+  checksum: 10/018326010fec1dcefd75809ccac5102a475bf1e052d824b898d707e7c0bf3e51e101164b410d1b2a513628985c96eb412538644d2005e26b99a22db6eb9402df
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@typescript-eslint/scope-manager@npm:7.4.0"
+"@typescript-eslint/scope-manager@npm:7.3.1":
+  version: 7.3.1
+  resolution: "@typescript-eslint/scope-manager@npm:7.3.1"
   dependencies:
-    "@typescript-eslint/types": "npm:7.4.0"
-    "@typescript-eslint/visitor-keys": "npm:7.4.0"
-  checksum: 10/8cf9292444f9731017a707cac34bef5ae0eb33b5cd42ed07fcd046e981d97889d9201d48e02f470f2315123f53771435e10b1dc81642af28a11df5352a8e8be2
+    "@typescript-eslint/types": "npm:7.3.1"
+    "@typescript-eslint/visitor-keys": "npm:7.3.1"
+  checksum: 10/7384d1f46d7f3678a1135a1ac0bd8b6dfa2f01e93b19e2510c7082766cf6983a1bf80b4ccf498651199a81d9f2bdb65101fd7a19226a723260514204d0c30b34
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@typescript-eslint/type-utils@npm:7.4.0"
+"@typescript-eslint/type-utils@npm:7.3.1":
+  version: 7.3.1
+  resolution: "@typescript-eslint/type-utils@npm:7.3.1"
   dependencies:
-    "@typescript-eslint/typescript-estree": "npm:7.4.0"
-    "@typescript-eslint/utils": "npm:7.4.0"
+    "@typescript-eslint/typescript-estree": "npm:7.3.1"
+    "@typescript-eslint/utils": "npm:7.3.1"
     debug: "npm:^4.3.4"
     ts-api-utils: "npm:^1.0.1"
   peerDependencies:
@@ -4609,23 +4609,23 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/a8bd0929d8237679b2b8a7817f070a4b9658ee976882fba8ff37e4a70dd33f87793e1b157771104111fe8054eaa8ad437a010b6aa465072fbdb932647125db2d
+  checksum: 10/fae9003a76a8f2a2a4bb88dc0f82c0a1ca0688633183fac391920e7124a12807aac84bb287a21f61e99523c15223d1c08e7680685ebf21d07429604cba6c420b
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@typescript-eslint/types@npm:7.4.0"
-  checksum: 10/2782c5bf65cd3dfa9cd32bc3023676bbca22144987c3f6c6b67fd96c73d4a60b85a57458c49fd11b9971ac6531824bb3ae0664491e7a6de25d80c523c9be92b7
+"@typescript-eslint/types@npm:7.3.1":
+  version: 7.3.1
+  resolution: "@typescript-eslint/types@npm:7.3.1"
+  checksum: 10/c9c8eae1cf937cececd99a253bd65eb71b40206e79cf917ad9c3b3ab80cc7ce5fefb2804f9fd2a70e7438951f0d1e63df3031fc61e3a08dfef5fde208a12e0ed
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@typescript-eslint/typescript-estree@npm:7.4.0"
+"@typescript-eslint/typescript-estree@npm:7.3.1":
+  version: 7.3.1
+  resolution: "@typescript-eslint/typescript-estree@npm:7.3.1"
   dependencies:
-    "@typescript-eslint/types": "npm:7.4.0"
-    "@typescript-eslint/visitor-keys": "npm:7.4.0"
+    "@typescript-eslint/types": "npm:7.3.1"
+    "@typescript-eslint/visitor-keys": "npm:7.3.1"
     debug: "npm:^4.3.4"
     globby: "npm:^11.1.0"
     is-glob: "npm:^4.0.3"
@@ -4635,34 +4635,34 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/162ec9d7582f45588342e1be36fdb60e41f50bbdfbc3035c91b517ff5d45244f776921c88d88e543e1c7d0f1e6ada5474a8316b78f1b0e6d2233b101bc45b166
+  checksum: 10/363ad9864b56394b4000dff7c2b77d0ea52042c3c20e3b86c0f3c66044915632d9890255527c6f3a5ef056886dec72e38fbcfce49d4ad092c160440f54128230
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@typescript-eslint/utils@npm:7.4.0"
+"@typescript-eslint/utils@npm:7.3.1":
+  version: 7.3.1
+  resolution: "@typescript-eslint/utils@npm:7.3.1"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.4.0"
     "@types/json-schema": "npm:^7.0.12"
     "@types/semver": "npm:^7.5.0"
-    "@typescript-eslint/scope-manager": "npm:7.4.0"
-    "@typescript-eslint/types": "npm:7.4.0"
-    "@typescript-eslint/typescript-estree": "npm:7.4.0"
+    "@typescript-eslint/scope-manager": "npm:7.3.1"
+    "@typescript-eslint/types": "npm:7.3.1"
+    "@typescript-eslint/typescript-estree": "npm:7.3.1"
     semver: "npm:^7.5.4"
   peerDependencies:
     eslint: ^8.56.0
-  checksum: 10/ffed27e770c486cd000ff892d9049b0afe8b9d6318452a5355b78a37436cbb414bceacae413a2ac813f3e584684825d5e0baa2e6376b7ad6013a108ac91bc19d
+  checksum: 10/234d9d65fe5d0f4a31345bd8f5a6f2879a578b3a531a14c2b3edaa7fb587c71d26249f86c41857382c0405384dc104955c02b588b3cee6fc2734f1ae40aef07b
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@typescript-eslint/visitor-keys@npm:7.4.0"
+"@typescript-eslint/visitor-keys@npm:7.3.1":
+  version: 7.3.1
+  resolution: "@typescript-eslint/visitor-keys@npm:7.3.1"
   dependencies:
-    "@typescript-eslint/types": "npm:7.4.0"
+    "@typescript-eslint/types": "npm:7.3.1"
     eslint-visitor-keys: "npm:^3.4.1"
-  checksum: 10/70dc99f2ad116c6e2d9e55af249e4453e06bba2ceea515adef2d2e86e97e557865bb1b1d467667462443eb0d624baba36f7442fd1082f3874339bbc381c26e93
+  checksum: 10/163a93597c1d696920a19b3c1627d02368bdd52059f811c0fadd680c38034bb6418ebefe99d8ce26e0dd44ae184f18fab186af775de1a8771256be1a7905c174
   languageName: node
   linkType: hard
 
@@ -9604,7 +9604,7 @@ __metadata:
     "@codemirror/legacy-modes": "npm:6.3.3"
     "@codemirror/search": "npm:6.5.6"
     "@codemirror/state": "npm:6.4.1"
-    "@codemirror/view": "npm:6.26.1"
+    "@codemirror/view": "npm:6.26.0"
     "@egjs/hammerjs": "npm:2.0.17"
     "@formatjs/intl-datetimeformat": "npm:6.12.3"
     "@formatjs/intl-displaynames": "npm:6.6.6"
@@ -9688,8 +9688,8 @@ __metadata:
     "@types/tar": "npm:6.1.11"
     "@types/ua-parser-js": "npm:0.7.39"
     "@types/webspeechapi": "npm:0.0.29"
-    "@typescript-eslint/eslint-plugin": "npm:7.4.0"
-    "@typescript-eslint/parser": "npm:7.4.0"
+    "@typescript-eslint/eslint-plugin": "npm:7.3.1"
+    "@typescript-eslint/parser": "npm:7.3.1"
     "@vaadin/combo-box": "npm:24.3.10"
     "@vaadin/vaadin-themable-mixin": "npm:24.3.10"
     "@vibrant/color": "npm:3.2.1-alpha.1"