feat: add Trending page to display and subscribe to popular podcasts by genre

frontend/src/components/AlertModal.tsx

@@ -1,4 +1,5 @@
 import { X, AlertCircle, Info, CheckCircle2, AlertTriangle } from 'lucide-react';
+import { createPortal } from 'react-dom';
 
 export type AlertType = 'error' | 'info' | 'success' | 'warning';
 
@@ -52,8 +53,8 @@ export default function AlertModal({
 
   const { icon: StatusIcon, color, bg, border, glow } = config[type];
 
-  return (
-    <div className="fixed inset-0 z-[150] flex items-center justify-center p-4">
+  return createPortal(
+    <div className="fixed inset-0 z-[210] flex items-center justify-center p-4">
       {/* Backdrop */}
       <div 
         className="absolute inset-0 bg-black/60 backdrop-blur-md animate-fade-in"
@@ -91,6 +92,7 @@ export default function AlertModal({
           </button>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }

frontend/src/components/AudioPlayer.tsx

@@ -159,7 +159,7 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
       isExpanded
         ? 'inset-0 rounded-none'
         : 'bottom-6 left-1/2 -translate-x-1/2 w-[96%] max-w-5xl rounded-[2rem] h-[88px]'
-    } premium-glass border-[var(--border-color)] shadow-2xl overflow-hidden flex flex-col`}>
+    } ${theme === 'light' ? 'bg-gradient-to-r from-slate-800/95 to-slate-900/95 backdrop-blur-xl' : 'premium-glass'} border-[var(--border-color)] shadow-2xl overflow-hidden flex flex-col`}>
 
       <audio
         ref={audioRef}

frontend/src/components/EpisodeDetails.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createPortal } from 'react-dom';
 import { X, Play, Clock, Calendar, BarChart2 } from 'lucide-react';
 import { Episode } from '../services/episodeService';
 
@@ -20,7 +21,7 @@ export default function EpisodeDetails({ episode, isOpen, onClose, onPlay }: Epi
     year: 'numeric'
   });
 
-  return (
+  return createPortal(
     <>
       {/* Backdrop */}
       <div 
@@ -131,6 +132,7 @@ export default function EpisodeDetails({ episode, isOpen, onClose, onPlay }: Epi
            )}
         </div>
       </div>
-    </>
+    </>,
+    document.body
   );
 }

frontend/src/components/SuccessModal.tsx

@@ -1,5 +1,6 @@
 import { CheckCircle2, ChevronRight, BookOpen, Sparkles, X } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import { createPortal } from 'react-dom';
 
 interface SuccessModalProps {
   isOpen: boolean;
@@ -20,8 +21,8 @@ export default function SuccessModal({
 }: SuccessModalProps) {
   if (!isOpen) return null;
 
-  return (
-    <div className="fixed inset-0 z-[110] flex items-center justify-center p-4">
+  return createPortal(
+    <div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
       {/* Backdrop */}
       <div 
         className="absolute inset-0 bg-black/60 backdrop-blur-md animate-fade-in"
@@ -85,6 +86,7 @@ export default function SuccessModal({
           </div>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }