feat: implement podcastIndexService using iTunes API for search and trending podcasts

2026-10-11 17:26:20 +02:00 · 2026-04-16 15:03:10 +02:00
1 parent a993e2d658
commit e01b661aa2
@@ -59,14 +59,18 @@ export const podcastIndexService = {
    query: string,
    limit: number = 20,
  ): Promise<SearchResult[]> => {
+    const term = query.trim();
+    if (!term) return [];
+
    const response = await axios.get<ItunesSearchResponse>(
      'https://itunes.apple.com/search',
      {
        params: {
-          term: query,
+          term,
          media: 'podcast',
          entity: 'podcast',
-          limit: Math.min(limit, 50),
+          country: 'FR', // Prioritize French store
+          limit: Math.max(limit, 50), // Get more results to find the best match
        },
        timeout: 10000,
      }
@@ -1,12 +1,14 @@
+import React from 'react';
 import { Episode } from '../services/episodeService';
-import { Play, Clock, Calendar } from 'lucide-react';
+import { Play, Calendar } from 'lucide-react';

 interface EpisodeCardProps {
  episode: Episode;
  onPlay: (episode: Episode) => void;
+  onDetails?: (episode: Episode) => void;
 }

-export default function EpisodeCard({ episode, onPlay }: EpisodeCardProps) {
+export default function EpisodeCard({ episode, onPlay, onDetails }: EpisodeCardProps) {
  const podcast = typeof episode.podcastId === 'object' ? episode.podcastId : null;
  const pubDate = new Date(episode.pubDate).toLocaleDateString('fr-FR', {
    month: 'short',
@@ -16,13 +18,25 @@ export default function EpisodeCard({ episode, onPlay }: EpisodeCardProps) {

  const durationMinutes = Math.floor(episode.duration / 60);

+  const handleDetailsClick = (e: React.MouseEvent) => {
+    if (onDetails) {
+      e.stopPropagation();
+      onDetails(episode);
+    }
+  };
+
+  const handlePlayClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onPlay(episode);
+  };
+
  return (
    <div 
-      className="group premium-glass rounded-[2rem] p-4 hover:bg-white/5 transition-all duration-500 border-white/5 hover:border-white/10 flex flex-col h-full cursor-pointer"
-      onClick={() => onPlay(episode)}
+      className="group premium-glass rounded-[2rem] p-4 hover:bg-[var(--bg-secondary)] transition-all duration-500 border border-[var(--border-color)] hover:border-[var(--accent-primary)]/30 flex flex-col h-full cursor-pointer relative"
+      onClick={handleDetailsClick}
    >
      {/* Visual Header */}
-      <div className="relative aspect-square rounded-2xl overflow-hidden mb-5 shadow-xl border border-white/5">
+      <div className="relative aspect-square rounded-2xl overflow-hidden mb-5 shadow-xl border border-[var(--border-color)]">
        {(episode.imageUrl || podcast?.imageUrl) ? (
          <img
            src={episode.imageUrl || podcast!.imageUrl}
@@ -30,12 +44,15 @@ export default function EpisodeCard({ episode, onPlay }: EpisodeCardProps) {
            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
          />
        ) : (
-          <div className="w-full h-full bg-gradient-to-br from-accent-indigo to-accent-rose flex items-center justify-center text-4xl">🎙️</div>
+          <div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-4xl">🎙️</div>
        )}
        
        {/* Hover Play Button Overlay */}
-        <div className="absolute inset-0 bg-obsidian/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
-          <div className="w-16 h-16 rounded-full bg-white text-obsidian flex items-center justify-center shadow-glow-indigo transform scale-90 group-hover:scale-100 transition-transform duration-500">
+        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
+          <div 
+            onClick={handlePlayClick}
+            className="w-16 h-16 rounded-full bg-white text-obsidian flex items-center justify-center shadow-glow-indigo transform scale-90 group-hover:scale-100 transition-transform duration-500 active:scale-95"
+          >
            <Play className="w-6 h-6 fill-current ml-1" />
          </div>
        </div>
@@ -49,17 +66,17 @@ export default function EpisodeCard({ episode, onPlay }: EpisodeCardProps) {
      {/* Content */}
      <div className="flex-1 flex flex-col">
        <div className="flex items-center gap-2 mb-2">
-           <span className="text-[9px] font-black text-accent-indigo uppercase tracking-[0.2em] truncate flex-1">
+           <span className="text-[9px] font-black text-[var(--accent-primary)] uppercase tracking-[0.2em] truncate flex-1">
             {podcast?.author || 'Artiste Premium'}
           </span>
        </div>
        
-        <h3 className="text-sm font-bold text-white line-clamp-2 mb-4 leading-relaxed group-hover:text-accent-indigo transition-colors flex-1">
+        <h3 className="text-sm font-bold line-clamp-2 mb-4 leading-relaxed group-hover:text-[var(--accent-primary)] transition-colors flex-1">
          {episode.title}
        </h3>

        {/* Footer Meta */}
-        <div className="flex items-center justify-between pt-4 border-t border-white/5 text-[10px] font-bold text-slate-500 uppercase tracking-widest">
+        <div className="flex items-center justify-between pt-4 border-t border-[var(--border-color)] text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest">
           <div className="flex items-center gap-1.5">
              <Calendar className="w-3.5 h-3.5" />
              <span>{pubDate}</span>
@@ -71,7 +88,7 @@ export default function EpisodeCard({ episode, onPlay }: EpisodeCardProps) {
      {episode.progress && !episode.progress.isCompleted && (
        <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/5 rounded-b-[2rem] overflow-hidden">
           <div 
-             className="h-full bg-accent-indigo shadow-glow-indigo transition-all duration-1000"
+             className="h-full bg-[var(--accent-primary)] shadow-glow-indigo transition-all duration-1000"
             style={{ width: `${Math.min(100, (episode.progress.position / episode.duration) * 100)}%` }}
           />
        </div>
@@ -0,0 +1,136 @@
+import React from 'react';
+import { X, Play, Clock, Calendar, BarChart2 } from 'lucide-react';
+import { Episode } from '../services/episodeService';
+
+interface EpisodeDetailsProps {
+  episode: Episode | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onPlay: (episode: Episode) => void;
+}
+
+export default function EpisodeDetails({ episode, isOpen, onClose, onPlay }: EpisodeDetailsProps) {
+  if (!episode) return null;
+
+  const podcast = typeof episode.podcastId === 'object' ? episode.podcastId : null;
+  const durationMinutes = Math.floor(episode.duration / 60);
+  const pubDate = new Date(episode.pubDate).toLocaleDateString('fr-FR', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  });
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div 
+        className={`fixed inset-0 bg-black/60 backdrop-blur-sm z-[110] transition-opacity duration-500 ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+        onClick={onClose}
+      />
+
+      {/* Slide-over Panel */}
+      <div className={`fixed top-0 right-0 bottom-0 w-full max-w-2xl bg-[var(--bg-primary)] z-[120] shadow-2xl transform transition-transform duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] overflow-y-auto ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
+        
+        {/* Header Image Area */}
+        <div className="relative h-80 w-full overflow-hidden">
+           {episode.imageUrl || podcast?.imageUrl ? (
+             <img 
+               src={episode.imageUrl || podcast?.imageUrl} 
+               alt={episode.title} 
+               className="w-full h-full object-cover"
+             />
+           ) : (
+             <div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)]" />
+           )}
+           <div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-primary)] via-[var(--bg-primary)]/40 to-transparent" />
+           
+           <button 
+             onClick={onClose}
+             className="absolute top-6 right-6 p-3 rounded-2xl bg-black/40 text-white backdrop-blur-md border border-white/10 hover:bg-black/60 transition-all"
+           >
+             <X className="w-6 h-6" />
+           </button>
+
+           <div className="absolute bottom-8 left-8 right-8">
+              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--accent-primary)]/20 border border-[var(--accent-primary)]/30 text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-widest mb-4">
+                 Episode Détails
+              </span>
+              <h2 className="text-3xl lg:text-4xl font-display font-black leading-tight">{episode.title}</h2>
+           </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-8 lg:p-12">
+           {/* Meta Info */}
+           <div className="flex flex-wrap gap-8 mb-10 pb-8 border-b border-[var(--border-color)]">
+              <div className="flex items-center gap-3">
+                 <div className="w-10 h-10 rounded-xl bg-[var(--bg-secondary)] flex items-center justify-center text-[var(--text-secondary)]">
+                    <Clock className="w-5 h-5" />
+                 </div>
+                 <div>
+                    <p className="text-[10px] font-black text-[var(--text-secondary)] uppercase tracking-widest">Durée</p>
+                    <p className="font-bold">{durationMinutes} minutes</p>
+                 </div>
+              </div>
+              <div className="flex items-center gap-3">
+                 <div className="w-10 h-10 rounded-xl bg-[var(--bg-secondary)] flex items-center justify-center text-[var(--text-secondary)]">
+                    <Calendar className="w-5 h-5" />
+                 </div>
+                 <div>
+                    <p className="text-[10px] font-black text-[var(--text-secondary)] uppercase tracking-widest">Publié le</p>
+                    <p className="font-bold">{pubDate}</p>
+                 </div>
+              </div>
+              {episode.progress && (
+                 <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-xl bg-[var(--bg-secondary)] flex items-center justify-center text-[var(--accent-primary)]">
+                       <BarChart2 className="w-5 h-5" />
+                    </div>
+                    <div>
+                       <p className="text-[10px] font-black text-[var(--text-secondary)] uppercase tracking-widest">Progression</p>
+                       <p className="font-bold">{Math.floor((episode.progress.position / episode.duration) * 100)}% écouté</p>
+                    </div>
+                 </div>
+              )}
+           </div>
+
+           {/* Action Bar */}
+           <div className="mb-12">
+              <button 
+                onClick={() => { onPlay(episode); onClose(); }}
+                className="w-full py-5 rounded-3xl bg-[var(--accent-primary)] text-white font-black uppercase tracking-[0.2em] shadow-glow-indigo hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-4"
+              >
+                <Play className="w-6 h-6 fill-current" />
+                Lancer l'épisode
+              </button>
+           </div>
+
+           {/* Description */}
+           <div className="space-y-6">
+              <h3 className="text-xl font-display font-black">À propos de cet épisode</h3>
+              <div 
+                className="prose prose-invert max-w-none text-[var(--text-secondary)] leading-relaxed text-lg"
+                dangerouslySetInnerHTML={{ __html: episode.description }}
+              />
+           </div>
+
+           {/* Podcast Info */}
+           {podcast && (
+              <div className="mt-16 p-8 rounded-[2rem] bg-[var(--bg-secondary)] border border-[var(--border-color)] group hover:border-[var(--accent-primary)] transition-all">
+                 <div className="flex items-center gap-6">
+                    <div className="w-20 h-20 rounded-2xl overflow-hidden shadow-xl border border-[var(--border-color)]">
+                       <img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover" />
+                    </div>
+                    <div className="flex-1">
+                       <p className="text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-widest mb-1">Disponible sur le podcast</p>
+                       <h4 className="text-xl font-bold mb-1">{podcast.title}</h4>
+                       <p className="text-sm text-[var(--text-secondary)] font-bold uppercase tracking-widest">{podcast.author}</p>
+                    </div>
+                 </div>
+              </div>
+           )}
+        </div>
+      </div>
+    </>
+  );
+}
@@ -1,5 +1,5 @@
 import { Link, useLocation } from 'react-router-dom';
-import { Home, Flame, PlusCircle, BookOpen, Library } from 'lucide-react';
+import { Home, Flame, PlusCircle, Library } from 'lucide-react';

 export default function Navigation() {
  const location = useLocation();
@@ -7,24 +7,24 @@ export default function Navigation() {
  const isActive = (path: string) => location.pathname === path;

  const navItems = [
-    { path: '/dashboard', label: 'Tableau de bord', icon: Home, color: 'text-accent-indigo' },
-    { path: '/trending', label: 'Tendances', icon: Flame, color: 'text-accent-rose' },
-    { path: '/library', label: 'Bibliothèque', icon: Library, color: 'text-accent-cyan' },
-    { path: '/add', label: 'Ajouter', icon: PlusCircle, color: 'text-accent-violet' },
+    { path: '/dashboard', label: 'Dashboard', icon: Home },
+    { path: '/trending', label: 'Trending', icon: Flame },
+    { path: '/library', label: 'Library', icon: Library },
+    { path: '/add', label: 'Add Podcast', icon: PlusCircle },
  ];

  return (
    <>
      {/* Desktop Sidebar */}
-      <nav className="fixed left-6 top-6 bottom-6 w-72 h-auto premium-glass z-50 p-6 hidden lg:flex flex-col gap-8 rounded-[2.5rem]">
+      <nav className="fixed left-6 top-6 bottom-6 w-72 h-auto premium-glass z-50 p-6 hidden lg:flex flex-col gap-8 rounded-[2.5rem] border border-[var(--border-color)]">
        {/* Logo */}
        <Link to="/" className="flex items-center gap-4 group">
-          <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-accent-indigo to-accent-rose flex items-center justify-center text-2xl shadow-glow-indigo transition-transform group-hover:scale-110">
+          <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-2xl shadow-glow-indigo transition-transform group-hover:scale-110">
            🎙️
          </div>
          <div className="flex flex-col">
-            <span className="text-xl font-display font-extrabold text-white tracking-tight">PODCASTIC</span>
-            <span className="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em]">Premium Audio</span>
+            <span className="text-xl font-display font-extrabold tracking-tight">PODCASTIC</span>
+            <span className="text-[10px] text-[var(--text-secondary)] font-bold uppercase tracking-[0.2em]">Premium Audio</span>
          </div>
        </Link>

@@ -39,28 +39,28 @@ export default function Navigation() {
                to={item.path}
                className={`group relative flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-300 ${
                  active
-                    ? 'bg-white/10 text-white shadow-lg shadow-black/20'
-                    : 'text-slate-400 hover:text-white hover:bg-white/5'
+                    ? 'bg-[var(--accent-primary)]/10 text-[var(--accent-primary)] shadow-sm'
+                    : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
                }`}
              >
                {active && (
-                  <div className="absolute left-0 w-1.5 h-6 rounded-full bg-accent-indigo shadow-[0_0_12px_rgba(99,102,241,0.8)]" />
+                  <div className="absolute left-0 w-1.5 h-6 rounded-full bg-[var(--accent-primary)] shadow-glow-indigo" />
                )}
-                <ActiveIcon className={`w-5 h-5 transition-transform group-hover:scale-110 ${active ? 'text-accent-indigo' : ''}`} />
-                <span className="text-sm font-semibold tracking-wide">{item.label}</span>
+                <ActiveIcon className={`w-5 h-5 transition-transform group-hover:scale-110 ${active ? 'text-[var(--accent-primary)]' : ''}`} />
+                <span className="text-sm font-bold tracking-wide">{item.label}</span>
              </Link>
            );
          })}
        </div>

        {/* Footer */}
-        <div className="mt-auto pt-6 border-t border-white/5">
-          <p className="px-2 text-[10px] text-slate-700 font-bold uppercase tracking-widest">Podcastic © 2026</p>
+        <div className="mt-auto pt-6 border-t border-[var(--border-color)]">
+          <p className="px-2 text-[10px] text-[var(--text-secondary)] font-bold uppercase tracking-widest opacity-50">Podcastic Premium v1.0</p>
        </div>
      </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-[2rem] shadow-2xl">
+      <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-[2rem] shadow-2xl border border-[var(--border-color)]">
        {navItems.map((item) => {
          const MobileIcon = item.icon;
          const active = isActive(item.path);
@@ -69,11 +69,11 @@ export default function Navigation() {
              key={item.path}
              to={item.path}
              className={`flex flex-col items-center gap-1.5 transition-all duration-300 ${
-                active ? 'scale-110 text-accent-indigo' : 'text-slate-500'
+                active ? 'scale-110 text-[var(--accent-primary)]' : 'text-[var(--text-secondary)]'
              }`}
            >
              <MobileIcon className="w-6 h-6" />
-              {active && <div className="w-1 h-1 rounded-full bg-accent-indigo shadow-[0_0_8px_rgba(99,102,241,1)]" />}
+              {active && <div className="w-1 h-1 rounded-full bg-[var(--accent-primary)] shadow-glow-indigo" />}
            </Link>
          );
        })}
@@ -5,6 +5,7 @@ import { podcastService } from '../services/podcastService';
 import { episodeService, Episode } from '../services/episodeService';
 import Header from '../components/Header';
 import EpisodeCard from '../components/EpisodeCard';
+import EpisodeDetails from '../components/EpisodeDetails';
 import AudioPlayer from '../components/AudioPlayer';
 import { Search, Plus, Loader, Rss, Check, Globe, Sparkles, PlusCircle, LayoutGrid, ListMusic } from 'lucide-react';
 import { authService } from '../services/authService';
@@ -21,6 +22,8 @@ export default function AddPodcast() {
  const [rssError, setRssError] = useState<string | null>(null);
  const [rssSuccess, setRssSuccess] = useState<string | null>(null);
  const [selectedEpisode, setSelectedEpisode] = useState<Episode | null>(null);
+  const [detailsEpisode, setDetailsEpisode] = useState<Episode | null>(null);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
  
  // Modal state
  const [showSuccessModal, setShowSuccessModal] = useState(false);
@@ -38,6 +41,11 @@ export default function AddPodcast() {
    loadUser();
  }, []);

+  const handleOpenDetails = (episode: Episode) => {
+    setDetailsEpisode(episode);
+    setIsDetailsOpen(true);
+  };
+
  // Podcast Discovery Query
  const { data: searchResults, isLoading: isSearching } = useQuery({
    queryKey: ['discover', 'search', searchQuery],
@@ -119,13 +127,13 @@ export default function AddPodcast() {
      <main className="max-w-5xl mx-auto">
        {/* RSS Input Area */}
        <div className="premium-glass p-8 rounded-[3rem] mb-12 relative overflow-hidden">
-           <div className="absolute top-0 right-0 w-32 h-32 bg-accent-indigo/5 blur-[50px]" />
+           <div className="absolute top-0 right-0 w-32 h-32 bg-[var(--accent-primary)]/5 blur-[50px]" />
           <div className="relative z-10">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-10 rounded-xl bg-accent-rose/10 flex items-center justify-center text-accent-rose shadow-glow-indigo">
                   <Rss className="w-5 h-5" />
                </div>
-                <h3 className="text-xl font-display font-black text-white">Flux RSS Direct</h3>
+                <h3 className="text-xl font-display font-black">Flux RSS Direct</h3>
              </div>
              
              <form onSubmit={handleRssSubscribe} className="flex flex-col sm:flex-row gap-4">
@@ -158,21 +166,21 @@ export default function AddPodcast() {
                 <div className="w-10 h-10 rounded-xl bg-accent-indigo/10 flex items-center justify-center text-accent-indigo shadow-glow-indigo">
                    <Search className="w-5 h-5" />
                 </div>
-                 <h3 className="text-xl font-display font-black text-white">Recherche Intelligente</h3>
+                 <h3 className="text-xl font-display font-black">Recherche Intelligente</h3>
              </div>

              {/* Tabs */}
-              <div className="flex p-1 rounded-2xl bg-white/[0.03] border border-white/5">
+              <div className="flex p-1 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)]">
                 <button 
                  onClick={() => setSearchType('podcasts')}
-                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'podcasts' ? 'bg-white text-obsidian shadow-lg' : 'text-slate-500 hover:text-white'}`}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'podcasts' ? 'bg-[var(--accent-primary)] text-white shadow-lg' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
                 >
                    <LayoutGrid className="w-3 h-3" />
                    Podcasts
                 </button>
                 <button 
                  onClick={() => setSearchType('episodes')}
-                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'episodes' ? 'bg-white text-obsidian shadow-lg' : 'text-slate-500 hover:text-white'}`}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'episodes' ? 'bg-[var(--accent-primary)] text-white shadow-lg' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
                 >
                    <ListMusic className="w-3 h-3" />
                    Épisodes
@@ -183,44 +191,44 @@ export default function AddPodcast() {
           <div className="relative group">
              <input
                type="text"
-                placeholder={searchType === 'podcasts' ? "Trouvez un podcast par titre ou auteur..." : "Cherchez un sujet dans tous les épisodes..."}
+                placeholder={searchType === 'podcasts' ? "Trouvez un podcast (Base iTunes FR)..." : "Cherchez un sujet dans tous les épisodes..."}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
-                className="input-premium !py-6 !pl-16 text-xl shadow-2xl transition-all group-hover:bg-white/[0.05]"
+                className="input-premium !py-6 !pl-16 text-xl shadow-2xl transition-all group-hover:bg-[var(--bg-secondary)]"
              />
-              <Sparkles className="absolute left-6 top-1/2 -translate-y-1/2 w-6 h-6 text-slate-500 group-focus-within:text-accent-indigo transition-colors" />
+              <Sparkles className="absolute left-6 top-1/2 -translate-y-1/2 w-6 h-6 text-slate-500 group-focus-within:text-[var(--accent-primary)] transition-colors" />
           </div>
        </div>

        {/* Dynamic Results Grid */}
        {(isSearching || isSearchingEpisodes) ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-             {[1,2,3].map(i => <div key={i} className="premium-glass rounded-[2.5rem] h-64 animate-pulse bg-white/5" />)}
+             {[1,2,3].map(i => <div key={i} className="premium-glass rounded-[2.5rem] h-64 animate-pulse" />)}
          </div>
        ) : searchType === 'podcasts' && searchResults?.podcasts && searchResults.podcasts.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
            {searchResults.podcasts.map((podcast) => (
-              <div key={podcast.id} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-white/[0.05] transition-all duration-500">
+              <div key={podcast.id} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
                <div className="relative aspect-[16/10] overflow-hidden">
                   {podcast.imageUrl ? (
                     <img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                   ) : (
                     <div className="w-full h-full bg-gradient-to-br from-slate-800 to-obsidian flex items-center justify-center text-4xl">🎙️</div>
                   )}
-                   <div className="absolute inset-0 bg-gradient-to-t from-obsidian via-transparent to-transparent opacity-60" />
+                   <div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-primary)] via-transparent to-transparent opacity-60" />
                </div>

                <div className="p-6 flex flex-col flex-1">
-                  <h3 className="text-lg font-bold text-white mb-2 line-clamp-2 leading-tight group-hover:text-accent-indigo transition-colors">{podcast.title}</h3>
-                  <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-4 truncate">{podcast.author || 'Inconnu'}</p>
+                  <h3 className="text-lg font-bold mb-2 line-clamp-2 leading-tight group-hover:text-[var(--accent-primary)] transition-colors">{podcast.title}</h3>
+                  <p className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest mb-4 truncate">{podcast.author || 'Inconnu'}</p>
                  
                  <button
                    onClick={() => handleSubscribe(podcast)}
                    disabled={subscribingId === podcast.id || subscribeMutation.isPending || isSubscribed(podcast.rssUrl)}
                    className={`mt-auto w-full py-3.5 rounded-2xl font-bold uppercase tracking-widest text-[10px] transition-all duration-300 flex items-center justify-center gap-2 ${
                      isSubscribed(podcast.rssUrl)
-                        ? 'bg-accent-cyan/10 text-accent-cyan border border-accent-cyan/20'
-                        : 'bg-white text-obsidian hover:bg-accent-indigo hover:text-white'
+                        ? 'bg-[var(--accent-secondary)]/10 text-[var(--accent-secondary)] border border-[var(--accent-secondary)]/20'
+                        : 'bg-[var(--text-primary)] text-[var(--bg-primary)] hover:bg-[var(--accent-primary)] hover:text-white'
                    }`}
                  >
                    {subscribingId === podcast.id ? <Loader className="w-4 h-4 animate-spin" /> : isSubscribed(podcast.rssUrl) ? <><Check className="w-4 h-4" /> Membre</> : <><Plus className="w-4 h-4" /> S'abonner</>}
@@ -232,14 +240,19 @@ export default function AddPodcast() {
        ) : searchType === 'episodes' && episodeResults?.episodes && episodeResults.episodes.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
             {episodeResults.episodes.map((episode) => (
-                <EpisodeCard key={episode._id} episode={episode} onPlay={setSelectedEpisode} />
+                <EpisodeCard 
+                  key={episode._id} 
+                  episode={episode} 
+                  onPlay={setSelectedEpisode} 
+                  onDetails={handleOpenDetails}
+                />
             ))}
          </div>
        ) : searchQuery.length >= 2 ? (
          <div className="premium-glass p-20 rounded-[3rem] text-center max-w-lg mx-auto">
            <Globe className="w-12 h-12 text-slate-700 mx-auto mb-6" />
-            <p className="text-white font-bold uppercase tracking-widest text-sm mb-2">Aucun signal trouvé</p>
-            <p className="text-slate-500 text-xs">Vérifiez l'orthographe ou changez de type de recherche.</p>
+            <p className="font-bold uppercase tracking-widest text-sm mb-2">Aucun résultat sur iTunes FR</p>
+            <p className="text-[var(--text-secondary)] text-xs">Vérifiez l'orthographe ou essayez un nom d'auteur.</p>
          </div>
        ) : (
          <div className="text-center py-20 opacity-30">
@@ -250,11 +263,18 @@ export default function AddPodcast() {
        )}
      </main>

+      <EpisodeDetails 
+        episode={detailsEpisode}
+        isOpen={isDetailsOpen}
+        onClose={() => setIsDetailsOpen(false)}
+        onPlay={setSelectedEpisode}
+      />
+
      {selectedEpisode && (
        <AudioPlayer
          episode={selectedEpisode}
          onClose={() => setSelectedEpisode(null)}
-          userId={user?._id}
+          userId={user?.id}
        />
      )}

@@ -7,10 +7,24 @@ import EpisodeCard from '../components/EpisodeCard';
 import AudioPlayer from '../components/AudioPlayer';
 import { Sparkles, Play, Clock, TrendingUp } from 'lucide-react';

+import EpisodeCard from '../components/EpisodeCard';
+import EpisodeDetails from '../components/EpisodeDetails';
+
 export default function Dashboard() {
  const [user, setUser] = useState<any>(null);
  const [selectedEpisode, setSelectedEpisode] = useState<Episode | null>(null);
+  const [detailsEpisode, setDetailsEpisode] = useState<Episode | null>(null);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
  const [loading, setLoading] = useState(true);
+  const [episodes, setEpisodes] = useState<Episode[]>([]);
+  const [skip, setSkip] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const LIMIT = 32;
+
+  const handleOpenDetails = (episode: Episode) => {
+    setDetailsEpisode(episode);
+    setIsDetailsOpen(true);
+  };

  // Load user
  useEffect(() => {
@@ -28,14 +42,37 @@ export default function Dashboard() {
    loadUser();
  }, []);

-  // Fetch latest episodes
-  const { data: episodesData, isLoading: episodesLoading } = useQuery({
-    queryKey: ['episodes', 'latest'],
-    queryFn: () => episodeService.getLatestEpisodes(30),
+  // Fetch episodes with pagination
+  const { data: episodesData, isLoading: episodesLoading, isFetching: episodesFetching } = useQuery({
+    queryKey: ['episodes', 'latest', skip],
+    queryFn: () => episodeService.getLatestEpisodes(LIMIT, skip),
    enabled: !!user,
-    staleTime: 5 * 60 * 1000, // 5 minutes
+    staleTime: 5 * 60 * 1000,
  });

+  useEffect(() => {
+    if (episodesData?.episodes) {
+      if (skip === 0) {
+        setEpisodes(episodesData.episodes);
+      } else {
+        setEpisodes(prev => {
+          // Prevent duplicates
+          const newEpisodes = episodesData.episodes.filter(
+            (newEp: any) => !prev.some(oldEp => oldEp._id === newEp._id)
+          );
+          return [...prev, ...newEpisodes];
+        });
+      }
+      setHasMore(episodesData.episodes.length === LIMIT);
+    }
+  }, [episodesData, skip]);
+
+  const loadMore = () => {
+    if (hasMore && !episodesFetching) {
+      setSkip(prev => prev + LIMIT);
+    }
+  };
+
  const handleLogout = async () => {
    try {
      await authService.logout();
@@ -46,13 +83,13 @@ export default function Dashboard() {
    }
  };

-  // Extract episodes in progress
-  const episodesInProgress = episodesData?.episodes?.filter(e => e.progress && !e.progress.isCompleted) || [];
+  // Extract episodes in progress (using all loaded episodes)
+  const episodesInProgress = episodes?.filter(e => e.progress && !e.progress.isCompleted) || [];

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
-        <div className="w-12 h-12 rounded-full border-4 border-white/5 border-t-accent-indigo animate-spin" />
+        <div className="w-12 h-12 rounded-full border-4 border-[var(--border-color)] border-t-[var(--accent-primary)] animate-spin" />
      </div>
    );
  }
@@ -79,7 +116,7 @@ export default function Dashboard() {
                 Découvrez les nouveautés de votre univers audio.
              </h2>
              <p className="text-[var(--text-secondary)] text-lg mb-8 max-w-xl leading-relaxed">
-                 Vous avez {episodesData?.count || 0} nouveaux épisodes qui n'attendent que vous. Prêt pour une immersion ?
+                 Vous avez des nouveaux épisodes qui n'attendent que vous. Prêt pour une immersion ?
              </p>
              <div className="flex flex-wrap gap-4">
                 {episodesInProgress.length > 0 ? (
@@ -96,9 +133,9 @@ export default function Dashboard() {
                       Découvrir
                    </button>
                 )}
-                 <button className="px-6 py-3 rounded-2xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] font-bold text-sm hover:bg-[var(--accent-primary)]/10 transition-all border border-[var(--border-color)]">
+                 <Link to="/trending" className="px-6 py-3 rounded-2xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] font-bold text-sm hover:bg-[var(--accent-primary)]/10 transition-all border border-[var(--border-color)] flex items-center justify-center">
                    Parcourir les tendances
-                 </button>
+                 </Link>
              </div>
           </div>
        </div>
@@ -113,11 +150,12 @@ export default function Dashboard() {
                <h3 className="text-2xl font-display font-black">Continuer l'écoute</h3>
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-                {episodesInProgress.map((episode) => (
+                {episodesInProgress.slice(0, 4).map((episode) => (
                  <EpisodeCard
                    key={`progress-${episode._id}`}
                    episode={episode}
                    onPlay={setSelectedEpisode}
+                    onDetails={handleOpenDetails}
                  />
                ))}
             </div>
@@ -132,25 +170,41 @@ export default function Dashboard() {
              </div>
              <h3 className="text-2xl font-display font-black">Récemment Publiés</h3>
           </div>
-           <span className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest px-3 py-1 rounded-lg border border-[var(--border-color)]">{episodesData?.episodes?.length || 0} EPISODES</span>
+           <span className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest px-3 py-1 rounded-lg border border-[var(--border-color)]">{episodes.length} CHARGÉS</span>
        </div>

-        {episodesLoading ? (
+        {episodesLoading && skip === 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            {[1, 2, 3, 4].map(i => (
              <div key={i} className="premium-glass rounded-[2rem] h-80 animate-pulse bg-white/[0.02]" />
            ))}
          </div>
-        ) : episodesData?.episodes && episodesData.episodes.length > 0 ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-            {episodesData.episodes.map((episode) => (
-              <EpisodeCard
-                key={episode._id}
-                episode={episode}
-                onPlay={setSelectedEpisode}
-              />
-            ))}
-          </div>
+        ) : episodes.length > 0 ? (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-16">
+              {episodes.map((episode) => (
+                <EpisodeCard
+                  key={`${skip}-${episode._id}`}
+                  episode={episode}
+                  onPlay={setSelectedEpisode}
+                  onDetails={handleOpenDetails}
+                />
+              ))}
+            </div>
+            
+            {hasMore && (
+              <div className="flex justify-center pb-20">
+                <button
+                  onClick={loadMore}
+                  disabled={episodesFetching}
+                  className="px-10 py-4 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[10px] font-black uppercase tracking-[0.2em] hover:bg-[var(--accent-primary)]/10 hover:border-[var(--accent-primary)] transition-all flex items-center gap-3"
+                >
+                  {episodesFetching ? <Loader className="w-4 h-4 animate-spin" /> : <RefreshCcw className="w-4 h-4" />}
+                  {episodesFetching ? 'Chargement...' : 'Charger la suite'}
+                </button>
+              </div>
+            )}
+          </>
        ) : (
          <div className="premium-glass p-16 rounded-[3rem] text-center max-w-2xl mx-auto border-dashed border-white/10">
            <div className="text-4xl mb-6 opacity-40">🧘</div>
@@ -158,11 +212,19 @@ export default function Dashboard() {
            <p className="text-slate-500 text-sm leading-relaxed mb-8">
              Vous n'avez pas encore d'épisodes ici. Abonnez-vous à vos podcasts favoris pour commencer votre collection.
            </p>
-            <button className="neon-button">Explorer les podcasts</button>
+            <Link to="/trending" className="neon-button">Explorer les podcasts</Link>
          </div>
        )}
      </main>

+      {/* Episode Slide-over Details */}
+      <EpisodeDetails 
+        episode={detailsEpisode}
+        isOpen={isDetailsOpen}
+        onClose={() => setIsDetailsOpen(false)}
+        onPlay={setSelectedEpisode}
+      />
+
      {/* Audio Player Management */}
      {selectedEpisode && (
        <AudioPlayer
@@ -42,17 +42,49 @@ export default function Trending() {
    loadUser();
  }, []);

-  const { data: trendingData, isLoading } = useQuery({
-    queryKey: ['discover', 'trending', selectedGenre],
-    queryFn: () => discoveryService.getTrendingPodcasts(30, selectedGenre),
-    staleTime: 30 * 60 * 1000,
-  });
-
  const { data: subsData } = useQuery({
    queryKey: ['podcasts', 'subscriptions'],
    queryFn: () => podcastService.getUserSubscriptions(),
  });

+  const [skip, setSkip] = useState(0);
+  const [podcasts, setPodcasts] = useState<any[]>([]);
+  const [hasMore, setHasMore] = useState(true);
+  const LIMIT = 30;
+
+  const { data: trendingData, isLoading, isFetching } = useQuery({
+    queryKey: ['discover', 'trending', selectedGenre, skip],
+    queryFn: () => discoveryService.getTrendingPodcasts(LIMIT, selectedGenre),
+    staleTime: 30 * 60 * 1000,
+  });
+
+  useEffect(() => {
+    if (trendingData?.podcasts) {
+      if (skip === 0) {
+        setPodcasts(trendingData.podcasts);
+      } else {
+        setPodcasts(prev => {
+          const newItems = trendingData.podcasts.filter(
+            (p: any) => !prev.some(old => old.id === p.id)
+          );
+          return [...prev, ...newItems];
+        });
+      }
+      setHasMore(trendingData.podcasts.length === LIMIT);
+    }
+  }, [trendingData, skip]);
+
+  // Reset skip when genre changes
+  useEffect(() => {
+    setSkip(0);
+  }, [selectedGenre]);
+
+  const loadMore = () => {
+    if (hasMore && !isFetching) {
+      setSkip(prev => prev + LIMIT);
+    }
+  };
+
  const isSubscribed = (rssUrl: string) => {
    return subsData?.podcasts.some(p => p.rssUrl === rssUrl);
  };
@@ -132,69 +164,84 @@ export default function Trending() {
          </div>
        </div>

-        {isLoading ? (
+        {isLoading && skip === 0 ? (
          <div className="flex flex-col items-center justify-center py-32">
             <div className="w-12 h-12 rounded-full border-4 border-[var(--border-color)] border-t-[var(--accent-primary)] animate-spin mb-4" />
             <p className="text-[var(--text-secondary)] font-bold uppercase tracking-widest text-[10px]">Analyse des tendances...</p>
          </div>
-        ) : trendingData?.podcasts && trendingData.podcasts.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {trendingData.podcasts.map((podcast, index) => (
-              <div key={podcast.id} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
-                <div className="relative aspect-[16/10] overflow-hidden">
-                   {podcast.imageUrl ? (
-                     <img
-                       src={podcast.imageUrl}
-                       alt={podcast.title}
-                       className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
-                     />
-                   ) : (
-                     <div className="w-full h-full bg-gradient-to-br from-slate-200 to-slate-400 dark:from-slate-800 dark:to-obsididan flex items-center justify-center text-4xl">🎙️</div>
-                   )}
-                   <div className="absolute top-4 left-4 px-3 py-1 rounded-full bg-black/40 backdrop-blur-md border border-white/10 text-[10px] font-black text-white uppercase tracking-widest">
-                      Rank #{index + 1}
-                   </div>
-                   <div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-primary)] via-transparent to-transparent opacity-60" />
-                </div>
+        ) : podcasts.length > 0 ? (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+              {podcasts.map((podcast, index) => (
+                <div key={`${skip}-${podcast.id}`} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
+                  <div className="relative aspect-[16/10] overflow-hidden">
+                     {podcast.imageUrl ? (
+                       <img
+                         src={podcast.imageUrl}
+                         alt={podcast.title}
+                         className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                       />
+                     ) : (
+                       <div className="w-full h-full bg-gradient-to-br from-slate-200 to-slate-400 dark:from-slate-800 dark:to-obsididan flex items-center justify-center text-4xl">🎙️</div>
+                     )}
+                     <div className="absolute top-4 left-4 px-3 py-1 rounded-full bg-black/40 backdrop-blur-md border border-white/10 text-[10px] font-black text-white uppercase tracking-widest">
+                        Rank #{index + 1}
+                     </div>
+                     <div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-primary)] via-transparent to-transparent opacity-60" />
+                  </div>

-                <div className="p-6 flex-1 flex flex-col">
-                  <h3 className="text-lg font-bold mb-2 line-clamp-2 leading-tight group-hover:text-[var(--accent-primary)] transition-colors">
-                    {podcast.title}
-                  </h3>
-                  {podcast.author && (
-                    <p className="text-xs font-bold text-[var(--text-secondary)] uppercase tracking-widest mb-4 truncate">{podcast.author}</p>
-                  )}
-                  <p className="text-xs text-[var(--text-secondary)] line-clamp-3 mb-6 leading-relaxed flex-1 opacity-80">
-                    {podcast.description}
-                  </p>
-                  
-                  <button
-                    onClick={() => handleSubscribe(podcast)}
-                    disabled={subscribingId === podcast.id || subscribeMutation.isPending || isSubscribed(podcast.rssUrl)}
-                    className={`w-full py-3.5 rounded-2xl font-bold uppercase tracking-widest text-[10px] transition-all duration-300 flex items-center justify-center gap-2 ${
-                      isSubscribed(podcast.rssUrl)
-                        ? 'bg-[var(--accent-secondary)]/10 text-[var(--accent-secondary)] border border-[var(--accent-secondary)]/20 cursor-default'
-                        : 'bg-[var(--text-primary)] text-[var(--bg-primary)] hover:bg-[var(--accent-primary)] hover:text-white shadow-lg active:scale-95'
-                    }`}
-                  >
-                    {subscribingId === podcast.id ? (
-                      <Loader className="w-4 h-4 animate-spin" />
-                    ) : isSubscribed(podcast.rssUrl) ? (
-                      <>
-                        <Check className="w-4 h-4" />
-                        À l'écoute
-                      </>
-                    ) : (
-                      <>
-                        <Plus className="w-4 h-4" />
-                        S'abonner
-                      </>
+                  <div className="p-6 flex-1 flex flex-col">
+                    <h3 className="text-lg font-bold mb-2 line-clamp-2 leading-tight group-hover:text-[var(--accent-primary)] transition-colors">
+                      {podcast.title}
+                    </h3>
+                    {podcast.author && (
+                      <p className="text-xs font-bold text-[var(--text-secondary)] uppercase tracking-widest mb-4 truncate">{podcast.author}</p>
                    )}
-                  </button>
+                    <p className="text-xs text-[var(--text-secondary)] line-clamp-3 mb-6 leading-relaxed flex-1 opacity-80">
+                      {podcast.description}
+                    </p>
+                    
+                    <button
+                      onClick={() => handleSubscribe(podcast)}
+                      disabled={subscribingId === podcast.id || subscribeMutation.isPending || isSubscribed(podcast.rssUrl)}
+                      className={`w-full py-3.5 rounded-2xl font-bold uppercase tracking-widest text-[10px] transition-all duration-300 flex items-center justify-center gap-2 ${
+                        isSubscribed(podcast.rssUrl)
+                          ? 'bg-[var(--accent-secondary)]/10 text-[var(--accent-secondary)] border border-[var(--accent-secondary)]/20 cursor-default'
+                          : 'bg-[var(--text-primary)] text-[var(--bg-primary)] hover:bg-[var(--accent-primary)] hover:text-white shadow-lg active:scale-95'
+                      }`}
+                    >
+                      {subscribingId === podcast.id ? (
+                        <Loader className="w-4 h-4 animate-spin" />
+                      ) : isSubscribed(podcast.rssUrl) ? (
+                        <>
+                          <Check className="w-4 h-4" />
+                          À l'écoute
+                        </>
+                      ) : (
+                        <>
+                          <Plus className="w-4 h-4" />
+                          S'abonner
+                        </>
+                      )}
+                    </button>
+                  </div>
                </div>
+              ))}
+            </div>
+
+            {hasMore && (
+              <div className="flex justify-center pb-32">
+                 <button 
+                  onClick={loadMore}
+                  disabled={isFetching}
+                  className="px-10 py-4 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[10px] font-black uppercase tracking-[0.2em] hover:bg-[var(--accent-primary)]/10 hover:border-[var(--accent-primary)] transition-all flex items-center gap-3"
+                 >
+                    {isFetching ? <Loader className="w-4 h-4 animate-spin" /> : <TrendingUp className="w-4 h-4" />}
+                    {isFetching ? 'Chargement...' : 'Charger la suite'}
+                 </button>
              </div>
-            ))}
-          </div>
+            )}
+          </>
        ) : (
           <div className="premium-glass p-20 rounded-[3rem] text-center">
              <Sparkles className="w-12 h-12 text-slate-700 mx-auto mb-6" />