Home dashboard: enable/disable entities suggestion

src/data/frontend.ts

@@ -23,6 +23,7 @@ export interface HomeFrontendSystemData {
   welcome_banner_dismissed?: boolean;
   hidden_summaries?: string[];
   hide_welcome_message?: boolean;
+  hide_suggested_entities?: boolean;
 }
 
 declare global {

src/panels/home/dialogs/dialog-edit-home.ts

@@ -5,12 +5,14 @@ import { computeCssColor } from "../../../common/color/compute-color";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entities-picker";
 import "../../../components/ha-alert";
+import "../../../components/ha-expansion-panel";
 import "../../../components/ha-button";
 import "../../../components/ha-dialog-footer";
 import "../../../components/ha-dialog";
 import "../../../components/ha-form/ha-form";
 import "../../../components/ha-icon";
 import "../../../components/ha-switch";
+import type { HaFormSchema } from "../../../components/ha-form/types";
 import type { HomeFrontendSystemData } from "../../../data/frontend";
 import type { HassDialog } from "../../../dialogs/make-dialog-manager";
 import {
@@ -28,6 +30,10 @@ interface SummaryInfo {
   color: string;
 }
 
+const SUGGESTED_ENTITIES_SCHEMA: HaFormSchema[] = [
+  { name: "show_suggested", selector: { boolean: {} } },
+];
+
 // Ordered to match dashboard rendering order
 const SUMMARY_ITEMS: SummaryInfo[] = [
   { key: "light", icon: HOME_SUMMARIES_ICONS.light, color: "amber" },
@@ -46,9 +52,9 @@ const SUMMARY_ITEMS: SummaryInfo[] = [
   { key: "energy", icon: HOME_SUMMARIES_ICONS.energy, color: "amber" },
 ];
 
-const WELCOME_MESSAGE_SCHEMA = [
+const WELCOME_MESSAGE_SCHEMA: HaFormSchema[] = [
   { name: "welcome_message", selector: { boolean: {} } },
-] as const;
+];
 
 @customElement("dialog-edit-home")
 export class DialogEditHome
@@ -102,23 +108,6 @@ export class DialogEditHome
           ${this.hass.localize("ui.panel.home.editor.description")}
         </p>
 
-        <ha-entities-picker
-          autofocus
-          .hass=${this.hass}
-          .value=${this._config?.favorite_entities || []}
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.strategy.home.favorite_entities"
-          )}
-          .placeholder=${this.hass.localize(
-            "ui.panel.lovelace.editor.strategy.home.add_favorite_entity"
-          )}
-          .helper=${this.hass.localize(
-            "ui.panel.home.editor.favorite_entities_helper"
-          )}
-          reorder
-          @value-changed=${this._favoriteEntitiesChanged}
-        ></ha-entities-picker>
-
         <ha-form
           .hass=${this.hass}
           .data=${{ welcome_message: !this._config?.hide_welcome_message }}
@@ -128,6 +117,42 @@ export class DialogEditHome
           @value-changed=${this._welcomeMessageToggleChanged}
         ></ha-form>
 
+        <ha-expansion-panel
+          outlined
+          expanded
+          .header=${this.hass.localize(
+            "ui.panel.lovelace.editor.strategy.home.favorite_entities"
+          )}
+        >
+          <ha-icon slot="leading-icon" icon="mdi:star-outline"></ha-icon>
+          <div class="expansion-content">
+            <ha-entities-picker
+              autofocus
+              .hass=${this.hass}
+              .value=${this._config?.favorite_entities || []}
+              .placeholder=${this.hass.localize(
+                "ui.panel.lovelace.editor.strategy.home.add_favorite_entity"
+              )}
+              .helper=${this.hass.localize(
+                "ui.panel.home.editor.favorite_entities_helper"
+              )}
+              reorder
+              @value-changed=${this._favoriteEntitiesChanged}
+            ></ha-entities-picker>
+
+            <ha-form
+              .hass=${this.hass}
+              .data=${{
+                show_suggested: !this._config?.hide_suggested_entities,
+              }}
+              .schema=${SUGGESTED_ENTITIES_SCHEMA}
+              .computeLabel=${this._computeSuggestedLabel}
+              .computeHelper=${this._computeSuggestedHelper}
+              @value-changed=${this._suggestedEntitiesChanged}
+            ></ha-form>
+          </div>
+        </ha-expansion-panel>
+
         <h3 class="section-header">
           ${this.hass.localize("ui.panel.home.editor.summaries")}
         </h3>
@@ -231,6 +256,21 @@ export class DialogEditHome
     };
   }
 
+  private _computeSuggestedLabel = (): string =>
+    this.hass.localize("ui.panel.home.editor.suggested_entities");
+
+  private _computeSuggestedHelper = (): string =>
+    this.hass.localize("ui.panel.home.editor.suggested_entities_description");
+
+  private _suggestedEntitiesChanged(ev: CustomEvent): void {
+    const showSuggested = (ev.detail.value as { show_suggested: boolean })
+      .show_suggested;
+    this._config = {
+      ...this._config,
+      hide_suggested_entities: showSuggested ? undefined : true,
+    };
+  }
+
   private _favoriteEntitiesChanged(ev: CustomEvent): void {
     const entities = ev.detail.value as string[];
     this._config = {
@@ -299,6 +339,17 @@ export class DialogEditHome
         font-size: 14px;
       }
 
+      ha-expansion-panel {
+        display: block;
+        --expansion-panel-content-padding: 0;
+        border-radius: var(--ha-border-radius-md);
+        --ha-card-border-radius: var(--ha-border-radius-md);
+      }
+
+      .expansion-content {
+        padding: var(--ha-space-3);
+      }
+
       ha-entities-picker {
         display: block;
       }

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

@@ -320,6 +320,7 @@ class PanelHome extends LitElement {
         home_panel: true,
         hidden_summaries: this._config.hidden_summaries,
         hide_welcome_message: this._config.hide_welcome_message,
+        hide_suggested_entities: this._config.hide_suggested_entities,
       },
     };
 

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

@@ -19,6 +19,7 @@ export interface HomeDashboardStrategyConfig {
   home_panel?: boolean;
   hidden_summaries?: string[];
   hide_welcome_message?: boolean;
+  hide_suggested_entities?: boolean;
 }
 
 @customElement("home-dashboard-strategy")
@@ -98,6 +99,7 @@ export class HomeDashboardStrategy extends ReactiveElement {
             home_panel: config.home_panel,
             hidden_summaries: config.hidden_summaries,
             hide_welcome_message: config.hide_welcome_message,
+            hide_suggested_entities: config.hide_suggested_entities,
           } satisfies HomeOverviewViewStrategyConfig,
         },
         ...areaViews,

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

@@ -41,6 +41,7 @@ export interface HomeOverviewViewStrategyConfig {
   home_panel?: boolean;
   hidden_summaries?: string[];
   hide_welcome_message?: boolean;
+  hide_suggested_entities?: boolean;
 }
 
 const computeAreaCard = (
@@ -195,6 +196,7 @@ export class HomeOverviewViewStrategy extends ReactiveElement {
         limit: maxCommonControls,
         include_entities: favoriteEntities,
         hide_empty: true,
+        show_predicted: !config.hide_suggested_entities,
         heading: {
           type: "heading",
           heading: hass.localize("ui.panel.lovelace.strategy.home.favorites"),

src/panels/lovelace/strategies/usage_prediction/common-controls-section-strategy.ts

@@ -16,6 +16,7 @@ export interface CommonControlSectionStrategyConfig {
   include_entities?: string[];
   hide_empty?: boolean;
   heading?: HeadingCardConfig;
+  show_predicted?: boolean;
   /** @deprecated Use `heading` instead */
   icon?: string;
   /** @deprecated Use `heading` instead */
@@ -46,34 +47,39 @@ export class CommonControlsSectionStrategy extends ReactiveElement {
       } satisfies HeadingCardConfig);
     }
 
-    if (!isComponentLoaded(hass.config, "usage_prediction")) {
-      section.cards!.push({
-        type: "markdown",
-        content: hass.localize(
-          "ui.panel.lovelace.strategy.common_controls.not_loaded"
-        ),
-      });
-      section.disabled = config.hide_empty;
-      return section;
-    }
+    let predictedEntities: string[] = [];
 
-    const predictedCommonControl = await getCommonControlUsagePrediction(hass);
-    let predictedEntities = predictedCommonControl.entities.filter((entity) => {
-      if (!(entity in hass.states)) {
-        return false;
+    if (config.show_predicted !== false) {
+      if (!isComponentLoaded(hass.config, "usage_prediction")) {
+        section.cards!.push({
+          type: "markdown",
+          content: hass.localize(
+            "ui.panel.lovelace.strategy.common_controls.not_loaded"
+          ),
+        });
+        section.disabled = config.hide_empty;
+        return section;
       }
-      const entityEntry = hass.entities[entity];
-      // Filter out hidden entities (respects user/integration/device hidden_by)
-      if (entityEntry?.hidden) {
-        return false;
-      }
-      return true;
-    });
 
-    if (config.exclude_entities?.length) {
-      predictedEntities = predictedEntities.filter(
-        (entity) => !config.exclude_entities!.includes(entity)
-      );
+      const predictedCommonControl =
+        await getCommonControlUsagePrediction(hass);
+      predictedEntities = predictedCommonControl.entities.filter((entity) => {
+        if (!(entity in hass.states)) {
+          return false;
+        }
+        const entityEntry = hass.entities[entity];
+        // Filter out hidden entities (respects user/integration/device hidden_by)
+        if (entityEntry?.hidden) {
+          return false;
+        }
+        return true;
+      });
+
+      if (config.exclude_entities?.length) {
+        predictedEntities = predictedEntities.filter(
+          (entity) => !config.exclude_entities!.includes(entity)
+        );
+      }
     }
 
     if (config.include_entities?.length) {

src/translations/en.json

@@ -2463,7 +2463,9 @@
         "editor": {
           "title": "Edit Overview page",
           "description": "Configure your Overview page display preferences.",
-          "favorite_entities_helper": "Display your favorite entities. Home Assistant will still suggest based on commonly used up to 8 slots.",
+          "favorite_entities_helper": "Display your favorite entities. They always appear first.",
+          "suggested_entities": "Suggested entities",
+          "suggested_entities_description": "Include additional entities based on your most commonly used devices to fill up to 8 slots including your favorites.",
           "save_failed": "Failed to save Overview page configuration",
           "areas_hint": "You can rearrange your floors and areas in the order that best represents your house on the {areas_page}.",
           "areas_page": "areas page",