From f5a35cd1f27d61fdf629d8f1d27b97fe68c42025 Mon Sep 17 00:00:00 2001
From: Mattias Tall <mattias.tall@ucr.uu.se>
Date: Tue, 26 May 2026 12:02:50 +0200
Subject: [PATCH] Add view count and description snippet to grid video cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Date and views share a meta line; description shows up to 2 lines below —
gives enough context to judge a video during discovery without opening it.
Both fields are optional so cards without them stay compact.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/VideoCard.jsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/VideoCard.jsx b/frontend/src/components/VideoCard.jsx
index f03e8b5..4e3f268 100644
--- a/frontend/src/components/VideoCard.jsx
+++ b/frontend/src/components/VideoCard.jsx
@@ -19,6 +19,14 @@ function formatDate(dateStr) {
   return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }
 
+function formatViews(n) {
+  if (!n) return null;
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B views`;
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n >= 100_000_000 ? 0 : 1)}M views`;
+  if (n >= 1_000) return `${Math.round(n / 1_000)}K views`;
+  return `${n} views`;
+}
+
 function IconBtn({ onClick, title, active, pending, children }) {
   return (
     <button
@@ -364,7 +372,16 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
             )}
           </div>
 
-          {date && <span className="text-[11px] text-zinc-600">{date}</span>}
+          <div className="flex items-center gap-1.5 flex-wrap text-[11px] text-zinc-600">
+            {date && <span>{date}</span>}
+            {video.view_count > 0 && <><span>·</span><span>{formatViews(video.view_count)}</span></>}
+          </div>
+
+          {video.description && (
+            <p className="text-[11px] leading-relaxed text-zinc-500 line-clamp-2 mt-0.5">
+              {video.description.replace(/\n+/g, " ")}
+            </p>
+          )}
 
           {/* Actions — fade in on hover */}
           <div className="mt-auto pt-1.5 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150">