Display relative timestamps in dashboard

templates/index.html

@@ -85,9 +85,14 @@
         .timestamp {
             font-size: 0.9em;
             color: #7f8c8d;
-            min-width: 180px;
+            min-width: 120px;
             font-family: monospace;
         }
+        .timestamp[title] {
+            cursor: help;
+            text-decoration: none;
+            border-bottom: 1px dotted #7f8c8d;
+        }
         .source {
             font-weight: bold;
             color: #2980b9;
@@ -213,7 +218,7 @@
                         <td class="source">{{.Source}}</td>
                         <td class="title">{{.Title}}</td>
                         <td><a href="{{.Link}}" class="article-link" target="_blank">{{.Summary}}</a></td>
-                        <td class="timestamp">{{.FirstSeen.Format "2006-01-02 15:04:05 MST"}}</td>
+                        <td class="timestamp" title="{{.FirstSeen.Format "2006-01-02 15:04:05 MST"}}" data-timestamp="{{.FirstSeen.Unix}}"></td>
                     </tr>
                     {{else}}
                     <tr>
@@ -241,7 +246,7 @@
                     {{range .History}}
                     <tr>
                         <td class="id">{{.ID}}</td>
-                        <td class="timestamp">{{.BroadcastTime.Format "2006-01-02 15:04:05 MST"}}</td>
+                        <td class="timestamp" title="{{.BroadcastTime.Format "2006-01-02 15:04:05 MST"}}" data-timestamp="{{.BroadcastTime.Unix}}"></td>
                         <td class="importance {{if ge .Importance 70}}high{{else if ge .Importance 40}}medium{{else}}low{{end}}">{{.Importance}}</td>
                         <td class="source">{{.Source}}</td>
                         <td class="title">{{.Title}}</td>
@@ -290,5 +295,58 @@
             </table>
         </div>
     </div>
+
+    <script>
+        // Function to format relative time
+        function formatRelativeTime(timestamp) {
+            const now = Math.floor(Date.now() / 1000);
+            const diff = now - timestamp;
+            
+            // Less than a minute
+            if (diff < 60) {
+                return 'just now';
+            }
+            
+            // Less than an hour
+            if (diff < 3600) {
+                const minutes = Math.floor(diff / 60);
+                return `${minutes}m ago`;
+            }
+            
+            // Less than a day
+            if (diff < 86400) {
+                const hours = Math.floor(diff / 3600);
+                return `${hours}h ago`;
+            }
+            
+            // Less than a week
+            if (diff < 604800) {
+                const days = Math.floor(diff / 86400);
+                return `${days}d ago`;
+            }
+            
+            // More than a week
+            const weeks = Math.floor(diff / 604800);
+            return `${weeks}w ago`;
+        }
+        
+        // Update all timestamp elements
+        function updateRelativeTimes() {
+            const timestampElements = document.querySelectorAll('.timestamp[data-timestamp]');
+            
+            timestampElements.forEach(el => {
+                const timestamp = parseInt(el.getAttribute('data-timestamp'), 10);
+                if (!isNaN(timestamp)) {
+                    el.textContent = formatRelativeTime(timestamp);
+                }
+            });
+        }
+        
+        // Update times on page load
+        document.addEventListener('DOMContentLoaded', updateRelativeTimes);
+        
+        // Update times every minute
+        setInterval(updateRelativeTimes, 60000);
+    </script>
 </body>
 </html>