From de1b32ba6fafdf0adb0c0f5ae60bde1b760493b6 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Thu, 16 Jul 2026 03:28:56 +0200
Subject: [PATCH] refactor(feed): tidy the inline badge classes and the
 no-thumb guard

---
 frontend/src/components/VideoCard.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx
index 315525f..a4f3665 100644
--- a/frontend/src/components/VideoCard.tsx
+++ b/frontend/src/components/VideoCard.tsx
@@ -131,25 +131,29 @@ function resumePct(video: Video): number {
 // so it renders the same FACTS inline here — deliberately not a shared component with Thumb's
 // badges: floating chips over artwork and inline text chips are different presentations, and
 // forcing one component to do both would be a variant-flag knot for no reuse.
+// The cost is real though: the rules below (duration-else-live, was_live, saved) are ALSO in Thumb,
+// so a change to them must land in both. If they ever do change, share the decision — a
+// videoBadges(video) -> Badge[] — and keep only the markup separate.
 function InlineBadges({ video }: { video: Video }) {
   const { t } = useTranslation();
   // Inline-flow, not flex: these sit inside the meta line's " · "-separated text.
-  const chip = "inline-block mr-1.5 px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide";
+  const base = "inline-block mr-1.5 px-1.5 py-0.5 rounded";
+  const label = clsx(base, "text-[10px] font-semibold uppercase tracking-wide");
   return (
     <>
       {video.duration_seconds != null ? (
-        <span className="inline-block mr-1.5 px-1.5 py-0.5 rounded bg-surface text-fg text-[11px] font-medium tabular-nums">
+        <span className={clsx(base, "bg-surface text-fg text-[11px] font-medium tabular-nums")}>
           {formatDuration(video.duration_seconds)}
         </span>
       ) : video.live_status === "live" || video.live_status === "upcoming" ? (
         <span
-          className={clsx(chip, video.live_status === "live" ? "bg-red-500/90 text-white" : "bg-surface text-fg")}
+          className={clsx(label, video.live_status === "live" ? "bg-red-500/90 text-white" : "bg-surface text-fg")}
         >
           {t(`card.${video.live_status}`)}
         </span>
       ) : null}
       {video.live_status === "was_live" && (
-        <span className={clsx(chip, "bg-accent text-accent-fg")}>{t("card.stream")}</span>
+        <span className={clsx(label, "bg-accent text-accent-fg")}>{t("card.stream")}</span>
       )}
       {video.saved && (
         <Bookmark className="inline-block mr-1.5 w-3.5 h-3.5 align-[-2px] text-accent fill-current" />
@@ -291,7 +295,7 @@ function VideoCard({
   // The thumbnail-less row drops Thumb, and with it the duration / live state / saved marker that
   // Thumb overlays on the image. Those are metadata, not decoration, so fold them into the meta
   // line here rather than let the mode silently lose them.
-  const noThumb = spec.family === "row" && !spec.thumb;
+  const noThumb = !spec.thumb;
   const meta = (
     <>
       {noThumb && <InlineBadges video={video} />}