inputnoise/youclonedl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign video cards with channel avatar; fix mobile bottom nav

Browse Source 
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>
This commit is contained in:
Mattias Tall
2026-05-26 12:01:43 +02:00
parent c7ec8c21f2
commit 1df396590f
2 changed files with 57 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/Layout.jsx
View File

@@ -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,13 +40,18 @@ 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"
}`
}
>
{({ isActive }) => (
<>
<div className="relative">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{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 && (
@@ -52,7 +60,11 @@ function BottomNav({ newCount }) {
</span>
)}
</div>
<span className="text-[10px] font-medium leading-none">{tab.label}</span>
<span className={`text-[10px] font-medium leading-none ${isActive ? "font-semibold" : ""}`}>
{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>

38
frontend/src/components/VideoCard.jsx
View File

@@ -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 */}
<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>
{/* 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>
{/* Channel + date */}
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-1.5 flex-wrap">
<span className="text-[11px] text-zinc-500 truncate">{video.channel_name}</span>
<div className="flex items-center gap-1.5 shrink-0">
{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,22 +357,21 @@ 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>}
</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">
{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>
{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">
<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>
);
}