From 00df4a39ffb1d7fb28aa510edd5dae8ddb3b6789 Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Fri, 17 Apr 2026 21:36:55 +0200
Subject: [PATCH] style: uniform grids, profile border, remove NOUVEAU badge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Toutes les pages utilisent grid-cols-1 sm:2 lg:3 xl:4 gap-8
- Cadre gradient visible en permanence sur l'avatar profil
- Suppression du badge NOUVEAU sur les épisodes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/EpisodeCard.tsx | 6 ------
 frontend/src/components/Header.tsx      | 2 +-
 frontend/src/pages/AddPodcast.tsx       | 6 +++---
 frontend/src/pages/Library.tsx          | 2 +-
 frontend/src/pages/Trending.tsx         | 2 +-
 5 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/EpisodeCard.tsx b/frontend/src/components/EpisodeCard.tsx
index 516881e..67d7bce 100644
--- a/frontend/src/components/EpisodeCard.tsx
+++ b/frontend/src/components/EpisodeCard.tsx
@@ -69,12 +69,6 @@ export default function EpisodeCard({ episode, onPlay, onDetails }: EpisodeCardP
               LU
             </div>
           )}
-          {isNew && (
-            <div className="px-2.5 py-1 rounded-lg bg-[var(--accent-gold)]/90 backdrop-blur-md border border-white/20 text-[9px] font-black text-white uppercase tracking-widest flex items-center gap-1 shadow-lg animate-pulse">
-              <Sparkles className="w-3 h-3" />
-              NOUVEAU
-            </div>
-          )}
         </div>
 
         {/* Hover Play Button Overlay */}
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index ebf7d79..5997c64 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -43,7 +43,7 @@ export default function Header({ title, subtitle, user, onLogout }: HeaderProps)
                   <span className="text-[10px] font-medium text-[var(--text-secondary)] uppercase tracking-widest">Premium Member</span>
                </div>
                <div className="relative group/profile">
-                  <div className="w-12 h-12 rounded-2xl p-[1px] bg-gradient-to-tr from-[var(--accent-primary)]/50 to-[var(--accent-secondary)]/50 group-hover/profile:from-[var(--accent-primary)] group-hover/profile:to-[var(--accent-secondary)] transition-all">
+                  <div className="w-12 h-12 rounded-2xl p-[1px] bg-gradient-to-tr from-[var(--accent-primary)] to-[var(--accent-secondary)] transition-all">
                     <div className="w-full h-full rounded-2xl bg-[var(--bg-primary)] flex items-center justify-center overflow-hidden">
                       {user.avatar ? (
                         <img src={user.avatar} alt={user.username} className="w-full h-full object-cover" />
diff --git a/frontend/src/pages/AddPodcast.tsx b/frontend/src/pages/AddPodcast.tsx
index 7c9d766..087fbb4 100644
--- a/frontend/src/pages/AddPodcast.tsx
+++ b/frontend/src/pages/AddPodcast.tsx
@@ -231,11 +231,11 @@ export default function AddPodcast() {
 
         {/* Dynamic Results Grid */}
         {(isSearching || isSearchingEpisodes || isTrendingLoading) ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
              {[1,2,3,4,5,6].map(i => <div key={i} className="premium-glass rounded-[var(--radius-card)] h-64 animate-pulse opacity-50" />)}
           </div>
         ) : searchType === 'podcasts' && (searchQuery.length > 0 ? searchResults?.podcasts : trendingResults?.podcasts) ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 pb-32">
             {(searchQuery.length > 0 ? searchResults?.podcasts : trendingResults?.podcasts).map((podcast: any) => (
               <div key={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-[var(--border-color)]">
                 <div className="relative aspect-[16/10] overflow-hidden">
@@ -267,7 +267,7 @@ export default function AddPodcast() {
             ))}
           </div>
         ) : searchType === 'episodes' && episodeResults?.episodes ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 pb-32">
             {episodeResults.episodes.map((episode) => (
               <EpisodeCard 
                 key={episode._id}
diff --git a/frontend/src/pages/Library.tsx b/frontend/src/pages/Library.tsx
index 693d2be..c974919 100644
--- a/frontend/src/pages/Library.tsx
+++ b/frontend/src/pages/Library.tsx
@@ -147,7 +147,7 @@ export default function Library() {
           </Link>
         </div>
       ) : (
-        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8 pb-10">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 pb-10">
           {podcasts.map((podcast) => (
             <div key={podcast._id} className="group premium-card premium-glass rounded-[var(--radius-card)] p-6 hover:bg-[var(--bg-secondary)] transition-all duration-500 flex flex-col h-full border-[var(--border-color)]">
               <div className="flex gap-6 mb-6">
diff --git a/frontend/src/pages/Trending.tsx b/frontend/src/pages/Trending.tsx
index 7db44a8..34cca85 100644
--- a/frontend/src/pages/Trending.tsx
+++ b/frontend/src/pages/Trending.tsx
@@ -199,7 +199,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-24 stagger-grid">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-24 stagger-grid">
               {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">