Reactive updating of related time

blueprints/risdeveau/templates/index.html

@@ -3,9 +3,12 @@
 <head>
   <title>Sweet Bread</title>
 
+  <link rel="stylesheet" href="/static/style/tw.css">
   <link rel="stylesheet" href="/static/style/main.css">
   <link rel="stylesheet" href="/static/style/risdeveau.css">
   <link rel="icon" type="image/webp" href="/static/icon/us/risdeveau.webp" />
+
+  <script src="/static/script/rtime.js"></script>
   <script
     src="https://track.lair.moe/api/script.js"
     data-site-id="1"
@@ -16,6 +19,8 @@
     integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz"
     crossorigin="anonymous"
   ></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta
     name="htmx-config"

blueprints/risdeveau/templates/listenbrainz.htm

@@ -6,6 +6,13 @@
     <div>
       <p><b>{{ track.artist_name }}</b></p>
       <p>{{ track.track_name }}</p>
+      {% if not is_active %}
+        <p
+          x-data="rtime({{ track.listened_at }})"
+          x-text="`Listened ${timeString}`"
+          :class="textColorClass"
+        ></p>
+      {% endif %}
     </div>
   </div>
 {% endmacro %}

blueprints/risdeveau/templates/steam.htm

@@ -31,7 +31,10 @@
         </div>
       </a>
     {% endfor %}
-    <p>Last updated: {{ rtmsmp(steam.caches.recent.last_updated) }} ago</p>
+    <p
+      x-data="rtime({{steam.caches.recent.last_updated}})"
+      x-text="`Last updated: ${timeString}`"
+    ></p>
   {% endif %}
 
   {% if steam.caches.owned.data.games %}
@@ -58,6 +61,9 @@
         </div>
       </a>
     {% endfor %}
-    <p>Last updated: {{ rtmsmp(steam.caches.owned.last_updated) }} ago</p>
+    <p
+      x-data="rtime({{steam.caches.owned.last_updated}})"
+      x-text="`Last updated: ${timeString}`"
+    ></p>
   {% endif %}
 </div>