From d8cb8305702c6290af2a4879b15a8bacf44ed6af Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Thu, 16 Apr 2026 16:04:39 +0200
Subject: [PATCH] feat: implement Library page with subscription management and
 synchronization features

---
 frontend/src/App.tsx                   |  2 +-
 frontend/src/components/Header.tsx     |  2 +-
 frontend/src/components/Navigation.tsx |  2 +-
 frontend/src/pages/Library.tsx         |  2 +-
 frontend/src/pages/Trending.tsx        | 44 ++++++++++++++------------
 5 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 12669b2..6dd3051 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -104,7 +104,7 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex min-h-screen">
       <Navigation />
-      <main className="flex-1 lg:ml-80 lg:mr-8 pb-40 pt-8 px-4 lg:px-0">
+      <main className="flex-1 min-w-0 w-full lg:ml-80 lg:mr-8 pb-40 pt-8 px-4 sm:px-6 lg:px-0 overflow-x-hidden">
         <div className="reveal">
           {children}
         </div>
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 9020c34..ebf7d79 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -20,7 +20,7 @@ export default function Header({ title, subtitle, user, onLogout }: HeaderProps)
           <div className="inline-block px-3 py-1 rounded-full bg-[var(--accent-glow)] border border-[var(--border-color)] text-[10px] font-bold text-[var(--accent-primary)] uppercase tracking-widest mb-3">
              {subtitle || "Exploration Audio"}
           </div>
-          <h1 className="text-4xl lg:text-5xl font-display font-extrabold tracking-tight text-balance leading-tight">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-display font-extrabold tracking-tight text-balance leading-tight">
             {title}
           </h1>
         </div>
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
index dd125a7..053c3de 100644
--- a/frontend/src/components/Navigation.tsx
+++ b/frontend/src/components/Navigation.tsx
@@ -60,7 +60,7 @@ export default function Navigation() {
       </nav>
 
       {/* Mobile Bottom Nav */}
-      <nav className="fixed bottom-6 left-6 right-6 h-20 premium-glass lg:hidden z-50 flex items-center justify-around px-4 rounded-[var(--radius-card)] shadow-2xl border border-[var(--border-color)]">
+      <nav className="fixed bottom-6 left-4 right-4 sm:left-6 sm:right-6 lg:hidden z-50 h-20 premium-glass flex items-center justify-around px-2 sm:px-4 rounded-[var(--radius-card)] shadow-2xl border border-[var(--border-color)] max-w-lg mx-auto">
         {navItems.map((item) => {
           const MobileIcon = item.icon;
           const active = isActive(item.path);
diff --git a/frontend/src/pages/Library.tsx b/frontend/src/pages/Library.tsx
index 3e24c86..c789fc4 100644
--- a/frontend/src/pages/Library.tsx
+++ b/frontend/src/pages/Library.tsx
@@ -110,7 +110,7 @@ export default function Library() {
       />
 
       {/* Stats */}
-      <div className="grid grid-cols-2 gap-4 mb-10">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10">
         <div className="premium-card premium-glass p-5 rounded-[var(--radius-card)] flex items-center gap-4">
           <div className="w-10 h-10 rounded-xl bg-[var(--accent-glow)] flex items-center justify-center text-[var(--accent-primary)] shrink-0">
             <BookOpen className="w-5 h-5" />
diff --git a/frontend/src/pages/Trending.tsx b/frontend/src/pages/Trending.tsx
index 174259e..43ffba9 100644
--- a/frontend/src/pages/Trending.tsx
+++ b/frontend/src/pages/Trending.tsx
@@ -155,30 +155,34 @@ export default function Trending() {
       <main className="">
         <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-xl bg-accent-rose/10 flex items-center justify-center text-accent-rose">
-              <Flame className="w-6 h-6 animate-pulse" />
+            <div className="w-8 h-8 md:w-10 md:h-10 rounded-xl bg-accent-rose/10 flex items-center justify-center text-accent-rose shrink-0">
+              <Flame className="w-5 h-5 md:w-6 md:h-6 animate-pulse" />
             </div>
-            <div>
-               <h2 className="text-2xl font-display font-black">Top Podcasts</h2>
-               <p className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest">Mis à jour en temps réel</p>
+            <div className="min-w-0">
+               <h2 className="text-xl md:text-2xl font-display font-black truncate">Top Podcasts</h2>
+               <p className="text-[9px] md:text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest">Mis à jour en temps réel</p>
             </div>
           </div>
 
           {/* Genre Pills */}
-          <div className="flex items-center gap-2 overflow-x-auto pb-2 -mx-4 px-4 sm:mx-0 sm:px-0 no-scrollbar">
-             {GENRES.map(genre => (
-               <button
-                 key={genre.id}
-                 onClick={() => setSelectedGenre(genre.id)}
-                 className={`px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest whitespace-nowrap transition-all border ${
-                   selectedGenre === genre.id 
-                    ? 'bg-[var(--accent-primary)] text-white border-[var(--accent-primary)] shadow-glow-indigo' 
-                    : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] border-[var(--border-color)] hover:border-[var(--accent-primary)]'
-                 }`}
-               >
-                 {genre.label}
-               </button>
-             ))}
+          <div className="w-full min-w-0 overflow-hidden">
+            <div className="flex items-center gap-2 overflow-x-auto pb-4 no-scrollbar -mx-4 px-4 sm:mx-0 sm:px-0 scroll-smooth">
+               <div className="flex items-center gap-2 flex-nowrap">
+                 {GENRES.map(genre => (
+                   <button
+                     key={genre.id}
+                     onClick={() => setSelectedGenre(genre.id)}
+                     className={`px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest whitespace-nowrap transition-all border ${
+                       selectedGenre === genre.id 
+                        ? 'bg-[var(--accent-primary)] text-white border-[var(--accent-primary)] shadow-glow-indigo' 
+                        : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] border-[var(--border-color)] hover:border-[var(--accent-primary)]'
+                     }`}
+                   >
+                     {genre.label}
+                   </button>
+                 ))}
+               </div>
+            </div>
           </div>
         </div>
 
@@ -189,7 +193,7 @@ export default function Trending() {
           </div>
         ) : podcasts.length > 0 ? (
           <>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-16">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-24">
               {podcasts.map((podcast, index) => (
                 <div key={`${skip}-${podcast.id}`} className="group premium-card premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500 border border-[var(--border-color)]">
                   <div className="relative aspect-square overflow-hidden bg-black/5">