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/snakegame/handlers.go

@@ -13,6 +13,7 @@ import (
 
 	"github.com/ryanhamamura/games/chat"
 	chatcomponents "github.com/ryanhamamura/games/chat/components"
+	sharedcomponents "github.com/ryanhamamura/games/features/common/components"
 	"github.com/ryanhamamura/games/features/snakegame/pages"
 	"github.com/ryanhamamura/games/sessions"
 	"github.com/ryanhamamura/games/snake"
@@ -125,7 +126,7 @@ func HandleSnakeEvents(snakeStore *snake.SnakeStore, nc *nats.Conn, sm *scs.Sess
 		}
 
 		sendPing := func() error {
-			return sse.PatchSignals([]byte(fmt.Sprintf(`{"lastPing":%d}`, time.Now().UnixMilli())))
+			return sse.PatchElementTempl(sharedcomponents.ConnectionIndicator(time.Now().UnixMilli()))
 		}
 
 		// Send initial render and ping

features/snakegame/pages/game.templ

@@ -32,12 +32,12 @@ templ GamePage(sg *snake.SnakeGame, mySlot int, messages []chat.Message, chatCfg
 	@layouts.Base("Snake") {
 		<main
 			class="snake-wrapper flex flex-col items-center gap-4 p-4"
-			data-signals={ `{"chatMsg":"","lastPing":0}` }
+			data-signals={ `{"chatMsg":""}` }
 			data-init={ fmt.Sprintf("@get('/snake/%s/events',{requestCancellation:'disabled'})", gameID) }
 			data-on:keydown__throttle.100ms={ keydownScript(gameID) }
 			tabindex="0"
 		>
-			@components.ConnectionIndicator()
+			@components.ConnectionIndicator(0)
 			@GameContent(sg, mySlot, messages, chatCfg, gameID)
 		</main>
 	}