From 9d2db9a73b71967fe4658c53d29ef5984f20bc69 Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Sun, 17 May 2026 00:13:21 +0200
Subject: [PATCH] fix(gallery): hide Like button when guest feedback is off
 (#506)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four gallery layouts were rendering the per-photo Like button without
gating on the master "Guest Feedback" toggle, so a guest still saw a
heart icon and could submit likes on events where the host had turned
feedback off. The other layouts (Grid / Justified / Masonry / Story)
already gated correctly with `feedbackEnabled && allowLikes` —
Rekoo-PS's note that "it's hidden in some themes" matches that split.

- CarouselGalleryLayout, MosaicGalleryLayout, TimelineGalleryLayout:
  the existing conditional checked only `feedbackOptions?.allowLikes`,
  missing the `feedbackEnabled` master gate. Added it inline.
- GalleryPremiumLayout: the per-card Like button rendered
  unconditionally because PhotoCard never received the allow-likes
  signal. Added an `allowLikes` prop on PhotoCardProps, plumbed
  `feedbackOptions?.allowLikes` down from the parent, and wrapped the
  button in `feedbackEnabled && allowLikes`.

The follow-up "default guest-feedback ON" request from Rekoo-PS in
the comments is a separate feature (admin > General > Event Creation
default) and out of scope for this fix.
---
 .../gallery/layouts/CarouselGalleryLayout.tsx |  2 +-
 .../gallery/layouts/GalleryPremiumLayout.tsx  | 27 ++++++++++++-------
 .../gallery/layouts/MosaicGalleryLayout.tsx   |  2 +-
 .../gallery/layouts/TimelineGalleryLayout.tsx |  2 +-
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx b/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx
index 6cea392c..f20d040e 100644
--- a/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx
@@ -147,7 +147,7 @@ export const CarouselGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 <Download className="w-5 h-5" />
               </Button>
             )}
-            {feedbackOptions?.allowLikes && (
+            {feedbackEnabled && feedbackOptions?.allowLikes && (
               <Button
                 variant="ghost"
                 size="sm"
diff --git a/frontend/src/components/gallery/layouts/GalleryPremiumLayout.tsx b/frontend/src/components/gallery/layouts/GalleryPremiumLayout.tsx
index 1590e5e0..ce045359 100644
--- a/frontend/src/components/gallery/layouts/GalleryPremiumLayout.tsx
+++ b/frontend/src/components/gallery/layouts/GalleryPremiumLayout.tsx
@@ -42,6 +42,10 @@ interface PhotoCardProps {
   useEnhancedProtection?: boolean;
   useCanvasRendering?: boolean;
   feedbackEnabled?: boolean;
+  // #506: track the per-event "allow likes" toggle so the per-photo
+  // Like button respects it. `feedbackEnabled` alone isn't enough —
+  // an event can have feedback on but likes specifically disabled.
+  allowLikes?: boolean;
   index: number;
 }
 
@@ -61,6 +65,7 @@ const PhotoCard: React.FC<PhotoCardProps> = ({
   useEnhancedProtection = false,
   useCanvasRendering = false,
   feedbackEnabled = false,
+  allowLikes = false,
   index
 }) => {
   // Note: height is passed but not used as we maintain aspect ratio via width
@@ -113,15 +118,18 @@ const PhotoCard: React.FC<PhotoCardProps> = ({
         {isSelected && <Check className="w-3.5 h-3.5" strokeWidth={3} />}
       </button>
 
-      {/* Like Button */}
-      <button
-        onClick={onLike}
-        className={`gallery-premium-like-btn ${isLiked ? 'liked' : ''}`}
-      >
-        <Heart
-          className={`w-5 h-5 ${isLiked ? 'fill-current' : ''}`}
-        />
-      </button>
+      {/* Like Button — #506: only when feedback master is on AND the
+          per-event "allow likes" sub-toggle is on. */}
+      {feedbackEnabled && allowLikes && (
+        <button
+          onClick={onLike}
+          className={`gallery-premium-like-btn ${isLiked ? 'liked' : ''}`}
+        >
+          <Heart
+            className={`w-5 h-5 ${isLiked ? 'fill-current' : ''}`}
+          />
+        </button>
+      )}
 
       {/* Selection Border */}
       {isSelected && (
@@ -502,6 +510,7 @@ export const GalleryPremiumLayout: React.FC<GalleryPremiumLayoutProps> = ({
                   useEnhancedProtection={useEnhancedProtection}
                   useCanvasRendering={useCanvasRendering}
                   feedbackEnabled={feedbackEnabled}
+                  allowLikes={!!feedbackOptions?.allowLikes}
                   index={photoIndex}
                 />
               );
diff --git a/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx b/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
index d4d6dfa4..2335afe2 100644
--- a/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
@@ -105,7 +105,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
                   <Download className="w-5 h-5 text-neutral-800" />
                 </button>
               )}
-              {feedbackOptions?.allowLikes && (
+              {feedbackEnabled && feedbackOptions?.allowLikes && (
                 <button
                   className={`p-2 rounded-full transition-colors ${likedLocal ? 'bg-red-500/90 hover:bg-red-500' : 'bg-white/90 hover:bg-white'}`}
                   onClick={async (e) => {
diff --git a/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx b/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx
index ca31f687..279fdbb7 100644
--- a/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx
@@ -144,7 +144,7 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                               <Download className="w-5 h-5 text-neutral-800" />
                             </button>
                           )}
-                          {feedbackOptions?.allowLikes && (
+                          {feedbackEnabled && feedbackOptions?.allowLikes && (
                             <button
                               className={`p-2 rounded-full transition-colors ${likedIds.has(photo.id) ? 'bg-red-500/90 hover:bg-red-500' : 'bg-white/90 hover:bg-white'}`}
                               onClick={async (e) => {