From 053b6034dab0a948f1318cbb0cf45f01fb96caeb Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 9 Aug 2026 02:06:23 +0200
Subject: [PATCH] =?UTF-8?q?fix(theme):=20R10=20S1=20review=20fixes=20?=
 =?UTF-8?q?=E2=80=94=20restore=20distinctions=20lost=20in=20the=20codemod?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PlexBrowse PLAYABLE_TINT: transcode was collapsed onto remux's bg-warn; give it
  bg-danger so direct/remux/transcode read as a distinct good->heavy green/amber/red
  gradient again.
- Live indicators (VideoCard row + thumbnail badge, playlistColumns badge): revert to
  fixed live-red + white instead of the --danger token. 'live' is a broadcast marker,
  not an error state, and the badge sits over a thumbnail (no app-bg contrast need);
  restores the conventional red/white LIVE look and decouples it from error retunes.
- ChannelPage exploring badge: drop the redundant dark:text-warn (no-op after the
  token rename — --warn is already theme-scoped).

error/fatal toast shade merge left as-is (both are 'bad'; the 400/500 step was subtle).
---
 frontend/src/components/ChannelPage.tsx     | 2 +-
 frontend/src/components/PlexBrowse.tsx      | 5 ++++-
 frontend/src/components/VideoCard.tsx       | 5 +++--
 frontend/src/components/playlistColumns.tsx | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ChannelPage.tsx b/frontend/src/components/ChannelPage.tsx
index e10ccde6..ef4dac60 100644
--- a/frontend/src/components/ChannelPage.tsx
+++ b/frontend/src/components/ChannelPage.tsx
@@ -325,7 +325,7 @@ export default function ChannelPage({
                 ) : (
                   ch?.explored &&
                   !ch?.subscribed && (
-                    <span className="text-xs px-2 py-0.5 rounded-full bg-warn/15 text-warn dark:text-warn">
+                    <span className="text-xs px-2 py-0.5 rounded-full bg-warn/15 text-warn">
                       {t("channel.exploringBadge")}
                     </span>
                   )
diff --git a/frontend/src/components/PlexBrowse.tsx b/frontend/src/components/PlexBrowse.tsx
index 67d7925b..97525998 100644
--- a/frontend/src/components/PlexBrowse.tsx
+++ b/frontend/src/components/PlexBrowse.tsx
@@ -430,10 +430,13 @@ export default function PlexBrowse() {
   );
 }
 
+// Playback cost, escalating good→heavy: direct (green) → remux, a light repackage
+// (amber) → transcode, a full re-encode (red). Reuses the status trio as a gradient;
+// all three stay visually distinct.
 const PLAYABLE_TINT: Record<string, string> = {
   direct: "bg-success",
   remux: "bg-warn",
-  transcode: "bg-warn",
+  transcode: "bg-danger",
 };
 
 function PlexPosterCard({
diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx
index cf42caaf..d3c748a2 100644
--- a/frontend/src/components/VideoCard.tsx
+++ b/frontend/src/components/VideoCard.tsx
@@ -156,7 +156,8 @@ function RowMetaCells({ video }: { video: Video }) {
   // "live" dot and a "stream" dot would be the same dot.
   const status =
     video.live_status === "live"
-      ? { Icon: Radio, cls: "text-danger", label: t("card.live") }
+      ? // fixed live-red, not the status token — "live" is a broadcast indicator, not an error
+        { Icon: Radio, cls: "text-red-500", label: t("card.live") }
       : video.live_status === "upcoming"
         ? { Icon: Clock, cls: "", label: t("card.upcoming") }
         : video.live_status === "was_live"
@@ -250,7 +251,7 @@ function Thumb({
       ) : video.live_status === "live" || video.live_status === "upcoming" ? (
         <span
           className={`absolute bottom-1.5 right-1.5 text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded ${
-            video.live_status === "live" ? "bg-danger/90 text-danger-fg" : "bg-black/80 text-white"
+            video.live_status === "live" ? "bg-red-500/90 text-white" : "bg-black/80 text-white"
           }`}
         >
           {t(`card.${video.live_status}`)}
diff --git a/frontend/src/components/playlistColumns.tsx b/frontend/src/components/playlistColumns.tsx
index b5b7d604..8cb9fd42 100644
--- a/frontend/src/components/playlistColumns.tsx
+++ b/frontend/src/components/playlistColumns.tsx
@@ -106,7 +106,7 @@ export function playlistColumns({
           <span
             className={`text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded ${
               v.live_status === "live"
-                ? "bg-danger/90 text-danger-fg"
+                ? "bg-red-500/90 text-white" /* fixed live-red, not the status token */
                 : "bg-card border border-border text-muted"
             }`}
           >