refactor: patch connection indicator with timestamp

Server patches the ConnectionIndicator element with a timestamp on
each heartbeat. Client-side JS checks every second if the timestamp
is stale (>20s) and toggles red/green accordingly.

This properly detects connection loss since the indicator will turn
red if no patches are received.

features/common/components/shared.templ

@@ -48,36 +48,16 @@ templ NicknamePrompt(returnPath string) {
 	</main>
 }
 
-func isStale(lastPing int64) bool {
-	return lastPing == 0
-}
-
 // ConnectionIndicator shows a small dot indicating SSE connection status.
 // Server patches this with a timestamp; client JS detects staleness.
 templ ConnectionIndicator(lastPing int64) {
 	<div
 		id="connection-indicator"
-		class="fixed top-2 right-2"
+		class="fixed top-2 right-2 flex items-center gap-1 text-xs text-gray-500"
+		title="Connection status"
 		data-last-ping={ fmt.Sprintf("%d", lastPing) }
 	>
-		<div class="inline-grid *:[grid-area:1/1]">
-			<div
-				id="connection-ping"
-				class={
-					"status status-sm",
-					templ.KV("status-success animate-ping", !isStale(lastPing)),
-					templ.KV("status-error", isStale(lastPing)),
-				}
-			></div>
-			<div
-				id="connection-dot"
-				class={
-					"status status-sm",
-					templ.KV("status-success", !isStale(lastPing)),
-					templ.KV("status-error", isStale(lastPing)),
-				}
-			></div>
-		</div>
+		<span id="connection-dot" class="w-2 h-2 rounded-full bg-green-500"></span>
 	</div>
 	@connectionWatcher()
 }
@@ -86,17 +66,11 @@ script connectionWatcher() {
 	setInterval(function() {
 		var el = document.getElementById('connection-indicator');
 		var dot = document.getElementById('connection-dot');
-		var ping = document.getElementById('connection-ping');
-		if (!el || !dot || !ping) return;
-		
+		if (!el || !dot) return;
 		var lastPing = parseInt(el.dataset.lastPing, 10) || 0;
 		var stale = Date.now() - lastPing > 20000;
-		
-		dot.classList.toggle('status-success', !stale);
-		dot.classList.toggle('status-error', stale);
-		ping.classList.toggle('status-success', !stale);
-		ping.classList.toggle('status-error', stale);
-		ping.classList.toggle('animate-ping', !stale);
+		dot.classList.toggle('bg-green-500', !stale);
+		dot.classList.toggle('bg-red-500', stale);
 	}, 1000);
 }