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).
This commit is contained in:
npeter83 2026-06-17 13:55:43 +02:00
parent 27030bf9a6
commit c010abd5a3
4 changed files with 40 additions and 4 deletions

View file

@ -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>}