From 9c3f77532c4258974dc5fef19ab03fbf652214a5 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 8 Apr 2025 15:17:05 +0200
Subject: [PATCH] Make the full generic entity row clickable (#24968)

* Make the full generic entity row clickable

* Apply suggestions from code review

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

---------

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
---
 .../components/hui-generic-entity-row.ts      | 191 +++++++++---------
 1 file changed, 98 insertions(+), 93 deletions(-)

diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index 9011851555..441126240d 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -61,15 +61,8 @@ export class HuiGenericEntityRow extends LitElement {
     const name = this.config.name ?? computeStateName(stateObj);
 
     return html`
-      <state-badge
-        class=${classMap({
-          pointer,
-        })}
-        .hass=${this.hass}
-        .stateObj=${stateObj}
-        .overrideIcon=${this.config.icon}
-        .overrideImage=${this.config.image}
-        .stateColor=${this.config.state_color}
+      <div
+        class="row ${classMap({ pointer })}"
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this.config!.hold_action),
@@ -80,98 +73,99 @@ export class HuiGenericEntityRow extends LitElement {
             ? "0"
             : undefined
         )}
-      ></state-badge>
-      ${!this.hideName
-        ? html`<div
-            class="info ${classMap({
-              pointer,
-              "text-content": !hasSecondary,
-            })}"
-            @action=${this._handleAction}
-            .actionHandler=${actionHandler({
-              hasHold: hasAction(this.config!.hold_action),
-              hasDoubleClick: hasAction(this.config!.double_tap_action),
-            })}
-            .title=${name}
-          >
-            ${this.config.name || computeStateName(stateObj)}
-            ${hasSecondary
-              ? html`
-                  <div class="secondary">
-                    ${this.secondaryText ||
-                    (this.config.secondary_info === "entity-id"
-                      ? stateObj.entity_id
-                      : this.config.secondary_info === "last-changed"
-                        ? html`
-                            <ha-relative-time
-                              .hass=${this.hass}
-                              .datetime=${stateObj.last_changed}
-                              capitalize
-                            ></ha-relative-time>
-                          `
-                        : this.config.secondary_info === "last-updated"
+      >
+        <state-badge
+          .hass=${this.hass}
+          .stateObj=${stateObj}
+          .overrideIcon=${this.config.icon}
+          .overrideImage=${this.config.image}
+          .stateColor=${this.config.state_color}
+        ></state-badge>
+        ${!this.hideName
+          ? html`<div
+              class="info ${classMap({ "text-content": !hasSecondary })}"
+              .title=${name}
+            >
+              ${this.config.name || computeStateName(stateObj)}
+              ${hasSecondary
+                ? html`
+                    <div class="secondary">
+                      ${this.secondaryText ||
+                      (this.config.secondary_info === "entity-id"
+                        ? stateObj.entity_id
+                        : this.config.secondary_info === "last-changed"
                           ? html`
                               <ha-relative-time
                                 .hass=${this.hass}
-                                .datetime=${stateObj.last_updated}
+                                .datetime=${stateObj.last_changed}
                                 capitalize
                               ></ha-relative-time>
                             `
-                          : this.config.secondary_info === "last-triggered"
-                            ? stateObj.attributes.last_triggered
-                              ? html`
-                                  <ha-relative-time
-                                    .hass=${this.hass}
-                                    .datetime=${stateObj.attributes
-                                      .last_triggered}
-                                    capitalize
-                                  ></ha-relative-time>
-                                `
-                              : this.hass.localize(
-                                  "ui.panel.lovelace.cards.entities.never_triggered"
-                                )
-                            : this.config.secondary_info === "position" &&
-                                stateObj.attributes.current_position !==
-                                  undefined
-                              ? `${this.hass.localize(
-                                  "ui.card.cover.position"
-                                )}: ${stateObj.attributes.current_position}`
-                              : this.config.secondary_info ===
-                                    "tilt-position" &&
-                                  stateObj.attributes.current_tilt_position !==
+                          : this.config.secondary_info === "last-updated"
+                            ? html`
+                                <ha-relative-time
+                                  .hass=${this.hass}
+                                  .datetime=${stateObj.last_updated}
+                                  capitalize
+                                ></ha-relative-time>
+                              `
+                            : this.config.secondary_info === "last-triggered"
+                              ? stateObj.attributes.last_triggered
+                                ? html`
+                                    <ha-relative-time
+                                      .hass=${this.hass}
+                                      .datetime=${stateObj.attributes
+                                        .last_triggered}
+                                      capitalize
+                                    ></ha-relative-time>
+                                  `
+                                : this.hass.localize(
+                                    "ui.panel.lovelace.cards.entities.never_triggered"
+                                  )
+                              : this.config.secondary_info === "position" &&
+                                  stateObj.attributes.current_position !==
                                     undefined
                                 ? `${this.hass.localize(
-                                    "ui.card.cover.tilt_position"
-                                  )}: ${
-                                    stateObj.attributes.current_tilt_position
-                                  }`
-                                : this.config.secondary_info === "brightness" &&
-                                    stateObj.attributes.brightness
-                                  ? html`${Math.round(
-                                      (stateObj.attributes.brightness / 255) *
-                                        100
-                                    )}
-                                    %`
-                                  : "")}
-                  </div>
-                `
-              : ""}
-          </div>`
-        : nothing}
-      ${(this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain))
-        ? html`<div
-            class="text-content value ${classMap({
-              pointer,
-            })}"
-            @action=${this._handleAction}
-            .actionHandler=${actionHandler({
-              hasHold: hasAction(this.config!.hold_action),
-              hasDoubleClick: hasAction(this.config!.double_tap_action),
-            })}
-          >
-            <div class="state"><slot></slot></div>
-          </div>`
-        : html`<slot></slot>`}
+                                    "ui.card.cover.position"
+                                  )}: ${stateObj.attributes.current_position}`
+                                : this.config.secondary_info ===
+                                      "tilt-position" &&
+                                    stateObj.attributes
+                                      .current_tilt_position !== undefined
+                                  ? `${this.hass.localize(
+                                      "ui.card.cover.tilt_position"
+                                    )}: ${
+                                      stateObj.attributes.current_tilt_position
+                                    }`
+                                  : this.config.secondary_info ===
+                                        "brightness" &&
+                                      stateObj.attributes.brightness
+                                    ? html`${Math.round(
+                                        (stateObj.attributes.brightness / 255) *
+                                          100
+                                      )}
+                                      %`
+                                    : nothing)}
+                    </div>
+                  `
+                : nothing}
+            </div>`
+          : nothing}
+        ${(this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain))
+          ? html`<div
+              class="text-content value ${classMap({
+                pointer,
+              })}"
+              @action=${this._handleAction}
+              .actionHandler=${actionHandler({
+                hasHold: hasAction(this.config!.hold_action),
+                hasDoubleClick: hasAction(this.config!.double_tap_action),
+              })}
+            >
+              <div class="state"><slot></slot></div>
+            </div>`
+          : html`<slot></slot>`}
+      </div>
     `;
   }
 
@@ -194,6 +188,17 @@ export class HuiGenericEntityRow extends LitElement {
       align-items: center;
       flex-direction: row;
     }
+    .row {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      width: 100%;
+      outline: none;
+      transition: background-color 180ms ease-in-out;
+    }
+    .row:focus-visible {
+      background-color: var(--primary-background-color);
+    }
     .info {
       padding-left: 16px;
       padding-right: 8px;