Fix SSE architecture for reliable connections (#13)

features/common/components/shared.templ

@@ -1,7 +1,7 @@
 package components
 
 import (
-	"fmt"
+	"time"
 
 	"github.com/starfederation/datastar-go/datastar"
 )
@@ -48,60 +48,13 @@ templ NicknamePrompt(returnPath string) {
 	</main>
 }
 
-func isStale(lastPing int64) bool {
-	return lastPing == 0
-}
-
-var connectionWatcherHandle = templ.NewOnceHandle()
-
-// 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"
-		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>
+// LiveClock shows the current server time, updated every second via SSE.
+// If the clock stops updating, users know the connection is stale.
+templ LiveClock() {
+	<div class="fixed top-2 right-2 flex items-center gap-1.5 text-xs opacity-60 font-mono">
+		<div style="width: 6px; height: 6px; border-radius: 50%; background-color: #22c55e;"></div>
+		{ time.Now().Format("15:04:05") }
 	</div>
-	@connectionWatcherHandle.Once() {
-		@connectionWatcher()
-	}
-}
-
-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;
-		
-		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);
-	}, 1000);
 }
 
 templ GameJoinPrompt(loginURL string, registerURL string, gamePath string) {