Handle times on the client to make this cache-friendly

app/javascript/controllers/local_time_controller.js

@@ -11,6 +11,7 @@ export default class extends Controller {
     this.shortDateFormatter = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" })
     this.dateTimeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short", dateStyle: "short" })
     this.agoFormatter = new AgoFormatter()
+    this.daysAgoFormatter = new DaysAgoFormatter()
     this.indaysFormatter = new InDaysFormatter()
   }
 
@@ -42,6 +43,10 @@ export default class extends Controller {
     this.#formatTime(this.agoFormatter, target)
   }
 
+  daysAgoTargetConnected(target) {
+    this.#formatTime(this.daysAgoFormatter, target)
+  }
+
   indaysTargetConnected(target) {
     this.#formatTime(this.indaysFormatter, target)
   }
@@ -87,6 +92,22 @@ class AgoFormatter {
   }
 }
 
+class DaysAgoFormatter {
+  format(dt) {
+    const now = new Date()
+
+    const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const startOfGivenDay = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate())
+
+    const msPerDay = 1000 * 60 * 60 * 24
+    const dayDiff = Math.floor((startOfToday - startOfGivenDay) / msPerDay)
+
+    if (dayDiff === 0) return "Today"
+    if (dayDiff === 1) return "Yesterday"
+    return `in ${dayDiff} days`
+  }
+}
+
 class InDaysFormatter {
   format(dt) {
     const target = this.#beginningOfDay(dt)

app/views/bubbles/_card_mini.html.erb

@@ -6,14 +6,9 @@
       <h3 class="card__title">
         <%= bubble.title %>
       </h3>
-      <div class="txt-small overflow-ellipsis txt-uppercase"><%= "Added to #{bubble.bucket.name} by #{bubble.creator.name}" %> <%=
-        days = (Date.current - bubble.created_at.to_date).to_i
-        case days
-          when 0 then "today"
-          when 1 then "yesterday"
-          else "#{days} days ago".html_safe
-        end
-      %></div>
+      <div class="txt-small overflow-ellipsis txt-uppercase"><%= "Added to #{bubble.bucket.name} by #{bubble.creator.name}" %>
+        <%= local_datetime_tag(bubble.created_at, style: :daysAgo) %>
+      </div>
       <div class="card__stuff flex align-center gap">
         <%= render "bubbles/assignees", bubble: bubble %>
         <div class="overflow-ellipsis"><%= render "bubbles/tags", bubble: bubble %></div>

app/views/bubbles/_meta.html.erb

@@ -1,32 +1,18 @@
 <div class="card__meta flex txt-tight-lines txt-uppercase">
   <div class="flex flex-column gap txt-align-end">
-    <span class="pad-inline overflow-ellipsis"><%= bubble.creating? ? "Added" : "Updated" %> 
-      <%= days = (Date.current - bubble.updated_at.to_date).to_i
-          case days
-          when 0 then "<strong>Today</strong>".html_safe
-          when 1 then "<strong>Yesterday</strong>".html_safe
-          else "<strong>#{days}</strong> days ago".html_safe
-          end %>
+    <span class="pad-inline overflow-ellipsis"><%= bubble.creating? ? "Added" : "Updated" %>
+      <%= local_datetime_tag(bubble.updated_at, style: :daysAgo) %>
     </span>
 
     <hr class="full-width separator--horizontal unpad margin-none">
 
     <% if bubble.creating? %>
-      <span class="pad-inline overflow-ellipsis">Expires 
-        <%= days = (bubble.auto_pop_at.to_date - Date.current).to_i
-            case days
-            when 0 then "<strong>Today</strong>".html_safe
-            else "in <strong>#{days}</strong> days".html_safe
-            end %>
+      <span class="pad-inline overflow-ellipsis">Expires
+        <%= local_datetime_tag(bubble.auto_pop_at, style: :daysAgo) %>
       </span>
     <% else %>
-      <span class="pad-inline overflow-ellipsis">Added 
-        <%= days = (Date.current - bubble.created_at.to_date).to_i
-            case days
-            when 0 then "<strong>Today</strong>".html_safe
-            when 1 then "<strong>Yesterday</strong>".html_safe
-            else "<strong>#{days}</strong> days ago".html_safe
-            end %>
+      <span class="pad-inline overflow-ellipsis">Added
+        <%= local_datetime_tag(bubble.created_at, style: :daysAgo) %>
       </span>
     <% end %>
   </div>
@@ -39,7 +25,7 @@
     </span>
 
     <hr class="full-width separator--horizontal unpad margin-none">
-    
+
     <%= render "bubbles/boosts", bubble: bubble %>
   </div>
-</div>
+</div>