Add option to change the area card size for area dashboard (#26199)

src/components/ha-areas-floors-display-editor.ts

@@ -44,6 +44,10 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
+  @property({ attribute: false }) public actionsRenderer?: () =>
+    | TemplateResult<1>
+    | typeof nothing;
+
   @property({ type: Boolean, attribute: "show-navigation-button" })
   public showNavigationButton = false;
 
@@ -109,6 +113,7 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
                   .items=${groupedAreasItems[floor.floor_id]}
                   .value=${value}
                   .floorId=${floor.floor_id}
+                  .actionsRenderer=${this.actionsRenderer}
                   @value-changed=${this._areaDisplayChanged}
                   .showNavigationButton=${this.showNavigationButton}
                 ></ha-items-display-editor>

src/components/ha-items-display-editor.ts

@@ -9,6 +9,7 @@ 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 { stopPropagation } from "../common/dom/stop_propagation";
 import { orderCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
 import "./ha-icon";
@@ -141,14 +142,17 @@ export class HaItemDisplayEditor extends LitElement {
                             ></ha-svg-icon>
                           `
                         : nothing}
-                  ${this.actionsRenderer
-                    ? html`
-                        <span slot="end"> ${this.actionsRenderer(item)} </span>
-                      `
-                    : nothing}
                   ${this.showNavigationButton
                     ? html`<ha-icon-next slot="end"></ha-icon-next>`
                     : nothing}
+                  <div slot="end" class="separator"></div>
+                  ${this.actionsRenderer
+                    ? html`
+                        <div slot="end" @click=${stopPropagation}>
+                          ${this.actionsRenderer(item)}
+                        </div>
+                      `
+                    : nothing}
                   <ha-icon-button
                     .path=${isVisible ? mdiEye : mdiEyeOff}
                     slot="end"
@@ -369,6 +373,12 @@ export class HaItemDisplayEditor extends LitElement {
       padding: 8px;
       margin: -8px;
     }
+    .separator {
+      width: 1px;
+      background-color: var(--divider-color);
+      height: 21px;
+      margin: 0 -4px;
+    }
     ha-md-list {
       padding: 0;
     }

src/panels/lovelace/strategies/areas/areas-dashboard-strategy.ts

@@ -13,6 +13,7 @@ import type { AreasViewStrategyConfig } from "./areas-overview-view-strategy";
 import { computeAreaPath, getAreas } from "./helpers/areas-strategy-helper";
 
 interface AreaOptions {
+  card_size?: "small" | "large";
   groups_options?: Record<string, EntitiesDisplay>;
 }
 

src/panels/lovelace/strategies/areas/areas-overview-view-strategy.ts

@@ -18,6 +18,7 @@ const UNASSIGNED_FLOOR = "__unassigned__";
 
 interface AreaOptions {
   groups_options?: Record<string, EntitiesDisplay>;
+  card_size?: "small" | "large";
 }
 
 export interface AreasViewStrategyConfig {
@@ -100,7 +101,8 @@ export class AreasOverviewViewStrategy extends ReactiveElement {
           return {
             type: "area",
             area: area.area_id,
-            display_type: "compact",
+            display_type:
+              areaOptions.card_size === "large" ? "camera" : "compact",
             sensor_classes: sensorClasses,
             exclude_entities: hiddenEntities,
             features: filteredControls.length

src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts

@@ -16,6 +16,10 @@ import {
   updateAreaRegistryEntry,
   type AreaRegistryEntry,
 } from "../../../../../data/area_registry";
+import {
+  haCardSizeLarge,
+  haCardSizeSmall,
+} from "../../../../../resources/ha-icons";
 import { buttonLinkStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import { showAreaRegistryDetailDialog } from "../../../../config/areas/show-dialog-area-registry-detail";
@@ -27,6 +31,7 @@ import {
   AREA_STRATEGY_GROUPS,
   getAreaGroupedEntities,
 } from "../helpers/areas-strategy-helper";
+import type { DisplayItem } from "../../../../../components/ha-items-display-editor";
 
 @customElement("hui-areas-dashboard-strategy-editor")
 export class HuiAreasDashboardStrategyEditor
@@ -140,11 +145,65 @@ export class HuiAreasDashboardStrategyEditor
         @value-changed=${this._areasFloorsDisplayChanged}
         expanded
         show-navigation-button
+        .actionsRenderer=${this._areasActionsButtonsRenderer}
         @item-display-navigate-clicked=${this._handleAreaNavigate}
       ></ha-areas-floors-display-editor>
     `;
   }
 
+  private _areasActionsButtonsRenderer = (item: DisplayItem) => {
+    const areaId = item.value;
+    const isHidden =
+      this._config?.areas_display?.hidden?.includes(areaId) || false;
+    const isLarge =
+      !isHidden && this._config?.areas_options?.[areaId]?.card_size === "large";
+
+    return html`
+      <ha-icon-button
+        .label=${this.hass!.localize(
+          `ui.panel.lovelace.editor.strategy.areas.${isLarge ? "use_compact_card" : "use_large_card"}`
+        )}
+        @click=${this._toggleAreaLargeCard}
+        .area=${areaId}
+        .path=${isLarge ? haCardSizeLarge : haCardSizeSmall}
+        .disabled=${isHidden}
+      >
+      </ha-icon-button>
+    `;
+  };
+
+  private _toggleAreaLargeCard = (ev: Event) => {
+    ev.stopPropagation();
+    const area = (ev.currentTarget! as any).area as string;
+    const newConfig: AreasDashboardStrategyConfig = {
+      ...this._config!,
+      areas_options: {
+        ...this._config!.areas_options,
+        [area]: {
+          ...this._config!.areas_options?.[area],
+          card_size:
+            this._config!.areas_options?.[area]?.card_size === "large"
+              ? "small"
+              : "large",
+        },
+      },
+    };
+
+    if (newConfig.areas_options![area]!.card_size === "small") {
+      delete newConfig.areas_options![area].card_size;
+    }
+
+    if (Object.keys(newConfig.areas_options![area]).length === 0) {
+      delete newConfig.areas_options![area];
+    }
+
+    if (Object.keys(newConfig.areas_options!).length === 0) {
+      delete newConfig.areas_options;
+    }
+
+    fireEvent(this, "config-changed", { config: newConfig });
+  };
+
   private _back(): void {
     if (this._area) {
       this._area = undefined;

src/resources/ha-icons.ts

@@ -0,0 +1,4 @@
+export const haCardSizeSmall =
+  "M2 13C2 11.8954 2.89543 11 4 11H7C8.10457 11 9 11.8954 9 13V16C9 17.1046 8.10457 18 7 18H4C2.89543 18 2 17.1046 2 16V13Z M20 6C21.1046 6 22 6.89543 22 8V16C22 17.1046 21.1046 18 20 18H12C10.8954 18 10 17.1046 10 16V8C10 6.89543 10.8954 6 12 6H20Z M13 8C12.4477 8 12 8.44772 12 9V15C12 15.5523 12.4477 16 13 16H19C19.5523 16 20 15.5523 20 15V9C20 8.44772 19.5523 8 19 8H13Z";
+export const haCardSizeLarge =
+  "M7 11C8.10457 11 9 11.8954 9 13V16C9 17.1046 8.10457 18 7 18H4C2.89543 18 2 17.1046 2 16V13C2 11.8954 2.89543 11 4 11H7Z M5 13C4.44772 13 4 13.4477 4 14V15C4 15.5523 4.44772 16 5 16H6C6.55228 16 7 15.5523 7 15V14C7 13.4477 6.55228 13 6 13H5Z M10 8C10 6.89543 10.8954 6 12 6H20C21.1046 6 22 6.89543 22 8V16C22 17.1046 21.1046 18 20 18H12C10.8954 18 10 17.1046 10 16V8Z";

src/translations/en.json

@@ -7954,7 +7954,9 @@
             },
             "areas": {
               "areas_display": "Areas to display",
-              "no_entities": "No entities in this group, the section will not be displayed"
+              "no_entities": "No entities in this group, the section will not be displayed",
+              "use_compact_card": "Use compact card",
+              "use_large_card": "Use large card"
             }
           },
           "view": {