feat: implement gallery feedback system with version tracking for backups

Gallery Feedback Features:
- Add feedback system allowing ratings, likes, comments, and favorites on photos
- Implement admin controls for enabling/disabling feedback per event
- Add content moderation with word filters and spam detection
- Implement rate limiting to prevent abuse (10 requests/15min per type)
- Create comprehensive admin interface for feedback management
- Add analytics dashboard for feedback insights
- Export feedback data when archiving events

Frontend Components:
- PhotoRating: 5-star rating system with optimistic updates
- PhotoLikes: Like/unlike with animation
- PhotoComments: Threaded comments with moderation
- PhotoFavorites: Bookmark functionality
- FeedbackSettings: Admin configuration panel
- EventFeedbackPage: Complete management interface

Backend Implementation:
- Database migration 033: 4 new tables for feedback system
- RESTful API with proper authorization
- Guest identification via SHA256(IP+UserAgent)
- Automatic backup integration
- Email notification support

Backup Version Tracking:
- Migration 034: Add version columns to backup tables
- Track app version, Node.js version, and DB schema version
- Create restore_history table for tracking restore attempts
- Add version compatibility checking for safe restores
- Configurable version matching requirements

Security & Performance:
- Input validation and sanitization
- Rate limiting per feedback type
- Content moderation system
- Optimistic UI updates
- Efficient database queries with proper indexes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/gallery/PhotoComments.tsx

@@ -0,0 +1,250 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { MessageSquare, Send, User, Loader2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { feedbackService } from '../../services/feedback.service';
+import { toast } from 'react-toastify';
+import { format } from 'date-fns';
+import { Button, Input } from '../common';
+import type { PhotoFeedback } from '../../services/feedback.service';
+
+interface PhotoCommentsProps {
+  photoId: string;
+  gallerySlug: string;
+  comments: PhotoFeedback[];
+  isEnabled: boolean;
+  requireNameEmail: boolean;
+  showToGuests: boolean;
+  onCommentAdded?: () => void;
+}
+
+export const PhotoComments: React.FC<PhotoCommentsProps> = ({
+  photoId,
+  gallerySlug,
+  comments,
+  isEnabled,
+  requireNameEmail,
+  showToGuests,
+  onCommentAdded
+}) => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [showCommentForm, setShowCommentForm] = useState(false);
+  const [commentText, setCommentText] = useState('');
+  const [guestName, setGuestName] = useState('');
+  const [guestEmail, setGuestEmail] = useState('');
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  }, [commentText]);
+
+  const submitCommentMutation = useMutation({
+    mutationFn: (data: any) => 
+      feedbackService.submitFeedback(gallerySlug, photoId, {
+        feedback_type: 'comment',
+        comment_text: data.comment_text,
+        guest_name: data.guest_name,
+        guest_email: data.guest_email
+      }),
+    onSuccess: (response) => {
+      setCommentText('');
+      setShowCommentForm(false);
+      queryClient.invalidateQueries({ queryKey: ['photo-feedback', gallerySlug, photoId] });
+      
+      if (response.message) {
+        toast.info(response.message);
+      } else {
+        toast.success(t('feedback.commentSubmitted', 'Comment submitted'));
+      }
+      
+      if (onCommentAdded) {
+        onCommentAdded();
+      }
+    },
+    onError: (error: any) => {
+      if (error.response?.status === 429) {
+        toast.error(t('feedback.rateLimited', 'Please wait before commenting again'));
+      } else if (error.response?.data?.errors) {
+        setErrors(error.response.data.errors);
+      } else {
+        toast.error(t('feedback.commentError', 'Failed to submit comment'));
+      }
+    }
+  });
+
+  const handleSubmitComment = (e: React.FormEvent) => {
+    e.preventDefault();
+    setErrors({});
+
+    // Validate
+    const newErrors: Record<string, string> = {};
+    if (!commentText.trim()) {
+      newErrors.comment_text = t('feedback.commentRequired', 'Comment is required');
+    }
+    if (requireNameEmail) {
+      if (!guestName.trim()) {
+        newErrors.guest_name = t('feedback.nameRequired', 'Name is required');
+      }
+      if (!guestEmail.trim()) {
+        newErrors.guest_email = t('feedback.emailRequired', 'Email is required');
+      }
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+
+    submitCommentMutation.mutate({
+      comment_text: commentText.trim(),
+      guest_name: guestName.trim(),
+      guest_email: guestEmail.trim()
+    });
+  };
+
+  if (!isEnabled) return null;
+
+  // Filter comments based on visibility settings
+  const visibleComments = showToGuests 
+    ? comments.filter(c => c.is_approved && !c.is_hidden)
+    : comments.filter(c => c.is_mine);
+
+  return (
+    <div className="space-y-4">
+      {/* Comments Header */}
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-neutral-900 flex items-center gap-2">
+          <MessageSquare className="w-4 h-4" />
+          {t('feedback.comments', 'Comments')} 
+          {visibleComments.length > 0 && (
+            <span className="text-neutral-500">({visibleComments.length})</span>
+          )}
+        </h3>
+        {!showCommentForm && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowCommentForm(true)}
+          >
+            {t('feedback.addComment', 'Add Comment')}
+          </Button>
+        )}
+      </div>
+
+      {/* Comment Form */}
+      {showCommentForm && (
+        <form onSubmit={handleSubmitComment} className="space-y-3 p-3 bg-neutral-50 rounded-lg">
+          {requireNameEmail && (
+            <div className="grid grid-cols-2 gap-3">
+              <Input
+                placeholder={t('feedback.yourName', 'Your name')}
+                value={guestName}
+                onChange={(e) => setGuestName(e.target.value)}
+                error={errors.guest_name}
+                size="sm"
+              />
+              <Input
+                type="email"
+                placeholder={t('feedback.yourEmail', 'Your email')}
+                value={guestEmail}
+                onChange={(e) => setGuestEmail(e.target.value)}
+                error={errors.guest_email}
+                size="sm"
+              />
+            </div>
+          )}
+          
+          <div>
+            <textarea
+              ref={textareaRef}
+              value={commentText}
+              onChange={(e) => setCommentText(e.target.value)}
+              placeholder={t('feedback.writeComment', 'Write a comment...')}
+              className={`w-full px-3 py-2 text-sm border rounded-lg resize-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 ${
+                errors.comment_text ? 'border-red-500' : 'border-neutral-300'
+              }`}
+              rows={2}
+              maxLength={500}
+            />
+            {errors.comment_text && (
+              <p className="text-xs text-red-600 mt-1">{errors.comment_text}</p>
+            )}
+            <p className="text-xs text-neutral-500 mt-1">
+              {commentText.length}/500
+            </p>
+          </div>
+
+          <div className="flex gap-2">
+            <Button
+              type="submit"
+              size="sm"
+              variant="primary"
+              leftIcon={submitCommentMutation.isPending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
+              disabled={submitCommentMutation.isPending}
+            >
+              {t('feedback.submit', 'Submit')}
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={() => {
+                setShowCommentForm(false);
+                setCommentText('');
+                setErrors({});
+              }}
+            >
+              {t('common.cancel', 'Cancel')}
+            </Button>
+          </div>
+        </form>
+      )}
+
+      {/* Comments List */}
+      {visibleComments.length > 0 && (
+        <div className="space-y-3">
+          {visibleComments.map((comment) => (
+            <div key={comment.id} className="flex gap-3">
+              <div className="flex-shrink-0">
+                <div className="w-8 h-8 bg-neutral-200 rounded-full flex items-center justify-center">
+                  <User className="w-4 h-4 text-neutral-600" />
+                </div>
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-baseline gap-2 mb-1">
+                  <span className="text-sm font-medium text-neutral-900">
+                    {comment.guest_name || t('feedback.anonymous', 'Anonymous')}
+                  </span>
+                  <span className="text-xs text-neutral-500">
+                    {format(new Date(comment.created_at), 'PP')}
+                  </span>
+                  {comment.is_mine && !comment.is_approved && (
+                    <span className="text-xs text-orange-600">
+                      {t('feedback.pendingApproval', 'Pending approval')}
+                    </span>
+                  )}
+                </div>
+                <p className="text-sm text-neutral-700 break-words">
+                  {comment.comment_text}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Empty State */}
+      {visibleComments.length === 0 && !showCommentForm && (
+        <p className="text-sm text-neutral-500 text-center py-4">
+          {t('feedback.noComments', 'No comments yet. Be the first to comment!')}
+        </p>
+      )}
+    </div>
+  );
+};

frontend/src/components/gallery/PhotoFavorites.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { Bookmark } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { feedbackService } from '../../services/feedback.service';
+import { toast } from 'react-toastify';
+
+interface PhotoFavoritesProps {
+  photoId: string;
+  gallerySlug: string;
+  isFavorited: boolean;
+  favoriteCount: number;
+  isEnabled: boolean;
+  onFavoriteChange?: (favorited: boolean) => void;
+}
+
+export const PhotoFavorites: React.FC<PhotoFavoritesProps> = ({
+  photoId,
+  gallerySlug,
+  isFavorited,
+  favoriteCount,
+  isEnabled,
+  onFavoriteChange
+}) => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [animating, setAnimating] = useState(false);
+
+  const submitFavoriteMutation = useMutation({
+    mutationFn: () => 
+      feedbackService.submitFeedback(gallerySlug, photoId, {
+        feedback_type: 'favorite'
+      }),
+    onMutate: async () => {
+      setIsSubmitting(true);
+      setAnimating(true);
+      // Optimistic update
+      if (onFavoriteChange) {
+        onFavoriteChange(!isFavorited);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['photo-feedback', gallerySlug, photoId] });
+    },
+    onError: (error: any) => {
+      // Revert optimistic update
+      if (onFavoriteChange) {
+        onFavoriteChange(isFavorited);
+      }
+      if (error.response?.status === 429) {
+        toast.error(t('feedback.rateLimited', 'Please wait before favoriting again'));
+      } else {
+        toast.error(t('feedback.favoriteError', 'Failed to update favorite'));
+      }
+    },
+    onSettled: () => {
+      setIsSubmitting(false);
+      setTimeout(() => setAnimating(false), 300);
+    }
+  });
+
+  const handleFavoriteClick = () => {
+    if (!isEnabled || isSubmitting) return;
+    submitFavoriteMutation.mutate();
+  };
+
+  if (!isEnabled) return null;
+
+  return (
+    <button
+      onClick={handleFavoriteClick}
+      disabled={isSubmitting}
+      className={`group flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
+        isFavorited 
+          ? 'bg-amber-50 text-amber-600 hover:bg-amber-100' 
+          : 'bg-neutral-50 text-neutral-600 hover:bg-neutral-100'
+      } ${isSubmitting ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
+      aria-label={isFavorited ? t('feedback.unfavorite', 'Remove from favorites') : t('feedback.favorite', 'Add to favorites')}
+    >
+      <Bookmark
+        className={`w-5 h-5 transition-all ${
+          animating ? 'scale-125' : 'scale-100'
+        } ${
+          isFavorited ? 'fill-current' : 'group-hover:scale-110'
+        }`}
+      />
+      <span className="text-sm font-medium">
+        {favoriteCount > 0 ? favoriteCount : ''}
+      </span>
+    </button>
+  );
+};

frontend/src/components/gallery/PhotoFeedback.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+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';
+
+interface PhotoFeedbackProps {
+  photoId: string;
+  gallerySlug: string;
+  className?: string;
+  showComments?: boolean;
+  onFeedbackUpdate?: () => void;
+}
+
+export const PhotoFeedback: React.FC<PhotoFeedbackProps> = ({
+  photoId,
+  gallerySlug,
+  className = '',
+  showComments = true,
+  onFeedbackUpdate
+}) => {
+  // Fetch feedback settings for the gallery
+  const { data: settings, isLoading: settingsLoading } = useQuery({
+    queryKey: ['gallery-feedback-settings', gallerySlug],
+    queryFn: () => feedbackService.getGalleryFeedbackSettings(gallerySlug),
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+  });
+
+  // Fetch feedback data for the photo
+  const { data: feedbackData, isLoading: feedbackLoading } = useQuery({
+    queryKey: ['photo-feedback', gallerySlug, photoId],
+    queryFn: () => feedbackService.getPhotoFeedback(gallerySlug, photoId),
+    enabled: !!settings?.feedback_enabled,
+  });
+
+  // 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]);
+
+  // Handle optimistic updates
+  const handleRatingChange = (rating: number) => {
+    setCurrentRating(rating);
+    if (onFeedbackUpdate) onFeedbackUpdate();
+  };
+
+  const handleLikeChange = (liked: boolean) => {
+    setIsLiked(liked);
+    setLikeCount(prev => liked ? prev + 1 : Math.max(0, prev - 1));
+    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}`}>
+        <Skeleton className="h-8 w-32" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+    );
+  }
+
+  if (!settings?.feedback_enabled) {
+    return null;
+  }
+
+  const hasAnyFeedbackType = settings.allow_ratings || settings.allow_likes || 
+                            settings.allow_comments || settings.allow_favorites;
+
+  if (!hasAnyFeedbackType) {
+    return null;
+  }
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      {/* Rating Section */}
+      {settings.allow_ratings && (
+        <PhotoRating
+          photoId={photoId}
+          gallerySlug={gallerySlug}
+          currentRating={currentRating}
+          averageRating={feedbackData?.summary.average_rating}
+          totalRatings={feedbackData?.summary.total_ratings}
+          isEnabled={true}
+          onRatingChange={handleRatingChange}
+        />
+      )}
+
+      {/* Action Buttons */}
+      {(settings.allow_likes || settings.allow_favorites) && (
+        <div className="flex items-center gap-2">
+          {settings.allow_likes && (
+            <PhotoLikes
+              photoId={photoId}
+              gallerySlug={gallerySlug}
+              isLiked={isLiked}
+              likeCount={likeCount}
+              isEnabled={true}
+              onLikeChange={handleLikeChange}
+            />
+          )}
+          {settings.allow_favorites && (
+            <PhotoFavorites
+              photoId={photoId}
+              gallerySlug={gallerySlug}
+              isFavorited={isFavorited}
+              favoriteCount={favoriteCount}
+              isEnabled={true}
+              onFavoriteChange={handleFavoriteChange}
+            />
+          )}
+        </div>
+      )}
+
+      {/* Comments Section */}
+      {settings.allow_comments && showComments && (
+        <div className="border-t pt-4">
+          <PhotoComments
+            photoId={photoId}
+            gallerySlug={gallerySlug}
+            comments={feedbackData?.feedback || []}
+            isEnabled={true}
+            requireNameEmail={settings.require_name_email || false}
+            showToGuests={settings.show_feedback_to_guests || false}
+            onCommentAdded={() => {
+              if (onFeedbackUpdate) onFeedbackUpdate();
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/components/gallery/PhotoLightbox.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { X, ChevronLeft, ChevronRight, Download, ZoomIn, ZoomOut } from 'lucide-react';
+import { X, ChevronLeft, ChevronRight, Download, ZoomIn, ZoomOut, MessageSquare } from 'lucide-react';
 import type { Photo } from '../../types';
 import { useDownloadPhoto } from '../../hooks/useGallery';
 import { AuthenticatedImage } from '../common';
+import { PhotoFeedback } from './PhotoFeedback';
 
 interface PhotoLightboxProps {
   photos: Photo[];
@@ -23,6 +24,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
   const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
   const [touchDistance, setTouchDistance] = useState<number | null>(null);
+  const [showFeedback, setShowFeedback] = useState(false);
   
   const downloadPhotoMutation = useDownloadPhoto();
   const currentPhoto = photos[currentIndex];
@@ -224,6 +226,14 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
             >
               <Download className="w-5 h-5 text-white" />
             </button>
+            
+            <button
+              onClick={() => setShowFeedback(!showFeedback)}
+              className="p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors"
+              aria-label="Toggle feedback"
+            >
+              <MessageSquare className="w-5 h-5 text-white" />
+            </button>
           </div>
         </div>
       </div>
@@ -259,6 +269,29 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
       <div className="absolute bottom-20 left-1/2 -translate-x-1/2 text-white text-sm opacity-50 pointer-events-none md:hidden z-20">
         Swipe to navigate
       </div>
+
+      {/* Feedback Panel */}
+      {showFeedback && (
+        <div className="absolute right-0 top-0 bottom-0 w-96 bg-white shadow-xl z-20 overflow-y-auto">
+          <div className="sticky top-0 bg-white border-b px-4 py-3 flex items-center justify-between">
+            <h3 className="font-semibold text-neutral-900">Photo Feedback</h3>
+            <button
+              onClick={() => setShowFeedback(false)}
+              className="p-1 hover:bg-neutral-100 rounded transition-colors"
+              aria-label="Close feedback"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+          <div className="p-4">
+            <PhotoFeedback
+              photoId={currentPhoto.id}
+              gallerySlug={slug}
+              showComments={true}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };

frontend/src/components/gallery/PhotoLikes.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { Heart } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { feedbackService } from '../../services/feedback.service';
+import { toast } from 'react-toastify';
+
+interface PhotoLikesProps {
+  photoId: string;
+  gallerySlug: string;
+  isLiked: boolean;
+  likeCount: number;
+  isEnabled: boolean;
+  onLikeChange?: (liked: boolean) => void;
+}
+
+export const PhotoLikes: React.FC<PhotoLikesProps> = ({
+  photoId,
+  gallerySlug,
+  isLiked,
+  likeCount,
+  isEnabled,
+  onLikeChange
+}) => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [animating, setAnimating] = useState(false);
+
+  const submitLikeMutation = useMutation({
+    mutationFn: () => 
+      feedbackService.submitFeedback(gallerySlug, photoId, {
+        feedback_type: 'like'
+      }),
+    onMutate: async () => {
+      setIsSubmitting(true);
+      setAnimating(true);
+      // Optimistic update
+      if (onLikeChange) {
+        onLikeChange(!isLiked);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['photo-feedback', gallerySlug, photoId] });
+    },
+    onError: (error: any) => {
+      // Revert optimistic update
+      if (onLikeChange) {
+        onLikeChange(isLiked);
+      }
+      if (error.response?.status === 429) {
+        toast.error(t('feedback.rateLimited', 'Please wait before liking again'));
+      } else {
+        toast.error(t('feedback.likeError', 'Failed to update like'));
+      }
+    },
+    onSettled: () => {
+      setIsSubmitting(false);
+      setTimeout(() => setAnimating(false), 300);
+    }
+  });
+
+  const handleLikeClick = () => {
+    if (!isEnabled || isSubmitting) return;
+    submitLikeMutation.mutate();
+  };
+
+  if (!isEnabled) return null;
+
+  return (
+    <button
+      onClick={handleLikeClick}
+      disabled={isSubmitting}
+      className={`group flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
+        isLiked 
+          ? 'bg-red-50 text-red-600 hover:bg-red-100' 
+          : 'bg-neutral-50 text-neutral-600 hover:bg-neutral-100'
+      } ${isSubmitting ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
+      aria-label={isLiked ? t('feedback.unlike', 'Unlike') : t('feedback.like', 'Like')}
+    >
+      <Heart
+        className={`w-5 h-5 transition-all ${
+          animating ? 'scale-125' : 'scale-100'
+        } ${
+          isLiked ? 'fill-current' : 'group-hover:scale-110'
+        }`}
+      />
+      <span className="text-sm font-medium">
+        {likeCount > 0 ? likeCount : ''}
+      </span>
+    </button>
+  );
+};

frontend/src/components/gallery/PhotoRating.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { Star } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { feedbackService } from '../../services/feedback.service';
+import { toast } from 'react-toastify';
+
+interface PhotoRatingProps {
+  photoId: string;
+  gallerySlug: string;
+  currentRating?: number;
+  averageRating?: number;
+  totalRatings?: number;
+  isEnabled: boolean;
+  onRatingChange?: (rating: number) => void;
+}
+
+export const PhotoRating: React.FC<PhotoRatingProps> = ({
+  photoId,
+  gallerySlug,
+  currentRating = 0,
+  averageRating = 0,
+  totalRatings = 0,
+  isEnabled,
+  onRatingChange
+}) => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [hoveredRating, setHoveredRating] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const submitRatingMutation = useMutation({
+    mutationFn: (rating: number) => 
+      feedbackService.submitFeedback(gallerySlug, photoId, {
+        feedback_type: 'rating',
+        rating
+      }),
+    onMutate: async (rating) => {
+      setIsSubmitting(true);
+      // Optimistic update
+      if (onRatingChange) {
+        onRatingChange(rating);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['photo-feedback', gallerySlug, photoId] });
+      toast.success(t('feedback.ratingSubmitted', 'Rating submitted'));
+    },
+    onError: (error: any) => {
+      // Revert optimistic update
+      if (onRatingChange && currentRating) {
+        onRatingChange(currentRating);
+      }
+      if (error.response?.status === 429) {
+        toast.error(t('feedback.rateLimited', 'Please wait before rating again'));
+      } else {
+        toast.error(t('feedback.ratingError', 'Failed to submit rating'));
+      }
+    },
+    onSettled: () => {
+      setIsSubmitting(false);
+    }
+  });
+
+  const handleRatingClick = (rating: number) => {
+    if (!isEnabled || isSubmitting) return;
+    
+    // If clicking the same rating, remove it
+    const newRating = rating === currentRating ? 0 : rating;
+    submitRatingMutation.mutate(newRating);
+  };
+
+  if (!isEnabled) return null;
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      {/* Star Rating Input */}
+      <div className="flex items-center gap-1">
+        {[1, 2, 3, 4, 5].map((star) => (
+          <button
+            key={star}
+            onClick={() => handleRatingClick(star)}
+            onMouseEnter={() => setHoveredRating(star)}
+            onMouseLeave={() => setHoveredRating(0)}
+            disabled={isSubmitting}
+            className={`p-1 transition-all ${
+              isSubmitting ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:scale-110'
+            }`}
+            aria-label={t('feedback.rateStar', 'Rate {{count}} stars', { count: star })}
+          >
+            <Star
+              className={`w-6 h-6 transition-colors ${
+                star <= (hoveredRating || currentRating)
+                  ? 'fill-yellow-500 text-yellow-500'
+                  : 'text-neutral-300 hover:text-yellow-400'
+              }`}
+            />
+          </button>
+        ))}
+      </div>
+
+      {/* Average Rating Display */}
+      {totalRatings > 0 && (
+        <div className="text-sm text-neutral-600">
+          <span className="font-medium">{averageRating.toFixed(1)}</span>
+          <span className="text-neutral-400 ml-1">
+            ({t('feedback.ratingsCount', '{{count}} ratings', { count: totalRatings })})
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/components/gallery/index.ts

@@ -5,4 +5,9 @@ export { ExpirationBanner } from './ExpirationBanner';
 export { CountdownTimer } from './CountdownTimer';
 export { GalleryLayout } from './GalleryLayout';
 export { PhotoFilterBar } from './PhotoFilterBar';
-export { UserPhotoUpload } from './UserPhotoUpload';
+export { UserPhotoUpload } from './UserPhotoUpload';
+export { PhotoFeedback } from './PhotoFeedback';
+export { PhotoRating } from './PhotoRating';
+export { PhotoLikes } from './PhotoLikes';
+export { PhotoComments } from './PhotoComments';
+export { PhotoFavorites } from './PhotoFavorites';