From 38521c45dc4f739f164e88b2b5dd63ad1ba0e681 Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Thu, 16 Apr 2026 13:01:53 +0200
Subject: [PATCH] feat: add AddPodcast and Trending pages for podcast discovery
 and subscription management

---
 frontend/src/pages/AddPodcast.tsx | 24 +++++++++++++++++++++---
 frontend/src/pages/Trending.tsx   | 25 ++++++++++++++++++++++---
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/AddPodcast.tsx b/frontend/src/pages/AddPodcast.tsx
index c0a46f4..4185a92 100644
--- a/frontend/src/pages/AddPodcast.tsx
+++ b/frontend/src/pages/AddPodcast.tsx
@@ -3,7 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { discoveryService, DiscoveryPodcast } from '../services/discoveryService';
 import { podcastService } from '../services/podcastService';
 import Header from '../components/Header';
-import { Search, Plus, Loader, Rss } from 'lucide-react';
+import { Search, Plus, Loader, Rss, Check } from 'lucide-react';
 import { authService } from '../services/authService';
 
 export default function AddPodcast() {
@@ -35,6 +35,15 @@ export default function AddPodcast() {
     staleTime: 5 * 60 * 1000,
   });
 
+  const { data: subsData } = useQuery({
+    queryKey: ['podcasts', 'subscriptions'],
+    queryFn: () => podcastService.getUserSubscriptions(),
+  });
+
+  const isSubscribed = (rssUrl: string) => {
+    return subsData?.podcasts.some(p => p.rssUrl === rssUrl);
+  };
+
   const subscribeMutation = useMutation({
     mutationFn: (podcast: DiscoveryPodcast) =>
       discoveryService.subscribeFromDiscovery(podcast.rssUrl, {
@@ -178,14 +187,23 @@ export default function AddPodcast() {
                   <div className="flex items-center justify-between">
                     <button
                       onClick={() => handleSubscribe(podcast)}
-                      disabled={subscribingId === podcast.id || subscribeMutation.isPending}
-                      className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+                      disabled={subscribingId === podcast.id || subscribeMutation.isPending || isSubscribed(podcast.rssUrl)}
+                      className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors font-medium ${
+                        isSubscribed(podcast.rssUrl)
+                          ? 'bg-light-200 text-light-500 cursor-default'
+                          : 'bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed'
+                      }`}
                     >
                       {subscribingId === podcast.id ? (
                         <>
                           <Loader className="w-4 h-4 animate-spin" />
                           Ajout...
                         </>
+                      ) : isSubscribed(podcast.rssUrl) ? (
+                        <>
+                          <Check className="w-4 h-4" />
+                          Abonné
+                        </>
                       ) : (
                         <>
                           <Plus className="w-4 h-4" />
diff --git a/frontend/src/pages/Trending.tsx b/frontend/src/pages/Trending.tsx
index fc99a92..d088526 100644
--- a/frontend/src/pages/Trending.tsx
+++ b/frontend/src/pages/Trending.tsx
@@ -1,8 +1,9 @@
 import { useState, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { discoveryService, DiscoveryPodcast } from '../services/discoveryService';
+import { podcastService } from '../services/podcastService';
 import Header from '../components/Header';
-import { Loader, Plus, Flame } from 'lucide-react';
+import { Loader, Plus, Flame, Check } from 'lucide-react';
 import { authService } from '../services/authService';
 
 export default function Trending() {
@@ -28,6 +29,15 @@ export default function Trending() {
     staleTime: 30 * 60 * 1000,
   });
 
+  const { data: subsData } = useQuery({
+    queryKey: ['podcasts', 'subscriptions'],
+    queryFn: () => podcastService.getUserSubscriptions(),
+  });
+
+  const isSubscribed = (rssUrl: string) => {
+    return subsData?.podcasts.some(p => p.rssUrl === rssUrl);
+  };
+
   const subscribeMutation = useMutation({
     mutationFn: (podcast: DiscoveryPodcast) =>
       discoveryService.subscribeFromDiscovery(podcast.rssUrl, {
@@ -112,14 +122,23 @@ export default function Trending() {
                   <div className="flex items-center justify-between">
                     <button
                       onClick={() => handleSubscribe(podcast)}
-                      disabled={subscribingId === podcast.id || subscribeMutation.isPending}
-                      className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+                      disabled={subscribingId === podcast.id || subscribeMutation.isPending || isSubscribed(podcast.rssUrl)}
+                      className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors font-medium ${
+                        isSubscribed(podcast.rssUrl)
+                          ? 'bg-light-200 text-light-500 cursor-default'
+                          : 'bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed'
+                      }`}
                     >
                       {subscribingId === podcast.id ? (
                         <>
                           <Loader className="w-4 h-4 animate-spin" />
                           Ajout...
                         </>
+                      ) : isSubscribed(podcast.rssUrl) ? (
+                        <>
+                          <Check className="w-4 h-4" />
+                          Abonné
+                        </>
                       ) : (
                         <>
                           <Plus className="w-4 h-4" />