settings overhaul, many QOL improvements

templates/base.html

@@ -149,6 +149,116 @@
         } else if (localStorage.getItem('theme') === 'dark') {
             document.documentElement.classList.add('dark');
         }
+
+        // Helper function: Convert timestamp to relative time
+        function timeAgo(dateString) {
+            if (!dateString) return 'Never';
+
+            const date = new Date(dateString);
+            const now = new Date();
+            const seconds = Math.floor((now - date) / 1000);
+
+            if (seconds < 60) return `${seconds}s ago`;
+
+            const minutes = Math.floor(seconds / 60);
+            if (minutes < 60) return `${minutes}m ago`;
+
+            const hours = Math.floor(minutes / 60);
+            if (hours < 24) {
+                const remainingMins = minutes % 60;
+                return remainingMins > 0 ? `${hours}h ${remainingMins}m ago` : `${hours}h ago`;
+            }
+
+            const days = Math.floor(hours / 24);
+            if (days < 7) {
+                const remainingHours = hours % 24;
+                return remainingHours > 0 ? `${days}d ${remainingHours}h ago` : `${days}d ago`;
+            }
+
+            const weeks = Math.floor(days / 7);
+            if (weeks < 4) {
+                const remainingDays = days % 7;
+                return remainingDays > 0 ? `${weeks}w ${remainingDays}d ago` : `${weeks}w ago`;
+            }
+
+            const months = Math.floor(days / 30);
+            return `${months}mo ago`;
+        }
+
+        // Helper function: Get user's selected timezone
+        function getTimezone() {
+            return localStorage.getItem('timezone') || 'America/New_York';
+        }
+
+        // Helper function: Format timestamp with tooltip (timezone-aware)
+        function formatTimestamp(dateString) {
+            if (!dateString) return '<span class="text-gray-400">Never</span>';
+
+            const date = new Date(dateString);
+            const timezone = getTimezone();
+
+            const fullDate = date.toLocaleString('en-US', {
+                weekday: 'short',
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                timeZone: timezone,
+                timeZoneName: 'short'
+            });
+
+            return `<span title="${fullDate}" class="cursor-help">${timeAgo(dateString)}</span>`;
+        }
+
+        // Helper function: Format timestamp as full date/time (no relative time)
+        // Format: "9/10/2020 8:00 AM EST"
+        function formatFullTimestamp(dateString) {
+            if (!dateString) return 'Never';
+
+            const date = new Date(dateString);
+            const timezone = getTimezone();
+
+            return date.toLocaleString('en-US', {
+                month: 'numeric',
+                day: 'numeric',
+                year: 'numeric',
+                hour: 'numeric',
+                minute: '2-digit',
+                timeZone: timezone,
+                timeZoneName: 'short'
+            });
+        }
+
+        // Update all timestamps on page load and periodically
+        function updateAllTimestamps() {
+            document.querySelectorAll('[data-timestamp]').forEach(el => {
+                const timestamp = el.getAttribute('data-timestamp');
+                el.innerHTML = formatTimestamp(timestamp);
+            });
+        }
+
+        // Run on load and every minute
+        updateAllTimestamps();
+        setInterval(updateAllTimestamps, 60000);
+
+        // Copy to clipboard helper
+        function copyToClipboard(text, button) {
+            navigator.clipboard.writeText(text).then(() => {
+                // Visual feedback
+                const originalHTML = button.innerHTML;
+                button.innerHTML = '<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';
+                button.classList.add('text-green-500');
+
+                setTimeout(() => {
+                    button.innerHTML = originalHTML;
+                    button.classList.remove('text-green-500');
+                }, 1500);
+            }).catch(err => {
+                console.error('Failed to copy:', err);
+            });
+        }
     </script>
 
     {% block extra_scripts %}{% endblock %}