From 799ca131d923db1e0e62eed2ebe4fd2a8bad8f7f Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Wed, 4 Mar 2026 20:31:11 +0000
Subject: [PATCH] fix(app): only show gradient overlay on real images, not SVG
 fallbacks

The from-black/60 gradient overlay was making SVG text fallbacks appear
completely black. Now the gradient only renders when there's an actual
image, letting the designed SVG fallbacks show through properly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/app/src/components/content/BookGrid.vue     | 2 +-
 packages/app/src/components/content/FilmGrid.vue     | 2 +-
 packages/app/src/components/content/NewsGrid.vue     | 2 +-
 packages/app/src/components/content/PlaceGrid.vue    | 2 +-
 packages/app/src/components/content/PodcastGrid.vue  | 2 +-
 packages/app/src/components/content/SongGrid.vue     | 2 +-
 packages/app/src/components/content/TVSeriesGrid.vue | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/components/content/BookGrid.vue b/packages/app/src/components/content/BookGrid.vue
index 30e578f3..8f58afa4 100644
--- a/packages/app/src/components/content/BookGrid.vue
+++ b/packages/app/src/components/content/BookGrid.vue
@@ -66,7 +66,7 @@
                 class="w-full h-full bg-cover bg-center"
                 :style="{ backgroundImage: `url(${fallbackFor(book)})` }"
               />
-              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
+              <div v-if="coverSrc(book)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
 
               <div class="absolute bottom-0 left-0 right-0 p-2">
                 <p class="text-xs font-semibold text-white/90 leading-tight truncate">
diff --git a/packages/app/src/components/content/FilmGrid.vue b/packages/app/src/components/content/FilmGrid.vue
index 60d58b03..92f60a18 100644
--- a/packages/app/src/components/content/FilmGrid.vue
+++ b/packages/app/src/components/content/FilmGrid.vue
@@ -66,7 +66,7 @@
                 class="w-full h-full bg-cover bg-center"
                 :style="{ backgroundImage: `url(${fallbackFor(film)})` }"
               />
-              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
+              <div v-if="coverSrc(film)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
 
               <div class="absolute bottom-0 left-0 right-0 p-2">
                 <p class="text-xs font-semibold text-white/90 leading-tight truncate">
diff --git a/packages/app/src/components/content/NewsGrid.vue b/packages/app/src/components/content/NewsGrid.vue
index 5f6e8632..7ff40b11 100644
--- a/packages/app/src/components/content/NewsGrid.vue
+++ b/packages/app/src/components/content/NewsGrid.vue
@@ -52,7 +52,7 @@
                   class="absolute inset-0 bg-cover bg-center"
                   :style="{ backgroundImage: `url(${newsFallback(article)})` }"
                 />
-                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent pointer-events-none" />
+                <div v-if="isSafeImgUrl(article.imgSrc) && !failedImgs.has(article.url)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent pointer-events-none" />
               </div>
 
               <div
diff --git a/packages/app/src/components/content/PlaceGrid.vue b/packages/app/src/components/content/PlaceGrid.vue
index c469933e..75f31dfb 100644
--- a/packages/app/src/components/content/PlaceGrid.vue
+++ b/packages/app/src/components/content/PlaceGrid.vue
@@ -59,7 +59,7 @@
               class="w-full h-full bg-cover bg-center"
               :style="{ backgroundImage: `url(${fallbackFor(place)})` }"
             />
-            <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
+            <div v-if="place.photoUrl && !failedPhotos.has(place.id)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
             <div class="absolute bottom-0 left-0 right-0 p-2">
               <p class="text-xs font-semibold text-white/90 truncate">{{ place.name }}</p>
               <p class="text-xs text-white/40 truncate mt-0.5">{{ place.cuisine || place.category }}</p>
diff --git a/packages/app/src/components/content/PodcastGrid.vue b/packages/app/src/components/content/PodcastGrid.vue
index af70ba14..66deb060 100644
--- a/packages/app/src/components/content/PodcastGrid.vue
+++ b/packages/app/src/components/content/PodcastGrid.vue
@@ -66,7 +66,7 @@
                 class="w-full h-full bg-cover bg-center"
                 :style="{ backgroundImage: `url(${fallbackFor(podcast)})` }"
               />
-              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
+              <div v-if="coverSrc(podcast)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
 
               <div class="absolute bottom-0 left-0 right-0 p-2">
                 <p class="text-xs font-semibold text-white/90 leading-tight truncate">
diff --git a/packages/app/src/components/content/SongGrid.vue b/packages/app/src/components/content/SongGrid.vue
index fabd0ad0..63b1f477 100644
--- a/packages/app/src/components/content/SongGrid.vue
+++ b/packages/app/src/components/content/SongGrid.vue
@@ -77,7 +77,7 @@
                 class="w-full h-full bg-cover bg-center"
                 :style="{ backgroundImage: `url(${fallbackFor(song)})` }"
               />
-              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
+              <div v-if="coverSrc(song)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
 
               <div class="absolute bottom-0 left-0 right-0 p-2">
                 <p class="text-xs font-semibold text-white/90 leading-tight truncate">
diff --git a/packages/app/src/components/content/TVSeriesGrid.vue b/packages/app/src/components/content/TVSeriesGrid.vue
index 3e5459fa..981787be 100644
--- a/packages/app/src/components/content/TVSeriesGrid.vue
+++ b/packages/app/src/components/content/TVSeriesGrid.vue
@@ -66,7 +66,7 @@
                 class="w-full h-full bg-cover bg-center"
                 :style="{ backgroundImage: `url(${fallbackFor(s)})` }"
               />
-              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
+              <div v-if="coverSrc(s)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
 
               <div class="absolute bottom-0 left-0 right-0 p-2">
                 <p class="text-xs font-semibold text-white/90 leading-tight truncate">