From 6786226a6cf75d2b9e2ca090bec11ad50c74e542 Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Fri, 17 Apr 2026 11:33:47 +0200
Subject: [PATCH] feat: hero player, LU/NOUVEAU badges, metadata resync, sticky
 mini-bar

- Refresh podcast title/author/imageUrl/description on RSS sync (fixes
  legacy 'Unknown Podcast' records)
- Always-visible Resync button on Library cards
- LU badge on completed episodes, NOUVEAU badge on <7-day-old episodes
- AudioPlayer gains mode='inline' that embeds in the Dashboard hero card
- Floating player suppressed on /dashboard to avoid dual audio
- Sticky mini-bar appears via IntersectionObserver when inline player
  scrolls out of view (shares the same <audio> element)
- Fix: 'Reprendre' button called undefined setSelectedEpisode; now calls
  playEpisode
- Add progress field to Episode TS interface

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 backend/src/services/rssParserService.ts |  19 +-
 frontend/src/App.tsx                     |   6 +-
 frontend/src/components/AudioPlayer.tsx  | 213 ++++++++++++++++++++++-
 frontend/src/components/EpisodeCard.tsx  |  24 ++-
 frontend/src/pages/Dashboard.tsx         |  82 +++++----
 frontend/src/pages/Library.tsx           |  29 ++-
 frontend/src/services/episodeService.ts  |   4 +
 7 files changed, 330 insertions(+), 47 deletions(-)

diff --git a/backend/src/services/rssParserService.ts b/backend/src/services/rssParserService.ts
index facd589..3fb1460 100644
--- a/backend/src/services/rssParserService.ts
+++ b/backend/src/services/rssParserService.ts
@@ -241,7 +241,24 @@ export const rssParserService = {
       // Update podcast metadata
       podcast.lastFetched = new Date();
       podcast.episodeCount = await Episode.countDocuments({ podcastId });
-      
+
+      // Refresh podcast metadata from fresh RSS data (fixes "Unknown Podcast" legacy records)
+      if (feedData.title && feedData.title !== 'Unknown Podcast') {
+        podcast.title = feedData.title;
+      }
+      if (feedData.author && (!podcast.author || podcast.author.trim() === '' || force)) {
+        podcast.author = feedData.author;
+      }
+      if (feedData.imageUrl && (!podcast.imageUrl || force)) {
+        podcast.imageUrl = feedData.imageUrl;
+      }
+      if (feedData.description && (!podcast.description || force)) {
+        podcast.description = feedData.description;
+      }
+      if (feedData.language && (!podcast.language || force)) {
+        podcast.language = feedData.language;
+      }
+
       if (episodes.length > 0) {
         podcast.lastEpisodeTitle = episodes[0].title;
         podcast.lastEpisodeDate = episodes[0].pubDate;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6dd3051..5e069ba 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useState, useEffect } from 'react';
 import './styles/globals.css';
@@ -24,6 +24,8 @@ const queryClient = new QueryClient({
 // App Content Wrapper to access AudioContext
 function AppContent() {
   const { currentEpisode, closePlayer } = useAudio();
+  const location = useLocation();
+  const isDashboard = location.pathname === '/dashboard' || location.pathname === '/';
   const [user, setUser] = useState<any>(null);
 
   // Load user for the player
@@ -82,7 +84,7 @@ function AppContent() {
         <Route path="*" element={<Navigate to="/dashboard" replace />} />
       </Routes>
 
-      {currentEpisode && (
+      {currentEpisode && !isDashboard && (
         <AudioPlayer
           episode={currentEpisode}
           onClose={closePlayer}
diff --git a/frontend/src/components/AudioPlayer.tsx b/frontend/src/components/AudioPlayer.tsx
index dccc830..5356565 100644
--- a/frontend/src/components/AudioPlayer.tsx
+++ b/frontend/src/components/AudioPlayer.tsx
@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { Episode } from '../services/episodeService';
 import { episodeService } from '../services/episodeService';
 import { useAudio } from '../context/AudioContext';
@@ -21,9 +22,10 @@ interface AudioPlayerProps {
   episode: Episode | null;
   onClose: () => void;
   userId?: string;
+  mode?: 'floating' | 'inline';
 }
 
-export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerProps) {
+export default function AudioPlayer({ episode, onClose, userId, mode = 'floating' }: AudioPlayerProps) {
   const { isPlaying, setIsPlaying, togglePlay } = useAudio();
   const { theme } = useTheme();
   const audioRef = useRef<HTMLAudioElement>(null);
@@ -35,6 +37,8 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
   const [isExpanded, setIsExpanded] = useState(false);
   const [isResuming, setIsResuming] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showMiniBar, setShowMiniBar] = useState(false);
+  const inlineWrapperRef = useRef<HTMLDivElement>(null);
   
   // Refs for stable tracking without re-renders
   const currentTimeRef = useRef(0);
@@ -88,6 +92,19 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
     };
   }, [episode?._id, userId, isPlaying]); // Restart if episode or isPlaying changes to maintain correct interval behavior
 
+  // IntersectionObserver: show mini-bar when inline player scrolls out of view
+  useEffect(() => {
+    if (mode !== 'inline' || !inlineWrapperRef.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setShowMiniBar(!entry.isIntersecting);
+      },
+      { threshold: 0, rootMargin: '-40px 0px 0px 0px' }
+    );
+    observer.observe(inlineWrapperRef.current);
+    return () => observer.disconnect();
+  }, [mode, episode?._id]);
+
   // Load previous progress
   useEffect(() => {
     if (!episode || !userId) return;
@@ -154,6 +171,200 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
 
   const inverseTheme = theme === 'light' ? 'dark-theme' : 'light-theme';
 
+  // ── INLINE MODE (embedded in hero card) ──
+  if (mode === 'inline') {
+    return (
+      <>
+      <div ref={inlineWrapperRef} className="premium-glass rounded-[var(--radius-panel)] p-8 lg:p-10 relative overflow-hidden border border-[var(--border-color)]">
+        <audio
+          ref={audioRef}
+          src={episode.audioUrl}
+          onTimeUpdate={() => audioRef.current && setCurrentTime(audioRef.current.currentTime)}
+          onLoadedMetadata={() => audioRef.current && setDuration(audioRef.current.duration)}
+          onPlay={() => setIsPlaying(true)}
+          onPause={() => setIsPlaying(false)}
+          onEnded={() => setIsPlaying(false)}
+          onError={() => setError("Impossible de charger ce fichier audio. Le lien est peut-être expiré ou protégé.")}
+          autoPlay
+        />
+
+        <AlertModal
+          isOpen={!!error}
+          title="Erreur de lecture"
+          message={error || ""}
+          type="error"
+          onClose={() => {
+            setError(null);
+            onClose();
+          }}
+        />
+
+        {/* Glow backdrop */}
+        <div className="absolute top-0 right-0 w-64 h-64 bg-[var(--accent-glow)] blur-[80px] -mr-32 -mt-32 pointer-events-none" />
+
+        <div className="relative z-10 flex flex-col lg:flex-row gap-8 items-start lg:items-center">
+          {/* Artwork */}
+          <div className="relative shrink-0">
+            <div className="w-36 h-36 lg:w-44 lg:h-44 rounded-[var(--radius-card)] overflow-hidden shadow-2xl border border-[var(--border-color)]">
+              {(episode.imageUrl || podcast?.imageUrl)
+                ? <img src={episode.imageUrl || podcast!.imageUrl} alt="" 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)] flex items-center justify-center text-5xl">🎙️</div>
+              }
+            </div>
+            {isPlaying && (
+              <div className="absolute -bottom-2 -right-2 px-3 py-1 rounded-full bg-[var(--accent-primary)] text-white text-[9px] font-black uppercase tracking-widest shadow-glow-indigo animate-pulse">
+                En cours
+              </div>
+            )}
+          </div>
+
+          {/* Info + controls */}
+          <div className="flex-1 w-full min-w-0">
+            <div className="flex items-start justify-between gap-4 mb-4">
+              <div className="min-w-0">
+                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--accent-glow)] border border-[var(--border-color)] text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-widest mb-3">
+                  Lecture en cours
+                </div>
+                <p className="text-[10px] font-black text-[var(--text-secondary)] uppercase tracking-widest mb-1 truncate">
+                  {podcast?.title || ''}
+                </p>
+                <h2 className="text-2xl lg:text-3xl font-display font-black leading-tight mb-2 line-clamp-2">
+                  {episode.title}
+                </h2>
+                {isResuming && (
+                  <p className="text-[10px] text-[var(--accent-primary)] font-black uppercase animate-pulse">Reprise de lecture...</p>
+                )}
+              </div>
+              <button
+                onClick={onClose}
+                className="p-2 rounded-xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-accent-rose hover:bg-accent-rose/10 transition-all shrink-0"
+                aria-label="Fermer le lecteur"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            {/* Progress */}
+            <div className="mb-5">
+              <div className="relative h-1.5 group cursor-pointer mb-2">
+                <input type="range" min="0" max={duration || 0} value={currentTime}
+                  onChange={handleProgressChange}
+                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
+                <div className="w-full h-full bg-[var(--text-primary)]/10 rounded-full overflow-hidden">
+                  <div className="h-full bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-secondary)] rounded-full transition-all duration-100"
+                    style={{ width: `${progress}%` }} />
+                </div>
+              </div>
+              <div className="flex justify-between text-[10px] text-[var(--text-secondary)] tabular-nums font-bold">
+                <span>{formatTime(currentTime)}</span>
+                <span>{formatTime(duration)}</span>
+              </div>
+            </div>
+
+            {/* Controls */}
+            <div className="flex items-center justify-between gap-4 flex-wrap">
+              <div className="flex items-center gap-5">
+                <button onClick={() => handleSeek(-30)}
+                  className="flex flex-col items-center gap-0.5 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors">
+                  <RotateCcw className="w-5 h-5" />
+                  <span className="text-[8px] font-black">-30s</span>
+                </button>
+                <button onClick={handlePlayPause}
+                  className="w-14 h-14 rounded-full bg-[var(--accent-primary)] text-white flex items-center justify-center shadow-glow-indigo hover:scale-105 active:scale-95 transition-transform">
+                  {isPlaying ? <Pause className="w-5 h-5 fill-current" /> : <Play className="w-5 h-5 fill-current ml-0.5" />}
+                </button>
+                <button onClick={() => handleSeek(30)}
+                  className="flex flex-col items-center gap-0.5 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors">
+                  <RotateCw className="w-5 h-5" />
+                  <span className="text-[8px] font-black">+30s</span>
+                </button>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button onClick={changeSpeed}
+                  className="px-3 py-2 rounded-xl bg-[var(--bg-secondary)] text-[10px] font-black text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all uppercase tracking-widest">
+                  {playbackSpeed}x
+                </button>
+                <button onClick={toggleMute}
+                  className="p-2 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors">
+                  {isMuted ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
+                </button>
+                <input type="range" min="0" max="1" step="0.05" value={isMuted ? 0 : volume}
+                  onChange={handleVolumeChange}
+                  className="w-20 h-1 bg-[var(--text-primary)]/10 rounded-full appearance-none cursor-pointer accent-[var(--accent-primary)]" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      {/* Mini sticky bar appears when inline player scrolls out of view */}
+      {showMiniBar && createPortal(
+        <div className="fixed bottom-6 left-4 right-4 sm:left-6 sm:right-6 lg:left-auto lg:right-8 lg:bottom-8 lg:w-[calc(100%-22rem)] xl:w-[calc(100%-24rem)] z-[90] max-w-5xl mx-auto animate-slide-up">
+          <div className="premium-glass rounded-[var(--radius-card)] border border-[var(--border-color)] shadow-2xl overflow-hidden">
+            <div className="flex items-center gap-3 px-4 h-[72px]">
+              {/* Artwork */}
+              <div className="w-11 h-11 rounded-xl overflow-hidden border border-[var(--border-color)] shrink-0">
+                {(episode.imageUrl || podcast?.imageUrl)
+                  ? <img src={episode.imageUrl || podcast!.imageUrl} alt="" 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)] flex items-center justify-center text-lg">🎙️</div>
+                }
+              </div>
+
+              {/* Title */}
+              <div className="min-w-0 flex-1 hidden sm:block">
+                <p className="text-xs font-bold truncate leading-tight">{episode.title}</p>
+                <p className="text-[9px] text-[var(--text-secondary)] font-bold truncate uppercase tracking-wider">{podcast?.title || ''}</p>
+              </div>
+
+              {/* Controls */}
+              <div className="flex items-center gap-3 shrink-0">
+                <button onClick={() => handleSeek(-30)} className="text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors" aria-label="-30s">
+                  <RotateCcw className="w-4 h-4" />
+                </button>
+                <button onClick={handlePlayPause}
+                  className="w-10 h-10 rounded-full bg-[var(--accent-primary)] text-white flex items-center justify-center shadow-glow-indigo hover:scale-105 active:scale-95 transition-transform">
+                  {isPlaying ? <Pause className="w-4 h-4 fill-current" /> : <Play className="w-4 h-4 fill-current ml-0.5" />}
+                </button>
+                <button onClick={() => handleSeek(30)} className="text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-colors" aria-label="+30s">
+                  <RotateCw className="w-4 h-4" />
+                </button>
+              </div>
+
+              {/* Time + close */}
+              <div className="hidden md:flex items-center gap-3 shrink-0 text-[10px] text-[var(--text-secondary)] tabular-nums font-bold">
+                <span>{formatTime(currentTime)}</span>
+                <span className="opacity-40">/</span>
+                <span>{formatTime(duration)}</span>
+              </div>
+
+              <button onClick={() => inlineWrapperRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
+                className="p-2 rounded-xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all shrink-0"
+                aria-label="Remonter au lecteur"
+                title="Remonter au lecteur">
+                <ChevronDown className="w-4 h-4 rotate-180" />
+              </button>
+            </div>
+
+            {/* Progress bar */}
+            <div className="relative h-1 group cursor-pointer">
+              <input type="range" min="0" max={duration || 0} value={currentTime}
+                onChange={handleProgressChange}
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
+              <div className="w-full h-full bg-[var(--text-primary)]/10">
+                <div className="h-full bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-secondary)] transition-all duration-100"
+                  style={{ width: `${progress}%` }} />
+              </div>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+      </>
+    );
+  }
+
   return (
     <div className={`fixed z-[100] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] ${inverseTheme} text-[var(--text-primary)] ${
       isExpanded
diff --git a/frontend/src/components/EpisodeCard.tsx b/frontend/src/components/EpisodeCard.tsx
index fd3577a..1539f14 100644
--- a/frontend/src/components/EpisodeCard.tsx
+++ b/frontend/src/components/EpisodeCard.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Episode } from '../services/episodeService';
-import { Play, Calendar, Activity } from 'lucide-react';
+import { Play, Calendar, Activity, Check, Sparkles } from 'lucide-react';
 import { useAudio } from '../context/AudioContext';
 
 interface EpisodeCardProps {
@@ -21,6 +21,12 @@ export default function EpisodeCard({ episode, onPlay, onDetails }: EpisodeCardP
 
   const durationMinutes = Math.floor(episode.duration / 60);
 
+  // Badges
+  const isCompleted = episode.progress?.isCompleted === true;
+  const isNew =
+    !episode.progress &&
+    Date.now() - new Date(episode.pubDate).getTime() < 7 * 24 * 60 * 60 * 1000;
+
   const handleDetailsClick = (e: React.MouseEvent) => {
     if (onDetails) {
       e.stopPropagation();
@@ -50,6 +56,22 @@ export default function EpisodeCard({ episode, onPlay, onDetails }: EpisodeCardP
           <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>
         )}
         
+        {/* Status Badges - top left */}
+        <div className="absolute top-3 left-3 flex items-center gap-2 z-10">
+          {isCompleted && (
+            <div className="px-2.5 py-1 rounded-lg bg-emerald-500/90 backdrop-blur-md border border-emerald-300/30 text-[9px] font-black text-white uppercase tracking-widest flex items-center gap-1 shadow-lg">
+              <Check className="w-3 h-3" />
+              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 */}
         <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 
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 35227f2..79009d0 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -8,10 +8,11 @@ import EpisodeCard from '../components/EpisodeCard';
 import EpisodeDetails from '../components/EpisodeDetails';
 import { useAudio } from '../context/AudioContext';
 import AlertModal, { AlertType } from '../components/AlertModal';
+import AudioPlayer from '../components/AudioPlayer';
 import { Sparkles, Play, Clock, TrendingUp, Loader, RefreshCcw } from 'lucide-react';
 
 export default function Dashboard() {
-  const { playEpisode } = useAudio();
+  const { playEpisode, currentEpisode, closePlayer } = useAudio();
   const [user, setUser] = useState<any>(null);
   const [detailsEpisode, setDetailsEpisode] = useState<Episode | null>(null);
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
@@ -122,40 +123,51 @@ export default function Dashboard() {
       />
 
       <main className="">
-        {/* Welcome Section / Hero */}
-        <div className="premium-glass rounded-[var(--radius-panel)] p-8 lg:p-12 mb-12 relative overflow-hidden group">
-           <div className="absolute top-0 right-0 w-64 h-64 bg-[var(--accent-glow)] blur-[80px] -mr-32 -mt-32 group-hover:bg-[var(--accent-primary)]/20 transition-all duration-700" />
-           <div className="relative z-10">
-              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--accent-glow)] border border-[var(--border-color)] text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-widest mb-4">
-                 <Sparkles className="w-3 h-3" />
-                 Podcastic Premium
-              </div>
-              <h2 className="text-4xl lg:text-5xl font-display font-black mb-4 tracking-tight leading-tight max-w-2xl text-[var(--text-primary)]">
-                 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 font-medium">
-                 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 ? (
-                    <button 
-                      onClick={() => setSelectedEpisode(episodesInProgress[0])}
-                      className="neon-button flex items-center gap-2"
-                    >
-                       <Play className="w-4 h-4 fill-current" />
-                       Reprendre : {episodesInProgress[0].title.substring(0, 20)}...
-                    </button>
-                 ) : (
-                    <button className="neon-button flex items-center gap-2">
-                       <TrendingUp className="w-4 h-4" />
-                       Découvrir
-                    </button>
-                 )}
-                 <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
-                 </Link>
-              </div>
-           </div>
+        {/* Welcome Section / Hero — becomes audio player when playing */}
+        <div className="mb-12">
+          {currentEpisode ? (
+            <AudioPlayer
+              episode={currentEpisode}
+              onClose={closePlayer}
+              userId={user?._id}
+              mode="inline"
+            />
+          ) : (
+            <div className="premium-glass rounded-[var(--radius-panel)] p-8 lg:p-12 relative overflow-hidden group">
+               <div className="absolute top-0 right-0 w-64 h-64 bg-[var(--accent-glow)] blur-[80px] -mr-32 -mt-32 group-hover:bg-[var(--accent-primary)]/20 transition-all duration-700" />
+               <div className="relative z-10">
+                  <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--accent-glow)] border border-[var(--border-color)] text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-widest mb-4">
+                     <Sparkles className="w-3 h-3" />
+                     Podcastic Premium
+                  </div>
+                  <h2 className="text-4xl lg:text-5xl font-display font-black mb-4 tracking-tight leading-tight max-w-2xl text-[var(--text-primary)]">
+                     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 font-medium">
+                     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 ? (
+                        <button
+                          onClick={() => playEpisode(episodesInProgress[0])}
+                          className="neon-button flex items-center gap-2"
+                        >
+                           <Play className="w-4 h-4 fill-current" />
+                           Reprendre : {episodesInProgress[0].title.substring(0, 20)}...
+                        </button>
+                     ) : (
+                        <Link to="/trending" className="neon-button flex items-center gap-2">
+                           <TrendingUp className="w-4 h-4" />
+                           Découvrir
+                        </Link>
+                     )}
+                     <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
+                     </Link>
+                  </div>
+               </div>
+            </div>
+          )}
         </div>
 
         {/* Continue Listening Section (Only if progression exists) */}
diff --git a/frontend/src/pages/Library.tsx b/frontend/src/pages/Library.tsx
index c789fc4..693d2be 100644
--- a/frontend/src/pages/Library.tsx
+++ b/frontend/src/pages/Library.tsx
@@ -225,13 +225,28 @@ export default function Library() {
                        <button onClick={() => setConfirmDeleteId(null)} className="flex-1 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-xl text-[11px] font-black uppercase hover:bg-[var(--bg-primary)]">Annuler</button>
                     </div>
                  ) : (
-                    <button
-                      onClick={() => setConfirmDeleteId(podcast.subscriptionId || podcast._id)}
-                      className="ml-auto flex items-center gap-2 text-[10px] font-bold text-[var(--text-secondary)] hover:text-accent-rose transition-all uppercase tracking-widest"
-                    >
-                      <Trash2 className="w-3 h-3" />
-                      Désabonner
-                    </button>
+                    <div className="flex items-center gap-4 ml-auto">
+                      <button
+                        onClick={() => syncMutation.mutate(podcast._id)}
+                        disabled={syncMutation.isPending && syncMutation.variables === podcast._id}
+                        className="flex items-center gap-2 text-[10px] font-bold text-[var(--text-secondary)] hover:text-[var(--accent-primary)] transition-all uppercase tracking-widest disabled:opacity-50"
+                        title="Resynchroniser les métadonnées et épisodes"
+                      >
+                        {syncMutation.isPending && syncMutation.variables === podcast._id ? (
+                          <Loader className="w-3 h-3 animate-spin" />
+                        ) : (
+                          <RefreshCw className="w-3 h-3" />
+                        )}
+                        Resync
+                      </button>
+                      <button
+                        onClick={() => setConfirmDeleteId(podcast.subscriptionId || podcast._id)}
+                        className="flex items-center gap-2 text-[10px] font-bold text-[var(--text-secondary)] hover:text-accent-rose transition-all uppercase tracking-widest"
+                      >
+                        <Trash2 className="w-3 h-3" />
+                        Désabonner
+                      </button>
+                    </div>
                  )}
               </div>
             </div>
diff --git a/frontend/src/services/episodeService.ts b/frontend/src/services/episodeService.ts
index 6760bc6..b78a283 100644
--- a/frontend/src/services/episodeService.ts
+++ b/frontend/src/services/episodeService.ts
@@ -10,6 +10,10 @@ export interface Episode {
   duration: number;
   guid: string;
   imageUrl?: string;
+  progress?: {
+    position: number;
+    isCompleted: boolean;
+  } | null;
 }
 
 export interface EpisodeResponse {