From 31ccf114a69760716f2898835e491c8e8cf3f6e8 Mon Sep 17 00:00:00 2001
From: Aidan Timson <aidan@timmo.dev>
Date: Thu, 9 Oct 2025 08:11:03 +0100
Subject: [PATCH] Ability to hide section headers from todo card (#26949)

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>
---
 .../lovelace/cards/hui-todo-list-card.ts      | 84 ++++++++++---------
 src/panels/lovelace/cards/types.ts            |  1 +
 .../config-elements/hui-todo-list-editor.ts   | 17 ++++
 src/translations/en.json                      |  2 +
 4 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts
index b36e99cf3a..9721e67a1d 100644
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -331,14 +331,16 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                 : nothing}
             ${!this._reordering && uncheckedItems.length
               ? html`
-                  <div class="header" role="separator">
-                    <h2>
-                      ${this.hass!.localize(
-                        "ui.panel.lovelace.cards.todo-list.unchecked_items"
-                      )}
-                    </h2>
-                    ${this._renderMenu(this._config, unavailable)}
-                  </div>
+                  ${!this._config.hide_section_headers
+                    ? html`<div class="header">
+                        <h2>
+                          ${this.hass!.localize(
+                            "ui.panel.lovelace.cards.todo-list.unchecked_items"
+                          )}
+                        </h2>
+                        ${this._renderMenu(this._config, unavailable)}
+                      </div>`
+                    : nothing}
                   ${this._renderItems(uncheckedItems, unavailable)}
                 `
               : nothing}
@@ -366,39 +368,41 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
               ? html`
                   <div>
                     <div class="divider" role="separator"></div>
-                    <div class="header">
-                      <h2>
-                        ${this.hass!.localize(
-                          "ui.panel.lovelace.cards.todo-list.checked_items"
-                        )}
-                      </h2>
-                      ${this._todoListSupportsFeature(
-                        TodoListEntityFeature.DELETE_TODO_ITEM
-                      )
-                        ? html`<ha-button-menu
-                            @closed=${stopPropagation}
-                            fixed
-                            @action=${this._handleCompletedMenuAction}
-                          >
-                            <ha-icon-button
-                              slot="trigger"
-                              .path=${mdiDotsVertical}
-                            ></ha-icon-button>
-                            <ha-list-item graphic="icon" class="warning">
-                              ${this.hass!.localize(
-                                "ui.panel.lovelace.cards.todo-list.clear_items"
-                              )}
-                              <ha-svg-icon
-                                class="warning"
-                                slot="graphic"
-                                .path=${mdiDeleteSweep}
-                                .disabled=${unavailable}
+                    ${!this._config.hide_section_headers
+                      ? html`<div class="header">
+                          <h2>
+                            ${this.hass!.localize(
+                              "ui.panel.lovelace.cards.todo-list.checked_items"
+                            )}
+                          </h2>
+                          ${this._todoListSupportsFeature(
+                            TodoListEntityFeature.DELETE_TODO_ITEM
+                          )
+                            ? html`<ha-button-menu
+                                @closed=${stopPropagation}
+                                fixed
+                                @action=${this._handleCompletedMenuAction}
                               >
-                              </ha-svg-icon>
-                            </ha-list-item>
-                          </ha-button-menu>`
-                        : nothing}
-                    </div>
+                                <ha-icon-button
+                                  slot="trigger"
+                                  .path=${mdiDotsVertical}
+                                ></ha-icon-button>
+                                <ha-list-item graphic="icon" class="warning">
+                                  ${this.hass!.localize(
+                                    "ui.panel.lovelace.cards.todo-list.clear_items"
+                                  )}
+                                  <ha-svg-icon
+                                    class="warning"
+                                    slot="graphic"
+                                    .path=${mdiDeleteSweep}
+                                    .disabled=${unavailable}
+                                  >
+                                  </ha-svg-icon>
+                                </ha-list-item>
+                              </ha-button-menu>`
+                            : nothing}
+                        </div>`
+                      : nothing}
                   </div>
                   ${this._renderItems(checkedItems, unavailable)}
                 `
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index 77da461bf2..b651c173a8 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -534,6 +534,7 @@ export interface TodoListCardConfig extends LovelaceCardConfig {
   entity?: string;
   hide_completed?: boolean;
   hide_create?: boolean;
+  hide_section_headers?: boolean;
   sort?: string;
 }
 
diff --git a/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts b/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
index f2cb361fea..c976e75d69 100644
--- a/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
@@ -32,6 +32,7 @@ const cardConfigStruct = assign(
     entity: optional(string()),
     hide_completed: optional(boolean()),
     hide_create: optional(boolean()),
+    hide_section_headers: optional(boolean()),
     display_order: optional(string()),
     item_tap_action: optional(string()),
   })
@@ -59,6 +60,7 @@ export class HuiTodoListEditor
         { name: "theme", selector: { theme: {} } },
         { name: "hide_completed", selector: { boolean: {} } },
         { name: "hide_create", selector: { boolean: {} } },
+        { name: "hide_section_headers", selector: { boolean: {} } },
         {
           name: "display_order",
           selector: {
@@ -131,6 +133,7 @@ export class HuiTodoListEditor
           .data=${this._data(this._config)}
           .schema=${this._schema(this.hass.localize, this._todoListSupportsFeature(TodoListEntityFeature.MOVE_TODO_ITEM))}
           .computeLabel=${this._computeLabelCallback}
+          .computeHelper=${this._computeHelperCallback}
           @value-changed=${this._valueChanged}
         ></ha-form>
       </div>
@@ -164,6 +167,7 @@ export class HuiTodoListEditor
         )})`;
       case "hide_completed":
       case "hide_create":
+      case "hide_section_headers":
       case "display_order":
       case "item_tap_action":
         return this.hass!.localize(
@@ -176,6 +180,19 @@ export class HuiTodoListEditor
     }
   };
 
+  private _computeHelperCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
+    switch (schema.name) {
+      case "hide_section_headers":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.todo-list.${schema.name}_helper`
+        );
+      default:
+        return undefined;
+    }
+  };
+
   static get styles(): CSSResultGroup {
     return configElementStyle;
   }
diff --git a/src/translations/en.json b/src/translations/en.json
index 65c427f32f..1f080f0c9d 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -7934,6 +7934,8 @@
               "integration_not_loaded": "This card requires the `todo` integration to be set up.",
               "hide_completed": "Hide completed items",
               "hide_create": "Hide 'Add item' field",
+              "hide_section_headers": "Hide section headers",
+              "hide_section_headers_helper": "Removes the 'Active' and 'Completed' sections with the overflow menus.",
               "display_order": "Display order",
               "item_tap_action": "Item tap behavior",
               "actions": {