wire game detail navigation from library, playlists

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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" />}

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>