Add podcast card is now a button at the bottom of the page

src/app/[stream]/podcasts/addPodcastCard.tsx

@@ -1,18 +1,40 @@
+"use client";
+
 import { useRouter } from 'next/navigation';
+import { useState, useEffect } from 'react';
 
 export default function AddPodcastCard({ stream }: { stream?: string | string[] }) {
-    const router = useRouter();
+    const router = useRouter(),
+        defaultBottomOffset = 16,
+        [bottomOffset, setBottomOffset] = useState(defaultBottomOffset);
 
     const handleClick = () => {
         router.push(`${process.env.NEXT_PUBLIC_API_BASE_URL}/${stream}/publish`);
     };
 
+    useEffect(() => {
+        const handleScroll = () => {
+            const footer = document.querySelector('footer');
+            if (!footer) return;
+
+            const footerRect = footer.getBoundingClientRect(),
+                viewportHeight = window.innerHeight,
+                footerVisibleHeight = Math.max(0, viewportHeight - footerRect.top);
+
+            setBottomOffset(footerVisibleHeight + 16);
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
     return (
         <div
             onClick={handleClick}
-            className="w-[150px] h-[150px] shadow-md rounded-lg overflow-hidden flex items-center justify-center m-4 mb-1 bg-purple-200 cursor-pointer hover:bg-purple-300 transition-colors"
+            style={{ bottom: `${bottomOffset}px` }}
+            className="fixed bottom-[70px] right-4 w-16 h-16 z-10 shadow-md rounded-full flex items-center justify-center bg-purple-500 cursor-pointer hover:bg-purple-600 transition-colors"
         >
-            <span className="text-4xl font-bold text-gray-800">+</span>
+            <span className="text-3xl font-bold text-white">+</span>
         </div>
     );
 }

src/app/[stream]/podcasts/podcastList.tsx

@@ -16,7 +16,7 @@ export default function PodcastList({ stream }: PodcastListProps) {
         fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/${stream}/podcasts`)
             .then((res) => res.json())
             .then((data) => setPodcastData(data));
-    }, []);
+    }, [stream]);
 
     return (
         <div className="max-w-[800px] mx-auto w-full px-4">

src/app/layout/main.tsx

@@ -21,7 +21,7 @@ export default function Main({ children }: MainProps) {
             <main className="flex-grow">
                 {children}
             </main>
-            <footer className="bg-purple-300 py-4">
+            <footer className="bg-purple-300 py-4 mt-4">
                 <p className="text-right text-sm pr-4">© 2025 Ever Givin Pod</p>
             </footer>
         </div>