From f7d5179d0fd311c47cf08d944ce7c81df5033d47 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Sun, 1 Mar 2026 11:32:17 -0500
Subject: [PATCH] Enhance dashboard: richer continue watching cards,
 color-coded stats, styled poster fallback

- Continue Watching cards now show episode still images in 16:9 aspect
  with overlaid episode info, play button, and progress bar
- Stats section uses per-stat color coding (primary/watching/watchlist/completed)
  with icon background pills and tabular-nums alignment
- No-poster fallback replaced with textured gradient + title text overlay
- Updated ContinueWatchingItem interface to include backdropPath, stillPath, overview

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/(pages)/dashboard/page.tsx | 89 +++++++++++++++++++++-------------
 components/stats-summary.tsx   | 16 +++++-
 components/title-card.tsx      | 15 +++++-
 lib/services/discovery.ts      |  6 +++
 4 files changed, 88 insertions(+), 38 deletions(-)

diff --git a/app/(pages)/dashboard/page.tsx b/app/(pages)/dashboard/page.tsx
index 69fff29..b152b73 100644
--- a/app/(pages)/dashboard/page.tsx
+++ b/app/(pages)/dashboard/page.tsx
@@ -20,6 +20,7 @@ interface ContinueWatchingItem {
     id: string;
     title: string;
     posterPath: string | null;
+    backdropPath: string | null;
     type: string;
   };
   nextEpisode: {
@@ -27,6 +28,8 @@ interface ContinueWatchingItem {
     seasonNumber: number;
     episodeNumber: number;
     name: string | null;
+    stillPath: string | null;
+    overview: string | null;
   } | null;
   totalEpisodes: number;
   watchedEpisodes: number;
@@ -267,9 +270,11 @@ function FeedSection({
 }
 
 function ContinueWatchingCard({ item }: { item: ContinueWatchingItem }) {
-  const posterUrl = item.title.posterPath
-    ? `https://image.tmdb.org/t/p/w300${item.title.posterPath}`
-    : null;
+  const stillUrl = item.nextEpisode?.stillPath
+    ? `https://image.tmdb.org/t/p/w500${item.nextEpisode.stillPath}`
+    : item.title.backdropPath
+      ? `https://image.tmdb.org/t/p/w500${item.title.backdropPath}`
+      : null;
   const progress =
     item.totalEpisodes > 0
       ? (item.watchedEpisodes / item.totalEpisodes) * 100
@@ -278,46 +283,62 @@ function ContinueWatchingCard({ item }: { item: ContinueWatchingItem }) {
   return (
     <Link
       href={`/titles/${item.title.id}`}
-      className="group flex w-56 shrink-0 gap-3 rounded-xl border border-border/30 bg-card/50 p-3 transition-all hover:border-primary/20 hover:bg-card"
+      className="group relative w-72 shrink-0 overflow-hidden rounded-xl border border-border/30 bg-card/50 transition-all hover:border-primary/20 hover:shadow-lg hover:shadow-black/25"
     >
-      <div className="relative h-20 w-14 shrink-0 overflow-hidden rounded-md bg-muted">
-        {posterUrl ? (
+      {/* Episode still / backdrop image */}
+      <div className="relative aspect-video overflow-hidden bg-muted">
+        {stillUrl ? (
           <Image
-            src={posterUrl}
-            alt={item.title.title}
-            width={56}
-            height={80}
-            className="h-full w-full object-cover"
+            src={stillUrl}
+            alt={item.nextEpisode?.name ?? item.title.title}
+            width={500}
+            height={281}
+            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
           />
         ) : (
-          <div className="flex h-full items-center justify-center text-[8px] text-muted-foreground">
-            ?
+          <div className="flex h-full items-center justify-center bg-gradient-to-br from-card via-secondary to-muted">
+            <IconPlayerPlay size={32} className="text-muted-foreground/30" />
           </div>
         )}
-        {/* Progress bar at bottom of poster */}
-        {progress > 0 && (
-          <div className="absolute bottom-0 left-0 right-0 h-1 bg-muted">
-            <div
-              className="h-full bg-primary transition-all"
-              style={{ width: `${progress}%` }}
-            />
-          </div>
-        )}
-      </div>
-      <div className="min-w-0 flex-1 space-y-1">
-        <p className="line-clamp-2 text-sm font-medium leading-snug">
-          {item.title.title}
-        </p>
+        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
+        {/* Episode label overlay */}
         {item.nextEpisode && (
-          <p className="text-xs text-muted-foreground">
-            S{item.nextEpisode.seasonNumber} E{item.nextEpisode.episodeNumber}
-          </p>
+          <div className="absolute bottom-2.5 left-3 right-3">
+            <p className="flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wider text-primary">
+              <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />
+              Up next
+            </p>
+            <p className="mt-0.5 truncate text-sm font-medium text-white">
+              <span className="font-mono text-xs text-white/60">
+                S{item.nextEpisode.seasonNumber} E
+                {item.nextEpisode.episodeNumber}
+              </span>{" "}
+              {item.nextEpisode.name}
+            </p>
+          </div>
         )}
-        <p className="flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wider text-primary">
-          <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />
-          Up next
-        </p>
       </div>
+      {/* Bottom bar with title + progress */}
+      <div className="flex items-center gap-3 p-3">
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium">{item.title.title}</p>
+          <p className="text-xs text-muted-foreground">
+            {item.watchedEpisodes}/{item.totalEpisodes} episodes
+          </p>
+        </div>
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
+          <IconPlayerPlay size={14} />
+        </div>
+      </div>
+      {/* Progress bar */}
+      {progress > 0 && (
+        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-muted">
+          <div
+            className="h-full bg-primary transition-all"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      )}
     </Link>
   );
 }
diff --git a/components/stats-summary.tsx b/components/stats-summary.tsx
index 0e4c7c8..0f46f07 100644
--- a/components/stats-summary.tsx
+++ b/components/stats-summary.tsx
@@ -21,21 +21,29 @@ const statDefs = [
     key: "moviesThisMonth" as const,
     label: "Movies This Month",
     icon: IconMovie,
+    color: "text-primary",
+    bgColor: "bg-primary/10",
   },
   {
     key: "episodesThisWeek" as const,
     label: "Episodes This Week",
     icon: IconPlayerPlay,
+    color: "text-status-watching",
+    bgColor: "bg-status-watching/10",
   },
   {
     key: "librarySize" as const,
     label: "In Library",
     icon: IconLibrary,
+    color: "text-status-watchlist",
+    bgColor: "bg-status-watchlist/10",
   },
   {
     key: "completed" as const,
     label: "Completed",
     icon: IconCheck,
+    color: "text-status-completed",
+    bgColor: "bg-status-completed/10",
   },
 ];
 
@@ -70,13 +78,17 @@ export function StatsSummary() {
             className="rounded-xl border border-border/30 bg-card/50 p-4"
           >
             <div className="flex items-center gap-2">
-              <Icon size={14} className="text-primary" />
+              <div
+                className={`flex h-6 w-6 items-center justify-center rounded-md ${def.bgColor}`}
+              >
+                <Icon size={13} className={def.color} />
+              </div>
               <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                 {def.label}
               </span>
             </div>
             <motion.p
-              className="mt-2 font-display text-2xl tracking-tight"
+              className={`mt-2 font-display text-2xl tabular-nums tracking-tight ${def.color}`}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ delay: i * 0.08 + 0.2 }}
diff --git a/components/title-card.tsx b/components/title-card.tsx
index 7f4f329..cddfd3d 100644
--- a/components/title-card.tsx
+++ b/components/title-card.tsx
@@ -47,8 +47,19 @@ export function TitleCard({
             className="h-full w-full object-cover"
           />
         ) : (
-          <div className="flex h-full items-center justify-center bg-gradient-to-br from-card to-muted text-sm text-muted-foreground">
-            No poster
+          <div className="relative flex h-full items-center justify-center overflow-hidden bg-gradient-to-br from-card via-secondary to-muted">
+            <div
+              className="pointer-events-none absolute inset-0 opacity-[0.06]"
+              style={{
+                backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
+              }}
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-primary/10 via-transparent to-transparent" />
+            <div className="relative px-3 text-center">
+              <p className="font-display text-sm leading-snug tracking-tight text-foreground/70">
+                {title}
+              </p>
+            </div>
           </div>
         )}
         {/* Hover gradient overlay with metadata */}
diff --git a/lib/services/discovery.ts b/lib/services/discovery.ts
index af4a05f..c80d18a 100644
--- a/lib/services/discovery.ts
+++ b/lib/services/discovery.ts
@@ -16,6 +16,7 @@ export interface ContinueWatchingItem {
     id: string;
     title: string;
     posterPath: string | null;
+    backdropPath: string | null;
     type: string;
   };
   nextEpisode: {
@@ -23,6 +24,8 @@ export interface ContinueWatchingItem {
     seasonNumber: number;
     episodeNumber: number;
     name: string | null;
+    stillPath: string | null;
+    overview: string | null;
   } | null;
   lastWatchedAt: Date | null;
   totalEpisodes: number;
@@ -108,6 +111,8 @@ export function getContinueWatchingFeed(
             seasonNumber: s.seasonNumber,
             episodeNumber: ep.episodeNumber,
             name: ep.name,
+            stillPath: ep.stillPath,
+            overview: ep.overview,
           };
         }
       }
@@ -119,6 +124,7 @@ export function getContinueWatchingFeed(
           id: title.id,
           title: title.title,
           posterPath: title.posterPath,
+          backdropPath: title.backdropPath,
           type: title.type,
         },
         nextEpisode,