From ccf044ac2c7dbf4f342872158ed763fe85b33e98 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Wed, 17 Jun 2026 13:55:43 +0200
Subject: [PATCH] feat(channels): YouTube link on channel name + done
 checkmarks

- Channel name: middle-click opens the channel's YouTube page in a new tab
  (left-click still opens the in-app detail) plus an explicit external-link icon.
- recent/full sync badges show a check icon when the state is reached.
- New i18n key channels.row.openOnYouTube (HU/EN/DE).
---
 frontend/src/components/Channels.tsx       | 41 +++++++++++++++++++---
 frontend/src/i18n/locales/de/channels.json |  1 +
 frontend/src/i18n/locales/en/channels.json |  1 +
 frontend/src/i18n/locales/hu/channels.json |  1 +
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Channels.tsx b/frontend/src/components/Channels.tsx
index 3db9eb1..dc37a27 100644
--- a/frontend/src/components/Channels.tsx
+++ b/frontend/src/components/Channels.tsx
@@ -4,6 +4,8 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   ArrowDown,
   ArrowUp,
+  Check,
+  ExternalLink,
   Eye,
   EyeOff,
   History,
@@ -361,10 +363,11 @@ function SyncBadge({ ok, label, hint }: { ok: boolean; label: string; hint?: str
   return (
     <Tooltip hint={hint ?? ""}>
       <span
-        className={`text-[10px] px-1.5 py-0.5 rounded-full border ${
+        className={`inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full border ${
           ok ? "border-accent/40 text-accent" : "border-border text-muted"
         }`}
       >
+        {ok && <Check className="w-3 h-3" />}
         {label}
       </span>
     </Tooltip>
@@ -393,6 +396,9 @@ function ChannelRow({
   onToggleTag: (tagId: number) => void;
 }) {
   const { t } = useTranslation();
+  const ytUrl = c.handle
+    ? `https://www.youtube.com/@${c.handle.replace(/^@/, "")}`
+    : `https://www.youtube.com/channel/${c.id}`;
   return (
     <div
       className={`glass-card glass-hover flex items-center gap-3 p-2.5 rounded-xl transition ${
@@ -418,9 +424,36 @@ function ChannelRow({
       />
 
       <div className="min-w-0 flex-1">
-        <button onClick={onView} className="text-sm font-semibold truncate hover:text-accent block max-w-full text-left">
-          {c.title ?? c.id}
-        </button>
+        <div className="flex items-center gap-1 max-w-full">
+          <button
+            onClick={onView}
+            onAuxClick={(e) => {
+              // Middle-click opens the channel's YouTube page in a new tab; left-click
+              // keeps opening the in-app channel detail.
+              if (e.button === 1) {
+                e.preventDefault();
+                window.open(ytUrl, "_blank", "noopener,noreferrer");
+              }
+            }}
+            onMouseDown={(e) => {
+              if (e.button === 1) e.preventDefault(); // suppress middle-click autoscroll
+            }}
+            className="text-sm font-semibold truncate hover:text-accent text-left min-w-0"
+          >
+            {c.title ?? c.id}
+          </button>
+          <Tooltip hint={t("channels.row.openOnYouTube")}>
+            <a
+              href={ytUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted hover:text-accent shrink-0"
+              aria-label={t("channels.row.openOnYouTube")}
+            >
+              <ExternalLink className="w-3.5 h-3.5" />
+            </a>
+          </Tooltip>
+        </div>
         <div className="flex items-center gap-2 text-[11px] text-muted">
           <span>{t("channels.row.stored", { count: c.stored_videos, formatted: c.stored_videos.toLocaleString() })}</span>
           {c.subscriber_count != null && <span>· {t("channels.row.subs", { count: c.subscriber_count, formatted: c.subscriber_count.toLocaleString() })}</span>}
diff --git a/frontend/src/i18n/locales/de/channels.json b/frontend/src/i18n/locales/de/channels.json
index 8638c94..f57b703 100644
--- a/frontend/src/i18n/locales/de/channels.json
+++ b/frontend/src/i18n/locales/de/channels.json
@@ -36,6 +36,7 @@
   "row": {
     "stored": "{{formatted}} gespeichert",
     "subs": "{{formatted}} Abonnenten",
+    "openOnYouTube": "Auf YouTube öffnen",
     "priorityHint": "Deine Einstufung für diesen Kanal. Sortiere den Feed nach „Kanalpriorität“, um Kanäle mit höherer Priorität nach oben zu bringen.",
     "raisePriority": "Priorität erhöhen",
     "lowerPriority": "Priorität senken",
diff --git a/frontend/src/i18n/locales/en/channels.json b/frontend/src/i18n/locales/en/channels.json
index 9ecd280..0adc427 100644
--- a/frontend/src/i18n/locales/en/channels.json
+++ b/frontend/src/i18n/locales/en/channels.json
@@ -36,6 +36,7 @@
   "row": {
     "stored": "{{formatted}} stored",
     "subs": "{{formatted}} subs",
+    "openOnYouTube": "Open on YouTube",
     "priorityHint": "Your ranking for this channel. Sort the feed by “Channel priority” to bring higher-priority channels to the top.",
     "raisePriority": "Raise priority",
     "lowerPriority": "Lower priority",
diff --git a/frontend/src/i18n/locales/hu/channels.json b/frontend/src/i18n/locales/hu/channels.json
index 30904eb..fc36ce7 100644
--- a/frontend/src/i18n/locales/hu/channels.json
+++ b/frontend/src/i18n/locales/hu/channels.json
@@ -36,6 +36,7 @@
   "row": {
     "stored": "{{formatted}} tárolt",
     "subs": "{{formatted}} feliratkozó",
+    "openOnYouTube": "Megnyitás a YouTube-on",
     "priorityHint": "A te rangsorod ehhez a csatornához. Rendezd a hírfolyamot „Csatorna prioritás” szerint, hogy a magasabb prioritású csatornák felülre kerüljenek.",
     "raisePriority": "Prioritás növelése",
     "lowerPriority": "Prioritás csökkentése",