Use large section for summay view (#26729)

src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts

@@ -14,6 +14,7 @@ import type { LovelaceCardConfig } from "../../../../../data/lovelace/config/car
 import type { HomeAssistant } from "../../../../../types";
 import { supportsAlarmModesCardFeature } from "../../../card-features/hui-alarm-modes-card-feature";
 import { supportsCoverOpenCloseCardFeature } from "../../../card-features/hui-cover-open-close-card-feature";
+import { supportsFanSpeedCardFeature } from "../../../card-features/hui-fan-speed-card-feature";
 import { supportsLightBrightnessCardFeature } from "../../../card-features/hui-light-brightness-card-feature";
 import { supportsLockCommandsCardFeature } from "../../../card-features/hui-lock-commands-card-feature";
 import { supportsTargetTemperatureCardFeature } from "../../../card-features/hui-target-temperature-card-feature";
@@ -248,6 +249,10 @@ export const computeAreaTileCardConfig =
         feature = {
           type: "target-temperature",
         };
+      } else if (supportsFanSpeedCardFeature(hass, context)) {
+        feature = {
+          type: "fan-speed",
+        };
       } else if (supportsAlarmModesCardFeature(hass, context)) {
         feature = {
           type: "alarm-modes",

src/panels/lovelace/strategies/home/helpers/home-summaries.ts

@@ -46,6 +46,10 @@ export const HOME_SUMMARIES_FILTERS: Record<HomeSummaries, EntityFilter[]> = {
     },
   ],
   security: [
+    {
+      domain: "camera",
+      entity_category: "none",
+    },
     {
       domain: "alarm_control_panel",
       entity_category: "none",
@@ -54,10 +58,6 @@ export const HOME_SUMMARIES_FILTERS: Record<HomeSummaries, EntityFilter[]> = {
       domain: "lock",
       entity_category: "none",
     },
-    {
-      domain: "camera",
-      entity_category: "none",
-    },
     {
       domain: "cover",
       device_class: ["door", "garage", "gate"],

src/panels/lovelace/strategies/home/home-climate-view-strategy.ts

@@ -1,8 +1,6 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { generateEntityFilter } from "../../../../common/entity/entity_filter";
-import { clamp } from "../../../../common/number/clamp";
-import { floorDefaultIcon } from "../../../../components/ha-floor-icon";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -42,7 +40,6 @@ const processAreasForClimate = (
         heading_style: "subtitle",
         type: "heading",
         heading: area.name,
-        icon: area.icon || "mdi:home",
         tap_action: {
           action: "navigate",
           navigation_path: `areas-${area.area_id}`,
@@ -88,11 +85,11 @@ export class HomeClimateViewStrategy extends ReactiveElement {
 
       const section: LovelaceSectionRawConfig = {
         type: "grid",
+        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? floor.name : "Areas",
-            icon: floor.icon || floorDefaultIcon(floor) || "mdi:home-floor",
           },
         ],
       };
@@ -109,11 +106,11 @@ export class HomeClimateViewStrategy extends ReactiveElement {
     if (home.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
+        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? "Other areas" : "Areas",
-            icon: "mdi:home",
           },
         ],
       };
@@ -126,17 +123,9 @@ export class HomeClimateViewStrategy extends ReactiveElement {
       }
     }
 
-    // Allow between 2 and 3 columns (the max should be set to define the width of the header)
-    const maxColumns = clamp(sections.length, 2, 3);
-
-    // Take the full width if there is only one section to avoid narrow header on desktop
-    if (sections.length === 1) {
-      sections[0].column_span = 2;
-    }
-
     return {
       type: "sections",
-      max_columns: maxColumns,
+      max_columns: 2,
       sections: sections || [],
     };
   }

src/panels/lovelace/strategies/home/home-lights-view-strategy.ts

@@ -1,8 +1,6 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { generateEntityFilter } from "../../../../common/entity/entity_filter";
-import { clamp } from "../../../../common/number/clamp";
-import { floorDefaultIcon } from "../../../../components/ha-floor-icon";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -42,7 +40,6 @@ const processAreasForLights = (
         heading_style: "subtitle",
         type: "heading",
         heading: area.name,
-        icon: area.icon || "mdi:home",
         tap_action: {
           action: "navigate",
           navigation_path: `areas-${area.area_id}`,
@@ -88,11 +85,11 @@ export class HomeLightsViewStrategy extends ReactiveElement {
 
       const section: LovelaceSectionRawConfig = {
         type: "grid",
+        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? floor.name : "Areas",
-            icon: floor.icon || floorDefaultIcon(floor) || "mdi:home-floor",
           },
         ],
       };
@@ -109,11 +106,11 @@ export class HomeLightsViewStrategy extends ReactiveElement {
     if (home.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
+        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? "Other areas" : "Areas",
-            icon: "mdi:home",
           },
         ],
       };
@@ -126,17 +123,9 @@ export class HomeLightsViewStrategy extends ReactiveElement {
       }
     }
 
-    // Allow between 2 and 3 columns (the max should be set to define the width of the header)
-    const maxColumns = clamp(sections.length, 2, 3);
-
-    // Take the full width if there is only one section to avoid narrow header on desktop
-    if (sections.length === 1) {
-      sections[0].column_span = 2;
-    }
-
     return {
       type: "sections",
-      max_columns: maxColumns,
+      max_columns: 2,
       sections: sections || [],
     };
   }

src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts

@@ -1,8 +1,6 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { generateEntityFilter } from "../../../../common/entity/entity_filter";
-import { clamp } from "../../../../common/number/clamp";
-import { floorDefaultIcon } from "../../../../components/ha-floor-icon";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -37,7 +35,6 @@ const processAreasForMediaPlayers = (
         heading_style: "subtitle",
         type: "heading",
         heading: area.name,
-        icon: area.icon || "mdi:home",
         tap_action: {
           action: "navigate",
           navigation_path: `areas-${area.area_id}`,
@@ -70,11 +67,11 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
 
     const allEntities = Object.keys(hass.states);
 
-    const filterFunctions = HOME_SUMMARIES_FILTERS.media_players.map((filter) =>
-      generateEntityFilter(hass, filter)
+    const mediaPlayersFilters = HOME_SUMMARIES_FILTERS.media_players.map(
+      (filter) => generateEntityFilter(hass, filter)
     );
 
-    const entities = findEntities(allEntities, filterFunctions);
+    const entities = findEntities(allEntities, mediaPlayersFilters);
 
     const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
 
@@ -86,11 +83,11 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
 
       const section: LovelaceSectionRawConfig = {
         type: "grid",
+        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? floor.name : "Areas",
-            icon: floor.icon || floorDefaultIcon(floor) || "mdi:home-floor",
           },
         ],
       };
@@ -107,11 +104,11 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
     if (home.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
+        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? "Other areas" : "Areas",
-            icon: "mdi:home",
           },
         ],
       };
@@ -124,17 +121,9 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
       }
     }
 
-    // Allow between 2 and 3 columns (the max should be set to define the width of the header)
-    const maxColumns = clamp(sections.length, 2, 3);
-
-    // Take the full width if there is only one section to avoid narrow header on desktop
-    if (sections.length === 1) {
-      sections[0].column_span = 2;
-    }
-
     return {
       type: "sections",
-      max_columns: maxColumns,
+      max_columns: 2,
       sections: sections || [],
     };
   }

src/panels/lovelace/strategies/home/home-security-view-strategy.ts

@@ -1,8 +1,7 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { generateEntityFilter } from "../../../../common/entity/entity_filter";
-import { clamp } from "../../../../common/number/clamp";
-import { floorDefaultIcon } from "../../../../components/ha-floor-icon";
+import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
@@ -11,9 +10,8 @@ import {
   getAreas,
   getFloors,
 } from "../areas/helpers/areas-strategy-helper";
-import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
 import { getHomeStructure } from "./helpers/home-structure";
-import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
+import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
 
 export interface HomeSecurityViewStrategyConfig {
   type: "home-security";
@@ -35,14 +33,13 @@ const processAreasForSecurity = (
     });
     const areaEntities = entities.filter(areaFilter);
 
-    const computeTileCard = computeAreaTileCardConfig(hass, "", true);
+    const computeTileCard = computeAreaTileCardConfig(hass, "", false);
 
     if (areaEntities.length > 0) {
       cards.push({
         heading_style: "subtitle",
         type: "heading",
         heading: area.name,
-        icon: area.icon || "mdi:home",
         tap_action: {
           action: "navigate",
           navigation_path: `areas-${area.area_id}`,
@@ -72,11 +69,11 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
 
     const allEntities = Object.keys(hass.states);
 
-    const filterFunctions = HOME_SUMMARIES_FILTERS.security.map((filter) =>
+    const securityFilters = HOME_SUMMARIES_FILTERS.security.map((filter) =>
       generateEntityFilter(hass, filter)
     );
 
-    const entities = findEntities(allEntities, filterFunctions);
+    const entities = findEntities(allEntities, securityFilters);
 
     const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
 
@@ -88,11 +85,11 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
 
       const section: LovelaceSectionRawConfig = {
         type: "grid",
+        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? floor.name : "Areas",
-            icon: floor.icon || floorDefaultIcon(floor) || "mdi:home-floor",
           },
         ],
       };
@@ -109,11 +106,11 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
     if (home.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
+        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? "Other areas" : "Areas",
-            icon: "mdi:home",
           },
         ],
       };
@@ -126,17 +123,9 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
       }
     }
 
-    // Allow between 2 and 3 columns (the max should be set to define the width of the header)
-    const maxColumns = clamp(sections.length, 2, 3);
-
-    // Take the full width if there is only one section to avoid narrow header on desktop
-    if (sections.length === 1) {
-      sections[0].column_span = 2;
-    }
-
     return {
       type: "sections",
-      max_columns: maxColumns,
+      max_columns: 2,
       sections: sections || [],
     };
   }