feat: add category hero/cover photo selection (#163)

Wire up the hero_photo_id column on photo_categories that was added in
the migration but never connected. Backend routes now accept and persist
hero_photo_id on category create/update, a dedicated PUT /:id/hero
endpoint is added, and the gallery API returns hero_photo_id for each
category. Frontend EventCategoryManager shows a clickable thumbnail per
category that opens a photo picker modal. Includes EN/DE i18n keys.

frontend/src/components/admin/EventCategoryManager.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Plus, X, Loader2 } from 'lucide-react';
+import { Plus, X, Loader2, Image as ImageIcon, Check } from 'lucide-react';
 import { toast } from 'react-toastify';
 import { categoriesService, type PhotoCategory } from '../../services/categories.service';
-import { Button } from '../common';
+import { photosService, type AdminPhoto } from '../../services/photos.service';
+import { Button, Card, AuthenticatedImage } from '../common';
 import { useTranslation } from 'react-i18next';
 
 interface EventCategoryManagerProps {
@@ -15,6 +16,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
   const { t } = useTranslation();
   const [isAdding, setIsAdding] = useState(false);
   const [newCategoryName, setNewCategoryName] = useState('');
+  const [heroPickerCategoryId, setHeroPickerCategoryId] = useState<number | null>(null);
 
   // Fetch categories for this event
   const { data: categories = [], isLoading } = useQuery({
@@ -22,16 +24,23 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
     queryFn: () => categoriesService.getEventCategories(eventId),
   });
 
+  // Fetch photos for hero selection
+  const { data: photos = [] } = useQuery({
+    queryKey: ['admin-event-photos', eventId, {}],
+    queryFn: () => photosService.getEventPhotos(eventId, {}),
+    enabled: heroPickerCategoryId !== null,
+  });
+
   // Filter to show only event-specific categories
   const eventCategories = categories.filter(cat => !cat.is_global);
 
   // Create category mutation
   const createMutation = useMutation({
-    mutationFn: (name: string) => 
-      categoriesService.createCategory({ 
-        name, 
+    mutationFn: (name: string) =>
+      categoriesService.createCategory({
+        name,
         is_global: false,
-        event_id: eventId 
+        event_id: eventId
       }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['event-categories', eventId] });
@@ -56,6 +65,20 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
     },
   });
 
+  // Set hero photo mutation
+  const heroMutation = useMutation({
+    mutationFn: ({ categoryId, photoId }: { categoryId: number; photoId: number | null }) =>
+      categoriesService.setCategoryHeroPhoto(categoryId, photoId),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['event-categories', eventId] });
+      setHeroPickerCategoryId(null);
+      toast.success(variables.photoId ? t('categories.coverPhotoSet') : t('categories.coverPhotoRemoved'));
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.error || t('categories.failedToSetCoverPhoto'));
+    },
+  });
+
   const handleCreate = () => {
     if (newCategoryName.trim()) {
       createMutation.mutate(newCategoryName.trim());
@@ -68,6 +91,14 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
     }
   };
 
+  const handleSelectHeroPhoto = (categoryId: number, photoId: number) => {
+    heroMutation.mutate({ categoryId, photoId });
+  };
+
+  const handleRemoveHeroPhoto = (categoryId: number) => {
+    heroMutation.mutate({ categoryId, photoId: null });
+  };
+
   if (isLoading) {
     return (
       <div className="flex justify-center items-center py-4">
@@ -135,45 +166,172 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
           {t('categories.noEventSpecificCategories')}
         </p>
       ) : (
-        <div className="space-y-1">
-          {eventCategories.map((category) => (
-            <div
-              key={category.id}
-              className="flex items-center justify-between px-3 py-2 bg-neutral-50 rounded-md"
-            >
-              <span className="text-sm text-neutral-700">{category.name}</span>
-              <button
-                onClick={() => handleDelete(category)}
-                className="p-1 text-neutral-400 hover:text-red-600 transition-colors"
-                title={t('categories.deleteCategoryTitle')}
-                disabled={deleteMutation.isPending}
+        <div className="space-y-2">
+          {eventCategories.map((category) => {
+            const heroPhoto = category.hero_photo_id
+              ? photos.find(p => p.id === category.hero_photo_id)
+              : null;
+            return (
+              <div
+                key={category.id}
+                className="flex items-center justify-between px-3 py-2 bg-neutral-50 rounded-md"
               >
-                {deleteMutation.isPending ? (
-                  <Loader2 className="w-3 h-3 animate-spin" />
-                ) : (
-                  <X className="w-3 h-3" />
-                )}
-              </button>
-            </div>
-          ))}
+                <div className="flex items-center gap-3 flex-1 min-w-0">
+                  {/* Hero photo thumbnail */}
+                  <button
+                    onClick={() => setHeroPickerCategoryId(category.id)}
+                    className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 overflow-hidden bg-neutral-100 hover:border-primary-400 transition-colors flex items-center justify-center"
+                    title={t('categories.setCoverPhoto')}
+                  >
+                    {heroPhoto ? (
+                      <AuthenticatedImage
+                        src={heroPhoto.thumbnail_url || heroPhoto.url}
+                        alt={category.name}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : category.hero_photo_id ? (
+                      <ImageIcon className="w-4 h-4 text-primary-400" />
+                    ) : (
+                      <ImageIcon className="w-4 h-4 text-neutral-300" />
+                    )}
+                  </button>
+                  <span className="text-sm text-neutral-700 truncate">{category.name}</span>
+                </div>
+                <button
+                  onClick={() => handleDelete(category)}
+                  className="p-1 text-neutral-400 hover:text-red-600 transition-colors"
+                  title={t('categories.deleteCategoryTitle')}
+                  disabled={deleteMutation.isPending}
+                >
+                  {deleteMutation.isPending ? (
+                    <Loader2 className="w-3 h-3 animate-spin" />
+                  ) : (
+                    <X className="w-3 h-3" />
+                  )}
+                </button>
+              </div>
+            );
+          })}
         </div>
       )}
 
       {/* Show available global categories */}
       <div className="mt-4 pt-3 border-t border-neutral-200">
         <p className="text-xs font-medium text-neutral-500 mb-2">{t('categories.globalCategoriesAlwaysAvailable')}</p>
-        <div className="flex flex-wrap gap-1">
+        <div className="space-y-2">
           {categories
             .filter(cat => cat.is_global)
-            .map(cat => (
-              <span key={cat.id} className="px-2 py-1 text-xs bg-neutral-100 text-neutral-600 rounded">
-                {cat.name}
-              </span>
-            ))}
+            .map(cat => {
+              const heroPhoto = cat.hero_photo_id
+                ? photos.find(p => p.id === cat.hero_photo_id)
+                : null;
+              return (
+                <div key={cat.id} className="flex items-center gap-3 px-3 py-2 bg-neutral-50 rounded-md">
+                  <button
+                    onClick={() => setHeroPickerCategoryId(cat.id)}
+                    className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 overflow-hidden bg-neutral-100 hover:border-primary-400 transition-colors flex items-center justify-center"
+                    title={t('categories.setCoverPhoto')}
+                  >
+                    {heroPhoto ? (
+                      <AuthenticatedImage
+                        src={heroPhoto.thumbnail_url || heroPhoto.url}
+                        alt={cat.name}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : cat.hero_photo_id ? (
+                      <ImageIcon className="w-4 h-4 text-primary-400" />
+                    ) : (
+                      <ImageIcon className="w-4 h-4 text-neutral-300" />
+                    )}
+                  </button>
+                  <span className="text-sm text-neutral-600">{cat.name}</span>
+                </div>
+              );
+            })}
         </div>
       </div>
+
+      {/* Hero Photo Picker Modal */}
+      {heroPickerCategoryId !== null && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+          <Card className="max-w-4xl w-full max-h-[90vh] overflow-hidden">
+            <div className="p-6 border-b border-neutral-200">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-semibold">{t('categories.setCoverPhoto')}</h2>
+                <button
+                  onClick={() => setHeroPickerCategoryId(null)}
+                  className="p-2 hover:bg-neutral-100 rounded-lg transition-colors"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+
+            <div className="p-6 overflow-y-auto max-h-[calc(90vh-180px)]">
+              {photos.length === 0 ? (
+                <p className="text-center text-neutral-500 py-8">
+                  {t('events.noPhotosAvailable')}
+                </p>
+              ) : (
+                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+                  {photos.map((photo) => {
+                    const currentCategory = categories.find(c => c.id === heroPickerCategoryId);
+                    const isSelected = photo.id === currentCategory?.hero_photo_id;
+                    return (
+                      <div
+                        key={photo.id}
+                        onClick={() => handleSelectHeroPhoto(heroPickerCategoryId, photo.id)}
+                        className={`relative cursor-pointer rounded-lg overflow-hidden border-2 transition-all ${
+                          isSelected
+                            ? 'border-primary-500 ring-2 ring-primary-500 ring-offset-2'
+                            : 'border-transparent hover:border-neutral-300'
+                        }`}
+                      >
+                        <div className="aspect-square bg-neutral-100">
+                          <AuthenticatedImage
+                            src={photo.thumbnail_url || photo.url}
+                            alt={photo.filename}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                        {isSelected && (
+                          <div className="absolute top-2 right-2 bg-primary-500 text-white rounded-full p-1">
+                            <Check className="w-4 h-4" />
+                          </div>
+                        )}
+                        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-2">
+                          <p className="text-white text-xs truncate">{photo.filename}</p>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            <div className="p-6 border-t border-neutral-200 flex justify-between gap-3">
+              {categories.find(c => c.id === heroPickerCategoryId)?.hero_photo_id && (
+                <Button
+                  variant="outline"
+                  onClick={() => handleRemoveHeroPhoto(heroPickerCategoryId)}
+                  disabled={heroMutation.isPending}
+                >
+                  {t('categories.removeCoverPhoto')}
+                </Button>
+              )}
+              <div className="flex-1" />
+              <Button
+                variant="outline"
+                onClick={() => setHeroPickerCategoryId(null)}
+              >
+                {t('common.cancel')}
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
     </div>
   );
 };
 
-EventCategoryManager.displayName = 'EventCategoryManager';
+EventCategoryManager.displayName = 'EventCategoryManager';