From 856d53343c6805706e1498892a29b120938f8547 Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Wed, 7 Jan 2026 17:46:46 +0100
Subject: [PATCH] fix(photos): resolve upload category selection and improve
 feedback buttons (#77)

- Fix upload category selection by looking up category from database
  and saving category_id to photos table (was being ignored before)
- Use category slug for filename generation during upload
- Improve Like/Comment button visibility in CarouselGalleryLayout and
  PhotoLightbox with semi-transparent background and border styling
---
 backend/src/routes/adminPhotos.js             | 29 ++++++++++---------
 .../src/components/gallery/PhotoLightbox.tsx  |  2 +-
 .../gallery/layouts/CarouselGalleryLayout.tsx |  4 +--
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/backend/src/routes/adminPhotos.js b/backend/src/routes/adminPhotos.js
index e2cce508..8f13e84b 100644
--- a/backend/src/routes/adminPhotos.js
+++ b/backend/src/routes/adminPhotos.js
@@ -177,21 +177,23 @@ router.post('/:eventId/upload', adminAuth, requirePermission('photos.upload'), u
     
     // Parse category_id to number if provided
     const parsedCategoryId = category_id ? parseInt(category_id, 10) : null;
-    
-    // Determine photo type from category_id parameter (for backwards compatibility)
+
+    // Determine photo type and category name
     let photoType = 'individual'; // default
     let categoryName = 'individual';
-    
-    if (parsedCategoryId === 1 || category_id === 'collage') {
-      photoType = 'collage';
-      categoryName = 'collages';
-    } else if (parsedCategoryId === 2 || category_id === 'individual') {
-      photoType = 'individual';
-      categoryName = 'individual';
-    }
-    
-    // For backwards compatibility, accept string values
-    if (category_id === 'collage') {
+
+    // Look up the actual category from database if provided
+    if (parsedCategoryId && !isNaN(parsedCategoryId)) {
+      const category = await db('photo_categories').where({ id: parsedCategoryId }).first();
+      if (category) {
+        categoryName = category.slug || category.name.toLowerCase().replace(/\s+/g, '_');
+        // Use category slug for type determination
+        if (category.slug === 'collage' || category.slug === 'collages') {
+          photoType = 'collage';
+        }
+      }
+    } else if (category_id === 'collage') {
+      // For backwards compatibility, accept string values
       photoType = 'collage';
       categoryName = 'collages';
     }
@@ -257,6 +259,7 @@ router.post('/:eventId/upload', adminAuth, requirePermission('photos.upload'), u
               path: relativePath,
               thumbnail_path: null, // Will generate after successful commit
               type: photoType,
+              category_id: parsedCategoryId, // Save the selected category
               size_bytes: tempStats.size // Use actual file size from stat
             };
             
diff --git a/frontend/src/components/gallery/PhotoLightbox.tsx b/frontend/src/components/gallery/PhotoLightbox.tsx
index 707f47a3..c6ceb8f6 100644
--- a/frontend/src/components/gallery/PhotoLightbox.tsx
+++ b/frontend/src/components/gallery/PhotoLightbox.tsx
@@ -456,7 +456,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
                 onClick={() => {
                   setShowFeedback(!showFeedback);
                 }}
-                className="relative p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors"
+                className="relative p-2 bg-black/40 hover:bg-black/60 rounded-full border border-white/40 transition-colors"
                 aria-label="Toggle feedback"
                 title={`Photo feedback${(currentPhoto.comment_count ?? 0) > 0 ? ` (${currentPhoto.comment_count ?? 0} comments)` : ''}`}
               >
diff --git a/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx b/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx
index 8853934c..9fc6508c 100644
--- a/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/CarouselGalleryLayout.tsx
@@ -164,7 +164,7 @@ export const CarouselGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                     });
                   } catch (_) {}
                 }}
-                className={`hover:bg-white/20 ${likedIds.has(currentPhoto.id) ? 'text-red-400' : 'text-white'}`}
+                className={`bg-black/30 hover:bg-black/50 rounded-full border border-white/40 ${likedIds.has(currentPhoto.id) ? 'text-red-400' : 'text-white'}`}
                 title="Like photo"
                 aria-pressed={likedIds.has(currentPhoto.id)}
               >
@@ -176,7 +176,7 @@ export const CarouselGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 variant="ghost"
                 size="sm"
                 onClick={() => { onOpenPhotoWithFeedback?.(currentIndex); }}
-                className="text-white hover:bg-white/20"
+                className="text-white bg-black/30 hover:bg-black/50 rounded-full border border-white/40"
                 title="Comment"
                 aria-label="Comment on photo"
               >