Add periodic timestamp updates to timeline events (#7286)

* Initial plan

* Plan: Add periodic time updates to timeline timestamps

Co-authored-by: alexr00 <[email protected]>

* Implement periodic timestamp updates in timeline

Co-authored-by: alexr00 <[email protected]>

* Optimize timestamp updates with variable intervals and visibility detection

Co-authored-by: alexr00 <[email protected]>

* Update timestamp intervals per feedback: 20s for <1min, 2min for <1hr, no updates for >1day

Co-authored-by: alexr00 <[email protected]>

* Change update frequencies

Author: Copilot

webviews/components/timestamp.tsx

@@ -3,19 +3,98 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { dateFromNow } from '../../src/common/utils';
 
 export const Timestamp = ({ date, href }: { date: Date | string; href?: string }) => {
+	const [timeString, setTimeString] = useState(dateFromNow(date));
 	const title = typeof date === 'string' ? new Date(date).toLocaleString() : date.toLocaleString();
+
+	useEffect(() => {
+		// Update the time string immediately
+		setTimeString(dateFromNow(date));
+
+		// Calculate appropriate update interval based on how old the timestamp is
+		const getUpdateInterval = () => {
+			const now = Date.now();
+			const timestamp = typeof date === 'string' ? new Date(date).getTime() : date.getTime();
+			const ageInMinutes = (now - timestamp) / (1000 * 60);
+
+			// For very recent timestamps (< 1 minute), update every 20 seconds
+			if (ageInMinutes < 1) {
+				return 20000; // 20 seconds
+			}
+			// For timestamps < 1 hour old, update every 2 minutes
+			else if (ageInMinutes < 60) {
+				return 2 * 60000; // 2 minutes
+			}
+			// For timestamps < 1 day old, update every 10 minutes
+			else if (ageInMinutes < 60 * 24) {
+				return 10 * 60000; // 10 minutes
+			}
+			// Older timestamps shouldn't be updated
+			return null;
+		};
+
+		const intervalDuration = getUpdateInterval();
+
+		// If intervalDuration is null, don't set up any updates for very old timestamps
+		if (intervalDuration === null) {
+			return;
+		}
+
+		let intervalId: number;
+
+		const updateTimeString = () => {
+			// Only update if the page is visible
+			if (document.visibilityState === 'visible') {
+				setTimeString(dateFromNow(date));
+			}
+		};
+
+		const startInterval = () => {
+			intervalId = window.setInterval(updateTimeString, intervalDuration);
+		};
+
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === 'visible') {
+				// Page became visible, update immediately and restart interval
+				setTimeString(dateFromNow(date));
+				if (intervalId) {
+					clearInterval(intervalId);
+				}
+				startInterval();
+			} else {
+				// Page became hidden, pause the interval
+				if (intervalId) {
+					clearInterval(intervalId);
+				}
+			}
+		};
+
+		// Start the interval
+		startInterval();
+
+		// Listen for visibility changes
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+
+		// Clean up on component unmount
+		return () => {
+			if (intervalId) {
+				clearInterval(intervalId);
+			}
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+		};
+	}, [date]);
+
 	return href ? (
 		<a href={href} className="timestamp" title={title}>
-			{dateFromNow(date)}
+			{timeString}
 		</a>
 	) : (
 		<div className="timestamp" title={title}>
-			{dateFromNow(date)}
+			{timeString}
 		</div>
 	);
 };