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

frontend/src/components/EpisodeCard.tsx

@@ -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>

frontend/src/components/EpisodeDetails.tsx

@@ -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>
+    </>
+  );
+}

frontend/src/components/Navigation.tsx

@@ -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>
           );
         })}