From 0ccfe16a670d7efae8d01dc756b2d33477215204 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20F=C3=B6rtsch?= <mail@felixfoertsch.de>
Date: Mon, 2 Mar 2026 21:57:52 +0100
Subject: [PATCH] full-height discover layout, info button on cards, game state
 dot

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../discover/components/card-stack.tsx        |  2 +-
 .../components/game-discover-card.tsx         | 27 ++++++++++++++++---
 src/routes/__root.tsx                         |  2 +-
 src/routes/discover/index.tsx                 | 24 ++++++++---------
 4 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/features/discover/components/card-stack.tsx b/src/features/discover/components/card-stack.tsx
index 7e0da0d..058167c 100644
--- a/src/features/discover/components/card-stack.tsx
+++ b/src/features/discover/components/card-stack.tsx
@@ -31,7 +31,7 @@ export function CardStack({ games, onSwipeLeft, onSwipeRight }: CardStackProps)
 	const visibleCards = games.slice(0, 3)
 
 	return (
-		<div className="relative h-80 w-full">
+		<div className="relative h-full w-full">
 			{visibleCards.map((game, i) => {
 				const isTop = i === 0
 				const scale = 1 - i * 0.05
diff --git a/src/features/discover/components/game-discover-card.tsx b/src/features/discover/components/game-discover-card.tsx
index a6e48ad..efd9e2f 100644
--- a/src/features/discover/components/game-discover-card.tsx
+++ b/src/features/discover/components/game-discover-card.tsx
@@ -1,6 +1,8 @@
-import { formatPlaytime } from "@/features/games/schema"
+import { formatPlaytime, gameStateColors } from "@/features/games/schema"
 import { Badge } from "@/shared/components/ui/badge"
 import type { Game } from "@/shared/db/schema"
+import { useNavigate } from "@tanstack/react-router"
+import { Info } from "lucide-react"
 
 interface GameDiscoverCardProps {
 	game: Game
@@ -11,17 +13,34 @@ function getSteamHeaderImage(sourceId: string): string {
 }
 
 export function GameDiscoverCard({ game }: GameDiscoverCardProps) {
+	const navigate = useNavigate()
 	const imageUrl = game.source === "steam" ? getSteamHeaderImage(game.source_id) : null
+	const dotColor = game.game_state !== "not_set" ? gameStateColors[game.game_state] : null
 
 	return (
-		<div className="overflow-hidden rounded-xl border bg-card shadow-lg">
-			{imageUrl && <img src={imageUrl} alt={game.title} className="h-44 w-full object-cover" />}
-			<div className="p-4">
+		<div className="flex h-full flex-col overflow-hidden rounded-xl border bg-card shadow-lg">
+			{imageUrl && (
+				<img src={imageUrl} alt={game.title} className="w-full flex-1 object-cover min-h-0" />
+			)}
+			<div className="shrink-0 p-4">
 				<div className="flex items-center gap-2">
 					<h3 className="truncate text-lg font-bold">{game.title}</h3>
 					<Badge variant="secondary" className="shrink-0">
 						{game.source}
 					</Badge>
+					{dotColor && (
+						<span className={`inline-block h-2.5 w-2.5 shrink-0 rounded-full ${dotColor}`} />
+					)}
+					<button
+						type="button"
+						className="ml-auto shrink-0 text-muted-foreground"
+						onClick={(e) => {
+							e.stopPropagation()
+							navigate({ to: "/games/$gameId", params: { gameId: game.id } })
+						}}
+					>
+						<Info className="h-5 w-5" />
+					</button>
 				</div>
 				{game.playtime_hours > 0 && (
 					<p className="mt-1 text-sm text-muted-foreground">
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index ff4f44b..673882f 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -18,7 +18,7 @@ function RootLayout() {
 	const navigate = useNavigate()
 
 	return (
-		<div className="flex min-h-dvh flex-col">
+		<div className="flex h-dvh flex-col">
 			<main className="flex-1 overflow-y-auto pb-20">
 				<Outlet />
 			</main>
diff --git a/src/routes/discover/index.tsx b/src/routes/discover/index.tsx
index dcc3597..d22acbd 100644
--- a/src/routes/discover/index.tsx
+++ b/src/routes/discover/index.tsx
@@ -15,27 +15,27 @@ function DiscoverPage() {
 		useDiscover()
 
 	return (
-		<div className="mx-auto max-w-lg p-4">
-			<h1 className="mb-4 text-2xl font-bold">{t("discover.title")}</h1>
-
+		<div className="mx-auto flex h-full max-w-lg flex-col p-4">
 			<DiscoverProgress progress={progress} seenCount={seenCount} totalCount={totalCount} />
 
-			<div className="mt-6">
-				{isDone ? (
-					<DiscoverDone seenCount={seenCount} onReset={reset} />
-				) : unseenGames.length === 0 ? (
-					<p className="py-8 text-center text-muted-foreground">{t("discover.empty")}</p>
-				) : (
-					<div className="space-y-6">
+			{isDone ? (
+				<DiscoverDone seenCount={seenCount} onReset={reset} />
+			) : unseenGames.length === 0 ? (
+				<p className="py-8 text-center text-muted-foreground">{t("discover.empty")}</p>
+			) : (
+				<>
+					<div className="mt-4 min-h-0 flex-1">
 						<CardStack games={unseenGames} onSwipeLeft={swipeLeft} onSwipeRight={swipeRight} />
+					</div>
+					<div className="shrink-0 py-4">
 						<SwipeButtons
 							onSkip={swipeLeft}
 							onLike={swipeRight}
 							disabled={unseenGames.length === 0}
 						/>
 					</div>
-				)}
-			</div>
+				</>
+			)}
 		</div>
 	)
 }