Make event entity row show time as relative by default, hide in gener… (#17456)

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -36,6 +36,7 @@ const HIDE_DOMAIN = new Set([
   "script",
   "sun",
   "zone",
+  "event",
 ]);
 
 const HIDE_PLATFORM = new Set(["mobile_app"]);

src/panels/lovelace/entity-rows/hui-event-entity-row.ts

@@ -68,16 +68,23 @@ class HuiEventEntityRow extends LitElement implements LovelaceRow {
             hasDoubleClick: hasAction(this._config.double_tap_action),
           })}
         >
-          <div class="what">
-            ${computeStateDisplay(
-              this.hass!.localize,
-              stateObj,
-              this.hass.locale,
-              this.hass.config,
-              this.hass.entities
-            )}
-          </div>
           <div class="when">
+            ${isUnavailableState(stateObj.state)
+              ? computeStateDisplay(
+                  this.hass!.localize,
+                  stateObj,
+                  this.hass.locale,
+                  this.hass.config,
+                  this.hass.entities
+                )
+              : html`<hui-timestamp-display
+                  .hass=${this.hass}
+                  .ts=${new Date(stateObj.state)}
+                  .format=${this._config.format}
+                  capitalize
+                ></hui-timestamp-display>`}
+          </div>
+          <div class="what">
             ${isUnavailableState(stateObj.state)
               ? ``
               : computeAttributeValueDisplay(
@@ -104,10 +111,10 @@ class HuiEventEntityRow extends LitElement implements LovelaceRow {
         text-align: right;
       }
       .when {
-        color: var(--secondary-text-color);
+        color: var(--primary-text-color);
       }
       .what {
-        color: var(--primary-text-color);
+        color: var(--secondary-text-color);
       }
     `;
   }