Use responsive condition in energy dashboard

cast/src/receiver/layout/hc-main.ts

@@ -324,8 +324,7 @@ export class HcMain extends HassElement {
         {
           type: DEFAULT_STRATEGY,
         },
-        this.hass!,
+        this.hass!
-        { narrow: false }
       )
     );
   }

src/common/util/media_query.ts

@@ -0,0 +1 @@
+export const NARROW_MEDIA_QUERY = `(max-width: 870px)`;

src/layouts/home-assistant-main.ts

@@ -16,6 +16,7 @@ import "../components/ha-drawer";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
+import { NARROW_MEDIA_QUERY } from "../common/util/media_query";
 
 declare global {
   // for fire event
@@ -50,7 +51,7 @@ export class HomeAssistantMain extends LitElement {
 
   constructor() {
     super();
-    listenMediaQuery("(max-width: 870px)", (matches) => {
+    listenMediaQuery(NARROW_MEDIA_QUERY, (matches) => {
       this.narrow = matches;
     });
   }

src/panels/energy/strategies/energy-view-strategy.ts

@@ -1,5 +1,6 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
+import { NARROW_MEDIA_QUERY } from "../../../common/util/media_query";
 import {
   EnergyPreferences,
   getEnergyPreferences,
@@ -10,7 +11,6 @@ import {
   LovelaceViewConfig,
 } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
-import { LovelaceStrategyParams } from "../../lovelace/strategies/types";
 
 const setupWizard = async (): Promise<LovelaceViewConfig> => {
   await import("../cards/energy-setup-wizard-card");
@@ -32,8 +32,7 @@ export interface EnergeryViewStrategyConfig extends LovelaceStrategyConfig {
 export class EnergyViewStrategy extends ReactiveElement {
   static async generate(
     config: EnergeryViewStrategyConfig,
-    hass: HomeAssistant,
+    hass: HomeAssistant
-    params: LovelaceStrategyParams
   ): Promise<LovelaceViewConfig> {
     const view: LovelaceViewConfig = { cards: [] };
 
@@ -67,11 +66,24 @@ export class EnergyViewStrategy extends ReactiveElement {
       (source) => source.type === "water"
     );
 
-    if (params.narrow || config.show_date_selection) {
+    const dateSelectionCard = {
+      type: "energy-date-selection",
+      collection_key: "energy_dashboard",
+      view_layout: { position: "sidebar" },
+    };
+
+    if (config.show_date_selection) {
+      view.cards!.push(dateSelectionCard);
+    } else {
       view.cards!.push({
-        type: "energy-date-selection",
+        type: "conditional",
-        collection_key: "energy_dashboard",
+        conditions: [
-        view_layout: { position: "sidebar" },
+          {
+            condition: "responsive",
+            media_query: NARROW_MEDIA_QUERY,
+          },
+        ],
+        card: dateSelectionCard,
       });
     }
 

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -174,9 +174,7 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
       await lovelace.saveConfig(
         this._emptyConfig
           ? EMPTY_CONFIG
-          : await expandLovelaceConfigStrategies(lovelace.config, this.hass, {
+          : await expandLovelaceConfigStrategies(lovelace.config, this.hass)
-              narrow: this._params.narrow,
-            })
       );
       lovelace.setEditMode(true);
       this._saving = false;

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

@@ -167,8 +167,7 @@ export class LovelacePanel extends LitElement {
       {
         type: DEFAULT_STRATEGY,
       },
-      this.hass!,
+      this.hass!
-      { narrow: this.narrow }
     );
     this._setLovelaceConfig(conf, undefined, "generated");
     this._panelState = "loaded";
@@ -258,8 +257,7 @@ export class LovelacePanel extends LitElement {
       if (rawConf.strategy) {
         conf = await generateLovelaceDashboardStrategy(
           rawConf.strategy,
-          this.hass!,
+          this.hass!
-          { narrow: this.narrow }
         );
       } else {
         conf = rawConf;
@@ -276,8 +274,7 @@ export class LovelacePanel extends LitElement {
         {
           type: DEFAULT_STRATEGY,
         },
-        this.hass!,
+        this.hass!
-        { narrow: this.narrow }
       );
       confMode = "generated";
     } finally {
@@ -365,8 +362,7 @@ export class LovelacePanel extends LitElement {
         if (newConfig.strategy) {
           conf = await generateLovelaceDashboardStrategy(
             newConfig.strategy,
-            this.hass!,
+            this.hass!
-            { narrow: this.narrow }
           );
         } else {
           conf = newConfig;
@@ -404,8 +400,7 @@ export class LovelacePanel extends LitElement {
             {
               type: DEFAULT_STRATEGY,
             },
-            this.hass!,
+            this.hass!
-            { narrow: this.narrow }
           );
           this._updateLovelace({
             config: generatedConf,

src/panels/lovelace/strategies/get-strategy.ts

@@ -8,7 +8,6 @@ import { isLegacyStrategy } from "./legacy-strategy";
 import {
   LovelaceDashboardStrategy,
   LovelaceStrategy,
-  LovelaceStrategyParams,
   LovelaceViewStrategy,
 } from "./types";
 
@@ -77,8 +76,7 @@ const generateStrategy = async <T extends LovelaceStrategyConfigType>(
   configType: T,
   renderError: (err: string | Error) => StrategyConfig<T>,
   strategyConfig: LovelaceStrategyConfig,
-  hass: HomeAssistant,
+  hass: HomeAssistant
-  params: LovelaceStrategyParams
 ): Promise<StrategyConfig<T>> => {
   const strategyType = strategyConfig.type;
   if (!strategyType) {
@@ -95,7 +93,7 @@ const generateStrategy = async <T extends LovelaceStrategyConfigType>(
         return (await strategy.generateDashboard({
           config: { strategy: strategyConfig, views: [] },
           hass,
-          narrow: params.narrow,
+          narrow: undefined,
         })) as StrategyConfig<T>;
       }
       if (configType === "view" && "generateView" in strategy) {
@@ -103,7 +101,7 @@ const generateStrategy = async <T extends LovelaceStrategyConfigType>(
           config: { views: [] },
           view: { strategy: strategyConfig },
           hass,
-          narrow: params.narrow,
+          narrow: undefined,
         })) as StrategyConfig<T>;
       }
     }
@@ -115,7 +113,7 @@ const generateStrategy = async <T extends LovelaceStrategyConfigType>(
 
     delete config.options;
 
-    return await strategy.generate(config, hass, params);
+    return await strategy.generate(config, hass);
   } catch (err: any) {
     if (err.message !== "timeout") {
       // eslint-disable-next-line
@@ -128,8 +126,7 @@ const generateStrategy = async <T extends LovelaceStrategyConfigType>(
 
 export const generateLovelaceDashboardStrategy = async (
   strategyConfig: LovelaceStrategyConfig,
-  hass: HomeAssistant,
+  hass: HomeAssistant
-  params: LovelaceStrategyParams
 ): Promise<LovelaceConfig> =>
   generateStrategy(
     "dashboard",
@@ -147,14 +144,12 @@ export const generateLovelaceDashboardStrategy = async (
       ],
     }),
     strategyConfig,
-    hass,
+    hass
-    params
   );
 
 export const generateLovelaceViewStrategy = async (
   strategyConfig: LovelaceStrategyConfig,
-  hass: HomeAssistant,
+  hass: HomeAssistant
-  params: LovelaceStrategyParams
 ): Promise<LovelaceViewConfig> =>
   generateStrategy(
     "view",
@@ -167,8 +162,7 @@ export const generateLovelaceViewStrategy = async (
       ],
     }),
     strategyConfig,
-    hass,
+    hass
-    params
   );
 
 /**
@@ -176,18 +170,15 @@ export const generateLovelaceViewStrategy = async (
  */
 export const expandLovelaceConfigStrategies = async (
   config: LovelaceConfig,
-  hass: HomeAssistant,
+  hass: HomeAssistant
-  params: LovelaceStrategyParams
 ): Promise<LovelaceConfig> => {
   const newConfig = config.strategy
-    ? await generateLovelaceDashboardStrategy(config.strategy, hass, params)
+    ? await generateLovelaceDashboardStrategy(config.strategy, hass)
     : { ...config };
 
   newConfig.views = await Promise.all(
     newConfig.views.map((view) =>
-      view.strategy
+      view.strategy ? generateLovelaceViewStrategy(view.strategy, hass) : view
-        ? generateLovelaceViewStrategy(view.strategy, hass, params)
-        : view
     )
   );
 

src/panels/lovelace/strategies/original-states-dashboard-strategy.ts

@@ -2,14 +2,12 @@ import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { LovelaceConfig, LovelaceStrategyConfig } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
-import { LovelaceStrategyParams } from "./types";
 
 @customElement("original-states-dashboard-strategy")
 export class OriginalStatesDashboardStrategy extends ReactiveElement {
   static async generate(
     _config: LovelaceStrategyConfig,
-    hass: HomeAssistant,
+    hass: HomeAssistant
-    _params?: LovelaceStrategyParams
   ): Promise<LovelaceConfig> {
     return {
       title: hass.config.location_name,

src/panels/lovelace/strategies/original-states-view-strategy.ts

@@ -9,14 +9,12 @@ import {
 } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { generateDefaultViewConfig } from "../common/generate-lovelace-config";
-import { LovelaceStrategyParams } from "./types";
 
 @customElement("original-states-view-strategy")
 export class OriginalStatesViewStrategy extends ReactiveElement {
   static async generate(
     _config: LovelaceStrategyConfig,
-    hass: HomeAssistant,
+    hass: HomeAssistant
-    _params?: LovelaceStrategyParams
   ): Promise<LovelaceViewConfig> {
     if (hass.config.state === STATE_NOT_RUNNING) {
       return {

src/panels/lovelace/strategies/types.ts

@@ -5,16 +5,8 @@ import {
 } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 
-export type LovelaceStrategyParams = {
-  narrow?: boolean;
-};
-
 export type LovelaceStrategy<T = any> = {
-  generate(
+  generate(config: LovelaceStrategyConfig, hass: HomeAssistant): Promise<T>;
-    config: LovelaceStrategyConfig,
-    hass: HomeAssistant,
-    params?: LovelaceStrategyParams
-  ): Promise<T>;
 };
 
 export interface LovelaceDashboardStrategy

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

@@ -192,8 +192,7 @@ export class HUIView extends ReactiveElement {
       isStrategy = true;
       viewConfig = await generateLovelaceViewStrategy(
         viewConfig.strategy,
-        this.hass!,
+        this.hass!
-        { narrow: this.narrow }
       );
     }