From 426e85c2c9e4b520d60fcd8fad13ceda597d4118 Mon Sep 17 00:00:00 2001
From: Mattias Tall <mattias.tall@ucr.uu.se>
Date: Tue, 26 May 2026 10:55:25 +0200
Subject: [PATCH] Mobile nav, channel banners, search channel linking

- Add bottom tab bar (Home/Following/Discover/Downloads/Settings) for mobile
- Fetch and display channel banner images on channel pages
- Fix ChannelCard: channels without a local DB id now follow+navigate on click

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 backend/services/ytdlp.py               | 15 ++++++-
 frontend/src/components/ChannelCard.jsx | 17 ++++++-
 frontend/src/components/Layout.jsx      | 60 ++++++++++++++++++++++++-
 frontend/src/pages/Channel.jsx          |  7 +++
 4 files changed, 95 insertions(+), 4 deletions(-)

diff --git a/backend/services/ytdlp.py b/backend/services/ytdlp.py
index c58a844..3c7c570 100644
--- a/backend/services/ytdlp.py
+++ b/backend/services/ytdlp.py
@@ -82,6 +82,19 @@ def _normalize_video(info: dict) -> dict:
     }
 
 
+def _channel_banner(thumbnails: list | None) -> str | None:
+    if not thumbnails:
+        return None
+    for t in thumbnails:
+        if "banner" in str(t.get("id") or "").lower():
+            return t.get("url")
+    wide = [t for t in thumbnails
+            if t.get("width") and t.get("height") and t["width"] > t["height"] * 3]
+    if wide:
+        return max(wide, key=lambda t: t.get("width") or 0).get("url")
+    return None
+
+
 def _channel_avatar(thumbnails: list | None) -> str | None:
     """Pick the channel avatar from yt-dlp's thumbnails list.
 
@@ -109,7 +122,7 @@ def _normalize_channel(info: dict) -> dict:
         "name": info.get("channel") or info.get("title") or info.get("uploader") or None,
         "description": info.get("description") or None,
         "thumbnail_url": _channel_avatar(info.get("thumbnails")),
-        "banner_url": None,
+        "banner_url": _channel_banner(info.get("thumbnails")),
         "subscriber_count": info.get("channel_follower_count"),
     }
 
diff --git a/frontend/src/components/ChannelCard.jsx b/frontend/src/components/ChannelCard.jsx
index ece9080..38c6967 100644
--- a/frontend/src/components/ChannelCard.jsx
+++ b/frontend/src/components/ChannelCard.jsx
@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
-import { followChannel, unfollowChannel } from "../api";
+import { followChannel, unfollowChannel, followChannelByUrl } from "../api";
 
 function formatSubs(n) {
   if (!n) return null;
@@ -21,6 +21,19 @@ export default function ChannelCard({ channel }) {
     onSuccess: () => qc.invalidateQueries({ queryKey: ["channels"] }),
   });
 
+  const followAndNavMut = useMutation({
+    mutationFn: () => followChannelByUrl({ youtube_channel_id: channel.youtube_channel_id }),
+    onSuccess: (res) => {
+      qc.invalidateQueries({ queryKey: ["channels"] });
+      navigate(`/channels/${res.data.channel_id}`);
+    },
+  });
+
+  const handleClick = () => {
+    if (channelId) navigate(`/channels/${channelId}`);
+    else if (channel.youtube_channel_id) followAndNavMut.mutate();
+  };
+
   const subs = formatSubs(channel.subscriber_count);
   const meta = [
     subs && `${subs} subscribers`,
@@ -30,7 +43,7 @@ export default function ChannelCard({ channel }) {
   return (
     <div
       className="bg-zinc-900 rounded-xl p-4 flex gap-4 cursor-pointer hover:bg-zinc-800 transition-colors"
-      onClick={() => channelId && navigate(`/channels/${channelId}`)}
+      onClick={handleClick}
     >
       {/* Avatar */}
       {channel.thumbnail_url ? (
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 1f84635..174703a 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -4,6 +4,62 @@ import { useAuth } from "../hooks/useAuth";
 import SearchBar from "./SearchBar";
 import { getDownloads, getChannels } from "../api";
 
+function BottomNav({ newCount }) {
+  const tabs = [
+    {
+      to: "/", label: "Home", end: true,
+      icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />,
+    },
+    {
+      to: "/following", label: "Following", badge: newCount,
+      icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />,
+    },
+    {
+      to: "/discovery", label: "Discover",
+      icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />,
+    },
+    {
+      to: "/downloads", label: "Downloads",
+      icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />,
+    },
+    {
+      to: "/settings", label: "Settings",
+      icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />,
+    },
+  ];
+
+  return (
+    <nav className="sm:hidden fixed bottom-0 inset-x-0 z-50 bg-zinc-950/95 backdrop-blur border-t border-zinc-800">
+      <div className="flex items-stretch h-16">
+        {tabs.map((tab) => (
+          <NavLink
+            key={tab.to}
+            to={tab.to}
+            end={tab.end}
+            className={({ isActive }) =>
+              `relative flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors ${
+                isActive ? "text-accent" : "text-zinc-500"
+              }`
+            }
+          >
+            <div className="relative">
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {tab.icon}
+              </svg>
+              {tab.badge > 0 && (
+                <span className="absolute -top-1 -right-1.5 min-w-[14px] h-3.5 bg-accent text-black text-[9px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
+                  {tab.badge > 99 ? "99+" : tab.badge}
+                </span>
+              )}
+            </div>
+            <span className="text-[10px] font-medium leading-none">{tab.label}</span>
+          </NavLink>
+        ))}
+      </div>
+    </nav>
+  );
+}
+
 function DownloadIndicator() {
   const { data } = useQuery({
     queryKey: ["downloads"],
@@ -201,9 +257,11 @@ export default function Layout() {
       </header>
 
       {/* Page content */}
-      <main className="flex-1 max-w-screen-xl mx-auto w-full px-4 py-6">
+      <main className="flex-1 max-w-screen-xl mx-auto w-full px-4 py-6 pb-24 sm:pb-6">
         <Outlet />
       </main>
+
+      <BottomNav newCount={newCount} />
     </div>
   );
 }
diff --git a/frontend/src/pages/Channel.jsx b/frontend/src/pages/Channel.jsx
index 552afc4..bbb5c40 100644
--- a/frontend/src/pages/Channel.jsx
+++ b/frontend/src/pages/Channel.jsx
@@ -79,6 +79,13 @@ export default function ChannelPage() {
 
   return (
     <div className="flex flex-col gap-8">
+      {/* Banner */}
+      {channel.banner_url && (
+        <div className="-mx-4 -mt-6 mb-2">
+          <img src={channel.banner_url} alt="" className="w-full h-28 sm:h-44 object-cover" />
+        </div>
+      )}
+
       {/* Channel header */}
       <div className="flex items-start gap-5">
         {channel.thumbnail_url ? (