Add column density option to the grid section

src/data/lovelace/config/section.ts

@@ -13,7 +13,7 @@ export interface LovelaceSectionConfig extends LovelaceBaseSectionConfig {
 }
 
 export interface LovelaceGridSectionConfig extends LovelaceSectionConfig {
-  columns?: number;
+  column_base?: number;
 }
 
 export interface LovelaceStrategySectionConfig

src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts

@@ -3,6 +3,10 @@ import "@material/mwc-tab/mwc-tab";
 import { CSSResultGroup, TemplateResult, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
+import {
+  LovelaceGridSectionConfig,
+  LovelaceSectionConfig,
+} from "../../../../data/lovelace/config/section";
 import { getCardElementClass } from "../../create-element/create-card-element";
 import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
 import { HuiElementEditor } from "../hui-element-editor";
@@ -16,8 +20,8 @@ export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
   @property({ type: Boolean, attribute: "show-visibility-tab" })
   public showVisibilityTab = false;
 
-  @property({ type: Boolean, attribute: "show-layout-tab" })
-  public showLayoutTab = false;
+  @property({ attribute: false })
+  public sectionConfig?: LovelaceSectionConfig;
 
   @state() private _currTab: (typeof tabs)[number] = tabs[0];
 
@@ -51,7 +55,7 @@ export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
   protected renderConfigElement(): TemplateResult {
     const displayedTabs: string[] = ["config"];
     if (this.showVisibilityTab) displayedTabs.push("visibility");
-    if (this.showLayoutTab) displayedTabs.push("layout");
+    if (this.sectionConfig?.type === "grid") displayedTabs.push("layout");
 
     if (displayedTabs.length === 1) return super.renderConfigElement();
 
@@ -76,6 +80,7 @@ export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
             .hass=${this.hass}
             .config=${this.value}
             @value-changed=${this._configChanged}
+            .sectionConfig=${this.sectionConfig as LovelaceGridSectionConfig}
           >
           </hui-card-layout-editor>
         `;

src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts

@@ -21,15 +21,22 @@ import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { HuiCard } from "../../cards/hui-card";
-import { computeSizeOnGrid } from "../../sections/hui-grid-section";
+import {
+  computeSizeOnGrid,
+  DEFAULT_COLUMN_BASE,
+} from "../../sections/hui-grid-section";
 import { LovelaceLayoutOptions } from "../../types";
+import { LovelaceGridSectionConfig } from "../../../../data/lovelace/config/section";
 
 @customElement("hui-card-layout-editor")
 export class HuiCardLayoutEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public config!: LovelaceCardConfig;
 
+  @property({ attribute: false })
+  public sectionConfig!: LovelaceGridSectionConfig;
+
   @state() _defaultLayoutOptions?: LovelaceLayoutOptions;
 
   @state() public _yamlMode = false;
@@ -135,6 +142,7 @@ export class HuiCardLayoutEditor extends LitElement {
               .rowMax=${options.grid_max_rows}
               .columnMin=${options.grid_min_columns}
               .columnMax=${options.grid_max_columns}
+              .columns=${this.sectionConfig.column_base || DEFAULT_COLUMN_BASE}
             ></ha-grid-size-picker>
           `}
     `;

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -236,7 +236,9 @@ export class HuiDialogEditCard
         <div class="content">
           <div class="element-editor">
             <hui-card-element-editor
-              .showLayoutTab=${this._shouldShowLayoutTab()}
+              .sectionConfig=${this._isInSection
+                ? (this._containerConfig as LovelaceSectionConfig)
+                : undefined}
               .showVisibilityTab=${this._cardConfig?.type !== "conditional"}
               .hass=${this.hass}
               .lovelace=${this._params.lovelaceConfig}
@@ -353,18 +355,6 @@ export class HuiDialogEditCard
     return this._params!.path.length === 2;
   }
 
-  private _shouldShowLayoutTab(): boolean {
-    /**
-     * Only show layout tab for cards in a grid section
-     * In the future, every section and view should be able to bring their own editor for layout.
-     * For now, we limit it to grid sections as it's the only section type
-     * */
-    return (
-      this._isInSection &&
-      (!this._containerConfig.type || this._containerConfig.type === "grid")
-    );
-  }
-
   private _cardConfigInSection = memoizeOne(
     (cardConfig?: LovelaceCardConfig) => {
       const { cards, title, ...containerConfig } = this

src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts

@@ -1,22 +1,25 @@
-import { LitElement, html } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
-import { HomeAssistant } from "../../../../types";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { LocalizeFunc } from "../../../../common/translations/localize";
 import {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import {
+  isStrategySection,
+  LovelaceGridSectionConfig,
+  LovelaceSectionRawConfig,
+} from "../../../../data/lovelace/config/section";
+import { HomeAssistant } from "../../../../types";
+import { DEFAULT_COLUMN_BASE } from "../../sections/hui-grid-section";
 
-const SCHEMA = [
-  {
-    name: "title",
-    selector: { text: {} },
-  },
-] as const satisfies HaFormSchema[];
+type ColumnDensity = "default" | "dense" | "custom";
 
 type SettingsData = {
   title: string;
+  column_density?: ColumnDensity;
 };
 
 @customElement("hui-section-settings-editor")
@@ -25,29 +28,111 @@ export class HuiDialogEditSection extends LitElement {
 
   @property({ attribute: false }) public config!: LovelaceSectionRawConfig;
 
+  private _schema = memoizeOne(
+    (
+      localize: LocalizeFunc,
+      type?: string | undefined,
+      columnDensity?: ColumnDensity,
+      columnBase?: number
+    ) =>
+      [
+        {
+          name: "title",
+          selector: { text: {} },
+        },
+        ...(type === "grid"
+          ? ([
+              {
+                name: "column_density",
+                default: "default",
+                selector: {
+                  select: {
+                    mode: "list",
+                    options: [
+                      {
+                        label: localize(
+                          `ui.panel.lovelace.editor.edit_section.settings.column_density_options.default`,
+                          { count: 4 }
+                        ),
+                        value: "default",
+                      },
+                      {
+                        label: localize(
+                          `ui.panel.lovelace.editor.edit_section.settings.column_density_options.dense`,
+                          { count: 6 }
+                        ),
+                        value: "dense",
+                      },
+                      ...(columnDensity === "custom" && columnBase
+                        ? [
+                            {
+                              label: localize(
+                                `ui.panel.lovelace.editor.edit_section.settings.column_density_options.custom`,
+                                { count: columnBase }
+                              ),
+                              value: "custom",
+                            },
+                          ]
+                        : []),
+                    ],
+                  },
+                },
+              },
+            ] as const satisfies readonly HaFormSchema[])
+          : []),
+      ] as const satisfies HaFormSchema[]
+  );
+
+  private _isGridSectionConfig(
+    config: LovelaceSectionRawConfig
+  ): config is LovelaceGridSectionConfig {
+    return !isStrategySection(config) && config.type === "grid";
+  }
+
   render() {
+    const columnBase = this._isGridSectionConfig(this.config)
+      ? this.config.column_base || DEFAULT_COLUMN_BASE
+      : undefined;
+
+    const columnDensity =
+      columnBase === 6 ? "dense" : columnBase === 4 ? "default" : "custom";
+
     const data: SettingsData = {
       title: this.config.title || "",
+      column_density: columnDensity,
     };
 
+    const type = "type" in this.config ? this.config.type : undefined;
+
+    const schema = this._schema(
+      this.hass.localize,
+      type,
+      columnDensity,
+      columnBase
+    );
+
     return html`
       <ha-form
         .hass=${this.hass}
         .data=${data}
-        .schema=${SCHEMA}
+        .schema=${schema}
         .computeLabel=${this._computeLabel}
         .computeHelper=${this._computeHelper}
         @value-changed=${this._valueChanged}
       ></ha-form>
     `;
   }
 
-  private _computeLabel = (schema: SchemaUnion<typeof SCHEMA>) =>
+  private _computeLabel = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) =>
     this.hass.localize(
       `ui.panel.lovelace.editor.edit_section.settings.${schema.name}`
     );
 
-  private _computeHelper = (schema: SchemaUnion<typeof SCHEMA>) =>
+  private _computeHelper = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) =>
     this.hass.localize(
       `ui.panel.lovelace.editor.edit_section.settings.${schema.name}_helper`
     ) || "";
@@ -56,11 +141,26 @@ export class HuiDialogEditSection extends LitElement {
     ev.stopPropagation();
     const newData = ev.detail.value as SettingsData;
 
+    const { title, column_density } = newData;
+
     const newConfig: LovelaceSectionRawConfig = {
       ...this.config,
-      title: newData.title,
+      title,
     };
 
+    if (this._isGridSectionConfig(newConfig)) {
+      const column_base =
+        column_density === "default"
+          ? 4
+          : column_density === "dense"
+            ? 6
+            : undefined;
+
+      if (column_base) {
+        (newConfig as LovelaceGridSectionConfig).column_base = column_base;
+      }
+    }
+
     if (!newConfig.title) {
       delete newConfig.title;
     }

src/panels/lovelace/sections/hui-grid-section.ts

@@ -61,7 +61,7 @@ export const computeSizeOnGrid = (
   };
 };
 
-const DEFAULT_COLUMNS = 4;
+export const DEFAULT_COLUMN_BASE = 4;
 
 export class GridSection extends LitElement implements LovelaceSectionElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -100,7 +100,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
 
     const editMode = Boolean(this.lovelace?.editMode && !this.isStrategy);
 
-    const columnCount = this._config.columns ?? DEFAULT_COLUMNS;
+    const columnCount = this._config.column_base ?? DEFAULT_COLUMN_BASE;
 
     return html`
       ${this._config.title || this.lovelace?.editMode

src/translations/en.json

@@ -5645,7 +5645,13 @@
             "edit_yaml": "[%key:ui::panel::lovelace::editor::edit_view::edit_yaml%]",
             "settings": {
               "title": "Title",
-              "title_helper": "The title will appear at the top of section. Leave empty to hide the title."
+              "title_helper": "The title will appear at the top of section. Leave empty to hide the title.",
+              "column_density": "Column density",
+              "column_density_options": {
+                "default": "Default ({count} columns)",
+                "dense": "Dense ({count} columns)",
+                "custom": "Custom {count} ({count, plural,\n  one {column}\n  other {columns}\n})"
+              }
             },
             "visibility": {
               "explanation": "The section will be shown when ALL conditions below are fulfilled. If no conditions are set, the section will always be shown."