From 825ea93dba680b947d15f956fe58170d53537dc9 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Sat, 16 Oct 2021 14:43:03 +0200
Subject: [PATCH] Add "capitalize" option to `hui-timestamp-display` (#10280)

---
 src/components/entity/state-info.ts                      | 2 ++
 src/panels/lovelace/cards/hui-glance-card.ts             | 1 +
 src/panels/lovelace/components/hui-timestamp-display.ts  | 7 +++++++
 src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts | 1 +
 src/panels/lovelace/special-rows/hui-attribute-row.ts    | 1 +
 src/state-summary/state-card-display.ts                  | 1 +
 6 files changed, 13 insertions(+)

diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts
index cbc7b1c0f9..01f95f88bb 100644
--- a/src/components/entity/state-info.ts
+++ b/src/components/entity/state-info.ts
@@ -53,6 +53,7 @@ class StateInfo extends LitElement {
                     <ha-relative-time
                       .hass=${this.hass}
                       .datetime=${this.stateObj.last_changed}
+                      capitalize
                     ></ha-relative-time>
                   </div>
                   <div class="row">
@@ -64,6 +65,7 @@ class StateInfo extends LitElement {
                     <ha-relative-time
                       .hass=${this.hass}
                       .datetime=${this.stateObj.last_updated}
+                      capitalize
                     ></ha-relative-time>
                   </div>
                 </div>
diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index fd1528c329..445bd5ff7a 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -321,6 +321,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
                         .hass=${this.hass}
                         .ts=${new Date(stateObj.state)}
                         .format=${entityConf.format}
+                        capitalize
                       ></hui-timestamp-display>
                     `
                   : entityConf.show_last_changed
diff --git a/src/panels/lovelace/components/hui-timestamp-display.ts b/src/panels/lovelace/components/hui-timestamp-display.ts
index 211ff97268..2ffbba65ce 100644
--- a/src/panels/lovelace/components/hui-timestamp-display.ts
+++ b/src/panels/lovelace/components/hui-timestamp-display.ts
@@ -4,6 +4,7 @@ import { formatDate } from "../../../common/datetime/format_date";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { formatTime } from "../../../common/datetime/format_time";
 import { relativeTime } from "../../../common/datetime/relative_time";
+import { capitalizeFirstLetter } from "../../../common/string/capitalize-first-letter";
 import { FrontendLocaleData } from "../../../data/translation";
 import { HomeAssistant } from "../../../types";
 import { TimestampRenderingFormat } from "./types";
@@ -25,6 +26,8 @@ class HuiTimestampDisplay extends LitElement {
 
   @property() public format?: TimestampRenderingFormat;
 
+  @property({ type: Boolean }) public capitalize = false;
+
   @state() private _relative?: string;
 
   private _connected?: boolean;
@@ -105,6 +108,10 @@ class HuiTimestampDisplay extends LitElement {
         this._format === "relative"
           ? relativeTime(this.ts, this.hass!.locale)
           : relativeTime(new Date(), this.hass!.locale, this.ts, false);
+
+      this._relative = this.capitalize
+        ? capitalizeFirstLetter(this._relative)
+        : this._relative;
     }
   }
 }
diff --git a/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts b/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts
index cf599ba375..ff0a6f6584 100644
--- a/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts
@@ -77,6 +77,7 @@ class HuiSensorEntityRow extends LitElement implements LovelaceRow {
                   .hass=${this.hass}
                   .ts=${new Date(stateObj.state)}
                   .format=${this._config.format}
+                  capitalize
                 ></hui-timestamp-display>
               `
             : computeStateDisplay(
diff --git a/src/panels/lovelace/special-rows/hui-attribute-row.ts b/src/panels/lovelace/special-rows/hui-attribute-row.ts
index 540c7bf1ef..99e4a57907 100644
--- a/src/panels/lovelace/special-rows/hui-attribute-row.ts
+++ b/src/panels/lovelace/special-rows/hui-attribute-row.ts
@@ -70,6 +70,7 @@ class HuiAttributeRow extends LitElement implements LovelaceRow {
                 .hass=${this.hass}
                 .ts=${date}
                 .format=${this._config.format}
+                capitalize
               ></hui-timestamp-display>`
             : typeof attribute === "number"
             ? formatNumber(attribute, this.hass.locale)
diff --git a/src/state-summary/state-card-display.ts b/src/state-summary/state-card-display.ts
index 7bd0e49c6c..1e8a856975 100755
--- a/src/state-summary/state-card-display.ts
+++ b/src/state-summary/state-card-display.ts
@@ -47,6 +47,7 @@ export class StateCardDisplay extends LitElement {
                 .hass=${this.hass}
                 .ts=${new Date(this.stateObj.state)}
                 format="datetime"
+                capitalize
               ></hui-timestamp-display>`
             : computeStateDisplay(
                 this.hass!.localize,