Merge feature/banner-refactor-discovery-polish

- refactor: reusable Banner base (VersionBanner + DemoBanner)
- feat: Discover tab total-videos column + subscribe confirm dialog (EN/HU/DE)

frontend/src/components/Banner.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import { X } from "lucide-react";
+
+type BannerTone = "accent" | "warning";
+
+const TONES: Record<BannerTone, { bar: string; icon: string; action: string }> = {
+  accent: { bar: "bg-accent/15 border-accent/30", icon: "text-accent", action: "bg-accent text-accent-fg" },
+  warning: { bar: "bg-amber-500/15 border-amber-500/30", icon: "text-amber-500", action: "bg-amber-500 text-black" },
+};
+
+// Shared top-of-app notification bar. VersionBanner and DemoBanner are thin wrappers over this;
+// a future news-ticker variant can build on the same shell (rotating content as children).
+export default function Banner({
+  tone,
+  icon: Icon,
+  children,
+  action,
+  onDismiss,
+  dismissTitle,
+}: {
+  tone: BannerTone;
+  icon: LucideIcon;
+  children: ReactNode;
+  action?: { label: string; onClick: () => void };
+  onDismiss?: () => void;
+  dismissTitle?: string;
+}) {
+  const c = TONES[tone];
+  return (
+    <div className={`shrink-0 flex items-center gap-2 px-4 py-2 text-sm border-b text-fg ${c.bar}`}>
+      <Icon className={`w-4 h-4 shrink-0 ${c.icon}`} />
+      <span className="min-w-0">{children}</span>
+      {action && (
+        <button
+          onClick={action.onClick}
+          className={`ml-1 px-2.5 py-1 rounded-lg font-semibold hover:opacity-90 transition ${c.action}`}
+        >
+          {action.label}
+        </button>
+      )}
+      {onDismiss && (
+        <button
+          onClick={onDismiss}
+          title={dismissTitle}
+          className="ml-auto p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/components/ChannelDiscovery.tsx

@@ -7,6 +7,7 @@ import { notify } from "../lib/notifications";
 import Tooltip from "./Tooltip";
 import ChannelLink from "./ChannelLink";
 import DataTable, { type Column } from "./DataTable";
+import { useConfirm } from "./ConfirmProvider";
 
 // The Channel manager's "Discovery" tab: channels that turn up in the user's playlists but
 // that they don't subscribe to. Subscribing here only creates the subscription + enriches
@@ -20,6 +21,7 @@ export default function ChannelDiscovery({
 }) {
   const { t } = useTranslation();
   const qc = useQueryClient();
+  const confirm = useConfirm();
 
   const query = useQuery({
     queryKey: ["discovered-channels"],
@@ -60,6 +62,17 @@ export default function ChannelDiscovery({
     },
   });
 
+  // Subscribing changes the user's real YouTube account and spends a little quota — confirm
+  // first (mirrors the unsubscribe guard in the Subscriptions tab).
+  const onSubscribe = async (c: DiscoveredChannel) => {
+    const ok = await confirm({
+      title: t("channels.discovery.subscribe"),
+      message: t("channels.discovery.confirmSubscribe", { name: c.title ?? c.id }),
+      confirmLabel: t("channels.discovery.subscribe"),
+    });
+    if (ok) subscribe.mutate(c);
+  };
+
   const rows = query.data ?? [];
 
   const columns: Column<DiscoveredChannel>[] = [
@@ -87,6 +100,19 @@ export default function ChannelDiscovery({
         </span>
       ),
     },
+    {
+      key: "videos",
+      header: t("channels.discovery.cols.totalVideos"),
+      align: "right",
+      nowrap: true,
+      sortable: true,
+      sortValue: (c) => c.video_count ?? -1,
+      render: (c) => (
+        <span className="text-muted tabular-nums">
+          {c.video_count != null ? formatViews(c.video_count) : "—"}
+        </span>
+      ),
+    },
     {
       key: "inPlaylists",
       header: t("channels.discovery.cols.inPlaylists"),
@@ -123,7 +149,7 @@ export default function ChannelDiscovery({
           }
         >
           <button
-            onClick={() => subscribe.mutate(c)}
+            onClick={() => onSubscribe(c)}
             disabled={!canWrite || subscribe.isPending}
             className="glass-card glass-hover inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs disabled:opacity-50 transition"
           >

frontend/src/components/DemoBanner.tsx

@@ -1,17 +1,15 @@
 import { useTranslation } from "react-i18next";
 import { AlertTriangle } from "lucide-react";
+import Banner from "./Banner";
 
 // Permanent, non-dismissible bar shown to the shared demo account so it's always clear the
 // state is communal. (Replaces the old login-time toast, which re-popped on every reload.)
 export default function DemoBanner() {
   const { t } = useTranslation();
   return (
-    <div className="shrink-0 flex items-center gap-2 px-4 py-2 text-sm bg-amber-500/15 border-b border-amber-500/30 text-fg">
+    <Banner tone="warning" icon={AlertTriangle}>
-      <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />
+      <span className="font-semibold">{t("common.demoTitle")}</span>
-      <span className="min-w-0">
+      <span className="text-muted"> — {t("common.demoSharedNotice")}</span>
-        <span className="font-semibold">{t("common.demoTitle")}</span>
+    </Banner>
-        <span className="text-muted"> — {t("common.demoSharedNotice")}</span>
-      </span>
-    </div>
   );
 }

frontend/src/components/VersionBanner.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Sparkles, X } from "lucide-react";
+import { Sparkles } from "lucide-react";
 import { FRONTEND_VERSION, SEEN_VERSION_KEY } from "../lib/version";
+import Banner from "./Banner";
 
 // Eye-catching, dismissible bar shown once after the running build's version changes
 // (compares the baked frontend version to the last one the user acknowledged).
@@ -19,25 +20,20 @@ export default function VersionBanner({ onOpen }: { onOpen: () => void }) {
   }
 
   return (
-    <div className="shrink-0 flex items-center gap-2 px-4 py-2 text-sm bg-accent/15 border-b border-accent/30 text-fg">
+    <Banner
-      <Sparkles className="w-4 h-4 text-accent shrink-0" />
+      tone="accent"
-      <span className="min-w-0">{t("header.banner.updated", { version: FRONTEND_VERSION })}</span>
+      icon={Sparkles}
-      <button
+      action={{
-        onClick={() => {
+        label: t("header.banner.releaseNotes"),
+        onClick: () => {
           onOpen();
           markSeen();
-        }}
+        },
-        className="ml-1 px-2.5 py-1 rounded-lg font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
+      }}
-      >
+      onDismiss={markSeen}
-        {t("header.banner.releaseNotes")}
+      dismissTitle={t("header.banner.dismiss")}
-      </button>
+    >
-      <button
+      {t("header.banner.updated", { version: FRONTEND_VERSION })}
-        onClick={markSeen}
+    </Banner>
-        title={t("header.banner.dismiss")}
-        className="ml-auto p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
-      >
-        <X className="w-4 h-4" />
-      </button>
-    </div>
   );
 }

frontend/src/i18n/locales/de/channels.json

@@ -19,7 +19,9 @@
     "subscribedTitle": "Auf YouTube abonniert",
     "subscribedBody": "Du folgst jetzt {{name}} — neue Uploads erscheinen in deinem Feed.",
     "subscribeFailed": "Abonnieren fehlgeschlagen",
+    "confirmSubscribe": "„{{name}}“ auf YouTube abonnieren? Das ändert dein echtes YouTube-Konto und verbraucht etwas API-Kontingent.",
     "cols": {
+      "totalVideos": "Videos",
       "inPlaylists": "In Playlists",
       "inPlaylistsHint": "{{videos}} Video(s) von diesem Kanal in {{playlists}} deiner Playlist(s)."
     }

frontend/src/i18n/locales/en/channels.json

@@ -19,7 +19,9 @@
     "subscribedTitle": "Subscribed on YouTube",
     "subscribedBody": "You're now following {{name}} — its new uploads will start arriving in your feed.",
     "subscribeFailed": "Subscribe failed",
+    "confirmSubscribe": "Subscribe to \"{{name}}\" on YouTube? This changes your real YouTube account and spends a little API quota.",
     "cols": {
+      "totalVideos": "Videos",
       "inPlaylists": "In playlists",
       "inPlaylistsHint": "{{videos}} video(s) from this channel across {{playlists}} of your playlist(s)."
     }

frontend/src/i18n/locales/hu/channels.json

@@ -19,7 +19,9 @@
     "subscribedTitle": "Feliratkozva a YouTube-on",
     "subscribedBody": "Mostantól követed: {{name}} — az új feltöltései megjelennek a hírfolyamodban.",
     "subscribeFailed": "A feliratkozás sikertelen",
+    "confirmSubscribe": "Feliratkozol erre a YouTube-on: „{{name}}”? Ez módosítja a valódi YouTube-fiókodat és kevés API-kvótát használ.",
     "cols": {
+      "totalVideos": "Videók",
       "inPlaylists": "Listákban",
       "inPlaylistsHint": "{{videos}} videó ettől a csatornától, {{playlists}} lejátszási listádban."
     }