From 19f8facc49f2250a8279d6cc73f1c9a28389df41 Mon Sep 17 00:00:00 2001
From: paul <paul-nothaft@hotmail.de>
Date: Wed, 17 Sep 2025 22:27:13 +0200
Subject: [PATCH] Refine gallery feedback actions

---
 backend/src/routes/gallery.js                 |  81 +++++++++
 .../src/components/gallery/GalleryFilter.tsx  |  49 +++---
 .../src/components/gallery/GallerySidebar.tsx |   6 +-
 .../src/components/gallery/GalleryView.tsx    |  25 ++-
 .../src/components/gallery/PhotoFeedback.tsx  |  28 +---
 .../src/components/gallery/PhotoFilterBar.tsx |  24 +--
 frontend/src/components/gallery/PhotoGrid.tsx |  38 ++---
 .../gallery/PhotoGridWithLayouts.tsx          |  51 +++---
 .../src/components/gallery/PhotoLightbox.tsx  | 154 +++++++++++++++++-
 frontend/src/components/gallery/index.ts      |   1 -
 .../gallery/layouts/BaseGalleryLayout.tsx     |   4 +
 .../gallery/layouts/CarouselGalleryLayout.tsx |  47 +++---
 .../gallery/layouts/GridGalleryLayout.tsx     | 105 +++++++-----
 .../gallery/layouts/HeroGalleryLayout.tsx     |  85 +++++-----
 .../gallery/layouts/MasonryGalleryLayout.tsx  |  46 +++---
 .../gallery/layouts/MosaicGalleryLayout.tsx   | 144 +++++++++-------
 .../gallery/layouts/TimelineGalleryLayout.tsx |  59 +++----
 frontend/src/hooks/useGallery.ts              |  11 +-
 frontend/src/services/gallery.service.ts      |  67 ++++++--
 package-lock.json                             |  64 ++++++++
 package.json                                  |   6 +-
 21 files changed, 719 insertions(+), 376 deletions(-)

diff --git a/backend/src/routes/gallery.js b/backend/src/routes/gallery.js
index e64105d..4bd0947 100644
--- a/backend/src/routes/gallery.js
+++ b/backend/src/routes/gallery.js
@@ -393,6 +393,87 @@ router.get('/:slug/download-all', verifyGalleryAccess, async (req, res) => {
   }
 });
 
+// Download selected photos as ZIP
+router.post('/:slug/download-selected', verifyGalleryAccess, async (req, res) => {
+  try {
+    // Check if downloads are allowed for this event
+    if (req.event.allow_downloads === false) {
+      return res.status(403).json({ error: 'Downloads are disabled for this gallery' });
+    }
+
+    const ids = Array.isArray(req.body?.photo_ids) ? req.body.photo_ids : [];
+    if (!ids.length) {
+      return res.status(400).json({ error: 'photo_ids is required (non-empty array)' });
+    }
+
+    // Clean IDs
+    const photoIds = ids
+      .map((v) => parseInt(v, 10))
+      .filter((v) => Number.isInteger(v))
+      .slice(0, 500);
+
+    if (photoIds.length === 0) {
+      return res.status(400).json({ error: 'No valid photo IDs provided' });
+    }
+
+    // Fetch photos
+    const photos = await db('photos')
+      .where('photos.event_id', req.event.id)
+      .whereIn('photos.id', photoIds)
+      .select('photos.*')
+      .orderBy('photos.uploaded_at', 'desc');
+
+    if (photos.length === 0) {
+      return res.status(404).json({ error: 'No photos found for selected IDs' });
+    }
+
+    const archiveName = `${req.event.slug}-selected.zip`;
+    res.setHeader('Content-Type', 'application/zip');
+    res.setHeader('Content-Disposition', `attachment; filename="${archiveName}"`);
+
+    const archive = archiver('zip', { zlib: { level: 5 } });
+    archive.on('error', (err) => {
+      console.error('Zip error:', err);
+      try { res.status(500).end(); } catch (e) {}
+    });
+    archive.pipe(res);
+
+    const { resolvePhotoFilePath } = require('../services/photoResolver');
+    const fs = require('fs');
+    // Check watermark settings similar to download-all
+    const watermarkSettings = await watermarkService.getWatermarkSettings();
+    for (const photo of photos) {
+      try {
+        const filePath = resolvePhotoFilePath(req.event, photo);
+        if (filePath && fs.existsSync(filePath)) {
+          const name = photo.filename || `photo-${photo.id}.jpg`;
+          if (watermarkSettings && watermarkSettings.enabled) {
+            // Apply watermark like download-all
+            const watermarkedBuffer = await watermarkService.applyWatermark(filePath, watermarkSettings);
+            archive.append(watermarkedBuffer, { name });
+          } else {
+            archive.file(filePath, { name });
+          }
+        }
+      } catch (e) {
+        // skip missing/inaccessible files
+      }
+    }
+
+    await archive.finalize();
+
+    await db('access_logs').insert({
+      event_id: req.event.id,
+      ip_address: req.ip,
+      user_agent: req.headers['user-agent'],
+      action: 'download_selected'
+    });
+  } catch (error) {
+    console.error('Error in download-selected:', error);
+    res.status(500).json({ error: 'Failed to download selected photos' });
+  }
+});
+
 
 // View single photo (with watermark if enabled)
 router.get('/:slug/photo/:photoId', 
diff --git a/frontend/src/components/gallery/GalleryFilter.tsx b/frontend/src/components/gallery/GalleryFilter.tsx
index 68db24c..c539563 100644
--- a/frontend/src/components/gallery/GalleryFilter.tsx
+++ b/frontend/src/components/gallery/GalleryFilter.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import { Heart, Star, Bookmark, MessageSquare } from 'lucide-react';
+import { Heart, Star, MessageSquare } from 'lucide-react';
 import { Button } from '../common';
 import { useTranslation } from 'react-i18next';
 
-export type FilterType = 'all' | 'liked' | 'favorited' | 'rated' | 'commented';
+export type FilterType = 'all' | 'liked' | 'rated' | 'commented';
 
 interface GalleryFilterProps {
   currentFilter: FilterType;
   onFilterChange: (filter: FilterType) => void;
   feedbackEnabled: boolean;
   likeCount?: number;
-  favoriteCount?: number;
+  ratedCount?: number;
   className?: string;
   isMobile?: boolean;
   variant?: 'default' | 'compact';
@@ -21,7 +21,7 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
   onFilterChange,
   feedbackEnabled,
   likeCount = 0,
-  favoriteCount = 0,
+  ratedCount = 0,
   className = '',
   isMobile = false,
   variant = 'default'
@@ -60,14 +60,23 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
               <Heart className="w-3.5 h-3.5" />
             </Button>
             <Button
-              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+              variant={currentFilter === 'rated' ? 'primary' : 'outline'}
               size="sm"
-              onClick={() => onFilterChange('favorited')}
+              onClick={() => onFilterChange('rated')}
               className="p-1 w-8 h-8 flex items-center justify-center"
-              aria-label={t('feedback.favorites', 'Favorites')}
+              aria-label={t('gallery.rated', 'Rated')}
             >
               <Star className="w-3.5 h-3.5" />
             </Button>
+            <Button
+              variant={currentFilter === 'commented' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('commented')}
+              className="p-1 w-8 h-8 flex items-center justify-center"
+              aria-label={t('gallery.commented', 'Commented')}
+            >
+              <MessageSquare className="w-3.5 h-3.5" />
+            </Button>
           </div>
         </div>
       </div>
@@ -103,13 +112,13 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
             </Button>
             
             <Button
-              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+              variant={currentFilter === 'rated' ? 'primary' : 'outline'}
               size="sm"
-              onClick={() => onFilterChange('favorited')}
+              onClick={() => onFilterChange('rated')}
               className="text-xs flex-1 min-w-[80px] flex items-center justify-center gap-1"
             >
               <Star className="w-3 h-3" />
-              <span>{favoriteCount > 0 ? favoriteCount : t('gallery.favorites', 'Favorites')}</span>
+              <span>{ratedCount > 0 ? ratedCount : t('gallery.rated', 'Rated')}</span>
             </Button>
           </div>
         </div>
@@ -144,21 +153,6 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
               )}
             </Button>
             
-            <Button
-              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
-              size="sm"
-              onClick={() => onFilterChange('favorited')}
-              className="text-xs sm:text-sm flex items-center gap-1"
-            >
-              <Bookmark className="w-3 h-3 sm:w-4 sm:h-4" />
-              <span className="hidden sm:inline">{t('gallery.favorites', 'Favorites')}</span>
-              {favoriteCount > 0 && (
-                <span className="bg-primary-100 text-primary-700 px-1.5 rounded">
-                  {favoriteCount}
-                </span>
-              )}
-            </Button>
-
             <Button
               variant={currentFilter === 'rated' ? 'primary' : 'outline'}
               size="sm"
@@ -167,6 +161,11 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
             >
               <Star className="w-3 h-3 sm:w-4 sm:h-4" />
               <span className="hidden sm:inline">{t('gallery.rated', 'Rated')}</span>
+              {ratedCount > 0 && (
+                <span className="bg-primary-100 text-primary-700 px-1.5 rounded">
+                  {ratedCount}
+                </span>
+              )}
             </Button>
 
             <Button
diff --git a/frontend/src/components/gallery/GallerySidebar.tsx b/frontend/src/components/gallery/GallerySidebar.tsx
index 3a0663a..3e97a20 100644
--- a/frontend/src/components/gallery/GallerySidebar.tsx
+++ b/frontend/src/components/gallery/GallerySidebar.tsx
@@ -33,7 +33,7 @@ interface GallerySidebarProps {
   filterType?: FilterType;
   onFilterChange?: (filter: FilterType) => void;
   likeCount?: number;
-  favoriteCount?: number;
+  ratedCount?: number;
 }
 
 export const GallerySidebar: React.FC<GallerySidebarProps> = ({
@@ -64,7 +64,7 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
   filterType = 'all',
   onFilterChange,
   likeCount = 0,
-  favoriteCount = 0
+  ratedCount = 0
 }) => {
   const { t } = useTranslation();
   const sidebarRef = useRef<HTMLDivElement>(null);
@@ -223,7 +223,7 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
                 }}
                 feedbackEnabled={feedbackEnabled}
                 likeCount={likeCount}
-                favoriteCount={favoriteCount}
+                ratedCount={ratedCount}
                 className="w-full"
                 variant="compact"
               />
diff --git a/frontend/src/components/gallery/GalleryView.tsx b/frontend/src/components/gallery/GalleryView.tsx
index a46eb38..7101194 100644
--- a/frontend/src/components/gallery/GalleryView.tsx
+++ b/frontend/src/components/gallery/GalleryView.tsx
@@ -22,6 +22,7 @@ import { Upload, Menu } from 'lucide-react';
 import { galleryService } from '../../services/gallery.service';
 import { feedbackService } from '../../services/feedback.service';
 import { useWatermarkSettings } from '../../hooks/useWatermarkSettings';
+import type { Photo } from '../../types';
 
 interface GalleryViewProps {
   slug: string;
@@ -58,6 +59,7 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
   const [protectionLevel, setProtectionLevel] = useState<'basic' | 'standard' | 'enhanced' | 'maximum'>('standard');
   const [filterType, setFilterType] = useState<FilterType>('all');
   const [guestId, setGuestId] = useState<string>('');
+  const [staticHeroPhoto, setStaticHeroPhoto] = useState<Photo | null>(null);
   
   // Generate a unique guest ID for this session
   useEffect(() => {
@@ -167,6 +169,23 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
     }
   }, [settingsData]);
 
+  // Determine a stable hero photo from the initial (unfiltered) load
+  useEffect(() => {
+    if (!staticHeroPhoto && data?.photos && filterType === 'all') {
+      let hero: Photo | null = null;
+      const heroId = data?.event?.hero_photo_id || null;
+      if (heroId) {
+        hero = data.photos.find(p => p.id === heroId) || null;
+      }
+      if (!hero && data.photos.length > 0) {
+        hero = data.photos[0];
+      }
+      if (hero) {
+        setStaticHeroPhoto(hero);
+      }
+    }
+  }, [data?.photos, data?.event?.hero_photo_id, filterType, staticHeroPhoto]);
+
   // Apply theme when settings are loaded
   useEffect(() => {
     if (settingsData && data?.event) {
@@ -440,7 +459,7 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
           filterType={filterType}
           onFilterChange={setFilterType}
           likeCount={data?.photos?.filter(p => p.like_count > 0).length || 0}
-          favoriteCount={data?.photos?.filter(p => p.favorite_count > 0).length || 0}
+          ratedCount={data?.photos?.filter(p => (p.total_ratings || 0) > 0).length || 0}
         />
       ) : null}
 
@@ -531,8 +550,6 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
               feedbackEnabled={feedbackEnabled}
               currentFilter={filterType}
               onFilterChange={setFilterType}
-              likeCount={data?.photos?.filter(p => p.like_count > 0).length || 0}
-              favoriteCount={data?.photos?.filter(p => p.favorite_count > 0).length || 0}
             />
           </div>
         ) : null}
@@ -543,6 +560,8 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
             photos={filteredPhotos} 
             slug={slug} 
             categoryId={selectedCategoryId}
+            onFeedbackChange={() => refetch()}
+            heroPhotoOverride={staticHeroPhoto}
             feedbackEnabled={feedbackEnabled}
             feedbackOptions={{
               allowLikes: !!feedbackSettings?.allow_likes,
diff --git a/frontend/src/components/gallery/PhotoFeedback.tsx b/frontend/src/components/gallery/PhotoFeedback.tsx
index 0a3353b..dac4d20 100644
--- a/frontend/src/components/gallery/PhotoFeedback.tsx
+++ b/frontend/src/components/gallery/PhotoFeedback.tsx
@@ -4,7 +4,6 @@ import { feedbackService } from '../../services/feedback.service';
 import { PhotoRating } from './PhotoRating';
 import { PhotoLikes } from './PhotoLikes';
 import { PhotoComments } from './PhotoComments';
-import { PhotoFavorites } from './PhotoFavorites';
 import { Skeleton } from '../common';
 import type { FeedbackSettings } from '../../services/feedback.service';
 
@@ -43,18 +42,14 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
   // Local state for optimistic updates
   const [currentRating, setCurrentRating] = useState(0);
   const [isLiked, setIsLiked] = useState(false);
-  const [isFavorited, setIsFavorited] = useState(false);
   const [likeCount, setLikeCount] = useState(0);
-  const [favoriteCount, setFavoriteCount] = useState(0);
 
   // Update local state when data loads
   useEffect(() => {
     if (feedbackData) {
       setCurrentRating(feedbackData.my_feedback.rating || 0);
       setIsLiked(feedbackData.my_feedback.liked);
-      setIsFavorited(feedbackData.my_feedback.favorited);
       setLikeCount(feedbackData.summary.like_count);
-      setFavoriteCount(feedbackData.summary.favorite_count);
     }
   }, [feedbackData]);
 
@@ -70,12 +65,6 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
     if (onFeedbackUpdate) onFeedbackUpdate();
   };
 
-  const handleFavoriteChange = (favorited: boolean) => {
-    setIsFavorited(favorited);
-    setFavoriteCount(prev => favorited ? prev + 1 : Math.max(0, prev - 1));
-    if (onFeedbackUpdate) onFeedbackUpdate();
-  };
-
   if (settingsLoading) {
     return (
       <div className={`space-y-3 ${className}`}>
@@ -90,7 +79,7 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
   }
 
   const hasAnyFeedbackType = settings.allow_ratings || settings.allow_likes || 
-                            settings.allow_comments || settings.allow_favorites;
+                            settings.allow_comments;
 
   if (!hasAnyFeedbackType) {
     return null;
@@ -113,7 +102,7 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
       )}
 
       {/* Action Buttons */}
-      {(settings.allow_likes || settings.allow_favorites) && (
+      {settings.allow_likes && (
         <div className="flex items-center gap-2">
           {settings.allow_likes && (
             <PhotoLikes
@@ -126,17 +115,6 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
               onLikeChange={handleLikeChange}
             />
           )}
-          {settings.allow_favorites && (
-            <PhotoFavorites
-              photoId={photoId}
-              gallerySlug={gallerySlug}
-              isFavorited={isFavorited}
-              favoriteCount={favoriteCount}
-              isEnabled={true}
-              requireNameEmail={settings.require_name_email || false}
-              onFavoriteChange={handleFavoriteChange}
-            />
-          )}
         </div>
       )}
 
@@ -158,4 +136,4 @@ export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
       )}
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/components/gallery/PhotoFilterBar.tsx b/frontend/src/components/gallery/PhotoFilterBar.tsx
index c09c0ce..eae226d 100644
--- a/frontend/src/components/gallery/PhotoFilterBar.tsx
+++ b/frontend/src/components/gallery/PhotoFilterBar.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Search, SortAsc, Grid, Heart, Star, Bookmark, MessageSquare } from 'lucide-react';
+import { Search, SortAsc, Grid, Heart, Star, MessageSquare } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button, Input } from '../common';
 import type { FilterType } from './GalleryFilter';
@@ -32,8 +32,6 @@ interface PhotoFilterBarProps {
   feedbackEnabled?: boolean;
   currentFilter?: FilterType;
   onFilterChange?: (filter: FilterType) => void;
-  likeCount?: number;
-  favoriteCount?: number;
 }
 
 export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
@@ -49,8 +47,6 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
   feedbackEnabled = false,
   currentFilter = 'all',
   onFilterChange,
-  likeCount = 0,
-  favoriteCount = 0,
 }) => {
   const { t } = useTranslation();
   const [showSortMenu, setShowSortMenu] = useState(false);
@@ -199,15 +195,6 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
                   >
                     <Heart className="w-3.5 h-3.5" />
                   </Button>
-                  <Button
-                    variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
-                    size="sm"
-                    onClick={() => onFilterChange('favorited')}
-                    className="p-1 w-8 h-8 flex items-center justify-center"
-                    aria-label={t('feedback.favorites', 'Favorites')}
-                  >
-                    <Bookmark className="w-3.5 h-3.5" />
-                  </Button>
                   <Button
                     variant={currentFilter === 'rated' ? 'primary' : 'outline'}
                     size="sm"
@@ -261,15 +248,6 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
               >
                 <Heart className="w-3.5 h-3.5" />
               </Button>
-              <Button
-                variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
-                size="sm"
-                onClick={() => onFilterChange('favorited')}
-                className="p-1 w-8 h-8 flex items-center justify-center"
-                aria-label={t('feedback.favorites', 'Favorites')}
-              >
-                <Bookmark className="w-3.5 h-3.5" />
-              </Button>
               <Button
                 variant={currentFilter === 'rated' ? 'primary' : 'outline'}
                 size="sm"
diff --git a/frontend/src/components/gallery/PhotoGrid.tsx b/frontend/src/components/gallery/PhotoGrid.tsx
index 5d78cc2..0ba3fba 100644
--- a/frontend/src/components/gallery/PhotoGrid.tsx
+++ b/frontend/src/components/gallery/PhotoGrid.tsx
@@ -95,35 +95,17 @@ export const PhotoGrid: React.FC<PhotoGridProps> = ({
 
   const handleDownloadSelected = async () => {
     if (selectedPhotos.size === 0) return;
-    
-    const selectedPhotosList = photos.filter(p => selectedPhotos.has(p.id));
-    
-    toastify.info(t('gallery.downloading', { count: selectedPhotos.size }));
-    
-    // Download each selected photo
-    const downloadPromises = selectedPhotosList.map(photo => 
-      galleryService.downloadPhoto(slug, photo.id, photo.filename)
-        .catch(err => {
-          // Download failed - error handled by UI
-          return null;
-        })
-    );
-    
+    const ids = Array.from(selectedPhotos);
+    toastify.info(t('gallery.downloading', { count: ids.length }));
+
     try {
-      await Promise.all(downloadPromises);
-      toastify.success(t('gallery.downloadedPhotos', { count: selectedPhotos.size }));
-      
-      // Track bulk download
-      analyticsService.trackGalleryEvent('bulk_download', {
-        gallery: slug,
-        photo_count: selectedPhotos.size
-      });
-      
-      // Clear selection after download
-      setSelectedPhotos(new Set());
-      setIsSelectionMode(false);
+      await galleryService.downloadSelectedPhotos(slug, ids);
+      analyticsService.trackGalleryEvent('bulk_download_selected', { gallery: slug, photo_count: ids.length });
     } catch (error) {
       toastify.error(t('gallery.downloadError'));
+    } finally {
+      setSelectedPhotos(new Set());
+      setIsSelectionMode(false);
     }
   };
 
@@ -316,7 +298,7 @@ const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
           )}
           
           {/* Overlay on hover/tap - Always visible on mobile for better UX */}
-          <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2">
+          <div className="absolute inset-0 bg-black/40 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2">
             {!isSelectionMode && (
               <>
                 <button
@@ -365,4 +347,4 @@ const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
       )}
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/components/gallery/PhotoGridWithLayouts.tsx b/frontend/src/components/gallery/PhotoGridWithLayouts.tsx
index 6254997..f725e17 100644
--- a/frontend/src/components/gallery/PhotoGridWithLayouts.tsx
+++ b/frontend/src/components/gallery/PhotoGridWithLayouts.tsx
@@ -25,6 +25,9 @@ interface PhotoGridWithLayoutsProps {
   photos: Photo[];
   slug: string;
   categoryId?: number | null;
+  // When provided, the hero layout will use this photo
+  // instead of deriving from the filtered photo list.
+  heroPhotoOverride?: Photo | null;
   isSelectionMode?: boolean;
   selectedPhotos?: Set<number>;
   onSelectionChange?: (photos: Set<number>) => void;
@@ -45,16 +48,19 @@ interface PhotoGridWithLayoutsProps {
     allowComments?: boolean;
     requireNameEmail?: boolean;
   };
+  onFeedbackChange?: () => void;
 }
 
 export const PhotoGridWithLayouts: React.FC<PhotoGridWithLayoutsProps> = ({ 
   photos, 
   slug, 
   categoryId,
+  heroPhotoOverride,
   isSelectionMode: parentSelectionMode,
   selectedPhotos: parentSelectedPhotos,
   feedbackEnabled,
   feedbackOptions,
+  onFeedbackChange,
   allowDownloads = true,
   protectionLevel = 'standard',
   useEnhancedProtection = false,
@@ -69,6 +75,7 @@ export const PhotoGridWithLayouts: React.FC<PhotoGridWithLayoutsProps> = ({
   const { t } = useTranslation();
   const { theme } = useTheme();
   const [selectedPhotoIndex, setSelectedPhotoIndex] = useState<number | null>(null);
+  const [openFeedbackInitially, setOpenFeedbackInitially] = useState<boolean>(false);
   const [localSelectedPhotos, setLocalSelectedPhotos] = useState<Set<number>>(new Set());
   const [localSelectionMode, setLocalSelectionMode] = useState(false);
   const downloadPhotoMutation = useDownloadPhoto();
@@ -85,6 +92,12 @@ export const PhotoGridWithLayouts: React.FC<PhotoGridWithLayoutsProps> = ({
   }, [categoryId]);
 
   const handlePhotoClick = (index: number) => {
+    setOpenFeedbackInitially(false);
+    setSelectedPhotoIndex(index);
+  };
+
+  const handleOpenWithFeedback = (index: number) => {
+    setOpenFeedbackInitially(true);
     setSelectedPhotoIndex(index);
   };
 
@@ -130,39 +143,21 @@ export const PhotoGridWithLayouts: React.FC<PhotoGridWithLayoutsProps> = ({
 
   const handleDownloadSelected = async () => {
     if (selectedPhotos.size === 0) return;
-    
-    const selectedPhotosList = photos.filter(p => selectedPhotos.has(p.id));
-    
-    toastify.info(t('gallery.downloading', { count: selectedPhotos.size }));
-    
-    // Download each selected photo
-    const downloadPromises = selectedPhotosList.map(photo => 
-      galleryService.downloadPhoto(slug, photo.id, photo.filename)
-        .catch(err => {
-          // Download failed - error handled by UI
-          return null;
-        })
-    );
-    
+    const ids = Array.from(selectedPhotos);
+    toastify.info(t('gallery.downloading', { count: ids.length }));
+
     try {
-      await Promise.all(downloadPromises);
-      toastify.success(t('gallery.downloadedPhotos', { count: selectedPhotos.size }));
-      
-      // Track bulk download
-      analyticsService.trackGalleryEvent('bulk_download', {
-        gallery: slug,
-        photo_count: selectedPhotos.size
-      });
-      
-      // Clear selection after download
+      await galleryService.downloadSelectedPhotos(slug, ids);
+      analyticsService.trackGalleryEvent('bulk_download_selected', { gallery: slug, photo_count: ids.length });
+    } catch (error) {
+      toastify.error(t('gallery.downloadError'));
+    } finally {
       setSelectedPhotos(new Set());
       if (parentToggleSelectionMode) {
         parentToggleSelectionMode();
       } else {
         setLocalSelectionMode(false);
       }
-    } catch (error) {
-      toastify.error(t('gallery.downloadError'));
     }
   };
 
@@ -182,7 +177,10 @@ export const PhotoGridWithLayouts: React.FC<PhotoGridWithLayoutsProps> = ({
     photos,
     slug,
     onPhotoClick: handlePhotoClick,
+    onOpenPhotoWithFeedback: handleOpenWithFeedback,
+    onFeedbackChange: onFeedbackChange,
     onDownload: handleDownload,
+    heroPhotoOverride,
     selectedPhotos,
     allowDownloads,
     protectionLevel,
@@ -292,6 +290,7 @@ export const PhotoGridWithLayouts: React.FC<PhotoGridWithLayoutsProps> = ({
           allowDownloads={allowDownloads}
           protectionLevel={protectionLevel}
           useEnhancedProtection={useEnhancedProtection}
+          initialShowFeedback={openFeedbackInitially}
         />
       )}
     </>
diff --git a/frontend/src/components/gallery/PhotoLightbox.tsx b/frontend/src/components/gallery/PhotoLightbox.tsx
index b43bb5c..ac9d60e 100644
--- a/frontend/src/components/gallery/PhotoLightbox.tsx
+++ b/frontend/src/components/gallery/PhotoLightbox.tsx
@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useDevToolsProtection } from '../../hooks/useDevToolsProtection';
-import { X, ChevronLeft, ChevronRight, Download, ZoomIn, ZoomOut, MessageSquare } from 'lucide-react';
+import { X, ChevronLeft, ChevronRight, Download, ZoomIn, ZoomOut, MessageSquare, Heart, Star } from 'lucide-react';
 import type { Photo } from '../../types';
 import { useDownloadPhoto } from '../../hooks/useGallery';
 import { AuthenticatedImage } from '../common';
 import { PhotoFeedback } from './PhotoFeedback';
+import { feedbackService } from '../../services/feedback.service';
+import { FeedbackIdentityModal } from './FeedbackIdentityModal';
 
 interface PhotoLightboxProps {
   photos: Photo[];
@@ -37,6 +39,20 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
   const [touchDistance, setTouchDistance] = useState<number | null>(null);
   const [showFeedback, setShowFeedback] = useState(initialShowFeedback);
   const [isSmallScreen, setIsSmallScreen] = useState<boolean>(typeof window !== 'undefined' ? window.innerWidth < 640 : false);
+  const [feedbackSettings, setFeedbackSettings] = useState<{
+    feedback_enabled?: boolean;
+    allow_likes?: boolean;
+    allow_ratings?: boolean;
+    require_name_email?: boolean;
+  } | null>(null);
+  const [myLiked, setMyLiked] = useState<boolean>(false);
+  const [myRating, setMyRating] = useState<number>(0);
+  const [likeCount, setLikeCount] = useState<number>(0);
+  const [avgRating, setAvgRating] = useState<number>(0);
+  const [totalRatings, setTotalRatings] = useState<number>(0);
+  const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
+  const [showIdentityModal, setShowIdentityModal] = useState(false);
+  const [pendingAction, setPendingAction] = useState<null | { type: 'like' | 'rating'; rating?: number }>(null);
 
   useEffect(() => {
     const onResize = () => setIsSmallScreen(window.innerWidth < 640);
@@ -120,6 +136,81 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
     };
   }, [currentIndex]);
 
+  // Load feedback settings once
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        const settings = await feedbackService.getGalleryFeedbackSettings(slug);
+        if (mounted) setFeedbackSettings(settings as any);
+      } catch {
+        // ignore
+      }
+    })();
+    return () => { mounted = false; };
+  }, [slug]);
+
+  // Load my feedback for the current photo
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        if (!feedbackSettings?.feedback_enabled) return;
+        const data = await feedbackService.getPhotoFeedback(slug, String(currentPhoto.id));
+        if (!mounted) return;
+        setMyLiked(!!data.my_feedback.liked);
+        setMyRating(data.my_feedback.rating || 0);
+        setLikeCount(Number(data.summary?.like_count) || 0);
+        setAvgRating(Number(data.summary?.average_rating) || 0);
+        setTotalRatings(Number(data.summary?.total_ratings) || 0);
+      } catch {
+        // ignore
+      }
+    })();
+    return () => { mounted = false; };
+  }, [slug, currentPhoto.id, feedbackSettings?.feedback_enabled]);
+
+  const submitLike = async () => {
+    const needIdentity = feedbackSettings?.require_name_email && !savedIdentity;
+    if (needIdentity) {
+      setPendingAction({ type: 'like' });
+      setShowIdentityModal(true);
+      return;
+    }
+    await feedbackService.submitFeedback(slug, String(currentPhoto.id), {
+      feedback_type: 'like',
+      guest_name: savedIdentity?.name,
+      guest_email: savedIdentity?.email,
+    });
+    setMyLiked(prev => {
+      const next = !prev;
+      setLikeCount(c => Math.max(0, c + (next ? 1 : -1)));
+      return next;
+    });
+  };
+
+  const submitRating = async (value: number) => {
+    const needIdentity = feedbackSettings?.require_name_email && !savedIdentity;
+    if (needIdentity) {
+      setPendingAction({ type: 'rating', rating: value });
+      setShowIdentityModal(true);
+      return;
+    }
+    await feedbackService.submitFeedback(slug, String(currentPhoto.id), {
+      feedback_type: 'rating',
+      rating: value,
+      guest_name: savedIdentity?.name,
+      guest_email: savedIdentity?.email,
+    });
+    setMyRating(value);
+    // Refresh current summary to reflect average and totals
+    try {
+      const fresh = await feedbackService.getPhotoFeedback(slug, String(currentPhoto.id));
+      setAvgRating(Number(fresh.summary?.average_rating) || 0);
+      setTotalRatings(Number(fresh.summary?.total_ratings) || 0);
+    } catch {}
+  };
+
   const goToPrevious = () => {
     setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
     resetZoom();
@@ -292,6 +383,39 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
                 <Download className="w-5 h-5 text-white" />
               </button>
             )}
+
+            {/* Inline Like */}
+            {feedbackEnabled && feedbackSettings?.allow_likes && (
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={submitLike}
+                  className={`p-2 rounded-full transition-colors ${myLiked ? 'bg-red-500/80 hover:bg-red-500' : 'bg-white/10 hover:bg-white/20'}`}
+                  aria-label={myLiked ? 'Unlike photo' : 'Like photo'}
+                  title={myLiked ? 'Unlike' : 'Like'}
+                >
+                  <Heart className={`w-5 h-5 ${myLiked ? 'text-white' : 'text-white'}`} />
+                </button>
+                <span className="text-white text-xs min-w-[1.5rem] text-center select-none">{likeCount}</span>
+              </div>
+            )}
+
+            {/* Inline Rating */}
+            {feedbackEnabled && feedbackSettings?.allow_ratings && (
+              <div className="flex items-center gap-1 ml-1" aria-label="Rate photo">
+                {[1,2,3,4,5].map((i) => (
+                  <button
+                    key={i}
+                    onClick={() => submitRating(i)}
+                    className="p-1"
+                    aria-label={`Rate ${i} star${i>1?'s':''}`}
+                    title={`Rate ${i}`}
+                  >
+                    <Star className={`w-5 h-5 ${myRating >= i ? 'text-yellow-400 fill-yellow-400' : 'text-white/70'}`} />
+                  </button>
+                ))}
+                <span className="text-white/90 text-xs ml-2 select-none">{avgRating.toFixed(1)} ({totalRatings})</span>
+              </div>
+            )}
             
             {/* Feedback button with indicator */}
             {feedbackEnabled && (
@@ -403,6 +527,34 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
           </div>
         </div>
       )}
+
+      {/* Identity Modal for required name/email */}
+      <FeedbackIdentityModal
+        isOpen={showIdentityModal}
+        onClose={() => { setShowIdentityModal(false); setPendingAction(null); }}
+        onSubmit={async (name, email) => {
+          setSavedIdentity({ name, email });
+          setShowIdentityModal(false);
+          if (pendingAction?.type === 'like') {
+            await feedbackService.submitFeedback(slug, String(currentPhoto.id), {
+              feedback_type: 'like',
+              guest_name: name,
+              guest_email: email,
+            });
+            setMyLiked(true);
+          } else if (pendingAction?.type === 'rating' && pendingAction.rating) {
+            await feedbackService.submitFeedback(slug, String(currentPhoto.id), {
+              feedback_type: 'rating',
+              rating: pendingAction.rating,
+              guest_name: name,
+              guest_email: email,
+            });
+            setMyRating(pendingAction.rating);
+          }
+          setPendingAction(null);
+        }}
+        feedbackType={pendingAction?.type === 'rating' ? 'rating' : 'like'}
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/gallery/index.ts b/frontend/src/components/gallery/index.ts
index a89ae0a..7229843 100644
--- a/frontend/src/components/gallery/index.ts
+++ b/frontend/src/components/gallery/index.ts
@@ -10,4 +10,3 @@ export { PhotoFeedback } from './PhotoFeedback';
 export { PhotoRating } from './PhotoRating';
 export { PhotoLikes } from './PhotoLikes';
 export { PhotoComments } from './PhotoComments';
-export { PhotoFavorites } from './PhotoFavorites';
\ No newline at end of file
diff --git a/frontend/src/components/gallery/layouts/BaseGalleryLayout.tsx b/frontend/src/components/gallery/layouts/BaseGalleryLayout.tsx
index 89baba8..90b7d41 100644
--- a/frontend/src/components/gallery/layouts/BaseGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/BaseGalleryLayout.tsx
@@ -5,6 +5,10 @@ export interface BaseGalleryLayoutProps {
   photos: Photo[];
   slug: string;
   onPhotoClick: (index: number) => void;
+  // Optional: open the lightbox with feedback panel visible
+  onOpenPhotoWithFeedback?: (index: number) => void;
+  // Notify parent that feedback (like/favorite/rating/comment) changed
+  onFeedbackChange?: () => void;
   onDownload: (photo: Photo, e: React.MouseEvent) => void;
   selectedPhotos?: Set<number>;
   isSelectionMode?: boolean;
diff --git a/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx b/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx
index a44c6cc..61da92b 100644
--- a/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { ChevronLeft, ChevronRight, Download, Maximize2, Play, Pause, Heart, Bookmark } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Download, Maximize2, Play, Pause, Heart, MessageSquare } from 'lucide-react';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { AuthenticatedImage, Button } from '../../common';
 import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
@@ -10,6 +10,7 @@ export const CarouselGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
   photos,
   slug,
   onPhotoClick,
+  onOpenPhotoWithFeedback,
   onDownload,
   allowDownloads = true,
   feedbackEnabled = false,
@@ -63,8 +64,10 @@ export const CarouselGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
 
   const currentPhoto = photos[currentIndex];
   const [showIdentityModal, setShowIdentityModal] = useState(false);
-  const [pendingAction, setPendingAction] = useState<null | { type: 'like' | 'favorite'; photoId: number }>(null);
+  const [pendingAction, setPendingAction] = useState<null | { type: 'like'; photoId: number }>(null);
   const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
+  const [likedIds, setLikedIds] = useState<Set<number>>(new Set());
+  const canQuickComment = Boolean(feedbackEnabled && feedbackOptions?.allowComments && onOpenPhotoWithFeedback);
 
   return (
     <div className="relative">
@@ -142,7 +145,7 @@ export const CarouselGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 <Download className="w-5 h-5" />
               </Button>
             )}
-            {feedbackEnabled && feedbackOptions?.allowLikes && (
+            {feedbackOptions?.allowLikes && (
               <Button
                 variant="ghost"
                 size="sm"
@@ -152,38 +155,32 @@ export const CarouselGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                     setShowIdentityModal(true);
                     return;
                   }
-                  await feedbackService.submitFeedback(slug!, String(currentPhoto.id), {
-                    feedback_type: 'like',
-                    guest_name: savedIdentity?.name,
-                    guest_email: savedIdentity?.email,
-                  });
+                  setLikedIds(prev => new Set(prev).add(currentPhoto.id));
+                  try {
+                    await feedbackService.submitFeedback(slug!, String(currentPhoto.id), {
+                      feedback_type: 'like',
+                      guest_name: savedIdentity?.name,
+                      guest_email: savedIdentity?.email,
+                    });
+                  } catch (_) {}
                 }}
-                className="text-white hover:bg-white/20"
+                className={`hover:bg-white/20 ${likedIds.has(currentPhoto.id) ? 'text-red-400' : 'text-white'}`}
                 title="Like photo"
+                aria-pressed={likedIds.has(currentPhoto.id)}
               >
                 <Heart className="w-5 h-5" />
               </Button>
             )}
-            {feedbackEnabled && feedbackOptions?.allowFavorites && (
+            {canQuickComment && (
               <Button
                 variant="ghost"
                 size="sm"
-                onClick={async () => {
-                  if (feedbackOptions?.requireNameEmail && !savedIdentity) {
-                    setPendingAction({ type: 'favorite', photoId: currentPhoto.id });
-                    setShowIdentityModal(true);
-                    return;
-                  }
-                  await feedbackService.submitFeedback(slug!, String(currentPhoto.id), {
-                    feedback_type: 'favorite',
-                    guest_name: savedIdentity?.name,
-                    guest_email: savedIdentity?.email,
-                  });
-                }}
+                onClick={() => { onOpenPhotoWithFeedback?.(currentIndex); }}
                 className="text-white hover:bg-white/20"
-                title="Favorite photo"
+                title="Comment"
+                aria-label="Comment on photo"
               >
-                <Bookmark className="w-5 h-5" />
+                <MessageSquare className="w-5 h-5" />
               </Button>
             )}
           </div>
@@ -246,7 +243,7 @@ export const CarouselGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
             setPendingAction(null);
           }
         }}
-        feedbackType={pendingAction?.type === 'favorite' ? 'favorite' : 'like'}
+        feedbackType="like"
       />
 
       <style>{`
diff --git a/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx b/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx
index e8e0379..51e1d19 100644
--- a/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Download, Maximize2, Check, MessageSquare, Star, Heart, Bookmark } from 'lucide-react';
+import { Download, Maximize2, Check, MessageSquare, Star, Heart } from 'lucide-react';
 import { useInView } from 'react-intersection-observer';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { AuthenticatedImage } from '../../common';
@@ -23,13 +23,17 @@ interface GridPhotoProps {
   feedbackEnabled?: boolean;
   feedbackOptions?: {
     allowLikes?: boolean;
-    allowFavorites?: boolean;
     allowRatings?: boolean;
     allowComments?: boolean;
     requireNameEmail?: boolean;
   };
   savedIdentity?: { name: string; email: string } | null;
-  onRequireIdentity?: (action: 'like' | 'favorite', photoId: number) => void;
+  onRequireIdentity?: (action: 'like', photoId: number) => void;
+  onQuickComment?: () => void;
+  onFeedbackChange?: () => void;
+  // Immediate UI like state and callback
+  liked?: boolean;
+  onLikeSuccess?: () => void;
 }
 
 const GridPhoto: React.FC<GridPhotoProps> = ({
@@ -45,7 +49,13 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
   protectionLevel = 'standard',
   useEnhancedProtection = false,
   feedbackEnabled = false,
-  feedbackOptions
+  feedbackOptions,
+  savedIdentity,
+  onRequireIdentity,
+  onQuickComment,
+  onFeedbackChange,
+  liked = false,
+  onLikeSuccess
 }) => {
   // handled by parent layout; kept here for type completeness but not used
   const { ref, inView } = useInView({
@@ -94,7 +104,7 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
             }}
           />
           
-          <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2">
+          <div className="absolute inset-0 bg-black/40 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2">
             {!isSelectionMode && (
               <>
                 <button
@@ -116,47 +126,45 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
                     <Download className="w-5 h-5 text-neutral-800" />
                   </button>
                 )}
+                {onQuickComment && (
+                  <button
+                    className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                    onClick={(e) => { e.stopPropagation(); onQuickComment(); }}
+                    aria-label="Comment on photo"
+                    title="Comment"
+                  >
+                    <MessageSquare className="w-5 h-5 text-neutral-800" />
+                  </button>
+                )}
                 {/* Quick feedback actions */}
                 {feedbackOptions?.allowLikes && (
                   <button
-                    className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                    className={`p-2 rounded-full transition-colors ${liked ? 'bg-red-500/90 hover:bg-red-500' : 'bg-white/90 hover:bg-white'}`}
                     onClick={async (e) => {
                       e.stopPropagation();
                       if (feedbackOptions?.requireNameEmail && !savedIdentity && onRequireIdentity) {
                         onRequireIdentity('like', photo.id);
                         return;
                       }
-                      await feedbackService.submitFeedback(slug!, String(photo.id), {
-                        feedback_type: 'like',
-                        guest_name: savedIdentity?.name,
-                        guest_email: savedIdentity?.email,
-                      });
+                      // Optimistic UI: mark as liked immediately
+                      if (onLikeSuccess) onLikeSuccess();
+                      try {
+                        await feedbackService.submitFeedback(slug!, String(photo.id), {
+                          feedback_type: 'like',
+                          guest_name: savedIdentity?.name,
+                          guest_email: savedIdentity?.email,
+                        });
+                      } catch (err) {
+                        // Keep optimistic state; a refresh will reconcile
+                        console.warn('Like submit failed, keeping optimistic UI', err);
+                      }
+                      if (onFeedbackChange) onFeedbackChange();
                     }}
                     aria-label="Like photo"
+                    aria-pressed={liked}
                     title="Like"
                   >
-                    <Heart className="w-5 h-5 text-neutral-800" />
-                  </button>
-                )}
-                {feedbackOptions?.allowFavorites && (
-                  <button
-                    className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                    onClick={async (e) => {
-                      e.stopPropagation();
-                      if (feedbackOptions?.requireNameEmail && !savedIdentity && onRequireIdentity) {
-                        onRequireIdentity('favorite', photo.id);
-                        return;
-                      }
-                      await feedbackService.submitFeedback(slug!, String(photo.id), {
-                        feedback_type: 'favorite',
-                        guest_name: savedIdentity?.name,
-                        guest_email: savedIdentity?.email,
-                      });
-                    }}
-                    aria-label="Favorite photo"
-                    title="Favorite"
-                  >
-                    <Bookmark className="w-5 h-5 text-neutral-800" />
+                    <Heart className={`w-5 h-5 ${liked ? 'text-white fill-white' : 'text-neutral-800'}`} />
                   </button>
                 )}
               </>
@@ -180,10 +188,10 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
             </div>
           </button>
 
-          {/* Feedback Indicators (always visible, bottom-left) */}
-          {feedbackEnabled && (photo.comment_count > 0 || photo.average_rating > 0 || photo.like_count > 0) && (
+          {/* Feedback Indicators (always visible, bottom-left). Show like immediately when user liked */}
+          {(photo.comment_count > 0 || photo.average_rating > 0 || photo.like_count > 0 || liked) && (
             <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 flex items-center gap-1 z-10`}>
-              {photo.like_count > 0 && (
+              {(photo.like_count > 0 || liked) && (
                 <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
                   <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
                 </span>
@@ -220,6 +228,8 @@ export const GridGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
   photos,
   slug,
   onPhotoClick,
+  onOpenPhotoWithFeedback,
+  onFeedbackChange,
   onDownload,
   selectedPhotos = new Set(),
   isSelectionMode = false,
@@ -237,7 +247,8 @@ export const GridGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
   const animation = gallerySettings.photoAnimation || 'fade';
 
   const [showIdentityModal, setShowIdentityModal] = React.useState(false);
-  const [pendingAction, setPendingAction] = React.useState<null | { type: 'like' | 'favorite'; photoId: number }>(null);
+  const [pendingAction, setPendingAction] = React.useState<null | { type: 'like'; photoId: number }>(null);
+  const [likedPhotoIds, setLikedPhotoIds] = React.useState<Set<number>>(new Set());
   const [savedIdentity, setSavedIdentity] = React.useState<{ name: string; email: string } | null>(null);
 
   const spacingClass = spacing === 'tight' ? 'gap-2' : spacing === 'relaxed' ? 'gap-6' : 'gap-4';
@@ -271,6 +282,16 @@ export const GridGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
             setPendingAction({ type: action, photoId });
             setShowIdentityModal(true);
           }}
+          onQuickComment={() => onOpenPhotoWithFeedback && onOpenPhotoWithFeedback(index)}
+          onFeedbackChange={onFeedbackChange}
+          liked={likedPhotoIds.has(photo.id)}
+          onLikeSuccess={() => {
+            setLikedPhotoIds((prev) => {
+              const next = new Set(prev);
+              next.add(photo.id);
+              return next;
+            });
+          }}
         />
       ))}
       <FeedbackIdentityModal
@@ -285,10 +306,18 @@ export const GridGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
               guest_name: name,
               guest_email: email,
             });
+            // Immediately reflect like UI
+            if (pendingAction.type === 'like') {
+              setLikedPhotoIds((prev) => {
+                const next = new Set(prev);
+                next.add(pendingAction.photoId);
+                return next;
+              });
+            }
             setPendingAction(null);
           }
         }}
-        feedbackType={pendingAction?.type === 'favorite' ? 'favorite' : 'like'}
+        feedbackType="like"
       />
     </div>
   );
diff --git a/frontend/src/components/gallery/layouts/HeroGalleryLayout.tsx b/frontend/src/components/gallery/layouts/HeroGalleryLayout.tsx
index 181d1c6..8aa529c 100644
--- a/frontend/src/components/gallery/layouts/HeroGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/HeroGalleryLayout.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Download, Maximize2, Check, ChevronDown, Calendar, Clock, Heart, Bookmark } from 'lucide-react';
+import { Download, Maximize2, Check, ChevronDown, Calendar, Clock, Heart, MessageSquare } from 'lucide-react';
 import { parseISO } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { useLocalizedDate } from '../../../hooks/useLocalizedDate';
@@ -16,12 +16,15 @@ interface HeroGalleryLayoutProps extends BaseGalleryLayoutProps {
   eventLogo?: string | null;
   eventDate?: string;
   expiresAt?: string;
+  // Use a static hero photo independent of current filter
+  heroPhotoOverride?: Photo | null;
 }
 
 export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
   photos,
   slug,
   onPhotoClick,
+  onOpenPhotoWithFeedback,
   onDownload,
   selectedPhotos = new Set(),
   isSelectionMode = false,
@@ -30,6 +33,7 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
   eventLogo,
   eventDate,
   expiresAt,
+  heroPhotoOverride,
   allowDownloads = true,
   feedbackEnabled = false,
   feedbackOptions
@@ -40,10 +44,20 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
   const [heroPhoto, setHeroPhoto] = useState<Photo | null>(null);
   const [hasInitialized, setHasInitialized] = useState(false);
   const [showIdentityModal, setShowIdentityModal] = useState(false);
-  const [pendingAction, setPendingAction] = useState<null | { type: 'like' | 'favorite'; photoId: number }>(null);
+  const [pendingAction, setPendingAction] = useState<null | { type: 'like'; photoId: number }>(null);
   const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
   const gallerySettings = theme.gallerySettings || {};
   const overlayOpacity = gallerySettings.heroOverlayOpacity || 0.3;
+  const [likedIds, setLikedIds] = useState<Set<number>>(new Set());
+  const canQuickComment = Boolean(feedbackEnabled && feedbackOptions?.allowComments && onOpenPhotoWithFeedback);
+
+  // If an override is provided, always use it and skip initialization logic
+  useEffect(() => {
+    if (heroPhotoOverride) {
+      setHeroPhoto(heroPhotoOverride);
+      setHasInitialized(true);
+    }
+  }, [heroPhotoOverride]);
 
   // Reset initialization when heroImageId changes
   useEffect(() => {
@@ -54,29 +68,28 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
 
   // Select hero photo (admin-selected or first photo only if gallery was empty)
   useEffect(() => {
+    // When an override is provided, the effect above has already set the hero.
+    if (heroPhotoOverride) return;
+
     if (photos.length > 0) {
       const heroId = gallerySettings.heroImageId;
-      // Process hero layout with provided photos
-      
-      // If admin has selected a specific hero image, always use it
+      // If admin has selected a specific hero image, always use it when available
       if (heroId) {
         const adminSelectedHero = photos.find(p => p.id === heroId);
-        // Hero photo selected by admin
         if (adminSelectedHero) {
           setHeroPhoto(adminSelectedHero);
           setHasInitialized(true);
           return;
         }
       }
-      
-      // Only auto-select first photo on initial load when gallery was empty
-      // This prevents changing the hero when new photos are uploaded
+
+      // Only auto-select first photo on initial load
       if (!hasInitialized) {
         setHeroPhoto(photos[0]);
         setHasInitialized(true);
       }
     }
-  }, [photos, gallerySettings.heroImageId, hasInitialized]);
+  }, [photos, gallerySettings.heroImageId, hasInitialized, heroPhotoOverride]);
 
   if (!heroPhoto) return null;
 
@@ -198,9 +211,9 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
                         <Download className="w-5 h-5 text-neutral-800" />
                       </button>
                     )}
-                    {feedbackEnabled && feedbackOptions?.allowLikes && (
+                    {feedbackOptions?.allowLikes && (
                       <button
-                        className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                        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) => {
                           e.stopPropagation();
                           if (feedbackOptions?.requireNameEmail && !savedIdentity) {
@@ -208,38 +221,30 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
                             setShowIdentityModal(true);
                             return;
                           }
-                          await feedbackService.submitFeedback(slug!, String(photo.id), {
-                            feedback_type: 'like',
-                            guest_name: savedIdentity?.name,
-                            guest_email: savedIdentity?.email,
-                          });
+                          setLikedIds(prev => new Set(prev).add(photo.id));
+                          try {
+                            await feedbackService.submitFeedback(slug!, String(photo.id), {
+                              feedback_type: 'like',
+                              guest_name: savedIdentity?.name,
+                              guest_email: savedIdentity?.email,
+                            });
+                          } catch (_) {}
                         }}
                         aria-label="Like photo"
+                        aria-pressed={likedIds.has(photo.id)}
                         title="Like"
                       >
-                        <Heart className="w-5 h-5 text-neutral-800" />
+                        <Heart className={`w-5 h-5 ${likedIds.has(photo.id) ? 'text-white fill-white' : 'text-neutral-800'}`} />
                       </button>
                     )}
-                    {feedbackEnabled && feedbackOptions?.allowFavorites && (
+                    {canQuickComment && (
                       <button
                         className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                        onClick={async (e) => {
-                          e.stopPropagation();
-                          if (feedbackOptions?.requireNameEmail && !savedIdentity) {
-                            setPendingAction({ type: 'favorite', photoId: photo.id });
-                            setShowIdentityModal(true);
-                            return;
-                          }
-                          await feedbackService.submitFeedback(slug!, String(photo.id), {
-                            feedback_type: 'favorite',
-                            guest_name: savedIdentity?.name,
-                            guest_email: savedIdentity?.email,
-                          });
-                        }}
-                        aria-label="Favorite photo"
-                        title="Favorite"
+                        onClick={(e) => { e.stopPropagation(); onOpenPhotoWithFeedback?.(actualIndex); }}
+                        aria-label="Comment on photo"
+                        title="Comment"
                       >
-                        <Bookmark className="w-5 h-5 text-neutral-800" />
+                        <MessageSquare className="w-5 h-5 text-neutral-800" />
                       </button>
                     )}
                   </>
@@ -263,18 +268,16 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
                 </div>
               </button>
 
-              {/* Feedback indicators (always visible, bottom-left) */}
-              {(feedbackEnabled && (photo.like_count > 0 || (photo.average_rating || 0) > 0 || (photo.comment_count || 0) > 0)) && (
+              {/* Feedback indicators (always visible, bottom-left). Show like immediately when liked */}
+              {(photo.like_count > 0 || likedIds.has(photo.id) || (photo.average_rating || 0) > 0 || (photo.comment_count || 0) > 0) && (
                 <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 flex items-center gap-1 z-20`}>
-                  {photo.like_count > 0 && (
+                  {(photo.like_count > 0 || likedIds.has(photo.id)) && (
                     <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
                       <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
                     </span>
                   )}
                   {(photo.average_rating || 0) > 0 && (
                     <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Rated">
-                      <Bookmark className="hidden" />
-                      {/* Using star icon to indicate rating */}
                       <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 text-yellow-500 fill-current"><path d="M12 .587l3.668 7.431 8.2 1.193-5.934 5.787 1.402 8.168L12 18.897l-7.336 3.869 1.402-8.168L.132 9.211l8.2-1.193z"/></svg>
                     </span>
                   )}
@@ -305,7 +308,7 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
           setPendingAction(null);
         }
       }}
-      feedbackType={pendingAction?.type === 'favorite' ? 'favorite' : 'like'}
+        feedbackType="like"
     />
     </>
   );
diff --git a/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx b/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx
index 25cb65e..8facdc3 100644
--- a/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Download, Maximize2, Check, MessageSquare, Star, Heart, Bookmark } from 'lucide-react';
+import { Download, Maximize2, Check, MessageSquare, Star, Heart } from 'lucide-react';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { AuthenticatedImage } from '../../common';
 import { FeedbackIdentityModal } from '../../gallery/FeedbackIdentityModal';
@@ -20,9 +20,10 @@ interface MasonryPhotoProps {
   slug?: string;
   feedbackOptions?: {
     allowLikes?: boolean;
-    allowFavorites?: boolean;
+    allowComments?: boolean;
     requireNameEmail?: boolean;
   };
+  onQuickComment?: () => void;
 }
 
 const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
@@ -36,11 +37,12 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
   allowDownloads = true,
   feedbackEnabled = false,
   slug,
-  feedbackOptions
+  feedbackOptions,
+  onQuickComment
 }) => {
   const [imageHeight, setImageHeight] = useState<number>(200);
   const [showIdentityModal, setShowIdentityModal] = useState(false);
-  const [pendingAction, setPendingAction] = useState<null | { type: 'like' | 'favorite'; photoId: number }>(null);
+  const [pendingAction, setPendingAction] = useState<null | { type: 'like'; photoId: number }>(null);
   const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
 
   // Generate random heights for masonry effect
@@ -115,6 +117,16 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
                 <Download className="w-5 h-5 text-neutral-800" />
               </button>
             )}
+            {onQuickComment && (
+              <button
+                className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                onClick={(e) => { e.stopPropagation(); onQuickComment(); }}
+                aria-label="Comment on photo"
+                title="Comment"
+              >
+                <MessageSquare className="w-5 h-5 text-neutral-800" />
+              </button>
+            )}
             {feedbackOptions?.allowLikes && (
               <button
                 className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
@@ -137,28 +149,6 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
                 <Heart className="w-5 h-5 text-neutral-800" />
               </button>
             )}
-            {feedbackOptions?.allowFavorites && (
-              <button
-                className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                onClick={async (e) => {
-                  e.stopPropagation();
-                  if (feedbackOptions?.requireNameEmail && !savedIdentity) {
-                    setPendingAction({ type: 'favorite', photoId: photo.id });
-                    setShowIdentityModal(true);
-                    return;
-                  }
-                  await feedbackService.submitFeedback(slug!, String(photo.id), {
-                    feedback_type: 'favorite',
-                    guest_name: savedIdentity?.name,
-                    guest_email: savedIdentity?.email,
-                  });
-                }}
-                aria-label="Favorite photo"
-                title="Favorite"
-              >
-                <Bookmark className="w-5 h-5 text-neutral-800" />
-              </button>
-            )}
           </>
         )}
       </div>
@@ -179,7 +169,7 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
             setPendingAction(null);
           }
         }}
-        feedbackType={pendingAction?.type === 'favorite' ? 'favorite' : 'like'}
+        feedbackType="like"
       />
 
       {/* Selection Checkbox (visible on hover or when selected) */}
@@ -214,6 +204,7 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
   photos,
   slug,
   onPhotoClick,
+  onOpenPhotoWithFeedback,
   onDownload,
   selectedPhotos = new Set(),
   isSelectionMode = false,
@@ -278,6 +269,7 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 feedbackEnabled={feedbackEnabled}
                 slug={slug}
                 feedbackOptions={feedbackOptions}
+                onQuickComment={() => onOpenPhotoWithFeedback && onOpenPhotoWithFeedback(originalIndex)}
               />
             );
           })}
diff --git a/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx b/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
index 1a414ae..0620ca4 100644
--- a/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Download, Maximize2, Check, Heart, Bookmark } from 'lucide-react';
+import { Download, Maximize2, Check, Heart, MessageSquare } from 'lucide-react';
 // import { useTheme } from '../../../contexts/ThemeContext';
 import { AuthenticatedImage } from '../../common';
 import { FeedbackIdentityModal } from '../../gallery/FeedbackIdentityModal';
@@ -20,9 +20,10 @@ interface MosaicPhotoProps {
   feedbackEnabled?: boolean;
   feedbackOptions?: {
     allowLikes?: boolean;
-    allowFavorites?: boolean;
+    allowComments?: boolean;
     requireNameEmail?: boolean;
   };
+  onQuickComment?: () => void;
 }
 
 const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
@@ -35,12 +36,16 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
   className = '',
   allowDownloads = true,
   slug,
-  feedbackEnabled,
-  feedbackOptions
+  feedbackEnabled = false,
+  feedbackOptions,
+  onQuickComment
 }) => {
   const [showIdentityModal, setShowIdentityModal] = React.useState(false);
-  const [pendingAction, setPendingAction] = React.useState<null | { type: 'like' | 'favorite'; photoId: number }>(null);
+  const [pendingAction, setPendingAction] = React.useState<null | { type: 'like'; photoId: number }>(null);
   const [savedIdentity, setSavedIdentity] = React.useState<{ name: string; email: string } | null>(null);
+  const [likedLocal, setLikedLocal] = React.useState(false);
+  const canComment = Boolean(feedbackEnabled && feedbackOptions?.allowComments && onQuickComment);
+
   return (
     <>
     <div
@@ -83,9 +88,9 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
                 <Download className="w-5 h-5 text-neutral-800" />
               </button>
             )}
-            {feedbackEnabled && feedbackOptions?.allowLikes && (
+            {feedbackOptions?.allowLikes && (
               <button
-                className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                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) => {
                   e.stopPropagation();
                   if (feedbackOptions?.requireNameEmail && !savedIdentity) {
@@ -93,44 +98,45 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
                     setShowIdentityModal(true);
                     return;
                   }
-                  await feedbackService.submitFeedback(slug!, String(photo.id), {
-                    feedback_type: 'like',
-                    guest_name: savedIdentity?.name,
-                    guest_email: savedIdentity?.email,
-                  });
+                  setLikedLocal(true);
+                  try {
+                    await feedbackService.submitFeedback(slug!, String(photo.id), {
+                      feedback_type: 'like',
+                      guest_name: savedIdentity?.name,
+                      guest_email: savedIdentity?.email,
+                    });
+                  } catch (_) {}
                 }}
                 aria-label="Like photo"
+                aria-pressed={likedLocal}
                 title="Like"
               >
-                <Heart className="w-5 h-5 text-neutral-800" />
+                <Heart className={`w-5 h-5 ${likedLocal ? 'text-white fill-white' : 'text-neutral-800'}`} />
               </button>
             )}
-            {feedbackEnabled && feedbackOptions?.allowFavorites && (
+            {canComment && (
               <button
                 className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                onClick={async (e) => {
-                  e.stopPropagation();
-                  if (feedbackOptions?.requireNameEmail && !savedIdentity) {
-                    setPendingAction({ type: 'favorite', photoId: photo.id });
-                    setShowIdentityModal(true);
-                    return;
-                  }
-                  await feedbackService.submitFeedback(slug!, String(photo.id), {
-                    feedback_type: 'favorite',
-                    guest_name: savedIdentity?.name,
-                    guest_email: savedIdentity?.email,
-                  });
-                }}
-                aria-label="Favorite photo"
-                title="Favorite"
+                onClick={(e) => { e.stopPropagation(); onQuickComment?.(); }}
+                aria-label="Comment on photo"
+                title="Comment"
               >
-                <Bookmark className="w-5 h-5 text-neutral-800" />
+                <MessageSquare className="w-5 h-5 text-neutral-800" />
               </button>
             )}
           </>
         )}
       </div>
 
+      {/* Feedback Indicators (bottom-left) */}
+      {(photo.like_count > 0 || likedLocal) && (
+        <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 z-10`}>
+          <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
+            <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
+          </span>
+        </div>
+      )}
+
       {/* Selection Checkbox (visible on hover or when selected) */}
       <button
         type="button"
@@ -171,7 +177,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
           setPendingAction(null);
         }
       }}
-      feedbackType={pendingAction?.type === 'favorite' ? 'favorite' : 'like'}
+        feedbackType="like"
     />
     </>
   );
@@ -181,6 +187,7 @@ export const MosaicGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
   photos,
   slug,
   onPhotoClick,
+  onOpenPhotoWithFeedback,
   onDownload,
   selectedPhotos = new Set(),
   isSelectionMode = false,
@@ -236,6 +243,7 @@ export const MosaicGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 slug={slug}
                 feedbackEnabled={feedbackEnabled}
                 feedbackOptions={feedbackOptions}
+                onQuickComment={() => { if (typeof onOpenPhotoWithFeedback !== 'undefined' && onOpenPhotoWithFeedback) onOpenPhotoWithFeedback(idx0); }}
               />
             )}
             <div className="grid grid-rows-2 gap-2">
@@ -244,14 +252,15 @@ export const MosaicGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                   photo={photo1}
                   isSelected={selectedPhotos.has(photo1.id)}
                   isSelectionMode={isSelectionMode}
-                onClick={() => onPhotoClick(idx1)}
-                onDownload={(e) => onDownload(photo1, e)}
-                onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo1.id)}
-                className=""
-                allowDownloads={allowDownloads}
-                slug={slug}
-                feedbackEnabled={feedbackEnabled}
-                feedbackOptions={feedbackOptions}
+                  onClick={() => onPhotoClick(idx1)}
+                  onDownload={(e) => onDownload(photo1, e)}
+                  onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo1.id)}
+                  className=""
+                  allowDownloads={allowDownloads}
+                  slug={slug}
+                  feedbackEnabled={feedbackEnabled}
+                  feedbackOptions={feedbackOptions}
+                  onQuickComment={() => { if (typeof onOpenPhotoWithFeedback !== 'undefined' && onOpenPhotoWithFeedback) onOpenPhotoWithFeedback(idx1); }}
               />
               )}
               {photo2 && (
@@ -259,14 +268,15 @@ export const MosaicGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                   photo={photo2}
                   isSelected={selectedPhotos.has(photo2.id)}
                   isSelectionMode={isSelectionMode}
-                onClick={() => onPhotoClick(idx2)}
-                onDownload={(e) => onDownload(photo2, e)}
-                onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo2.id)}
-                className=""
-                allowDownloads={allowDownloads}
-                slug={slug}
-                feedbackEnabled={feedbackEnabled}
-                feedbackOptions={feedbackOptions}
+                  onClick={() => onPhotoClick(idx2)}
+                  onDownload={(e) => onDownload(photo2, e)}
+                  onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo2.id)}
+                  className=""
+                  allowDownloads={allowDownloads}
+                  slug={slug}
+                  feedbackEnabled={feedbackEnabled}
+                  feedbackOptions={feedbackOptions}
+                  onQuickComment={() => { if (typeof onOpenPhotoWithFeedback !== 'undefined' && onOpenPhotoWithFeedback) onOpenPhotoWithFeedback(idx2); }}
               />
               )}
             </div>
@@ -290,6 +300,10 @@ export const MosaicGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                   onDownload={(e) => onDownload(photo, e)}
                   className=""
                   allowDownloads={allowDownloads}
+                  slug={slug}
+                  feedbackEnabled={feedbackEnabled}
+                  feedbackOptions={feedbackOptions}
+                  onQuickComment={() => { if (typeof onOpenPhotoWithFeedback !== 'undefined' && onOpenPhotoWithFeedback) onOpenPhotoWithFeedback(currentIndex); }}
                 />
               ) : null;
             })}
@@ -321,6 +335,7 @@ export const MosaicGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 slug={slug}
                 feedbackEnabled={feedbackEnabled}
                 feedbackOptions={feedbackOptions}
+                onQuickComment={() => { if (typeof onOpenPhotoWithFeedback !== 'undefined' && onOpenPhotoWithFeedback) onOpenPhotoWithFeedback(idx0); }}
               />
             )}
             <div className="grid grid-rows-2 gap-2">
@@ -329,14 +344,15 @@ export const MosaicGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                   photo={photo1}
                   isSelected={selectedPhotos.has(photo1.id)}
                   isSelectionMode={isSelectionMode}
-                onClick={() => onPhotoClick(idx1)}
-                onDownload={(e) => onDownload(photo1, e)}
-                onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo1.id)}
-                className=""
-                allowDownloads={allowDownloads}
-                slug={slug}
-                feedbackEnabled={feedbackEnabled}
-                feedbackOptions={feedbackOptions}
+                  onClick={() => onPhotoClick(idx1)}
+                  onDownload={(e) => onDownload(photo1, e)}
+                  onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo1.id)}
+                  className=""
+                  allowDownloads={allowDownloads}
+                  slug={slug}
+                  feedbackEnabled={feedbackEnabled}
+                  feedbackOptions={feedbackOptions}
+                  onQuickComment={() => { if (typeof onOpenPhotoWithFeedback !== 'undefined' && onOpenPhotoWithFeedback) onOpenPhotoWithFeedback(idx1); }}
               />
               )}
               {photo2 && (
@@ -344,14 +360,15 @@ export const MosaicGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                   photo={photo2}
                   isSelected={selectedPhotos.has(photo2.id)}
                   isSelectionMode={isSelectionMode}
-                onClick={() => onPhotoClick(idx2)}
-                onDownload={(e) => onDownload(photo2, e)}
-                onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo2.id)}
-                className=""
-                allowDownloads={allowDownloads}
-                slug={slug}
-                feedbackEnabled={feedbackEnabled}
-                feedbackOptions={feedbackOptions}
+                  onClick={() => onPhotoClick(idx2)}
+                  onDownload={(e) => onDownload(photo2, e)}
+                  onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo2.id)}
+                  className=""
+                  allowDownloads={allowDownloads}
+                  slug={slug}
+                  feedbackEnabled={feedbackEnabled}
+                  feedbackOptions={feedbackOptions}
+                  onQuickComment={() => { if (typeof onOpenPhotoWithFeedback !== 'undefined' && onOpenPhotoWithFeedback) onOpenPhotoWithFeedback(idx2); }}
               />
               )}
             </div>
@@ -387,6 +404,7 @@ export const MosaicGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 slug={slug}
                 feedbackEnabled={feedbackEnabled}
                 feedbackOptions={feedbackOptions}
+                onQuickComment={() => { if (typeof onOpenPhotoWithFeedback !== 'undefined' && onOpenPhotoWithFeedback) onOpenPhotoWithFeedback(index); }}
               />
             );
           })}
diff --git a/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx b/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx
index 4a2af25..9a7cc17 100644
--- a/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { Download, Maximize2, Check, Calendar, Heart, Bookmark } from 'lucide-react';
+import { Download, Maximize2, Check, Calendar, Heart, MessageSquare } from 'lucide-react';
 import { format, parseISO, startOfDay, startOfWeek, startOfMonth } from 'date-fns';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { AuthenticatedImage } from '../../common';
@@ -12,6 +12,7 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
   photos,
   slug,
   onPhotoClick,
+  onOpenPhotoWithFeedback,
   onDownload,
   selectedPhotos = new Set(),
   isSelectionMode = false,
@@ -21,12 +22,14 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
   feedbackOptions
 }) => {
   const { theme } = useTheme();
+  const [likedIds, setLikedIds] = useState<Set<number>>(new Set());
   const [showIdentityModal, setShowIdentityModal] = useState(false);
-  const [pendingAction, setPendingAction] = useState<null | { type: 'like' | 'favorite'; photoId: number }>(null);
+  const [pendingAction, setPendingAction] = useState<null | { type: 'like'; photoId: number }>(null);
   const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
   const gallerySettings = theme.gallerySettings || {};
   const grouping = gallerySettings.timelineGrouping || 'day';
   const showDates = gallerySettings.timelineShowDates !== false;
+  const canQuickComment = Boolean(feedbackEnabled && feedbackOptions?.allowComments && onOpenPhotoWithFeedback);
 
   // Group photos by date
   const groupedPhotos = useMemo(() => {
@@ -139,9 +142,9 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                               <Download className="w-5 h-5 text-neutral-800" />
                             </button>
                           )}
-                          {feedbackEnabled && feedbackOptions?.allowLikes && (
+                          {feedbackOptions?.allowLikes && (
                             <button
-                              className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                              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) => {
                                 e.stopPropagation();
                                 if (feedbackOptions?.requireNameEmail && !savedIdentity) {
@@ -149,44 +152,44 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                                   setShowIdentityModal(true);
                                   return;
                                 }
-                                await feedbackService.submitFeedback(slug!, String(photo.id), {
-                                  feedback_type: 'like',
-                                  guest_name: savedIdentity?.name,
-                                  guest_email: savedIdentity?.email,
-                                });
+                                setLikedIds(prev => new Set(prev).add(photo.id));
+                                try {
+                                  await feedbackService.submitFeedback(slug!, String(photo.id), {
+                                    feedback_type: 'like',
+                                    guest_name: savedIdentity?.name,
+                                    guest_email: savedIdentity?.email,
+                                  });
+                                } catch (_) {}
                               }}
                               aria-label="Like photo"
+                              aria-pressed={likedIds.has(photo.id)}
                               title="Like"
                             >
-                              <Heart className="w-5 h-5 text-neutral-800" />
+                              <Heart className={`w-5 h-5 ${likedIds.has(photo.id) ? 'text-white fill-white' : 'text-neutral-800'}`} />
                             </button>
                           )}
-                          {feedbackEnabled && feedbackOptions?.allowFavorites && (
+                          {canQuickComment && (
                             <button
                               className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                              onClick={async (e) => {
-                                e.stopPropagation();
-                                if (feedbackOptions?.requireNameEmail && !savedIdentity) {
-                                  setPendingAction({ type: 'favorite', photoId: photo.id });
-                                  setShowIdentityModal(true);
-                                  return;
-                                }
-                                await feedbackService.submitFeedback(slug!, String(photo.id), {
-                                  feedback_type: 'favorite',
-                                  guest_name: savedIdentity?.name,
-                                  guest_email: savedIdentity?.email,
-                                });
-                              }}
-                              aria-label="Favorite photo"
-                              title="Favorite"
+                              onClick={(e) => { e.stopPropagation(); onOpenPhotoWithFeedback?.(actualIndex); }}
+                              aria-label="Comment on photo"
+                              title="Comment"
                             >
-                              <Bookmark className="w-5 h-5 text-neutral-800" />
+                              <MessageSquare className="w-5 h-5 text-neutral-800" />
                             </button>
                           )}
                         </>
                       )}
                     </div>
 
+                    {(photo.like_count > 0 || likedIds.has(photo.id)) && (
+                      <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 z-10`}>
+                        <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
+                          <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
+                        </span>
+                      </div>
+                    )}
+
                     {/* Selection Checkbox (visible on hover or when selected) */}
                     <button
                       type="button"
@@ -225,7 +228,7 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
             setPendingAction(null);
           }
         }}
-        feedbackType={pendingAction?.type === 'favorite' ? 'favorite' : 'like'}
+        feedbackType="like"
       />
     </div>
   );
diff --git a/frontend/src/hooks/useGallery.ts b/frontend/src/hooks/useGallery.ts
index 3bbc108..9b89a05 100644
--- a/frontend/src/hooks/useGallery.ts
+++ b/frontend/src/hooks/useGallery.ts
@@ -11,11 +11,16 @@ export const useGalleryInfo = (slug: string, token?: string) => {
   });
 };
 
-export const useGalleryPhotos = (slug: string, filter?: 'liked' | 'favorited' | 'all', guestId?: string, enabled: boolean = true) => {
+export const useGalleryPhotos = (
+  slug: string,
+  filter?: 'liked' | 'commented' | 'rated' | 'all',
+  guestId?: string,
+  enabled: boolean = true
+) => {
   return useQuery({
     queryKey: ['gallery-photos', slug, filter, guestId],
-    // Do not pass guestId for now; backend will apply global filters when guest_id is absent
-    queryFn: () => galleryService.getGalleryPhotos(slug, filter, undefined),
+    // Pass guestId so backend can filter per-guest views when needed
+    queryFn: () => galleryService.getGalleryPhotos(slug, filter, guestId),
     enabled,
     retry: 1,
     staleTime: 5 * 60 * 1000, // 5 minutes
diff --git a/frontend/src/services/gallery.service.ts b/frontend/src/services/gallery.service.ts
index 1f1bffe..658eac6 100644
--- a/frontend/src/services/gallery.service.ts
+++ b/frontend/src/services/gallery.service.ts
@@ -16,7 +16,11 @@ export const galleryService = {
   },
 
   // Get gallery photos (requires auth)
-  async getGalleryPhotos(slug: string, filter?: 'liked' | 'favorited' | 'all', guestId?: string): Promise<GalleryData> {
+  async getGalleryPhotos(
+    slug: string,
+    filter?: 'liked' | 'commented' | 'rated' | 'all',
+    guestId?: string
+  ): Promise<GalleryData> {
     const params: any = {};
     if (filter && filter !== 'all' && guestId) {
       params.filter = filter;
@@ -28,19 +32,36 @@ export const galleryService = {
 
   // Download single photo
   async downloadPhoto(slug: string, photoId: number, filename: string): Promise<void> {
-    const response = await api.get(`/gallery/${slug}/download/${photoId}`, {
-      responseType: 'blob',
-    });
-
-    // Create download link
-    const url = window.URL.createObjectURL(new Blob([response.data]));
-    const link = document.createElement('a');
-    link.href = url;
-    link.setAttribute('download', filename);
-    document.body.appendChild(link);
-    link.click();
-    link.remove();
-    window.URL.revokeObjectURL(url);
+    try {
+      const response = await api.get(`/gallery/${slug}/download/${photoId}`, {
+        responseType: 'blob',
+      });
+      const url = window.URL.createObjectURL(new Blob([response.data]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', filename);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+    } catch (err) {
+      // Fallback: use the view endpoint if direct download fails (e.g., missing original)
+      try {
+        const response = await api.get(`/gallery/${slug}/photo/${photoId}`, {
+          responseType: 'blob',
+        });
+        const url = window.URL.createObjectURL(new Blob([response.data]));
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', filename);
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        window.URL.revokeObjectURL(url);
+      } catch (fallbackErr) {
+        throw fallbackErr;
+      }
+    }
   },
 
   // Download all photos as ZIP
@@ -60,9 +81,25 @@ export const galleryService = {
     window.URL.revokeObjectURL(url);
   },
 
+  // Download selected photos as ZIP
+  async downloadSelectedPhotos(slug: string, photoIds: number[]): Promise<void> {
+    const response = await api.post(`/gallery/${slug}/download-selected`, { photo_ids: photoIds }, {
+      responseType: 'blob',
+    });
+
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `${slug}-selected.zip`);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.URL.revokeObjectURL(url);
+  },
+
   // Get gallery statistics
   async getGalleryStats(slug: string): Promise<GalleryStats> {
     const response = await api.get<GalleryStats>(`/gallery/${slug}/stats`);
     return response.data;
   },
-};
\ No newline at end of file
+};
diff --git a/package-lock.json b/package-lock.json
index c917919..4b9aa89 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "node-fetch": "^2.7.0"
       },
       "devDependencies": {
+        "@playwright/test": "^1.48.2",
         "puppeteer": "^24.17.0"
       }
     },
@@ -38,6 +39,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.0.tgz",
+      "integrity": "sha512-04IXzPwHrW69XusN/SIdDdKZBzMfOT9UNT/YiJit/xpy2VuAoB8NHc8Aplb96zsWDddLnbkPL3TsmrS04ZU2xQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.55.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@puppeteer/browsers": {
       "version": "2.10.7",
       "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.10.7.tgz",
@@ -704,6 +721,21 @@
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
       "license": "MIT"
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -1083,6 +1115,38 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/playwright": {
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.0.tgz",
+      "integrity": "sha512-sdCWStblvV1YU909Xqx0DhOjPZE4/5lJsIS84IfN9dAZfcl/CIZ5O8l3o0j7hPMjDvqoTF8ZUcc+i/GL5erstA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.55.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.0.tgz",
+      "integrity": "sha512-GvZs4vU3U5ro2nZpeiwyb0zuFaqb9sUiAJuyrWpcGouD8y9/HLgGbNRjIph7zU9D3hnPaisMl9zG9CgFi/biIg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/prebuild-install": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
diff --git a/package.json b/package.json
index cf4c76d..b4e8d0a 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,14 @@
 {
+  "scripts": {
+    "test:e2e": "playwright test"
+  },
   "dependencies": {
     "better-sqlite3": "^12.2.0",
     "canvas": "^3.2.0",
     "node-fetch": "^2.7.0"
   },
   "devDependencies": {
-    "puppeteer": "^24.17.0"
+    "puppeteer": "^24.17.0",
+    "@playwright/test": "^1.48.2"
   }
 }