From 28d8959c5cb4b9429d139f332f9c7f362e2fc71e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20F=C3=B6rtsch?= <mail@felixfoertsch.de>
Date: Mon, 2 Mar 2026 21:56:16 +0100
Subject: [PATCH] wire game detail navigation from library, playlists

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/features/library/components/library-list.tsx      | 8 +++++++-
 src/features/playlists/components/playlist-detail.tsx | 8 ++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/features/library/components/library-list.tsx b/src/features/library/components/library-list.tsx
index 4ae8cf7..29605aa 100644
--- a/src/features/library/components/library-list.tsx
+++ b/src/features/library/components/library-list.tsx
@@ -1,6 +1,7 @@
 import { GameListItem } from "@/features/games/components/game-list-item"
 import type { Game } from "@/shared/db/schema"
 import { t } from "@/shared/i18n"
+import { useNavigate } from "@tanstack/react-router"
 import { useEffect, useRef } from "react"
 
 interface LibraryListProps {
@@ -12,6 +13,7 @@ interface LibraryListProps {
 
 export function LibraryList({ games, hasMore, loadMore }: LibraryListProps) {
 	const sentinelRef = useRef<HTMLDivElement>(null)
+	const navigate = useNavigate()
 
 	useEffect(() => {
 		if (!hasMore || !sentinelRef.current) return
@@ -35,7 +37,11 @@ export function LibraryList({ games, hasMore, loadMore }: LibraryListProps) {
 		<>
 			<div className="divide-y rounded-lg border bg-card">
 				{games.map((game) => (
-					<GameListItem key={game.id} game={game} />
+					<GameListItem
+						key={game.id}
+						game={game}
+						onClick={() => navigate({ to: "/games/$gameId", params: { gameId: game.id } })}
+					/>
 				))}
 			</div>
 			{hasMore && <div ref={sentinelRef} className="h-8" />}
diff --git a/src/features/playlists/components/playlist-detail.tsx b/src/features/playlists/components/playlist-detail.tsx
index 9b17685..68b390c 100644
--- a/src/features/playlists/components/playlist-detail.tsx
+++ b/src/features/playlists/components/playlist-detail.tsx
@@ -116,9 +116,13 @@ export function PlaylistDetail({ playlistId }: PlaylistDetailProps) {
 				<div className="space-y-3">
 					{games.map((game) => (
 						<div key={game.id} className="flex items-start gap-2">
-							<div className="flex-1">
+							<button
+								type="button"
+								className="flex-1 cursor-pointer text-left"
+								onClick={() => navigate({ to: "/games/$gameId", params: { gameId: game.id } })}
+							>
 								<GameCard game={game} onUpdate={reload} />
-							</div>
+							</button>
 							<Button variant="ghost" className="mt-4 shrink-0" onClick={() => removeGame(game.id)}>
 								<Trash2 className="h-4 w-4" />
 							</Button>