Add "capitalize" option to hui-timestamp-display (#10280)

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>

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

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;
     }
   }
 }

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(

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)

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,