Add view count and description snippet to grid video cards

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>
This commit is contained in:
Mattias Tall
2026-05-26 12:02:50 +02:00
parent 1df396590f
commit f5a35cd1f2

View File

@@ -19,6 +19,14 @@ function formatDate(dateStr) {
return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }); 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 }) { function IconBtn({ onClick, title, active, pending, children }) {
return ( return (
<button <button
@@ -364,7 +372,16 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
)} )}
</div> </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 */} {/* 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"> <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">