From 5a6287ad5bb9d15e34b5e9b27095bde65de8171f Mon Sep 17 00:00:00 2001
From: David Leuliette <dleuliette@gmail.com>
Date: Wed, 23 Sep 2026 21:10:20 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20hide=20podcast=20platform?=
 =?UTF-8?q?=20buttons=20when=20the=20episode=20has=20no=20URL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Spotify and Apple Podcast buttons rendered even when an episode had an
empty URL, so clicking them did nothing. Render each button only when
its URL is set, hide the "Écouter l'épisode" card when neither exists,
and show transcript timecodes as plain text when there is no Spotify URL.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/web/components/podcast-episode-card.tsx | 52 +++++++++--------
 apps/web/components/transcript-entry.tsx     | 14 +++--
 apps/web/pages/podcast/[slug].tsx            | 60 +++++++++++---------
 3 files changed, 72 insertions(+), 54 deletions(-)

diff --git a/apps/web/components/podcast-episode-card.tsx b/apps/web/components/podcast-episode-card.tsx
index 8a920799..e5547492 100644
--- a/apps/web/components/podcast-episode-card.tsx
+++ b/apps/web/components/podcast-episode-card.tsx
@@ -40,30 +40,36 @@ export function PodcastEpisodeCard({ episode }: PodcastEpisodeCardProps) {
         </div>
       </Link>
 
-      <div className="p-4 pt-0">
-        <div className="flex gap-3">
-          <Button
-            as="a"
-            href={episode.spotify_url}
-            isExternalLink={true}
-            size="md"
-            variant="outline"
-            accessoryLeft={<SpotifyIcon />}
-          >
-            Spotify
-          </Button>
-          <Button
-            as="a"
-            href={episode.apple_podcast_url}
-            isExternalLink={true}
-            size="md"
-            variant="outline"
-            accessoryLeft={<ApplePodcastIcon />}
-          >
-            Apple Podcast
-          </Button>
+      {(episode.spotify_url || episode.apple_podcast_url) && (
+        <div className="p-4 pt-0">
+          <div className="flex gap-3">
+            {episode.spotify_url && (
+              <Button
+                as="a"
+                href={episode.spotify_url}
+                isExternalLink={true}
+                size="md"
+                variant="outline"
+                accessoryLeft={<SpotifyIcon />}
+              >
+                Spotify
+              </Button>
+            )}
+            {episode.apple_podcast_url && (
+              <Button
+                as="a"
+                href={episode.apple_podcast_url}
+                isExternalLink={true}
+                size="md"
+                variant="outline"
+                accessoryLeft={<ApplePodcastIcon />}
+              >
+                Apple Podcast
+              </Button>
+            )}
+          </div>
         </div>
-      </div>
+      )}
     </Card>
   );
 }
diff --git a/apps/web/components/transcript-entry.tsx b/apps/web/components/transcript-entry.tsx
index 8147046f..693698fd 100644
--- a/apps/web/components/transcript-entry.tsx
+++ b/apps/web/components/transcript-entry.tsx
@@ -10,16 +10,22 @@ export function TranscriptEntry({
   spotify_url?: string;
 }) {
   const seconds = timecodeToSeconds(entry.time);
-  const spotifyUrl = `${spotify_url}${spotify_url?.includes('?') ? '&' : '?'}t=${seconds}`;
+  const spotifyUrl = spotify_url
+    ? `${spotify_url}${spotify_url.includes('?') ? '&' : '?'}t=${seconds}`
+    : undefined;
 
   return (
     <div className="mb-4">
       <div className="flex items-baseline gap-2 mb-1">
         <span className="font-semibold">{entry.speaker}</span>
         <span className="text-slate-500">-</span>
-        <Hyperlink href={spotifyUrl} isExternal>
-          {entry.time}
-        </Hyperlink>
+        {spotifyUrl ? (
+          <Hyperlink href={spotifyUrl} isExternal>
+            {entry.time}
+          </Hyperlink>
+        ) : (
+          <span className="text-slate-500">{entry.time}</span>
+        )}
       </div>
       <p className="whitespace-pre-line pl-2 border-l-2 border-blue-200 dark:border-blue-800 mt-0">
         {entry.text}
diff --git a/apps/web/pages/podcast/[slug].tsx b/apps/web/pages/podcast/[slug].tsx
index 995783d8..d0d21e75 100644
--- a/apps/web/pages/podcast/[slug].tsx
+++ b/apps/web/pages/podcast/[slug].tsx
@@ -196,34 +196,40 @@ export default function PodcastEpisodePage({
                       />
                     )}
                   </div>
-                  <Card>
-                    <Text as="h2" variant="h3" className="mb-6">
-                      Écouter l'épisode
-                    </Text>
-                    <div className="flex flex-wrap gap-4">
-                      <Button
-                        as="a"
-                        href={episode.spotify_url}
-                        isExternalLink={true}
-                        size="lg"
-                        variant="spotify"
-                        accessoryLeft={<SpotifyIcon />}
-                      >
-                        Écouter sur Spotify
-                      </Button>
+                  {(episode.spotify_url || episode.apple_podcast_url) && (
+                    <Card>
+                      <Text as="h2" variant="h3" className="mb-6">
+                        Écouter l'épisode
+                      </Text>
+                      <div className="flex flex-wrap gap-4">
+                        {episode.spotify_url && (
+                          <Button
+                            as="a"
+                            href={episode.spotify_url}
+                            isExternalLink={true}
+                            size="lg"
+                            variant="spotify"
+                            accessoryLeft={<SpotifyIcon />}
+                          >
+                            Écouter sur Spotify
+                          </Button>
+                        )}
 
-                      <Button
-                        as="a"
-                        href={episode.apple_podcast_url}
-                        isExternalLink={true}
-                        size="lg"
-                        variant="apple"
-                        accessoryLeft={<ApplePodcastIcon />}
-                      >
-                        Écouter sur Apple Podcast
-                      </Button>
-                    </div>
-                  </Card>
+                        {episode.apple_podcast_url && (
+                          <Button
+                            as="a"
+                            href={episode.apple_podcast_url}
+                            isExternalLink={true}
+                            size="lg"
+                            variant="apple"
+                            accessoryLeft={<ApplePodcastIcon />}
+                          >
+                            Écouter sur Apple Podcast
+                          </Button>
+                        )}
+                      </div>
+                    </Card>
+                  )}
                   {episode.youtube_embed_id && (
                     <Card className="my-6">
                       <Text as="h2" variant="h4" className="mb-4">