From 35199670f39dcbac3ffd0b0a61df6065025a4a0e Mon Sep 17 00:00:00 2001
From: Johan Frick <johan.frick@gmail.com>
Date: Mon, 27 Nov 2023 20:56:29 +0100
Subject: [PATCH] Make it possible to configure items per row for area cards in
 home view

---
 src/Helper.ts                 | 15 +++++++++++++++
 src/types/strategy/generic.ts |  8 +++++++-
 src/views/HomeView.ts         | 11 +++++++++--
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/Helper.ts b/src/Helper.ts
index d5daa53..d21b323 100644
--- a/src/Helper.ts
+++ b/src/Helper.ts
@@ -61,6 +61,12 @@ class Helper {
    */
   static #strategyOptions: generic.StrategyConfig;
 
+  /**
+   * Indicates if the display is narrow (i.e. mobile)
+   * @type {boolean}
+   */
+  static #narrow: boolean;
+
   /**
    * Set to true for more verbose information in the console.
    *
@@ -131,6 +137,14 @@ class Helper {
     return this.#debug;
   }
 
+  /**
+   * @returns {boolean}
+   * @static
+   */
+  static get narrow(): boolean {
+    return this.#narrow;
+  }
+
   /**
    * Initialize this module.
    *
@@ -141,6 +155,7 @@ class Helper {
   static async initialize(info: generic.DashBoardInfo): Promise<void> {
     // Initialize properties.
     this.#hassStates = info.hass.states;
+    this.#narrow = window.matchMedia("(max-width: 870px)").matches;
     this.#strategyOptions = deepmerge(configurationDefaults, info.config?.strategy?.options ?? {});
     this.#debug = this.#strategyOptions.debug;
 
diff --git a/src/types/strategy/generic.ts b/src/types/strategy/generic.ts
index a4532c2..3e0b62d 100644
--- a/src/types/strategy/generic.ts
+++ b/src/types/strategy/generic.ts
@@ -104,7 +104,8 @@ export namespace generic {
     extra_cards?: LovelaceCardConfig[];
     extra_views?: ViewConfig[];
     home_view: {
-      hidden: HiddenSectionType[]
+      hidden: HiddenSectionType[];
+      areas_per_row?: number | AreasPerRow;
     }
     quick_access_cards?: LovelaceCardConfig[];
     views: { [k: string]: ViewConfig };
@@ -113,6 +114,11 @@ export namespace generic {
   const hiddenSectionList = ["chips", "persons", "greeting", "areas", "areasTitle"] as const;
   export type HiddenSectionType = typeof hiddenSectionList[number];
 
+  export interface AreasPerRow {
+    narrow?: number;
+    wide?: number;
+  }
+
   /**
    * Represents the default configuration for a strategy.
    */
diff --git a/src/views/HomeView.ts b/src/views/HomeView.ts
index 54b53f9..f8a7e03 100644
--- a/src/views/HomeView.ts
+++ b/src/views/HomeView.ts
@@ -9,6 +9,7 @@ import {ActionConfig} from "../types/homeassistant/data/lovelace";
 import {TitleCardConfig} from "../types/lovelace-mushroom/cards/title-card-config";
 import {PersonCardConfig} from "../types/lovelace-mushroom/cards/person-card-config";
 
+const DEFAULT_AREAS_PER_ROW = 2;
 
 // noinspection JSUnusedGlobalSymbols Class is dynamically imported.
 /**
@@ -263,10 +264,16 @@ class HomeView extends AbstractView {
 
       // Horizontally group every two area cards if all cards are created.
       if (i === Helper.areas.length - 1) {
-        for (let i = 0; i < areaCards.length; i += 2) {
+        let cardsPerRow = Helper.strategyOptions.home_view?.areas_per_row ?? DEFAULT_AREAS_PER_ROW;
+
+        if (typeof cardsPerRow === 'object') {
+          cardsPerRow = (Helper.narrow ? cardsPerRow.narrow : cardsPerRow.wide) ?? DEFAULT_AREAS_PER_ROW;
+        }
+
+        for (let i = 0; i < areaCards.length; i += cardsPerRow) {
           groupedCards.push({
             type: "horizontal-stack",
-            cards: areaCards.slice(i, i + 2),
+            cards: areaCards.slice(i, i + cardsPerRow),
           } as StackCardConfig);
         }
       }