From 1df396590fbee4ab10f10a0db5f7ed70bd645cfc Mon Sep 17 00:00:00 2001
From: Mattias Tall <mattias.tall@ucr.uu.se>
Date: Tue, 26 May 2026 12:01:43 +0200
Subject: [PATCH] Redesign video cards with channel avatar; fix mobile bottom
 nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

VideoCard grid: YouTube-style layout — channel avatar circle (falls back
to letter) left of title/meta, avatar is clickable to go to channel page,
date on its own line for breathing room, badges inline with channel name

Bottom nav: env(safe-area-inset-bottom) so it clears iOS home indicator,
active tab gets a soft accent pill behind the icon, slightly bolder label

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/Layout.jsx    | 38 +++++++++++++-------
 frontend/src/components/VideoCard.jsx | 52 ++++++++++++++++-----------
 2 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 174703a..3822d77 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -29,7 +29,10 @@ function BottomNav({ newCount }) {
   ];
 
   return (
-    <nav className="sm:hidden fixed bottom-0 inset-x-0 z-50 bg-zinc-950/95 backdrop-blur border-t border-zinc-800">
+    <nav
+      className="sm:hidden fixed bottom-0 inset-x-0 z-50 bg-zinc-950/98 backdrop-blur border-t border-zinc-800"
+      style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
+    >
       <div className="flex items-stretch h-16">
         {tabs.map((tab) => (
           <NavLink
@@ -37,22 +40,31 @@ function BottomNav({ newCount }) {
             to={tab.to}
             end={tab.end}
             className={({ isActive }) =>
-              `relative flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors ${
+              `relative flex-1 flex flex-col items-center justify-center gap-1 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}
+            {({ isActive }) => (
+              <>
+                <div className="relative">
+                  {isActive && (
+                    <span className="absolute -inset-2 rounded-xl bg-accent/10" />
+                  )}
+                  <svg className="w-5 h-5 relative" 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 ${isActive ? "font-semibold" : ""}`}>
+                  {tab.label}
                 </span>
-              )}
-            </div>
-            <span className="text-[10px] font-medium leading-none">{tab.label}</span>
+              </>
+            )}
           </NavLink>
         ))}
       </div>
@@ -257,7 +269,7 @@ export default function Layout() {
       </header>
 
       {/* Page content */}
-      <main className="flex-1 max-w-screen-xl mx-auto w-full px-4 py-6 pb-24 sm:pb-6">
+      <main className="flex-1 max-w-screen-xl mx-auto w-full px-4 py-6 pb-28 sm:pb-6" style={{ paddingBottom: "calc(7rem + env(safe-area-inset-bottom, 0px))" }}>
         <Outlet />
       </main>
 
diff --git a/frontend/src/components/VideoCard.jsx b/frontend/src/components/VideoCard.jsx
index 097b510..f03e8b5 100644
--- a/frontend/src/components/VideoCard.jsx
+++ b/frontend/src/components/VideoCard.jsx
@@ -306,6 +306,9 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
   }
 
   // ── Grid variant ─────────────────────────────────────────────────────────
+  const avatarUrl = channelMeta?.thumbnail_url ?? null;
+  const avatarLetter = video.channel_name?.[0]?.toUpperCase() ?? "?";
+
   return (
     <div
       onClick={() => navigate(`/watch/${video.youtube_video_id}`)}
@@ -324,16 +327,26 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
         className="aspect-video"
       />
 
-      <div className="flex flex-col gap-2 p-3 flex-1">
-        {/* Title */}
-        <p className="font-medium text-[13px] leading-snug text-zinc-50 line-clamp-2">
-          {video.title}
-        </p>
+      <div className="flex gap-2.5 p-3 flex-1">
+        {/* Channel avatar */}
+        <div className="shrink-0 mt-0.5" onClick={(e) => { e.stopPropagation(); navigate(`/channels/${video.channel_id}`); }}>
+          {avatarUrl ? (
+            <img src={avatarUrl} alt="" className="w-8 h-8 rounded-full object-cover hover:ring-2 hover:ring-accent/50 transition-all" />
+          ) : (
+            <div className="w-8 h-8 rounded-full bg-zinc-700 flex items-center justify-center text-xs font-bold text-zinc-400 hover:ring-2 hover:ring-accent/50 transition-all">
+              {avatarLetter}
+            </div>
+          )}
+        </div>
 
-        {/* Channel + date */}
-        <div className="flex items-center justify-between gap-2">
-          <span className="text-[11px] text-zinc-500 truncate">{video.channel_name}</span>
-          <div className="flex items-center gap-1.5 shrink-0">
+        {/* Text + actions */}
+        <div className="flex flex-col gap-1 min-w-0 flex-1">
+          <p className="font-medium text-[13px] leading-snug text-zinc-50 line-clamp-2">
+            {video.title}
+          </p>
+
+          <div className="flex items-center gap-1.5 flex-wrap">
+            <span className="text-[11px] text-zinc-500 truncate">{video.channel_name}</span>
             {channelNote && (
               <span title={channelNote} className="text-zinc-700 hover:text-zinc-400 transition-colors cursor-default">
                 <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 24 24">
@@ -344,20 +357,19 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
             {isDormant && !calmMode && (
               <span title="No uploads in 6+ months" className="text-[9px] text-zinc-700 tracking-widest">zzz</span>
             )}
-            {date && <span className="text-[11px] text-zinc-700">{date}</span>}
+            {video.is_recommended && !calmMode && (
+              <span className="text-[10px] font-semibold tracking-wide text-indigo-400 bg-indigo-950/60 px-1.5 py-0.5 rounded-full">
+                Discover
+              </span>
+            )}
           </div>
-        </div>
 
-        {/* Badges */}
-        {(video.is_recommended && !calmMode) && (
-          <span className="self-start text-[10px] font-semibold tracking-wide text-indigo-400 bg-indigo-950/60 px-1.5 py-0.5 rounded-full">
-            Discover
-          </span>
-        )}
+          {date && <span className="text-[11px] text-zinc-600">{date}</span>}
 
-        {/* Actions — fade in on hover */}
-        <div className="mt-auto pt-1.5 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150 border-t border-zinc-800/80">
-          {actions}
+          {/* Actions — fade in on hover */}
+          <div className="mt-auto pt-1.5 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150">
+            {actions}
+          </div>
         </div>
       </div>
     </div>