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

@@ -178,20 +178,22 @@ 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') {
+    // Look up the actual category from database if provided
-      photoType = 'collage';
+    if (parsedCategoryId && !isNaN(parsedCategoryId)) {
-      categoryName = 'collages';
+      const category = await db('photo_categories').where({ id: parsedCategoryId }).first();
-    } else if (parsedCategoryId === 2 || category_id === 'individual') {
+      if (category) {
-      photoType = 'individual';
+        categoryName = category.slug || category.name.toLowerCase().replace(/\s+/g, '_');
-      categoryName = 'individual';
+        // Use category slug for type determination
-    }
+        if (category.slug === 'collage' || category.slug === 'collages') {
-    
+          photoType = 'collage';
-    // For backwards compatibility, accept string values
+        }
-    if (category_id === '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
             };
             

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)` : ''}`}
               >

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"
               >