Better layout

app/javascript/controllers/timeline_controller.js

@@ -2,11 +2,20 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["row", "time", "bar"]
+  static targets = ["row", "time", "bar", "timestamp", "date"]
+  static values = {
+    mode: { type: String, default: "timeline" } // "timeline", "events", or "individual"
+  }
 
   connect() {
-    this.maxTotal = this.calculateMaxTotal()
-    this.updateTimeline()
+    if (this.modeValue === "timeline") {
+      this.maxTotal = this.calculateMaxTotal()
+      this.updateTimeline()
+    } else if (this.modeValue === "events") {
+      this.updateEventsTimes()
+    } else {
+      this.updateIndividualTimes()
+    }
   }
 
   calculateMaxTotal() {
@@ -51,4 +60,90 @@ export default class extends Controller {
       barElement.style.width = `${barWidth}%`
     }, 100 + (index * 50))
   }
+
+  updateEventsTimes() {
+    this.timestampTargets.forEach(element => {
+      const iso = element.dataset.iso
+      if (iso) {
+        this.convertToLocalTime(element, iso, "time")
+      }
+    })
+
+    this.dateTargets.forEach(element => {
+      const iso = element.dataset.iso
+      if (iso) {
+        this.convertToLocalTime(element, iso, "date")
+      }
+    })
+  }
+
+  updateIndividualTimes() {
+    const iso = this.element.dataset.iso
+    if (iso) {
+      this.convertToLocalTime(this.element, iso, this.element.dataset.format || "both")
+    }
+  }
+
+  convertToLocalTime(element, isoString, format) {
+    const date = new Date(isoString)
+
+    switch (format) {
+      case "time":
+        element.textContent = date.toLocaleTimeString(undefined, {
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false
+        })
+        element.title = date.toLocaleString(undefined, {
+          weekday: 'short',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          timeZoneName: 'short'
+        })
+        break
+      case "date":
+        element.textContent = date.toLocaleDateString(undefined, {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit'
+        })
+        element.title = date.toLocaleString(undefined, {
+          weekday: 'short',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          timeZoneName: 'short'
+        })
+        break
+      case "both":
+        element.textContent = date.toLocaleString(undefined, {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false
+        })
+        element.title = date.toLocaleString(undefined, {
+          weekday: 'short',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          timeZoneName: 'short'
+        })
+        break
+    }
+  }
 }

app/views/events/index.html.erb

@@ -45,7 +45,7 @@
   </div>
 
   <!-- Events Table -->
-  <div class="bg-white shadow rounded-lg">
+  <div class="bg-white shadow rounded-lg" data-controller="timeline" data-timeline-mode-value="events">
     <div class="px-6 py-4 border-b border-gray-200">
       <div class="flex items-center justify-between">
         <h3 class="text-lg font-medium text-gray-900">Events (<%= number_with_delimiter(@events.count) %>)</h3>
@@ -85,7 +85,12 @@
             <% @events.each do |event| %>
               <tr class="hover:bg-gray-50">
                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                  <%= event.timestamp.strftime("%Y-%m-%d %H:%M:%S") %>
+                  <div class="text-gray-900" data-timeline-target="timestamp" data-iso="<%= event.timestamp.iso8601 %>">
+                    <%= event.timestamp.strftime("%H:%M:%S") %>
+                  </div>
+                  <div class="text-xs text-gray-500" data-timeline-target="date" data-iso="<%= event.timestamp.iso8601 %>">
+                    <%= event.timestamp.strftime("%Y-%m-%d") %>
+                  </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
                   <%= event.ip_address %>