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,16 +48,36 @@ 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 flex items-center gap-1 text-xs text-gray-500"
+		class="fixed top-2 right-2"
-		title="Connection status"
 		data-last-ping={ fmt.Sprintf("%d", lastPing) }
 	>
-		<span id="connection-dot" class="w-2 h-2 rounded-full bg-green-500"></span>
+		<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>
 	</div>
 	@connectionWatcher()
 }
@@ -66,11 +86,17 @@ script connectionWatcher() {
 	setInterval(function() {
 		var el = document.getElementById('connection-indicator');
 		var dot = document.getElementById('connection-dot');
-		if (!el || !dot) return;
+		var ping = document.getElementById('connection-ping');
+		if (!el || !dot || !ping) return;
+		
 		var lastPing = parseInt(el.dataset.lastPing, 10) || 0;
 		var stale = Date.now() - lastPing > 20000;
-		dot.classList.toggle('bg-green-500', !stale);
+		
-		dot.classList.toggle('bg-red-500', stale);
+		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);
 	}, 1000);
 }