Create local time formatter to match the previous format we were generating server-side

app/assets/stylesheets/utilities.css

@@ -23,6 +23,7 @@
   .txt-nowrap { white-space: nowrap; }
   .txt-break { word-break: break-word; }
   .txt-uppercase { text-transform: uppercase; }
+  .txt-capitalize { text-transform: capitalize; }
   .txt-link { color: var(--color-link); text-decoration: underline; }
 
   /* Flexbox and Grid */

app/javascript/controllers/local_time_controller.js

@@ -2,7 +2,9 @@ import { Controller } from "@hotwired/stimulus"
 import { differenceInDays } from "helpers/date_helpers"
 
 export default class extends Controller {
-  static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays", "daysago" ]
+  static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays", "daysago", "agoorweekday" ]
+  static values = { refreshInterval: Number }
+  static classes = [ "local-time-value"]
 
   #timer
 
@@ -13,7 +15,10 @@ export default class extends Controller {
     this.dateTimeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short", dateStyle: "short" })
     this.agoFormatter = new AgoFormatter()
     this.daysagoFormatter = new DaysAgoFormatter()
+    this.datewithweekdayFormatter = new Intl.DateTimeFormat(undefined, { weekday: "long", month: "long", day: "numeric" })
+    this.datewithweekdayFormatter = new Intl.DateTimeFormat(undefined, { weekday: "long", month: "long", day: "numeric" })
     this.indaysFormatter = new InDaysFormatter()
+    this.agoorweekdayFormatter = new DaysAgoOrWeekdayFormatter()
   }
 
   connect() {
@@ -60,6 +65,10 @@ export default class extends Controller {
     this.#formatTime(this.daysagoFormatter, target)
   }
 
+  agoorweekdayTargetConnected(target) {
+    this.#formatTime(this.agoorweekdayFormatter, target)
+  }
+
   #refreshRelativeTimes() {
     this.agoTargets.forEach(target => {
       this.#formatTime(this.agoFormatter, target)
@@ -111,6 +120,18 @@ class DaysAgoFormatter {
   }
 }
 
+class DaysAgoOrWeekdayFormatter {
+  format(date) {
+    const days = differenceInDays(date, new Date())
+
+    if (days <= 1) {
+      return new DaysAgoFormatter().format(date)
+    } else {
+      return new Intl.DateTimeFormat(undefined, { weekday: "long", month: "long", day: "numeric" }).format(date)
+    }
+  }
+}
+
 class InDaysFormatter {
   format(date) {
     const days = differenceInDays(new Date(), date)

app/views/events/_day.html.erb

@@ -4,7 +4,7 @@
     <h2 class="txt-medium events__day-header center">
       <span class="events__day-header-content">
         <% # TODO: Create proper format to match desired behavior: Today, tomorrow or date %>
-        <%= local_datetime_tag day_timeline.day, style: :daysago, class: "txt-ink" %>
+        <%= local_datetime_tag day_timeline.day, style: :agoorweekday, class: "txt-ink" %>
       </span>
     </h2>
 
@@ -19,7 +19,7 @@
 
             <%= local_datetime_tag events.first.created_at, class: "event__timestamp txt-small translucent" %>
           <% end %>
-        <% end %> 
+        <% end %>
       <% end %>
     </div>
 

app/views/events/_empty_days.html.erb

@@ -3,12 +3,12 @@
 <% if earliest.present? %>
   <% if earliest == latest %>
     <div class="events--none txt-align-center">
-      <h2 class="txt-medium margin-none"><%= event_day_title(earliest) %></h2>
+      <h2 class="txt-medium margin-none"><%= local_datetime_tag earliest, style: :agoorweekday, class: "txt-ink txt-capitalize" %></h2>
       <p class="margin-none">No activity</p>
     </div>
   <% elsif earliest < latest %>
     <div class="events--none txt-align-center">
-      <h2 class="txt-medium margin-none"><%= event_day_title(earliest) %> – <%= event_day_title(latest) %></h2>
+      <h2 class="txt-medium margin-none"><%= local_datetime_tag earliest, style: :agoorweekday, class: "txt-ink txt-capitalize" %> – <%= local_datetime_tag latest, style: :agoorweekday, class: "txt-ink txt-capitalize" %></h2>
       <p class="margin-none">No activity for <%= (latest - earliest).seconds.in_days.round + 1 %> days</p>
     </div>
   <% end %>