Add entities filtering and reordering for areas strategy dashboard (#24677)

* Add entities editor * Save entities per domain and area * Use hidden and reorder logic in dashboard * Add overview hidden logic * Don't use icon for nav * Remove overview hidden * Change default text * Fix icons * Rename config properties
2025-07-24 09:46:36 +00:00 · 2025-03-19 21:11:46 +01:00 · 2025-03-19 21:11:46 +01:00 · 2c0c48106d
commit 2c0c48106d
parent 0e8be25a60
10 changed files with 489 additions and 151 deletions
--- a/src/common/string/compare.ts
+++ b/src/common/string/compare.ts
@ -45,3 +45,22 @@ export const caseInsensitiveStringCompare = (

  return fallbackStringCompare(a.toLowerCase(), b.toLowerCase());
 };
+
+export const orderCompare = (order: string[]) => (a: string, b: string) => {
+  const idxA = order.indexOf(a);
+  const idxB = order.indexOf(b);
+
+  if (idxA === idxB) {
+    return 0;
+  }
+
+  if (idxA === -1) {
+    return 1;
+  }
+
+  if (idxB === -1) {
+    return -1;
+  }
+
+  return idxA - idxB;
+};
--- a/src/components/ha-areas-display-editor.ts
+++ b/src/components/ha-areas-display-editor.ts
@ -33,8 +33,11 @@ export class HaAreasDisplayEditor extends LitElement {

  @property({ type: Boolean }) public required = false;

+  @property({ type: Boolean, attribute: "show-navigation-button" })
+  public showNavigationButton = false;
+
  protected render(): TemplateResult {
-    const compare = areaCompare(this.hass.areas, this.value?.order);
+    const compare = areaCompare(this.hass.areas);

    const areas = Object.values(this.hass.areas).sort((areaA, areaB) =>
      compare(areaA.area_id, areaB.area_id)
@ -68,6 +71,7 @@ export class HaAreasDisplayEditor extends LitElement {
          .items=${items}
          .value=${value}
          @value-changed=${this._areaDisplayChanged}
+          .showNavigationButton=${this.showNavigationButton}
        ></ha-items-display-editor>
      </ha-expansion-panel>
    `;
--- a/src/components/ha-entities-display-editor.ts
+++ b/src/components/ha-entities-display-editor.ts
@ -0,0 +1,81 @@
+import type { TemplateResult } from "lit";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { entityIcon } from "../data/icons";
+import type { HomeAssistant } from "../types";
+import "./ha-items-display-editor";
+import type { DisplayItem, DisplayValue } from "./ha-items-display-editor";
+
+export interface EntitiesDisplayValue {
+  hidden?: string[];
+  order?: string[];
+}
+
+@customElement("ha-entities-display-editor")
+export class HaEntitiesDisplayEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public label?: string;
+
+  @property({ attribute: false }) public value?: EntitiesDisplayValue;
+
+  @property({ attribute: false }) public entitiesIds: string[] = [];
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public expanded = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  protected render(): TemplateResult {
+    const entities = this.entitiesIds
+      .map((entityId) => this.hass.states[entityId])
+      .filter(Boolean);
+
+    const items: DisplayItem[] = entities.map((entity) => ({
+      value: entity.entity_id,
+      label: computeStateName(entity),
+      icon: entityIcon(this.hass, entity),
+    }));
+
+    const value: DisplayValue = {
+      order: this.value?.order ?? [],
+      hidden: this.value?.hidden ?? [],
+    };
+
+    return html`
+      <ha-items-display-editor
+        .hass=${this.hass}
+        .items=${items}
+        .value=${value}
+        @value-changed=${this._itemDisplayChanged}
+      ></ha-items-display-editor>
+    `;
+  }
+
+  private _itemDisplayChanged(ev) {
+    ev.stopPropagation();
+    const value = ev.detail.value as DisplayValue;
+    const newValue: EntitiesDisplayValue = {
+      ...this.value,
+      ...value,
+    };
+    if (newValue.hidden?.length === 0) {
+      delete newValue.hidden;
+    }
+    if (newValue.order?.length === 0) {
+      delete newValue.order;
+    }
+    fireEvent(this, "value-changed", { value: newValue });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-entities-display-editor": HaEntitiesDisplayEditor;
+  }
+}
--- a/src/components/ha-items-display-editor.ts
+++ b/src/components/ha-items-display-editor.ts
@ -1,22 +1,26 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
+import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { orderCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-icon-button";
-import "./ha-icon-button-next";
+import "./ha-icon-next";
 import "./ha-md-list";
 import "./ha-md-list-item";
 import "./ha-sortable";
 import "./ha-svg-icon";

 export interface DisplayItem {
-  icon?: string;
+  icon?: string | Promise<string | undefined>;
  iconPath?: string;
  value: string;
  label: string;
@ -52,6 +56,10 @@ export class HaItemDisplayEditor extends LitElement {
    hidden: [],
  };

+  @property({ attribute: false }) public actionsRenderer?: (
+    item: DisplayItem
+  ) => TemplateResult<1> | typeof nothing;
+
  private _showIcon = new ResizeController(this, {
    callback: (entries) => entries[0]?.contentRect.width > 450,
  });
@ -70,7 +78,11 @@ export class HaItemDisplayEditor extends LitElement {
      newHidden.push(value);
    }

-    const newVisibleItems = this._visibleItems(this.items, newHidden);
+    const newVisibleItems = this._visibleItems(
+      this.items,
+      newHidden,
+      this.value.order
+    );
    const newOrder = newVisibleItems.map((a) => a.value);

    this.value = {
@ -84,7 +96,11 @@ export class HaItemDisplayEditor extends LitElement {
    ev.stopPropagation();
    const { oldIndex, newIndex } = ev.detail;

-    const visibleItems = this._visibleItems(this.items, this.value.hidden);
+    const visibleItems = this._visibleItems(
+      this.items,
+      this.value.hidden,
+      this.value.order
+    );
    const newOrder = visibleItems.map((item) => item.value);

    const movedItem = newOrder.splice(oldIndex, 1)[0];
@ -103,8 +119,21 @@ export class HaItemDisplayEditor extends LitElement {
    ev.stopPropagation();
  }

-  private _visibleItems = memoizeOne((items: DisplayItem[], hidden: string[]) =>
-    items.filter((item) => !hidden.includes(item.value))
+  private _visibleItems = memoizeOne(
+    (items: DisplayItem[], hidden: string[], order: string[]) => {
+      const compare = orderCompare(order);
+      return items
+        .filter((item) => !hidden.includes(item.value))
+        .sort((a, b) => compare(a.value, b.value));
+    }
+  );
+
+  private _allItems = memoizeOne(
+    (items: DisplayItem[], hidden: string[], order: string[]) => {
+      const visibleItems = this._visibleItems(items, hidden, order);
+      const hiddenItems = this._hiddenItems(items, hidden);
+      return [...visibleItems, ...hiddenItems];
+    }
  );

  private _hiddenItems = memoizeOne((items: DisplayItem[], hidden: string[]) =>
@ -112,10 +141,11 @@ export class HaItemDisplayEditor extends LitElement {
  );

  protected render() {
-    const allItems = [
-      ...this._visibleItems(this.items, this.value.hidden),
-      ...this._hiddenItems(this.items, this.value.hidden),
-    ];
+    const allItems = this._allItems(
+      this.items,
+      this.value.hidden,
+      this.value.order
+    );

    const showIcon = this._showIcon.value;
    return html`
@ -128,11 +158,18 @@ export class HaItemDisplayEditor extends LitElement {
          ${repeat(
            allItems,
            (item) => item.value,
-            (item, _idx) => {
+            (item: DisplayItem, _idx) => {
              const isVisible = !this.value.hidden.includes(item.value);
              const { label, value, description, icon, iconPath } = item;
              return html`
                <ha-md-list-item
+                  type=${ifDefined(
+                    this.showNavigationButton ? "button" : undefined
+                  )}
+                  @click=${this.showNavigationButton
+                    ? this._navigate
+                    : undefined}
+                  .value=${value}
                  class=${classMap({
                    hidden: !isVisible,
                    draggable: isVisible,
@ -157,7 +194,7 @@ export class HaItemDisplayEditor extends LitElement {
                      ? html`
                          <ha-icon
                            class="icon"
-                            .icon=${icon}
+                            .icon=${until(icon, "")}
                            slot="start"
                          ></ha-icon>
                        `
@ -170,6 +207,11 @@ export class HaItemDisplayEditor extends LitElement {
                            ></ha-svg-icon>
                          `
                        : nothing}
+                  ${this.actionsRenderer
+                    ? html`
+                        <span slot="end"> ${this.actionsRenderer(item)} </span>
+                      `
+                    : nothing}
                  <ha-icon-button
                    .path=${isVisible ? mdiEye : mdiEyeOff}
                    slot="end"
@ -183,13 +225,7 @@ export class HaItemDisplayEditor extends LitElement {
                    @click=${this._toggle}
                  ></ha-icon-button>
                  ${this.showNavigationButton
-                    ? html`
-                        <ha-icon-button-next
-                          slot="end"
-                          .value=${value}
-                          @click=${this._navigate}
-                        ></ha-icon-button-next>
-                      `
+                    ? html` <ha-icon-next slot="end"></ha-icon-next> `
                    : nothing}
                </ha-md-list-item>
              `;
--- a/src/panels/lovelace/strategies/areas/area-view-strategy.ts
+++ b/src/panels/lovelace/strategies/areas/area-view-strategy.ts
@ -1,7 +1,5 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
-import type { EntityFilterFunc } from "../../../../common/entity/entity_filter";
-import { generateEntityFilter } from "../../../../common/entity/entity_filter";
 import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
@ -13,118 +11,21 @@ import { supportsLightBrightnessCardFeature } from "../../card-features/hui-ligh
 import { supportsLockCommandsCardFeature } from "../../card-features/hui-lock-commands-card-feature";
 import { supportsTargetTemperatureCardFeature } from "../../card-features/hui-target-temperature-card-feature";
 import type { LovelaceCardFeatureConfig } from "../../card-features/types";
+import {
+  AREA_STRATEGY_GROUP_ICONS,
+  AREA_STRATEGY_GROUP_LABELS,
+  getAreaGroupedEntities,
+} from "./helpers/area-strategy-helper";

-type Group = "lights" | "climate" | "media_players" | "security";
-
-type AreaEntitiesByGroup = Record<Group, string[]>;
-
-type AreaFilteredByGroup = Record<Group, EntityFilterFunc[]>;
-
-export const getAreaGroupedEntities = (
-  area: string,
-  hass: HomeAssistant,
-  controlOnly = false
-): AreaEntitiesByGroup => {
-  const allEntities = Object.keys(hass.states);
-
-  const groupedFilters: AreaFilteredByGroup = {
-    lights: [
-      generateEntityFilter(hass, {
-        domain: "light",
-        area: area,
-        entity_category: "none",
-      }),
-    ],
-    climate: [
-      generateEntityFilter(hass, {
-        domain: "climate",
-        area: area,
-        entity_category: "none",
-      }),
-      generateEntityFilter(hass, {
-        domain: "humidifier",
-        area: area,
-        entity_category: "none",
-      }),
-      generateEntityFilter(hass, {
-        domain: "cover",
-        area: area,
-        device_class: [
-          "shutter",
-          "awning",
-          "blind",
-          "curtain",
-          "shade",
-          "shutter",
-          "window",
-        ],
-        entity_category: "none",
-      }),
-      ...(controlOnly
-        ? []
-        : [
-            generateEntityFilter(hass, {
-              domain: "binary_sensor",
-              area: area,
-              device_class: "window",
-              entity_category: "none",
-            }),
-          ]),
-    ],
-    media_players: [
-      generateEntityFilter(hass, {
-        domain: "media_player",
-        area: area,
-        entity_category: "none",
-      }),
-    ],
-    security: [
-      generateEntityFilter(hass, {
-        domain: "alarm_control_panel",
-        area: area,
-        entity_category: "none",
-      }),
-      generateEntityFilter(hass, {
-        domain: "lock",
-        area: area,
-        entity_category: "none",
-      }),
-      generateEntityFilter(hass, {
-        domain: "cover",
-        device_class: ["door", "garage", "gate"],
-        area: area,
-        entity_category: "none",
-      }),
-      ...(controlOnly
-        ? []
-        : [
-            generateEntityFilter(hass, {
-              domain: "binary_sensor",
-              device_class: ["door", "garage_door"],
-              area: area,
-              entity_category: "none",
-            }),
-          ]),
-    ],
-  };
-
-  return Object.fromEntries(
-    Object.entries(groupedFilters).map(([group, filters]) => [
-      group,
-      filters.reduce<string[]>(
-        (acc, filter) => [
-          ...acc,
-          ...allEntities.filter((entity) => filter(entity)),
-        ],
-        []
-      ),
-    ])
-  ) as AreaEntitiesByGroup;
-};
+export interface EntitiesDisplay {
+  hidden?: string[];
+  order?: string[];
+}

 export interface AreaViewStrategyConfig {
  type: "area";
  area?: string;
+  groups_options?: Record<string, EntitiesDisplay>;
 }

 const computeTileCardConfig =
@ -207,21 +108,24 @@ export class AreaViewStrategy extends ReactiveElement {
      });
    }

-    const groupedEntities = getAreaGroupedEntities(config.area, hass);
+    const groupedEntities = getAreaGroupedEntities(
+      config.area,
+      hass,
+      config.groups_options
+    );

    const computeTileCard = computeTileCardConfig(hass);

-    const {
-      lights,
-      climate,
-      media_players: mediaPlayers,
-      security,
-    } = groupedEntities;
+    const { lights, climate, media_players, security } = groupedEntities;
+
    if (lights.length > 0) {
      sections.push({
        type: "grid",
        cards: [
-          computeHeadingCard("Lights", "mdi:lightbulb"),
+          computeHeadingCard(
+            AREA_STRATEGY_GROUP_LABELS.lights,
+            AREA_STRATEGY_GROUP_ICONS.lights
+          ),
          ...lights.map(computeTileCard),
        ],
      });
@ -231,18 +135,24 @@ export class AreaViewStrategy extends ReactiveElement {
      sections.push({
        type: "grid",
        cards: [
-          computeHeadingCard("Climate", "mdi:home-thermometer"),
+          computeHeadingCard(
+            AREA_STRATEGY_GROUP_LABELS.climate,
+            AREA_STRATEGY_GROUP_ICONS.climate
+          ),
          ...climate.map(computeTileCard),
        ],
      });
    }

-    if (mediaPlayers.length > 0) {
+    if (media_players.length > 0) {
      sections.push({
        type: "grid",
        cards: [
-          computeHeadingCard("Entertainment", "mdi:multimedia"),
-          ...mediaPlayers.map(computeTileCard),
+          computeHeadingCard(
+            AREA_STRATEGY_GROUP_LABELS.media_players,
+            AREA_STRATEGY_GROUP_ICONS.media_players
+          ),
+          ...media_players.map(computeTileCard),
        ],
      });
    }
@ -251,7 +161,10 @@ export class AreaViewStrategy extends ReactiveElement {
      sections.push({
        type: "grid",
        cards: [
-          computeHeadingCard("Security", "mdi:security"),
+          computeHeadingCard(
+            AREA_STRATEGY_GROUP_LABELS.security,
+            AREA_STRATEGY_GROUP_ICONS.security
+          ),
          ...security.map(computeTileCard),
        ],
      });
--- a/src/panels/lovelace/strategies/areas/areas-dashboard-strategy.ts
+++ b/src/panels/lovelace/strategies/areas/areas-dashboard-strategy.ts
@ -3,17 +3,25 @@ import { customElement } from "lit/decorators";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { LovelaceViewRawConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
-import type { AreaViewStrategyConfig } from "../area/area-view-strategy";
+import type {
+  AreaViewStrategyConfig,
+  EntitiesDisplay,
+} from "./area-view-strategy";
 import type { LovelaceStrategyEditor } from "../types";
 import type { AreasViewStrategyConfig } from "./areas-view-strategy";
 import { computeAreaPath, getAreas } from "./helpers/areas-strategy-helpers";

+interface AreaOptions {
+  groups_options?: Record<string, EntitiesDisplay>;
+}
+
 export interface AreasDashboardStrategyConfig {
  type: "areas";
  areas_display?: {
    hidden?: string[];
    order?: string[];
  };
+  areas_options?: Record<string, AreaOptions>;
 }

@customElement("areas-dashboard-strategy")
@ -30,13 +38,15 @@ export class AreasDashboardStrategy extends ReactiveElement {

    const areaViews = areas.map<LovelaceViewRawConfig>((area) => {
      const path = computeAreaPath(area.area_id);
+      const areaConfig = config.areas_options?.[area.area_id];
+
      return {
        title: area.name,
-        icon: area.icon || undefined,
        path: path,
        strategy: {
          type: "area",
          area: area.area_id,
+          groups_options: areaConfig?.groups_options,
        } satisfies AreaViewStrategyConfig,
      };
    });
@ -50,6 +60,7 @@ export class AreasDashboardStrategy extends ReactiveElement {
          strategy: {
            type: "areas",
            areas_display: config.areas_display,
+            areas_options: config.areas_options,
          } satisfies AreasViewStrategyConfig,
        },
        ...areaViews,
--- a/src/panels/lovelace/strategies/areas/areas-view-strategy.ts
+++ b/src/panels/lovelace/strategies/areas/areas-view-strategy.ts
@ -3,8 +3,13 @@ import { customElement } from "lit/decorators";
 import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
-import { getAreaGroupedEntities } from "../area/area-view-strategy";
+import { getAreaGroupedEntities } from "./helpers/area-strategy-helper";
 import { computeAreaPath, getAreas } from "./helpers/areas-strategy-helpers";
+import type { EntitiesDisplay } from "./area-view-strategy";
+
+interface AreaOptions {
+  groups_options?: Record<string, EntitiesDisplay>;
+}

 export interface AreasViewStrategyConfig {
  type: "areas";
@ -12,6 +17,7 @@ export interface AreasViewStrategyConfig {
    hidden?: string[];
    order?: string[];
  };
+  areas_options?: Record<string, AreaOptions>;
 }

@customElement("areas-view-strategy")
@ -30,7 +36,13 @@ export class AreasViewStrategy extends ReactiveElement {
      .map<LovelaceSectionConfig | undefined>((area) => {
        const path = computeAreaPath(area.area_id);

-        const groups = getAreaGroupedEntities(area.area_id, hass, true);
+        const areaConfig = config.areas_options?.[area.area_id];
+
+        const groups = getAreaGroupedEntities(
+          area.area_id,
+          hass,
+          areaConfig?.groups_options
+        );

        const entities = [
          ...groups.lights,
@ -67,7 +79,7 @@ export class AreasViewStrategy extends ReactiveElement {
              : [
                  {
                    type: "markdown",
-                    content: "No controllable devices in this area.",
+                    content: "No entities in this area.",
                  },
                ]),
          ],
--- a/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts
+++ b/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts
@ -1,9 +1,20 @@
-import { html, LitElement, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-areas-display-editor";
 import type { AreasDisplayValue } from "../../../../../components/ha-areas-display-editor";
+import "../../../../../components/ha-entities-display-editor";
+import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-icon-button-prev";
+import "../../../../../components/ha-icon";
 import type { HomeAssistant } from "../../../../../types";
+import type { AreaStrategyGroup } from "../helpers/area-strategy-helper";
+import {
+  AREA_STRATEGY_GROUP_ICONS,
+  AREA_STRATEGY_GROUPS,
+  AREA_STRATEGY_GROUP_LABELS,
+  getAreaGroupedEntities,
+} from "../helpers/area-strategy-helper";
 import type { LovelaceStrategyEditor } from "../../types";
 import type { AreasDashboardStrategyConfig } from "../areas-dashboard-strategy";

@ -21,11 +32,62 @@ export class HuiAreasDashboardStrategyEditor
    this._config = config;
  }

+  @state()
+  private _area?: string;
+
  protected render() {
    if (!this.hass || !this._config) {
      return nothing;
    }

+    if (this._area) {
+      const groups = getAreaGroupedEntities(this._area, this.hass);
+
+      const area = this.hass.areas[this._area];
+
+      return html`
+        <div class="toolbar">
+          <ha-icon-button-prev @click=${this._back}></ha-icon-button-prev>
+          <p>${area.name}</p>
+        </div>
+        ${AREA_STRATEGY_GROUPS.map((group) => {
+          const entities = groups[group] || [];
+          const value =
+            this._config!.areas_options?.[this._area!]?.groups_options?.[group];
+
+          return html`
+            <ha-expansion-panel
+              header=${AREA_STRATEGY_GROUP_LABELS[group]}
+              expanded
+              outlined
+            >
+              <ha-icon
+                slot="leading-icon"
+                .icon=${AREA_STRATEGY_GROUP_ICONS[group]}
+              ></ha-icon>
+              ${entities.length
+                ? html`
+                    <ha-entities-display-editor
+                      .hass=${this.hass}
+                      .value=${value}
+                      .label=${group}
+                      @value-changed=${this._entitiesDisplayChanged}
+                      .group=${group}
+                      .area=${this._area}
+                      .entitiesIds=${entities}
+                    ></ha-entities-display-editor>
+                  `
+                : html`
+                    <p>
+                      No entities in this section, it will not be displayed.
+                    </p>
+                  `}
+            </ha-expansion-panel>
+          `;
+        })}
+      `;
+    }
+
    const value = this._config.areas_display;

    return html`
@ -35,13 +97,25 @@ export class HuiAreasDashboardStrategyEditor
        .label=${this.hass.localize(
          "ui.panel.lovelace.editor.strategy.areas.areas_display"
        )}
-        @value-changed=${this._areaDisplayChanged}
+        @value-changed=${this._areasDisplayChanged}
        expanded
+        show-navigation-button
+        @item-display-navigate-clicked=${this._handleAreaNavigate}
      ></ha-areas-display-editor>
    `;
  }

-  private _areaDisplayChanged(ev: CustomEvent): void {
+  private _back(): void {
+    if (this._area) {
+      this._area = undefined;
+    }
+  }
+
+  private _handleAreaNavigate(ev: CustomEvent): void {
+    this._area = ev.detail.value;
+  }
+
+  private _areasDisplayChanged(ev: CustomEvent): void {
    const value = ev.detail.value as AreasDisplayValue;
    const newConfig: AreasDashboardStrategyConfig = {
      ...this._config!,
@ -50,6 +124,45 @@ export class HuiAreasDashboardStrategyEditor

    fireEvent(this, "config-changed", { config: newConfig });
  }
+
+  private _entitiesDisplayChanged(ev: CustomEvent): void {
+    const value = ev.detail.value as AreasDisplayValue;
+
+    const { group, area } = ev.currentTarget as unknown as {
+      group: AreaStrategyGroup;
+      area: string;
+    };
+
+    const newConfig: AreasDashboardStrategyConfig = {
+      ...this._config!,
+      areas_options: {
+        ...this._config!.areas_options,
+        [area]: {
+          ...this._config!.areas_options?.[area],
+          groups_options: {
+            ...this._config!.areas_options?.[area]?.groups_options,
+            [group]: value,
+          },
+        },
+      },
+    };
+
+    fireEvent(this, "config-changed", { config: newConfig });
+  }
+
+  static get styles() {
+    return [
+      css`
+        .toolbar {
+          display: flex;
+          align-items: center;
+        }
+        ha-expansion-panel {
+          margin-bottom: 8px;
+        }
+      `,
+    ];
+  }
 }

 declare global {
--- a/src/panels/lovelace/strategies/areas/helpers/area-strategy-helper.ts
+++ b/src/panels/lovelace/strategies/areas/helpers/area-strategy-helper.ts
@ -0,0 +1,149 @@
+import type { EntityFilterFunc } from "../../../../../common/entity/entity_filter";
+import { generateEntityFilter } from "../../../../../common/entity/entity_filter";
+import { orderCompare } from "../../../../../common/string/compare";
+import type { HomeAssistant } from "../../../../../types";
+
+export const AREA_STRATEGY_GROUPS = [
+  "lights",
+  "climate",
+  "media_players",
+  "security",
+] as const;
+
+export const AREA_STRATEGY_GROUP_ICONS = {
+  lights: "mdi:lightbulb",
+  climate: "mdi:home-thermometer",
+  media_players: "mdi:multimedia",
+  security: "mdi:security",
+};
+
+// Todo be replace by translation when validated
+export const AREA_STRATEGY_GROUP_LABELS = {
+  lights: "Lights",
+  climate: "Climate",
+  media_players: "Entertainment",
+  security: "Security",
+};
+
+export type AreaStrategyGroup = (typeof AREA_STRATEGY_GROUPS)[number];
+
+type AreaEntitiesByGroup = Record<AreaStrategyGroup, string[]>;
+
+type AreaFilteredByGroup = Record<AreaStrategyGroup, EntityFilterFunc[]>;
+
+interface DisplayOptions {
+  hidden?: string[];
+  order?: string[];
+}
+
+type AreaGroupsDisplayOptions = Record<string, DisplayOptions>;
+
+export const getAreaGroupedEntities = (
+  area: string,
+  hass: HomeAssistant,
+  displayOptions?: AreaGroupsDisplayOptions
+): AreaEntitiesByGroup => {
+  const allEntities = Object.keys(hass.states);
+
+  const groupedFilters: AreaFilteredByGroup = {
+    lights: [
+      generateEntityFilter(hass, {
+        domain: "light",
+        area: area,
+        entity_category: "none",
+      }),
+    ],
+    climate: [
+      generateEntityFilter(hass, {
+        domain: "climate",
+        area: area,
+        entity_category: "none",
+      }),
+      generateEntityFilter(hass, {
+        domain: "humidifier",
+        area: area,
+        entity_category: "none",
+      }),
+      generateEntityFilter(hass, {
+        domain: "cover",
+        area: area,
+        device_class: [
+          "shutter",
+          "awning",
+          "blind",
+          "curtain",
+          "shade",
+          "shutter",
+          "window",
+        ],
+        entity_category: "none",
+      }),
+      generateEntityFilter(hass, {
+        domain: "binary_sensor",
+        area: area,
+        device_class: "window",
+        entity_category: "none",
+      }),
+    ],
+    media_players: [
+      generateEntityFilter(hass, {
+        domain: "media_player",
+        area: area,
+        entity_category: "none",
+      }),
+    ],
+    security: [
+      generateEntityFilter(hass, {
+        domain: "alarm_control_panel",
+        area: area,
+        entity_category: "none",
+      }),
+      generateEntityFilter(hass, {
+        domain: "lock",
+        area: area,
+        entity_category: "none",
+      }),
+      generateEntityFilter(hass, {
+        domain: "cover",
+        device_class: ["door", "garage", "gate"],
+        area: area,
+        entity_category: "none",
+      }),
+      generateEntityFilter(hass, {
+        domain: "binary_sensor",
+        device_class: ["door", "garage_door"],
+        area: area,
+        entity_category: "none",
+      }),
+    ],
+  };
+
+  return Object.fromEntries(
+    Object.entries(groupedFilters).map(([group, filters]) => {
+      const entities = filters.reduce<string[]>(
+        (acc, filter) => [
+          ...acc,
+          ...allEntities.filter((entity) => filter(entity)),
+        ],
+        []
+      );
+
+      const hidden = displayOptions?.[group]?.hidden
+        ? new Set(displayOptions[group].hidden)
+        : undefined;
+
+      const order = displayOptions?.[group]?.order;
+
+      let filteredEntities = entities;
+      if (hidden) {
+        filteredEntities = entities.filter(
+          (entity: string) => !hidden.has(entity)
+        );
+      }
+      if (order) {
+        filteredEntities = filteredEntities.concat().sort(orderCompare(order));
+      }
+      return [group, filteredEntities];
+    })
+  ) as AreaEntitiesByGroup;
+};
--- a/src/panels/lovelace/strategies/get-strategy.ts
+++ b/src/panels/lovelace/strategies/get-strategy.ts
@ -32,7 +32,7 @@ const STRATEGIES: Record<LovelaceStrategyConfigType, Record<string, any>> = {
    energy: () => import("../../energy/strategies/energy-view-strategy"),
    map: () => import("./map/map-view-strategy"),
    iframe: () => import("./iframe/iframe-view-strategy"),
-    area: () => import("./area/area-view-strategy"),
+    area: () => import("./areas/area-view-strategy"),
    areas: () => import("./areas/areas-view-strategy"),
  },
  section: {},