refactor(frontend): extract shared PhotoCard from gallery layouts

One card implementation (hover overlay, download/expand/select, likes,
identity flow, lazy render) replaces per-layout copies in Masonry,
Justified, Grid, Mosaic, Timeline (-1270/+395 in layouts). Carousel,
Premium, Story stay bespoke — different DOM/design by intent.

frontend/src/components/gallery/PhotoCard.tsx

@@ -0,0 +1,432 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Download, Maximize2, Check, MessageSquare, Heart } from 'lucide-react';
+import { useInView } from 'react-intersection-observer';
+import { AuthenticatedImage } from '../common';
+import { FeedbackIdentityModal } from './FeedbackIdentityModal';
+import { feedbackService } from '../../services/feedback.service';
+import { useGuestIdentityOptional } from '../../contexts/GuestIdentityContext';
+import type { Photo } from '../../types';
+
+export interface PhotoCardFeedbackOptions {
+  allowLikes?: boolean;
+  allowFavorites?: boolean;
+  allowRatings?: boolean;
+  allowComments?: boolean;
+  requireNameEmail?: boolean;
+}
+
+export interface PhotoCardProps {
+  photo: Photo;
+  isSelected: boolean;
+  isSelectionMode: boolean;
+  onClick: (e: React.MouseEvent) => void;
+  onDownload: (e: React.MouseEvent) => void;
+  onToggleSelect: () => void;
+  /** Full container className (layout-specific positioning/animation/rounding). */
+  className: string;
+  style?: React.CSSProperties;
+  /** Extra attributes for the container div (e.g. role/tabIndex/onKeyDown). */
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
+  /** Props passed verbatim to AuthenticatedImage. */
+  imageProps: React.ComponentProps<typeof AuthenticatedImage>;
+  /** Lazy-render via IntersectionObserver with a skeleton placeholder. */
+  lazy?: boolean;
+  inViewRootMargin?: string;
+  skeletonClassName?: string;
+  /** Keep container at opacity 0 until in view (only meaningful with `lazy`). */
+  fadeInWhenVisible?: boolean;
+  /** Tap-to-reveal overlay state machine for touch devices (Grid/Justified). */
+  touchAware?: boolean;
+  /** Static overlay classes; `touchAware` appends computed visibility classes. */
+  overlayBaseClassName: string;
+  /** 'light' = white/90 buttons with dark icons; 'dark' = white/20 buttons with white icons. */
+  actionVariant?: 'light' | 'dark';
+  allowDownloads?: boolean;
+  feedbackEnabled?: boolean;
+  feedbackOptions?: PhotoCardFeedbackOptions;
+  slug?: string;
+  onQuickComment?: () => void;
+  onFeedbackChange?: () => void;
+  liked?: boolean;
+  onLikeSuccess?: () => void;
+  /** 'self': card owns the identity modal; 'parent': delegate via onRequireIdentity. */
+  identityMode?: 'self' | 'parent';
+  savedIdentity?: { name: string; email: string } | null;
+  onRequireIdentity?: (action: 'like', photoId: number) => void;
+  /** Use Like/Unlike toggle labels on the like button (Masonry columns). */
+  likeToggleLabels?: boolean;
+  /** Render the Like button before the Comment button (Mosaic/Timeline). */
+  likeBeforeComment?: boolean;
+  /** Render data-testid on the selection checkbox. */
+  checkboxTestId?: boolean;
+  /** Rendered between the image and the hover overlay. */
+  beforeOverlay?: React.ReactNode;
+  /** Rendered between the overlay and the selection checkbox. */
+  afterOverlay?: React.ReactNode;
+  /** Rendered after the selection checkbox. */
+  children?: React.ReactNode;
+}
+
+export const PhotoCard: React.FC<PhotoCardProps> = ({
+  photo,
+  isSelected,
+  isSelectionMode,
+  onClick,
+  onDownload,
+  onToggleSelect,
+  className,
+  style,
+  containerProps,
+  imageProps,
+  lazy = false,
+  inViewRootMargin,
+  skeletonClassName = 'skeleton w-full h-full rounded-lg',
+  fadeInWhenVisible = false,
+  touchAware = false,
+  overlayBaseClassName,
+  actionVariant = 'light',
+  allowDownloads = true,
+  feedbackEnabled = false,
+  feedbackOptions,
+  slug,
+  onQuickComment,
+  onFeedbackChange,
+  liked = false,
+  onLikeSuccess,
+  identityMode = 'parent',
+  savedIdentity,
+  onRequireIdentity,
+  likeToggleLabels = false,
+  likeBeforeComment = false,
+  checkboxTestId = false,
+  beforeOverlay,
+  afterOverlay,
+  children,
+}) => {
+  const guestIdentity = useGuestIdentityOptional();
+  const [overlayVisible, setOverlayVisible] = useState(false);
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+  const overlayTimeoutRef = useRef<number | null>(null);
+
+  // Self-managed identity modal state (identityMode === 'self')
+  const [showIdentityModal, setShowIdentityModal] = useState(false);
+  const [pendingAction, setPendingAction] = useState<null | { type: 'like'; photoId: number }>(null);
+  const [selfIdentity, setSelfIdentity] = useState<{ name: string; email: string } | null>(null);
+
+  const savedIdentityValue = identityMode === 'self' ? selfIdentity : savedIdentity;
+
+  // Detect touch device (touch-aware overlay only)
+  useEffect(() => {
+    if (!touchAware || typeof window === 'undefined') return;
+
+    const mediaQuery = window.matchMedia('(hover: none) and (pointer: coarse)');
+    const updateTouchState = () => {
+      const hasNavigator = typeof navigator !== 'undefined';
+      setIsTouchDevice(
+        mediaQuery.matches ||
+        ('ontouchstart' in window) ||
+        (hasNavigator && navigator.maxTouchPoints > 0)
+      );
+    };
+
+    updateTouchState();
+
+    const listener = (event: MediaQueryListEvent) => {
+      setIsTouchDevice(event.matches);
+    };
+
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', listener);
+    } else if (mediaQuery.addListener) {
+      mediaQuery.addListener(listener);
+    }
+
+    return () => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener('change', listener);
+      } else if (mediaQuery.removeListener) {
+        mediaQuery.removeListener(listener);
+      }
+    };
+  }, [touchAware]);
+
+  const hideOverlay = useCallback(() => {
+    if (overlayTimeoutRef.current !== null && typeof window !== 'undefined') {
+      window.clearTimeout(overlayTimeoutRef.current);
+    }
+    overlayTimeoutRef.current = null;
+    setOverlayVisible(false);
+  }, []);
+
+  const showOverlayTemporarily = useCallback(() => {
+    setOverlayVisible(true);
+    if (overlayTimeoutRef.current !== null && typeof window !== 'undefined') {
+      window.clearTimeout(overlayTimeoutRef.current);
+    }
+    if (typeof window !== 'undefined') {
+      overlayTimeoutRef.current = window.setTimeout(() => {
+        overlayTimeoutRef.current = null;
+        setOverlayVisible(false);
+      }, 2500);
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (overlayTimeoutRef.current !== null && typeof window !== 'undefined') {
+        window.clearTimeout(overlayTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isSelectionMode) {
+      hideOverlay();
+    }
+  }, [isSelectionMode, hideOverlay]);
+
+  // Lazy loading with intersection observer
+  const { ref, inView: observedInView } = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+    rootMargin: inViewRootMargin,
+  });
+  const inView = !lazy || observedInView;
+
+  const showFeedbackActions = feedbackEnabled && Boolean(feedbackOptions);
+
+  const overlayVisibilityClass = overlayVisible
+    ? 'opacity-100 md:opacity-100'
+    : 'opacity-0 md:opacity-0';
+
+  const overlayClassName = touchAware
+    ? `${overlayBaseClassName} ${overlayVisibilityClass} md:group-hover:opacity-100`
+    : overlayBaseClassName;
+
+  const checkboxVisibilityClass = touchAware
+    ? `${
+        isSelected || isSelectionMode || overlayVisible
+          ? 'opacity-100 md:opacity-100'
+          : 'opacity-0 md:opacity-0'
+      } md:group-hover:opacity-100`
+    : isSelected
+      ? 'opacity-100'
+      : 'opacity-0 group-hover:opacity-100';
+
+  const buttonType = actionVariant === 'dark' ? ('button' as const) : undefined;
+  const actionButtonClass =
+    actionVariant === 'dark'
+      ? 'p-2 bg-white/20 hover:bg-white/40 rounded-full transition-colors'
+      : 'p-2 bg-white/90 rounded-full hover:bg-white transition-colors';
+  const actionIconClass = actionVariant === 'dark' ? 'w-5 h-5 text-white' : 'w-5 h-5 text-neutral-800';
+
+  const handlePhotoClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!touchAware) {
+      onClick(e);
+      return;
+    }
+
+    if (isTouchDevice && !overlayVisible && !isSelectionMode) {
+      e.preventDefault();
+      e.stopPropagation();
+      showOverlayTemporarily();
+      return;
+    }
+
+    onClick(e);
+    if (isTouchDevice) {
+      hideOverlay();
+    }
+  };
+
+  const handleLike = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (guestIdentity?.identityMode === 'guest') {
+      try {
+        await guestIdentity.ensureIdentity();
+      } catch {
+        hideOverlay();
+        return;
+      }
+      // Optimistic UI: mark as liked immediately
+      if (onLikeSuccess) onLikeSuccess();
+      try {
+        await feedbackService.submitFeedback(slug!, String(photo.id), {
+          feedback_type: 'like',
+        });
+      } catch (err) {
+        console.warn('Like submit failed, keeping optimistic UI', err);
+      }
+      if (onFeedbackChange) onFeedbackChange();
+      hideOverlay();
+      return;
+    }
+    if (
+      feedbackOptions?.requireNameEmail &&
+      !savedIdentityValue &&
+      (identityMode === 'self' || onRequireIdentity)
+    ) {
+      if (identityMode === 'self') {
+        setPendingAction({ type: 'like', photoId: photo.id });
+        setShowIdentityModal(true);
+      } else if (onRequireIdentity) {
+        onRequireIdentity('like', photo.id);
+      }
+      hideOverlay();
+      return;
+    }
+    // Optimistic UI: mark as liked immediately
+    if (onLikeSuccess) onLikeSuccess();
+    try {
+      await feedbackService.submitFeedback(slug!, String(photo.id), {
+        feedback_type: 'like',
+        guest_name: savedIdentityValue?.name,
+        guest_email: savedIdentityValue?.email,
+      });
+    } catch (err) {
+      // Keep optimistic state; a refresh will reconcile
+      console.warn('Like submit failed, keeping optimistic UI', err);
+    }
+    if (onFeedbackChange) onFeedbackChange();
+    hideOverlay();
+  };
+
+  const commentButton =
+    showFeedbackActions && feedbackOptions?.allowComments && onQuickComment ? (
+      <button
+        className={actionButtonClass}
+        onClick={(e) => {
+          e.stopPropagation();
+          onQuickComment();
+          hideOverlay();
+        }}
+        aria-label="Comment on photo"
+        title="Comment"
+      >
+        <MessageSquare className={actionIconClass} />
+      </button>
+    ) : null;
+
+  const likeButton =
+    showFeedbackActions && feedbackOptions?.allowLikes ? (
+      <button
+        className={`p-2 rounded-full transition-colors ${
+          liked ? 'bg-red-500/90 hover:bg-red-500' : 'bg-white/90 hover:bg-white'
+        }`}
+        onClick={handleLike}
+        aria-label={likeToggleLabels && liked ? 'Unlike photo' : 'Like photo'}
+        aria-pressed={liked}
+        title={likeToggleLabels ? (liked ? 'Unlike' : 'Like') : 'Like'}
+      >
+        <Heart className={`w-5 h-5 ${liked ? 'text-white fill-white' : 'text-neutral-800'}`} />
+      </button>
+    ) : null;
+
+  return (
+    <div
+      ref={lazy ? ref : undefined}
+      className={className}
+      style={lazy ? { ...style, opacity: !inView && fadeInWhenVisible ? 0 : 1 } : style}
+      onClick={handlePhotoClick}
+      {...containerProps}
+    >
+      {inView ? (
+        <>
+          <AuthenticatedImage {...imageProps} />
+
+          {beforeOverlay}
+
+          {/* Hover Overlay */}
+          <div className={overlayClassName}>
+            {!isSelectionMode && (
+              <>
+                <button
+                  type={buttonType}
+                  className={actionButtonClass}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onClick(e);
+                    hideOverlay();
+                  }}
+                  aria-label="View full size"
+                >
+                  <Maximize2 className={actionIconClass} />
+                </button>
+                {allowDownloads && (
+                  <button
+                    type={buttonType}
+                    className={actionButtonClass}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDownload(e);
+                      hideOverlay();
+                    }}
+                    aria-label="Download photo"
+                  >
+                    <Download className={actionIconClass} />
+                  </button>
+                )}
+                {likeBeforeComment ? (
+                  <>
+                    {likeButton}
+                    {commentButton}
+                  </>
+                ) : (
+                  <>
+                    {commentButton}
+                    {likeButton}
+                  </>
+                )}
+              </>
+            )}
+          </div>
+
+          {/* Identity Modal (self-managed mode) */}
+          {identityMode === 'self' && (
+            <FeedbackIdentityModal
+              isOpen={showIdentityModal}
+              onClose={() => { setShowIdentityModal(false); setPendingAction(null); }}
+              onSubmit={async (name, email) => {
+                setSelfIdentity({ name, email });
+                setShowIdentityModal(false);
+                if (pendingAction) {
+                  if (pendingAction.type === 'like' && onLikeSuccess) {
+                    onLikeSuccess();
+                  }
+                  await feedbackService.submitFeedback(slug!, String(pendingAction.photoId), {
+                    feedback_type: pendingAction.type,
+                    guest_name: name,
+                    guest_email: email,
+                  });
+                  setPendingAction(null);
+                }
+              }}
+              feedbackType="like"
+            />
+          )}
+
+          {afterOverlay}
+
+          {/* Selection Checkbox (visible on hover or when selected) */}
+          <button
+            type="button"
+            aria-label={`Select ${photo.filename}`}
+            role="checkbox"
+            aria-checked={isSelected}
+            data-testid={checkboxTestId ? `gallery-photo-checkbox-${photo.id}` : undefined}
+            className={`absolute top-2 right-2 z-20 transition-opacity ${checkboxVisibilityClass}`}
+            onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}
+          >
+            <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
+              {isSelected && <Check className="w-4 h-4 text-white" />}
+            </div>
+          </button>
+
+          {children}
+        </>
+      ) : (
+        <div className={skeletonClassName} />
+      )}
+    </div>
+  );
+};

frontend/src/components/gallery/layouts/GridGalleryLayout.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import { Download, Maximize2, Check, MessageSquare, Star, Heart, Video, Eye, EyeOff } from 'lucide-react';
+import { MessageSquare, Star, Heart, Video, Eye, EyeOff } from 'lucide-react';
-import { useInView } from 'react-intersection-observer';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../../../contexts/ThemeContext';
-import { AuthenticatedImage } from '../../common';
+import { PhotoCard } from '../PhotoCard';
 import { FeedbackIdentityModal } from '../../gallery/FeedbackIdentityModal';
 import { feedbackService } from '../../../services/feedback.service';
-import { useGuestIdentityOptional } from '../../../contexts/GuestIdentityContext';
 import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
 import type { Photo } from '../../../types';
 
@@ -62,85 +60,6 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
   onLikeSuccess
 }) => {
   const { t } = useTranslation();
-  const guestIdentity = useGuestIdentityOptional();
-  const [overlayVisible, setOverlayVisible] = React.useState(false);
-  const [isTouchDevice, setIsTouchDevice] = React.useState(false);
-  const overlayTimeoutRef = React.useRef<number | null>(null);
-
-  React.useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const mediaQuery = window.matchMedia('(hover: none) and (pointer: coarse)');
-    const updateTouchState = () => {
-      const hasNavigator = typeof navigator !== 'undefined';
-      setIsTouchDevice(
-        mediaQuery.matches ||
-        ('ontouchstart' in window) ||
-        (hasNavigator && navigator.maxTouchPoints > 0)
-      );
-    };
-
-    updateTouchState();
-
-    const listener = (event: MediaQueryListEvent) => {
-      setIsTouchDevice(event.matches);
-    };
-
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener('change', listener);
-    } else if (mediaQuery.addListener) {
-      mediaQuery.addListener(listener);
-    }
-
-    return () => {
-      if (mediaQuery.removeEventListener) {
-        mediaQuery.removeEventListener('change', listener);
-      } else if (mediaQuery.removeListener) {
-        mediaQuery.removeListener(listener);
-      }
-    };
-  }, []);
-
-  const hideOverlay = React.useCallback(() => {
-    if (overlayTimeoutRef.current !== null && typeof window !== 'undefined') {
-      window.clearTimeout(overlayTimeoutRef.current);
-    }
-    overlayTimeoutRef.current = null;
-    setOverlayVisible(false);
-  }, []);
-
-  const showOverlayTemporarily = React.useCallback(() => {
-    setOverlayVisible(true);
-    if (overlayTimeoutRef.current !== null && typeof window !== 'undefined') {
-      window.clearTimeout(overlayTimeoutRef.current);
-    }
-    if (typeof window !== 'undefined') {
-      overlayTimeoutRef.current = window.setTimeout(() => {
-        overlayTimeoutRef.current = null;
-        setOverlayVisible(false);
-      }, 2500);
-    }
-  }, []);
-
-  React.useEffect(() => {
-    return () => {
-      if (overlayTimeoutRef.current !== null && typeof window !== 'undefined') {
-        window.clearTimeout(overlayTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  React.useEffect(() => {
-    if (isSelectionMode) {
-      hideOverlay();
-    }
-  }, [isSelectionMode, hideOverlay]);
-
-  // handled by parent layout; kept here for type completeness but not used
-  const { ref, inView } = useInView({
-    triggerOnce: true,
-    threshold: 0.1,
-  });
 
   const animationClass = animationType === 'scale'
     ? 'transition-transform duration-300 hover:scale-105'
@@ -150,224 +69,98 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
   const likeCount = photo.like_count ?? 0;
   const averageRating = photo.average_rating ?? 0;
   const commentCount = photo.comment_count ?? 0;
-  const showFeedbackActions = feedbackEnabled && Boolean(feedbackOptions);
-
-  const overlayVisibilityClass = overlayVisible
-    ? 'opacity-100 md:opacity-100'
-    : 'opacity-0 md:opacity-0';
-
-  const checkboxVisibilityClass =
-    isSelected || isSelectionMode || overlayVisible
-      ? 'opacity-100 md:opacity-100'
-      : 'opacity-0 md:opacity-0';
 
   const isVideo = (photo.media_type === 'video') ||
     (photo.mime_type && photo.mime_type.startsWith('video/')) ||
     photo.type === 'video';
 
-  const handlePhotoClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (isTouchDevice && !overlayVisible && !isSelectionMode) {
-      e.preventDefault();
-      e.stopPropagation();
-      showOverlayTemporarily();
-      return;
-    }
-
-    onClick();
-    if (isTouchDevice) {
-      hideOverlay();
-    }
-  };
-
   return (
-    <div
+    <PhotoCard
-      ref={ref}
+      photo={photo}
+      isSelected={isSelected}
+      isSelectionMode={isSelectionMode}
+      onClick={onClick}
+      onDownload={onDownload}
+      onToggleSelect={onToggleSelect}
       className={`photo-card relative group cursor-pointer aspect-square ${animationClass}`}
-      onClick={handlePhotoClick}
+      lazy
-      style={{
+      fadeInWhenVisible={animationType === 'fade'}
-        opacity: !inView && animationType === 'fade' ? 0 : 1
+      skeletonClassName="skeleton aspect-square w-full rounded-lg"
+      touchAware
+      imageProps={{
+        src: photo.thumbnail_url || photo.url,
+        alt: photo.filename,
+        className: 'w-full h-full object-cover rounded-lg',
+        loading: 'lazy',
+        isGallery: true,
+        slug,
+        photoId: photo.id,
+        requiresToken: photo.requires_token,
+        secureUrlTemplate: photo.secure_url_template,
+        protectFromDownload: !allowDownloads || useEnhancedProtection,
+        protectionLevel,
+        useEnhancedProtection,
+        useCanvasRendering: useCanvasRendering || protectionLevel === 'maximum',
+        fragmentGrid: protectionLevel === 'enhanced' || protectionLevel === 'maximum',
+        blockKeyboardShortcuts: useEnhancedProtection,
+        detectPrintScreen: useEnhancedProtection,
+        detectDevTools: protectionLevel === 'maximum',
+        watermarkText: useEnhancedProtection ? 'Protected' : undefined,
+        onProtectionViolation: (violationType: string) => {
+          console.warn(`Protection violation on grid photo ${photo.id}: ${violationType}`);
+        },
       }}
+      overlayBaseClassName="absolute inset-0 bg-black/40 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2"
+      allowDownloads={allowDownloads}
+      feedbackEnabled={feedbackEnabled}
+      feedbackOptions={feedbackOptions}
+      slug={slug}
+      onQuickComment={onQuickComment}
+      onFeedbackChange={onFeedbackChange}
+      liked={liked}
+      onLikeSuccess={onLikeSuccess}
+      savedIdentity={savedIdentity}
+      onRequireIdentity={onRequireIdentity}
+      checkboxTestId
     >
-      {inView ? (
+      {/* Feedback Indicators (always visible, bottom-left). Show like immediately when user liked */}
-        <>
+      {(commentCount > 0 || averageRating > 0 || likeCount > 0 || liked) && (
-          <AuthenticatedImage
+        <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 flex items-center gap-1 z-10`}>
-            src={photo.thumbnail_url || photo.url}
+          {(likeCount > 0 || liked) && (
-            alt={photo.filename}
+            <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
-            className="w-full h-full object-cover rounded-lg"
+              <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
-            loading="lazy"
+            </span>
-            isGallery={true}
-            slug={slug}
-            photoId={photo.id}
-            requiresToken={photo.requires_token}
-            secureUrlTemplate={photo.secure_url_template}
-            protectFromDownload={!allowDownloads || useEnhancedProtection}
-            protectionLevel={protectionLevel}
-            useEnhancedProtection={useEnhancedProtection}
-            useCanvasRendering={useCanvasRendering || protectionLevel === 'maximum'}
-            fragmentGrid={protectionLevel === 'enhanced' || protectionLevel === 'maximum'}
-            blockKeyboardShortcuts={useEnhancedProtection}
-            detectPrintScreen={useEnhancedProtection}
-            detectDevTools={protectionLevel === 'maximum'}
-            watermarkText={useEnhancedProtection ? 'Protected' : undefined}
-            onProtectionViolation={(violationType: string) => {
-              console.warn(`Protection violation on grid photo ${photo.id}: ${violationType}`);
-            }}
-          />
-          
-          <div className={`absolute inset-0 bg-black/40 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2 ${overlayVisibilityClass} md:group-hover:opacity-100`}>
-            {!isSelectionMode && (
-              <>
-                <button
-                  className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onClick();
-                    hideOverlay();
-                  }}
-                  aria-label="View full size"
-                >
-                  <Maximize2 className="w-5 h-5 text-neutral-800" />
-                </button>
-                {allowDownloads && (
-                  <button
-                    className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onDownload(e);
-                      hideOverlay();
-                    }}
-                    aria-label="Download photo"
-                  >
-                    <Download className="w-5 h-5 text-neutral-800" />
-                  </button>
-                )}
-                {showFeedbackActions && feedbackOptions?.allowComments && onQuickComment && (
-                  <button
-                    className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onQuickComment();
-                      hideOverlay();
-                    }}
-                    aria-label="Comment on photo"
-                    title="Comment"
-                  >
-                    <MessageSquare className="w-5 h-5 text-neutral-800" />
-                  </button>
-                )}
-                {/* Quick feedback actions */}
-                {showFeedbackActions && feedbackOptions?.allowLikes && (
-                  <button
-                    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 (guestIdentity?.identityMode === 'guest') {
-                        try {
-                          await guestIdentity.ensureIdentity();
-                        } catch {
-                          hideOverlay();
-                          return;
-                        }
-                        if (onLikeSuccess) onLikeSuccess();
-                        try {
-                          await feedbackService.submitFeedback(slug!, String(photo.id), {
-                            feedback_type: 'like',
-                          });
-                        } catch (err) {
-                          console.warn('Like submit failed, keeping optimistic UI', err);
-                        }
-                        if (onFeedbackChange) onFeedbackChange();
-                        hideOverlay();
-                        return;
-                      }
-                      if (feedbackOptions?.requireNameEmail && !savedIdentity && onRequireIdentity) {
-                        onRequireIdentity('like', photo.id);
-                        hideOverlay();
-                        return;
-                      }
-                      // 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();
-                      hideOverlay();
-                    }}
-                    aria-label="Like photo"
-                    aria-pressed={liked}
-                    title="Like"
-                  >
-                    <Heart className={`w-5 h-5 ${liked ? 'text-white fill-white' : 'text-neutral-800'}`} />
-                  </button>
-                )}
-              </>
-            )}
-          </div>
-
-          {/* Selection Checkbox (visible on hover or when selected) */}
-          <button
-            type="button"
-            aria-label={`Select ${photo.filename}`}
-            role="checkbox"
-            aria-checked={isSelected}
-            data-testid={`gallery-photo-checkbox-${photo.id}`}
-            className={`absolute top-2 right-2 z-20 transition-opacity ${checkboxVisibilityClass} md:group-hover:opacity-100`}
-            onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}
-          >
-            <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
-              {isSelected && <Check className="w-4 h-4 text-white" />}
-            </div>
-          </button>
-
-          {/* Feedback Indicators (always visible, bottom-left). Show like immediately when user liked */}
-          {(commentCount > 0 || averageRating > 0 || likeCount > 0 || liked) && (
-            <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 flex items-center gap-1 z-10`}>
-              {(likeCount > 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>
-              )}
-              {averageRating > 0 && (
-                <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Rated">
-                  <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-                </span>
-              )}
-              {commentCount > 0 && (
-                <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Commented">
-                  <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
-                </span>
-              )}
-            </div>
           )}
-
+          {averageRating > 0 && (
-          {isVideo && (
+            <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Rated">
-            <div className="absolute bottom-2 right-2">
+              <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-              <span className="px-2 py-1 bg-black/60 text-white text-xs rounded flex items-center gap-1">
+            </span>
-                <Video className="w-3 h-3" />
-                {t('common.video', 'Video')}
-              </span>
-            </div>
           )}
-
+          {commentCount > 0 && (
-          {photo.type === 'collage' && (
+            <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Commented">
-            <div className="absolute bottom-2 right-2">
+              <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
-              <span className="px-2 py-1 bg-black/60 text-white text-xs rounded">
+            </span>
-                Collage
-              </span>
-            </div>
           )}
-        </>
+        </div>
-      ) : (
-        <div className="skeleton aspect-square w-full rounded-lg" />
       )}
-    </div>
+
+      {isVideo && (
+        <div className="absolute bottom-2 right-2">
+          <span className="px-2 py-1 bg-black/60 text-white text-xs rounded flex items-center gap-1">
+            <Video className="w-3 h-3" />
+            {t('common.video', 'Video')}
+          </span>
+        </div>
+      )}
+
+      {photo.type === 'collage' && (
+        <div className="absolute bottom-2 right-2">
+          <span className="px-2 py-1 bg-black/60 text-white text-xs rounded">
+            Collage
+          </span>
+        </div>
+      )}
+    </PhotoCard>
   );
 };
 

frontend/src/components/gallery/layouts/JustifiedGalleryLayout.tsx

@@ -1,14 +1,13 @@
-import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
-import { Download, Maximize2, Check, MessageSquare, Star, Heart, Video, ChevronDown, Calendar, Clock } from 'lucide-react';
+import { MessageSquare, Star, Heart, Video, ChevronDown, Calendar, Clock } from 'lucide-react';
-import { useInView } from 'react-intersection-observer';
 import { parseISO } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { useLocalizedDate } from '../../../hooks/useLocalizedDate';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { AuthenticatedImage } from '../../common';
+import { PhotoCard } from '../PhotoCard';
 import { FeedbackIdentityModal } from '../../gallery/FeedbackIdentityModal';
 import { feedbackService } from '../../../services/feedback.service';
-import { useGuestIdentityOptional } from '../../../contexts/GuestIdentityContext';
 import { buildResourceUrl } from '../../../utils/url';
 import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
 import type { Photo } from '../../../types';
@@ -82,88 +81,6 @@ const JustifiedPhoto: React.FC<JustifiedPhotoProps> = ({
   liked = false,
   onLikeSuccess,
 }) => {
-  const guestIdentity = useGuestIdentityOptional();
-  const [overlayVisible, setOverlayVisible] = useState(false);
-  const [isTouchDevice, setIsTouchDevice] = useState(false);
-  const overlayTimeoutRef = useRef<number | null>(null);
-
-  // Detect touch device
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const mediaQuery = window.matchMedia('(hover: none) and (pointer: coarse)');
-    const updateTouchState = () => {
-      const hasNavigator = typeof navigator !== 'undefined';
-      setIsTouchDevice(
-        mediaQuery.matches ||
-          'ontouchstart' in window ||
-          (hasNavigator && navigator.maxTouchPoints > 0)
-      );
-    };
-
-    updateTouchState();
-
-    const listener = (event: MediaQueryListEvent) => {
-      setIsTouchDevice(event.matches);
-    };
-
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener('change', listener);
-    } else if (mediaQuery.addListener) {
-      mediaQuery.addListener(listener);
-    }
-
-    return () => {
-      if (mediaQuery.removeEventListener) {
-        mediaQuery.removeEventListener('change', listener);
-      } else if (mediaQuery.removeListener) {
-        mediaQuery.removeListener(listener);
-      }
-    };
-  }, []);
-
-  const hideOverlay = useCallback(() => {
-    if (overlayTimeoutRef.current !== null && typeof window !== 'undefined') {
-      window.clearTimeout(overlayTimeoutRef.current);
-    }
-    overlayTimeoutRef.current = null;
-    setOverlayVisible(false);
-  }, []);
-
-  const showOverlayTemporarily = useCallback(() => {
-    setOverlayVisible(true);
-    if (overlayTimeoutRef.current !== null && typeof window !== 'undefined') {
-      window.clearTimeout(overlayTimeoutRef.current);
-    }
-    if (typeof window !== 'undefined') {
-      overlayTimeoutRef.current = window.setTimeout(() => {
-        overlayTimeoutRef.current = null;
-        setOverlayVisible(false);
-      }, 2500);
-    }
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      if (overlayTimeoutRef.current !== null && typeof window !== 'undefined') {
-        window.clearTimeout(overlayTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (isSelectionMode) {
-      hideOverlay();
-    }
-  }, [isSelectionMode, hideOverlay]);
-
-  // Lazy loading with intersection observer
-  const { ref, inView } = useInView({
-    triggerOnce: true,
-    threshold: 0.1,
-    rootMargin: '100px',
-  });
-
   const animationClass =
     animationType === 'scale'
       ? 'transition-transform duration-300 hover:scale-[1.02]'
@@ -174,262 +91,128 @@ const JustifiedPhoto: React.FC<JustifiedPhotoProps> = ({
   const likeCount = photo.like_count ?? 0;
   const averageRating = photo.average_rating ?? 0;
   const commentCount = photo.comment_count ?? 0;
-  const showFeedbackActions = feedbackEnabled && Boolean(feedbackOptions);
-
-  const overlayVisibilityClass = overlayVisible
-    ? 'opacity-100 md:opacity-100'
-    : 'opacity-0 md:opacity-0';
-
-  const checkboxVisibilityClass =
-    isSelected || isSelectionMode || overlayVisible
-      ? 'opacity-100 md:opacity-100'
-      : 'opacity-0 md:opacity-0';
 
   const isVideo =
     photo.media_type === 'video' ||
     (photo.mime_type && photo.mime_type.startsWith('video/')) ||
     photo.type === 'video';
 
-  const handlePhotoClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (isTouchDevice && !overlayVisible && !isSelectionMode) {
-      e.preventDefault();
-      e.stopPropagation();
-      showOverlayTemporarily();
-      return;
-    }
-
-    onClick();
-    if (isTouchDevice) {
-      hideOverlay();
-    }
-  };
-
   return (
-    <div
+    <PhotoCard
-      ref={ref}
+      photo={photo}
+      isSelected={isSelected}
+      isSelectionMode={isSelectionMode}
+      onClick={onClick}
+      onDownload={onDownload}
+      onToggleSelect={onToggleSelect}
       className={`photo-card absolute group cursor-pointer overflow-hidden rounded-lg ${animationClass}`}
       style={{
         top: layoutItem.y,
         left: layoutItem.x,
         width: layoutItem.width,
         height: layoutItem.height,
-        opacity: !inView && animationType === 'fade' ? 0 : 1,
       }}
-      onClick={handlePhotoClick}
+      containerProps={{
-      role="button"
+        role: 'button',
-      tabIndex={0}
+        tabIndex: 0,
-      aria-label={`View photo ${photo.filename}`}
+        'aria-label': `View photo ${photo.filename}`,
-      onKeyDown={(e) => {
+        onKeyDown: (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
+          if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
+            e.preventDefault();
-          onClick();
+            onClick();
-        }
+          }
+        },
       }}
+      lazy
+      inViewRootMargin="100px"
+      fadeInWhenVisible={animationType === 'fade'}
+      skeletonClassName="skeleton w-full h-full rounded-lg"
+      touchAware
+      imageProps={{
+        src: photo.thumbnail_url || photo.url,
+        alt: photo.filename,
+        className: 'w-full h-full object-cover',
+        loading: 'lazy',
+        isGallery: true,
+        slug,
+        photoId: photo.id,
+        requiresToken: photo.requires_token,
+        secureUrlTemplate: photo.secure_url_template,
+        protectFromDownload: !allowDownloads || useEnhancedProtection,
+        protectionLevel,
+        useEnhancedProtection,
+        useCanvasRendering: useCanvasRendering || protectionLevel === 'maximum',
+        fragmentGrid: protectionLevel === 'enhanced' || protectionLevel === 'maximum',
+        blockKeyboardShortcuts: useEnhancedProtection,
+        detectPrintScreen: useEnhancedProtection,
+        detectDevTools: protectionLevel === 'maximum',
+        watermarkText: useEnhancedProtection ? 'Protected' : undefined,
+        onProtectionViolation: (violationType: string) => {
+          console.warn(`Protection violation on justified photo ${photo.id}: ${violationType}`);
+        },
+      }}
+      overlayBaseClassName="absolute inset-0 bg-black/40 transition-opacity duration-200 flex items-center justify-center gap-2"
+      allowDownloads={allowDownloads}
+      feedbackEnabled={feedbackEnabled}
+      feedbackOptions={feedbackOptions}
+      slug={slug}
+      onQuickComment={onQuickComment}
+      onFeedbackChange={onFeedbackChange}
+      liked={liked}
+      onLikeSuccess={onLikeSuccess}
+      savedIdentity={savedIdentity}
+      onRequireIdentity={onRequireIdentity}
+      checkboxTestId
     >
-      {inView ? (
+      {/* Feedback Indicators */}
-        <>
+      {(commentCount > 0 || averageRating > 0 || likeCount > 0 || liked) && (
-          <AuthenticatedImage
+        <div
-            src={photo.thumbnail_url || photo.url}
+          className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 flex items-center gap-1 z-10`}
-            alt={photo.filename}
+        >
-            className="w-full h-full object-cover"
+          {(likeCount > 0 || liked) && (
-            loading="lazy"
+            <span
-            isGallery={true}
+              className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm"
-            slug={slug}
+              title="Liked"
-            photoId={photo.id}
-            requiresToken={photo.requires_token}
-            secureUrlTemplate={photo.secure_url_template}
-            protectFromDownload={!allowDownloads || useEnhancedProtection}
-            protectionLevel={protectionLevel}
-            useEnhancedProtection={useEnhancedProtection}
-            useCanvasRendering={useCanvasRendering || protectionLevel === 'maximum'}
-            fragmentGrid={protectionLevel === 'enhanced' || protectionLevel === 'maximum'}
-            blockKeyboardShortcuts={useEnhancedProtection}
-            detectPrintScreen={useEnhancedProtection}
-            detectDevTools={protectionLevel === 'maximum'}
-            watermarkText={useEnhancedProtection ? 'Protected' : undefined}
-            onProtectionViolation={(violationType: string) => {
-              console.warn(`Protection violation on justified photo ${photo.id}: ${violationType}`);
-            }}
-          />
-
-          {/* Hover Overlay */}
-          <div
-            className={`absolute inset-0 bg-black/40 transition-opacity duration-200 flex items-center justify-center gap-2 ${overlayVisibilityClass} md:group-hover:opacity-100`}
-          >
-            {!isSelectionMode && (
-              <>
-                <button
-                  className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onClick();
-                    hideOverlay();
-                  }}
-                  aria-label="View full size"
-                >
-                  <Maximize2 className="w-5 h-5 text-neutral-800" />
-                </button>
-                {allowDownloads && (
-                  <button
-                    className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onDownload(e);
-                      hideOverlay();
-                    }}
-                    aria-label="Download photo"
-                  >
-                    <Download className="w-5 h-5 text-neutral-800" />
-                  </button>
-                )}
-                {showFeedbackActions && feedbackOptions?.allowComments && onQuickComment && (
-                  <button
-                    className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onQuickComment();
-                      hideOverlay();
-                    }}
-                    aria-label="Comment on photo"
-                    title="Comment"
-                  >
-                    <MessageSquare className="w-5 h-5 text-neutral-800" />
-                  </button>
-                )}
-                {showFeedbackActions && feedbackOptions?.allowLikes && (
-                  <button
-                    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 (guestIdentity?.identityMode === 'guest') {
-                        try {
-                          await guestIdentity.ensureIdentity();
-                        } catch {
-                          hideOverlay();
-                          return;
-                        }
-                        if (onLikeSuccess) onLikeSuccess();
-                        try {
-                          await feedbackService.submitFeedback(slug!, String(photo.id), {
-                            feedback_type: 'like',
-                          });
-                        } catch (err) {
-                          console.warn('Like submit failed, keeping optimistic UI', err);
-                        }
-                        if (onFeedbackChange) onFeedbackChange();
-                        hideOverlay();
-                        return;
-                      }
-                      if (feedbackOptions?.requireNameEmail && !savedIdentity && onRequireIdentity) {
-                        onRequireIdentity('like', photo.id);
-                        hideOverlay();
-                        return;
-                      }
-                      // 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();
-                      hideOverlay();
-                    }}
-                    aria-label="Like photo"
-                    aria-pressed={liked}
-                    title="Like"
-                  >
-                    <Heart
-                      className={`w-5 h-5 ${liked ? 'text-white fill-white' : 'text-neutral-800'}`}
-                    />
-                  </button>
-                )}
-              </>
-            )}
-          </div>
-
-          {/* Selection Checkbox */}
-          <button
-            type="button"
-            aria-label={`Select ${photo.filename}`}
-            role="checkbox"
-            aria-checked={isSelected}
-            data-testid={`gallery-photo-checkbox-${photo.id}`}
-            className={`absolute top-2 right-2 z-20 transition-opacity ${checkboxVisibilityClass} md:group-hover:opacity-100`}
-            onClick={(e) => {
-              e.stopPropagation();
-              onToggleSelect();
-            }}
-          >
-            <div
-              className={`w-6 h-6 rounded-full border-2 ${
-                isSelected ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'
-              } flex items-center justify-center transition-colors`}
             >
-              {isSelected && <Check className="w-4 h-4 text-white" />}
+              <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
-            </div>
+            </span>
-          </button>
+          )}
-
+          {averageRating > 0 && (
-          {/* Feedback Indicators */}
+            <span
-          {(commentCount > 0 || averageRating > 0 || likeCount > 0 || liked) && (
+              className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm"
-            <div
+              title="Rated"
-              className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 flex items-center gap-1 z-10`}
             >
-              {(likeCount > 0 || liked) && (
+              <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-                <span
+            </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>
-              )}
-              {averageRating > 0 && (
-                <span
-                  className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm"
-                  title="Rated"
-                >
-                  <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-                </span>
-              )}
-              {commentCount > 0 && (
-                <span
-                  className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm"
-                  title="Commented"
-                >
-                  <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
-                </span>
-              )}
-            </div>
           )}
-
+          {commentCount > 0 && (
-          {/* Video Badge */}
+            <span
-          {isVideo && (
+              className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm"
-            <div className="absolute bottom-2 right-2">
+              title="Commented"
-              <span className="px-2 py-1 bg-black/60 text-white text-xs rounded flex items-center gap-1">
+            >
-                <Video className="w-3 h-3" />
+              <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
-                Video
+            </span>
-              </span>
-            </div>
           )}
-
+        </div>
-          {/* Collage Badge */}
-          {photo.type === 'collage' && (
-            <div className="absolute bottom-2 right-2">
-              <span className="px-2 py-1 bg-black/60 text-white text-xs rounded">Collage</span>
-            </div>
-          )}
-        </>
-      ) : (
-        <div className="skeleton w-full h-full rounded-lg" />
       )}
-    </div>
+
+      {/* Video Badge */}
+      {isVideo && (
+        <div className="absolute bottom-2 right-2">
+          <span className="px-2 py-1 bg-black/60 text-white text-xs rounded flex items-center gap-1">
+            <Video className="w-3 h-3" />
+            Video
+          </span>
+        </div>
+      )}
+
+      {/* Collage Badge */}
+      {photo.type === 'collage' && (
+        <div className="absolute bottom-2 right-2">
+          <span className="px-2 py-1 bg-black/60 text-white text-xs rounded">Collage</span>
+        </div>
+      )}
+    </PhotoCard>
   );
 };
 

frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx

@@ -1,10 +1,7 @@
 import React, { useEffect, useRef, useState, useMemo } from 'react';
-import { Download, Maximize2, Check, MessageSquare, Star, Heart } from 'lucide-react';
+import { MessageSquare, Star, Heart } from 'lucide-react';
 import { useTheme } from '../../../contexts/ThemeContext';
-import { AuthenticatedImage } from '../../common';
+import { PhotoCard } from '../PhotoCard';
-import { FeedbackIdentityModal } from '../../gallery/FeedbackIdentityModal';
-import { feedbackService } from '../../../services/feedback.service';
-import { useGuestIdentityOptional } from '../../../contexts/GuestIdentityContext';
 import {
   calculateJustifiedLayout,
   createJustifiedPhotos,
@@ -15,6 +12,36 @@ import justifiedLayout from 'justified-layout';
 import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
 import type { Photo } from '../../../types';
 
+// Count-style feedback indicators shared by all masonry modes (top-left).
+// `withTitles` matches the columns-mode markup, which carries title attributes.
+const FeedbackCountIndicators: React.FC<{ photo: Photo; withTitles?: boolean }> = ({ photo, withTitles = false }) => {
+  if (!((photo.comment_count ?? 0) > 0 || (photo.average_rating ?? 0) > 0 || (photo.like_count ?? 0) > 0)) {
+    return null;
+  }
+  return (
+    <div className="absolute top-2 left-2 flex gap-1 z-10">
+      {(photo.comment_count ?? 0) > 0 && (
+        <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={withTitles ? `${photo.comment_count ?? 0} comments` : undefined}>
+          <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
+          <span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span>
+        </div>
+      )}
+      {(photo.average_rating ?? 0) > 0 && (
+        <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={withTitles ? `Rating: ${Number(photo.average_rating ?? 0).toFixed(1)}` : undefined}>
+          <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
+          <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating ?? 0).toFixed(1)}</span>
+        </div>
+      )}
+      {(photo.like_count ?? 0) > 0 && (
+        <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={withTitles ? `${photo.like_count ?? 0} likes` : undefined}>
+          <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
+          <span className="text-xs font-medium text-neutral-700">{photo.like_count ?? 0}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
 interface MasonryPhotoProps {
   photo: Photo;
   isSelected: boolean;
@@ -56,11 +83,6 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
   liked = false,
   onLikeSuccess,
 }) => {
-  const [showIdentityModal, setShowIdentityModal] = useState(false);
-  const [pendingAction, setPendingAction] = useState<null | { type: 'like'; photoId: number }>(null);
-  const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
-  const guestIdentity = useGuestIdentityOptional();
-
   // Calculate height based on actual photo aspect ratio
   // This preserves the photo's natural proportions in the masonry layout
   const imageHeight = useMemo(() => {
@@ -79,177 +101,40 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
   }, [photo.width, photo.height, columnWidth]);
 
   return (
-    <div
+    <PhotoCard
-      className="photo-card relative group cursor-pointer transition-all duration-300 hover:scale-[1.02]"
+      photo={photo}
+      isSelected={isSelected}
+      isSelectionMode={isSelectionMode}
       onClick={onClick}
+      onDownload={onDownload}
+      onToggleSelect={onToggleSelect}
+      className="photo-card relative group cursor-pointer transition-all duration-300 hover:scale-[1.02]"
       style={{
         ...style,
         height: `${imageHeight}px`,
         breakInside: 'avoid'
       }}
+      imageProps={{
+        src: photo.thumbnail_url || photo.url,
+        alt: photo.filename,
+        className: 'w-full h-full object-cover rounded-lg',
+        loading: 'lazy',
+        isGallery: true,
+        protectFromDownload: !allowDownloads,
+      }}
+      overlayBaseClassName="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"
+      allowDownloads={allowDownloads}
+      feedbackEnabled={feedbackEnabled}
+      feedbackOptions={feedbackOptions}
+      slug={slug}
+      onQuickComment={onQuickComment}
+      liked={liked}
+      onLikeSuccess={onLikeSuccess}
+      identityMode="self"
+      likeToggleLabels
+      checkboxTestId
+      beforeOverlay={feedbackEnabled ? <FeedbackCountIndicators photo={photo} withTitles /> : undefined}
     >
-      <AuthenticatedImage
-        src={photo.thumbnail_url || photo.url}
-        alt={photo.filename}
-        className="w-full h-full object-cover rounded-lg"
-        loading="lazy"
-        isGallery={true}
-        protectFromDownload={!allowDownloads}
-      />
-      
-      {/* Feedback Indicators */}
-      {feedbackEnabled && ((photo.comment_count ?? 0) > 0 || (photo.average_rating ?? 0) > 0 || (photo.like_count ?? 0) > 0) && (
-        <div className="absolute top-2 left-2 flex gap-1 z-10">
-          {(photo.comment_count ?? 0) > 0 && (
-            <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count ?? 0} comments`}>
-              <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
-              <span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span>
-            </div>
-          )}
-          {(photo.average_rating ?? 0) > 0 && (
-            <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`Rating: ${Number(photo.average_rating ?? 0).toFixed(1)}`}>
-              <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-              <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating ?? 0).toFixed(1)}</span>
-            </div>
-          )}
-          {(photo.like_count ?? 0) > 0 && (
-            <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.like_count ?? 0} likes`}>
-              <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
-              <span className="text-xs font-medium text-neutral-700">{photo.like_count ?? 0}</span>
-            </div>
-          )}
-        </div>
-      )}
-      
-      <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">
-        {!isSelectionMode && (
-          <>
-            <button
-              className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-              onClick={(e) => {
-                e.stopPropagation();
-                onClick(e);
-              }}
-              aria-label="View full size"
-            >
-              <Maximize2 className="w-5 h-5 text-neutral-800" />
-            </button>
-            {allowDownloads && (
-              <button
-                className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                onClick={onDownload}
-                aria-label="Download photo"
-              >
-                <Download className="w-5 h-5 text-neutral-800" />
-              </button>
-            )}
-            {feedbackEnabled && feedbackOptions?.allowComments && 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>
-            )}
-            {feedbackEnabled && feedbackOptions?.allowLikes && (
-              <button
-                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 (guestIdentity?.identityMode === 'guest') {
-                    try {
-                      await guestIdentity.ensureIdentity();
-                    } catch {
-                      return;
-                    }
-                    // Optimistic UI: mark as liked immediately
-                    if (onLikeSuccess) onLikeSuccess();
-                    try {
-                      await feedbackService.submitFeedback(slug!, String(photo.id), {
-                        feedback_type: 'like',
-                      });
-                    } catch (err) {
-                      // eslint-disable-next-line no-console
-                      console.warn('Like submit failed, keeping optimistic UI', err);
-                    }
-                    return;
-                  }
-                  if (feedbackOptions?.requireNameEmail && !savedIdentity) {
-                    setPendingAction({ type: 'like', photoId: photo.id });
-                    setShowIdentityModal(true);
-                    return;
-                  }
-                  // 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) {
-                    // eslint-disable-next-line no-console
-                    console.warn('Like submit failed, keeping optimistic UI', err);
-                  }
-                }}
-                aria-label={liked ? 'Unlike photo' : 'Like photo'}
-                aria-pressed={liked}
-                title={liked ? 'Unlike' : 'Like'}
-              >
-                <Heart
-                  className={`w-5 h-5 ${liked ? 'text-white fill-white' : 'text-neutral-800'}`}
-                />
-              </button>
-            )}
-          </>
-        )}
-      </div>
-
-      {/* Identity Modal */}
-      <FeedbackIdentityModal
-        isOpen={showIdentityModal}
-        onClose={() => { setShowIdentityModal(false); setPendingAction(null); }}
-        onSubmit={async (name, email) => {
-          setSavedIdentity({ name, email });
-          setShowIdentityModal(false);
-          if (pendingAction) {
-            if (pendingAction.type === 'like' && onLikeSuccess) {
-              onLikeSuccess();
-            }
-            await feedbackService.submitFeedback(slug!, String(pendingAction.photoId), {
-              feedback_type: pendingAction.type,
-              guest_name: name,
-              guest_email: email,
-            });
-            setPendingAction(null);
-          }
-        }}
-        feedbackType="like"
-      />
-
-      {/* Selection Checkbox (visible on hover or when selected) */}
-      <button
-        type="button"
-        aria-label={`Select ${photo.filename}`}
-        role="checkbox"
-        aria-checked={isSelected}
-        data-testid={`gallery-photo-checkbox-${photo.id}`}
-        className={`absolute top-2 right-2 z-20 transition-opacity ${
-          isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
-        }`}
-        onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}
-      >
-        <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
-          {isSelected && <Check className="w-4 h-4 text-white" />}
-        </div>
-      </button>
-
       {photo.type === 'collage' && (
         <div className="absolute bottom-2 left-2">
           <span className="px-2 py-1 bg-black/60 text-white text-xs rounded">
@@ -257,7 +142,7 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
           </span>
         </div>
       )}
-    </div>
+    </PhotoCard>
   );
 };
 
@@ -470,8 +355,14 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
           if (!layoutItem) return null;
 
           return (
-            <div
+            <PhotoCard
               key={photo.id}
+              photo={photo}
+              isSelected={selectedPhotos.has(photo.id)}
+              isSelectionMode={isSelectionMode}
+              onClick={() => onPhotoClick(index)}
+              onDownload={(e) => onDownload(photo, e)}
+              onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo.id)}
               className="photo-card absolute group cursor-pointer transition-all duration-300 hover:z-10"
               style={{
                 left: layoutItem.x,
@@ -479,83 +370,19 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 width: layoutItem.width,
                 height: layoutItem.height,
               }}
-              onClick={() => onPhotoClick(index)}
+              imageProps={{
-            >
+                src: photo.thumbnail_url || photo.url,
-              <AuthenticatedImage
+                alt: photo.filename,
-                src={photo.thumbnail_url || photo.url}
+                className: 'w-full h-full object-cover rounded-lg transition-transform duration-300 group-hover:scale-[1.02]',
-                alt={photo.filename}
+                loading: 'lazy',
-                className="w-full h-full object-cover rounded-lg transition-transform duration-300 group-hover:scale-[1.02]"
+                isGallery: true,
-                loading="lazy"
+                protectFromDownload: !allowDownloads,
-                isGallery={true}
+              }}
-                protectFromDownload={!allowDownloads}
+              overlayBaseClassName="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"
-              />
+              actionVariant="dark"
-
+              allowDownloads={allowDownloads}
-              {/* Feedback Indicators */}
+              beforeOverlay={feedbackEnabled ? <FeedbackCountIndicators photo={photo} /> : undefined}
-              {feedbackEnabled && ((photo.comment_count ?? 0) > 0 || (photo.average_rating ?? 0) > 0 || (photo.like_count ?? 0) > 0) && (
+            />
-                <div className="absolute top-2 left-2 flex gap-1 z-10">
-                  {(photo.comment_count ?? 0) > 0 && (
-                    <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
-                      <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
-                      <span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span>
-                    </div>
-                  )}
-                  {(photo.average_rating ?? 0) > 0 && (
-                    <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
-                      <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-                      <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating ?? 0).toFixed(1)}</span>
-                    </div>
-                  )}
-                  {(photo.like_count ?? 0) > 0 && (
-                    <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
-                      <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
-                      <span className="text-xs font-medium text-neutral-700">{photo.like_count ?? 0}</span>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Hover overlay with actions */}
-              <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">
-                {!isSelectionMode && (
-                  <>
-                    <button
-                      type="button"
-                      aria-label="View full size"
-                      className="p-2 bg-white/20 hover:bg-white/40 rounded-full transition-colors"
-                      onClick={(e) => { e.stopPropagation(); onPhotoClick(index); }}
-                    >
-                      <Maximize2 className="w-5 h-5 text-white" />
-                    </button>
-                    {allowDownloads && (
-                      <button
-                        type="button"
-                        aria-label="Download photo"
-                        className="p-2 bg-white/20 hover:bg-white/40 rounded-full transition-colors"
-                        onClick={(e) => { e.stopPropagation(); onDownload(photo, e); }}
-                      >
-                        <Download className="w-5 h-5 text-white" />
-                      </button>
-                    )}
-                  </>
-                )}
-              </div>
-
-              {/* Selection Checkbox */}
-              <button
-                type="button"
-                aria-label={`Select ${photo.filename}`}
-                role="checkbox"
-                aria-checked={selectedPhotos.has(photo.id)}
-                className={`absolute top-2 right-2 z-20 transition-opacity ${
-                  selectedPhotos.has(photo.id) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
-                }`}
-                onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }}
-              >
-                <div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
-                  {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
-                </div>
-              </button>
-            </div>
           );
         })}
       </div>
@@ -586,8 +413,14 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
           if (!box) return null;
 
           return (
-            <div
+            <PhotoCard
               key={photo.id}
+              photo={photo}
+              isSelected={selectedPhotos.has(photo.id)}
+              isSelectionMode={isSelectionMode}
+              onClick={() => onPhotoClick(index)}
+              onDownload={(e) => onDownload(photo, e)}
+              onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo.id)}
               className="photo-card absolute group cursor-pointer transition-all duration-300 hover:z-10"
               style={{
                 left: box.left,
@@ -595,89 +428,25 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 width: box.width,
                 height: box.height,
               }}
-              onClick={() => onPhotoClick(index)}
+              imageProps={{
+                src: photo.thumbnail_url || photo.url,
+                alt: photo.filename,
+                className: 'w-full h-full object-cover rounded-lg transition-transform duration-300 group-hover:scale-[1.02]',
+                loading: 'lazy',
+                isGallery: true,
+                protectFromDownload: !allowDownloads,
+              }}
+              overlayBaseClassName="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"
+              actionVariant="dark"
+              allowDownloads={allowDownloads}
+              beforeOverlay={feedbackEnabled ? <FeedbackCountIndicators photo={photo} /> : undefined}
             >
-              <AuthenticatedImage
-                src={photo.thumbnail_url || photo.url}
-                alt={photo.filename}
-                className="w-full h-full object-cover rounded-lg transition-transform duration-300 group-hover:scale-[1.02]"
-                loading="lazy"
-                isGallery={true}
-                protectFromDownload={!allowDownloads}
-              />
-
-              {/* Feedback Indicators */}
-              {feedbackEnabled && ((photo.comment_count ?? 0) > 0 || (photo.average_rating ?? 0) > 0 || (photo.like_count ?? 0) > 0) && (
-                <div className="absolute top-2 left-2 flex gap-1 z-10">
-                  {(photo.comment_count ?? 0) > 0 && (
-                    <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
-                      <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
-                      <span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span>
-                    </div>
-                  )}
-                  {(photo.average_rating ?? 0) > 0 && (
-                    <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
-                      <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-                      <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating ?? 0).toFixed(1)}</span>
-                    </div>
-                  )}
-                  {(photo.like_count ?? 0) > 0 && (
-                    <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
-                      <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
-                      <span className="text-xs font-medium text-neutral-700">{photo.like_count ?? 0}</span>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Hover overlay with actions */}
-              <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">
-                {!isSelectionMode && (
-                  <>
-                    <button
-                      type="button"
-                      aria-label="View full size"
-                      className="p-2 bg-white/20 hover:bg-white/40 rounded-full transition-colors"
-                      onClick={(e) => { e.stopPropagation(); onPhotoClick(index); }}
-                    >
-                      <Maximize2 className="w-5 h-5 text-white" />
-                    </button>
-                    {allowDownloads && (
-                      <button
-                        type="button"
-                        aria-label="Download photo"
-                        className="p-2 bg-white/20 hover:bg-white/40 rounded-full transition-colors"
-                        onClick={(e) => { e.stopPropagation(); onDownload(photo, e); }}
-                      >
-                        <Download className="w-5 h-5 text-white" />
-                      </button>
-                    )}
-                  </>
-                )}
-              </div>
-
-              {/* Selection Checkbox */}
-              <button
-                type="button"
-                aria-label={`Select ${photo.filename}`}
-                role="checkbox"
-                aria-checked={selectedPhotos.has(photo.id)}
-                className={`absolute top-2 right-2 z-20 transition-opacity ${
-                  selectedPhotos.has(photo.id) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
-                }`}
-                onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }}
-              >
-                <div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
-                  {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
-                </div>
-              </button>
-
               {photo.type === 'collage' && (
                 <div className="absolute bottom-2 left-2">
                   <span className="px-2 py-1 bg-black/60 text-white text-xs rounded">Collage</span>
                 </div>
               )}
-            </div>
+            </PhotoCard>
           );
         })}
       </div>
@@ -717,92 +486,34 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
           const spanClasses = getSpanClasses(photo);
 
           return (
-            <div
+            <PhotoCard
               key={photo.id}
-              className={`photo-card group cursor-pointer relative overflow-hidden rounded-lg bg-neutral-100 ${spanClasses}`}
+              photo={photo}
+              isSelected={selectedPhotos.has(photo.id)}
+              isSelectionMode={isSelectionMode}
               onClick={() => onPhotoClick(index)}
+              onDownload={(e) => onDownload(photo, e)}
+              onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo.id)}
+              className={`photo-card group cursor-pointer relative overflow-hidden rounded-lg bg-neutral-100 ${spanClasses}`}
+              imageProps={{
+                src: photo.thumbnail_url || photo.url,
+                alt: photo.filename,
+                className: 'w-full h-full object-cover transition-transform duration-300 group-hover:scale-105',
+                loading: 'lazy',
+                isGallery: true,
+                protectFromDownload: !allowDownloads,
+              }}
+              overlayBaseClassName="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-2"
+              actionVariant="dark"
+              allowDownloads={allowDownloads}
+              beforeOverlay={feedbackEnabled ? <FeedbackCountIndicators photo={photo} /> : undefined}
             >
-              <AuthenticatedImage
-                src={photo.thumbnail_url || photo.url}
-                alt={photo.filename}
-                className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
-                loading="lazy"
-                isGallery={true}
-                protectFromDownload={!allowDownloads}
-              />
-
-              {/* Feedback Indicators */}
-              {feedbackEnabled && ((photo.comment_count ?? 0) > 0 || (photo.average_rating ?? 0) > 0 || (photo.like_count ?? 0) > 0) && (
-                <div className="absolute top-2 left-2 flex gap-1 z-10">
-                  {(photo.comment_count ?? 0) > 0 && (
-                    <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
-                      <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
-                      <span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span>
-                    </div>
-                  )}
-                  {(photo.average_rating ?? 0) > 0 && (
-                    <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
-                      <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-                      <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating ?? 0).toFixed(1)}</span>
-                    </div>
-                  )}
-                  {(photo.like_count ?? 0) > 0 && (
-                    <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
-                      <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
-                      <span className="text-xs font-medium text-neutral-700">{photo.like_count ?? 0}</span>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Hover overlay with actions */}
-              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-2">
-                {!isSelectionMode && (
-                  <>
-                    <button
-                      type="button"
-                      aria-label="View full size"
-                      className="p-2 bg-white/20 hover:bg-white/40 rounded-full transition-colors"
-                      onClick={(e) => { e.stopPropagation(); onPhotoClick(index); }}
-                    >
-                      <Maximize2 className="w-5 h-5 text-white" />
-                    </button>
-                    {allowDownloads && (
-                      <button
-                        type="button"
-                        aria-label="Download photo"
-                        className="p-2 bg-white/20 hover:bg-white/40 rounded-full transition-colors"
-                        onClick={(e) => { e.stopPropagation(); onDownload(photo, e); }}
-                      >
-                        <Download className="w-5 h-5 text-white" />
-                      </button>
-                    )}
-                  </>
-                )}
-              </div>
-
-              {/* Selection Checkbox */}
-              <button
-                type="button"
-                aria-label={`Select ${photo.filename}`}
-                role="checkbox"
-                aria-checked={selectedPhotos.has(photo.id)}
-                className={`absolute top-2 right-2 z-20 transition-opacity ${
-                  selectedPhotos.has(photo.id) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
-                }`}
-                onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }}
-              >
-                <div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
-                  {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
-                </div>
-              </button>
-
               {photo.type === 'collage' && (
                 <div className="absolute bottom-2 left-2">
                   <span className="px-2 py-1 bg-black/60 text-white text-xs rounded">Collage</span>
                 </div>
               )}
-            </div>
+            </PhotoCard>
           );
         })}
       </div>

frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { Download, Maximize2, Check, Heart, MessageSquare } from 'lucide-react';
+import { Heart } from 'lucide-react';
 import { useTheme } from '../../../contexts/ThemeContext';
-import { AuthenticatedImage } from '../../common';
+import { PhotoCard } from '../PhotoCard';
 import { FeedbackIdentityModal } from '../../gallery/FeedbackIdentityModal';
 import { feedbackService } from '../../../services/feedback.service';
-import { useGuestIdentityOptional } from '../../../contexts/GuestIdentityContext';
 import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
 import type { Photo } from '../../../types';
 
@@ -54,141 +53,64 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
   const [showIdentityModal, setShowIdentityModal] = React.useState(false);
   const [pendingAction, setPendingAction] = React.useState<null | { type: 'like'; photoId: number }>(null);
   const [savedIdentity, setSavedIdentity] = React.useState<{ name: string; email: string } | null>(null);
-  const guestIdentity = useGuestIdentityOptional();
   // Seed from server is_liked (#590 follow-up). useState's initializer
   // fires once on mount, so subsequent prop updates don't reseed.
   const [likedLocal, setLikedLocal] = React.useState(photo.is_liked ?? false);
-  const canComment = Boolean(feedbackEnabled && feedbackOptions?.allowComments && onQuickComment);
 
   // Calculate aspect ratio from photo dimensions (fallback to 1 if unknown)
   const aspectRatio = (photo.width && photo.height) ? photo.width / photo.height : 1;
 
   return (
     <>
-      <div
+      <PhotoCard
+        photo={photo}
+        isSelected={isSelected}
+        isSelectionMode={isSelectionMode}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick(e);
+        }}
+        onDownload={onDownload}
+        onToggleSelect={onToggleSelect}
         className="photo-card relative group cursor-pointer overflow-hidden rounded-lg bg-neutral-100 mb-2"
         style={{
           breakInside: 'avoid',
           aspectRatio: aspectRatio.toString()
         }}
-        onClick={(e) => {
+        imageProps={{
-          e.stopPropagation();
+          src: photo.thumbnail_url || photo.url,
-          onClick(e);
+          alt: photo.filename,
+          className: 'w-full h-full object-cover transition-transform duration-300 group-hover:scale-105',
+          loading: 'lazy',
+          isGallery: true,
+          protectFromDownload: !allowDownloads,
         }}
-      >
+        overlayBaseClassName="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-2"
-        <AuthenticatedImage
+        allowDownloads={allowDownloads}
-          src={photo.thumbnail_url || photo.url}
+        feedbackEnabled={feedbackEnabled}
-          alt={photo.filename}
+        feedbackOptions={feedbackOptions}
-          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+        slug={slug}
-          loading="lazy"
+        onQuickComment={onQuickComment}
-          isGallery={true}
+        liked={likedLocal}
-          protectFromDownload={!allowDownloads}
+        onLikeSuccess={() => {
-        />
+          // Toggle — server /feedback like is a toggle (#590).
-
+          setLikedLocal(prev => !prev);
-        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-2">
+        }}
-          {!isSelectionMode && (
+        savedIdentity={savedIdentity}
-            <>
+        onRequireIdentity={(action, photoId) => {
-              <button
+          setPendingAction({ type: action, photoId });
-                className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+          setShowIdentityModal(true);
-                onClick={(e) => {
+        }}
-                  e.stopPropagation();
+        likeBeforeComment
-                  onClick(e);
+        checkboxTestId
-                }}
+        afterOverlay={((photo.like_count ?? 0) > 0 || likedLocal) ? (
-                aria-label="View full size"
-              >
-                <Maximize2 className="w-5 h-5 text-neutral-800" />
-              </button>
-              {allowDownloads && (
-                <button
-                  className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                  onClick={onDownload}
-                  aria-label="Download photo"
-                >
-                  <Download className="w-5 h-5 text-neutral-800" />
-                </button>
-              )}
-              {feedbackEnabled && feedbackOptions?.allowLikes && (
-                <button
-                  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 (guestIdentity?.identityMode === 'guest') {
-                      try {
-                        await guestIdentity.ensureIdentity();
-                      } catch {
-                        return;
-                      }
-                      // Toggle — server /feedback like is a toggle (#590).
-                      setLikedLocal(prev => !prev);
-                      try {
-                        await feedbackService.submitFeedback(slug!, String(photo.id), {
-                          feedback_type: 'like',
-                        });
-                      } catch (_) {}
-                      return;
-                    }
-                    if (feedbackOptions?.requireNameEmail && !savedIdentity) {
-                      setPendingAction({ type: 'like', photoId: photo.id });
-                      setShowIdentityModal(true);
-                      return;
-                    }
-                    // Toggle — server /feedback like is a toggle (#590).
-                    setLikedLocal(prev => !prev);
-                    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 ${likedLocal ? 'text-white fill-white' : 'text-neutral-800'}`} />
-                </button>
-              )}
-              {canComment && (
-                <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>
-              )}
-            </>
-          )}
-        </div>
-
-        {/* Feedback Indicators (bottom-left) */}
-        {((photo.like_count ?? 0) > 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>
-        )}
+        ) : undefined}
-
+      >
-        {/* Selection Checkbox (visible on hover or when selected) */}
-        <button
-          type="button"
-          aria-label={`Select ${photo.filename}`}
-          role="checkbox"
-          aria-checked={isSelected}
-          data-testid={`gallery-photo-checkbox-${photo.id}`}
-          className={`absolute top-2 right-2 z-20 transition-opacity ${
-            isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
-          }`}
-          onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}
-        >
-          <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
-            {isSelected && <Check className="w-4 h-4 text-white" />}
-          </div>
-        </button>
-
         {photo.type === 'collage' && (
           <div className="absolute bottom-2 left-2">
             <span className="px-2 py-1 bg-black/60 text-white text-xs rounded">
@@ -196,7 +118,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
             </span>
           </div>
         )}
-      </div>
+      </PhotoCard>
       <FeedbackIdentityModal
         isOpen={showIdentityModal}
         onClose={() => { setShowIdentityModal(false); setPendingAction(null); }}

frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Download, Maximize2, Check, Calendar, Heart, MessageSquare } from 'lucide-react';
+import { Calendar, Heart } from 'lucide-react';
 import { format, parseISO, startOfDay, startOfWeek, startOfMonth } from 'date-fns';
 import { useTheme } from '../../../contexts/ThemeContext';
-import { AuthenticatedImage } from '../../common';
+import { PhotoCard } from '../PhotoCard';
 import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
 import type { Photo } from '../../../types';
 import { FeedbackIdentityModal } from '../../gallery/FeedbackIdentityModal';
 import { feedbackService } from '../../../services/feedback.service';
-import { useGuestIdentityOptional } from '../../../contexts/GuestIdentityContext';
 import { useLocalizedDate } from '../../../hooks/useLocalizedDate';
 
 export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
@@ -37,7 +36,6 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
   const [showIdentityModal, setShowIdentityModal] = useState(false);
   const [pendingAction, setPendingAction] = useState<null | { type: 'like'; photoId: number }>(null);
   const [savedIdentity, setSavedIdentity] = useState<{ name: string; email: string } | null>(null);
-  const guestIdentity = useGuestIdentityOptional();
   const gallerySettings = theme.gallerySettings || {};
   const grouping = gallerySettings.timelineGrouping || 'day';
   const showDates = gallerySettings.timelineShowDates !== false;
@@ -110,141 +108,59 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
               {group.photos.map((photo) => {
                 const actualIndex = photos.findIndex(p => p.id === photo.id);
                 return (
-                  <div
+                  <PhotoCard
                     key={photo.id}
-                    className="photo-card relative group cursor-pointer aspect-square"
+                    photo={photo}
+                    isSelected={selectedPhotos.has(photo.id)}
+                    isSelectionMode={isSelectionMode}
                     onClick={() => onPhotoClick(actualIndex)}
-                  >
+                    onDownload={(e) => onDownload(photo, e)}
-                    <AuthenticatedImage
+                    onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo.id)}
-                      src={photo.thumbnail_url || photo.url}
+                    className="photo-card relative group cursor-pointer aspect-square"
-                      alt={photo.filename}
+                    imageProps={{
-                      className="w-full h-full object-cover rounded-lg"
+                      src: photo.thumbnail_url || photo.url,
-                      loading="lazy"
+                      alt: photo.filename,
-                      isGallery={true}
+                      className: 'w-full h-full object-cover rounded-lg',
-                      protectFromDownload={!allowDownloads}
+                      loading: 'lazy',
-                    />
+                      isGallery: true,
-                    
+                      protectFromDownload: !allowDownloads,
-                    {/* Time label */}
+                    }}
-                    <div className="absolute bottom-2 left-2 px-2 py-1 bg-black/60 text-white text-xs rounded">
+                    overlayBaseClassName="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"
-                      {fmtTime(photo.uploaded_at)}
+                    allowDownloads={allowDownloads}
-                    </div>
+                    feedbackEnabled={feedbackEnabled}
-                    
+                    feedbackOptions={feedbackOptions}
-                    <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">
+                    slug={slug}
-                      {!isSelectionMode && (
+                    onQuickComment={canQuickComment ? () => onOpenPhotoWithFeedback?.(actualIndex) : undefined}
-                        <>
+                    liked={likedIds.has(photo.id)}
-                          <button
+                    onLikeSuccess={() => {
-                            className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                      // Toggle — server /feedback like is a toggle (#590).
-                            onClick={(e) => {
+                      setLikedIds(prev => {
-                              e.stopPropagation();
+                        const next = new Set(prev);
-                              onPhotoClick(actualIndex);
+                        if (next.has(photo.id)) next.delete(photo.id);
-                            }}
+                        else next.add(photo.id);
-                            aria-label="View full size"
+                        return next;
-                          >
+                      });
-                            <Maximize2 className="w-5 h-5 text-neutral-800" />
+                    }}
-                          </button>
+                    savedIdentity={savedIdentity}
-                          {allowDownloads && (
+                    onRequireIdentity={(action, photoId) => {
-                            <button
+                      setPendingAction({ type: action, photoId });
-                              className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                      setShowIdentityModal(true);
-                              onClick={(e) => {
+                    }}
-                                e.stopPropagation();
+                    likeBeforeComment
-                                onDownload(photo, e);
+                    checkboxTestId
-                              }}
+                    beforeOverlay={
-                              aria-label="Download photo"
+                      <div className="absolute bottom-2 left-2 px-2 py-1 bg-black/60 text-white text-xs rounded">
-                            >
+                        {fmtTime(photo.uploaded_at)}
-                              <Download className="w-5 h-5 text-neutral-800" />
+                      </div>
-                            </button>
+                    }
-                          )}
+                    afterOverlay={((photo.like_count ?? 0) > 0 || likedIds.has(photo.id)) ? (
-                          {feedbackEnabled && feedbackOptions?.allowLikes && (
-                            <button
-                              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 (guestIdentity?.identityMode === 'guest') {
-                                  try {
-                                    await guestIdentity.ensureIdentity();
-                                  } catch {
-                                    return;
-                                  }
-                                  // Toggle — server /feedback like is a toggle (#590).
-                                  setLikedIds(prev => {
-                                    const next = new Set(prev);
-                                    if (next.has(photo.id)) next.delete(photo.id);
-                                    else next.add(photo.id);
-                                    return next;
-                                  });
-                                  try {
-                                    await feedbackService.submitFeedback(slug!, String(photo.id), {
-                                      feedback_type: 'like',
-                                    });
-                                  } catch (_) {}
-                                  return;
-                                }
-                                if (feedbackOptions?.requireNameEmail && !savedIdentity) {
-                                  setPendingAction({ type: 'like', photoId: photo.id });
-                                  setShowIdentityModal(true);
-                                  return;
-                                }
-                                // Toggle — server /feedback like is a toggle (#590).
-                                setLikedIds(prev => {
-                                  const next = new Set(prev);
-                                  if (next.has(photo.id)) next.delete(photo.id);
-                                  else next.add(photo.id);
-                                  return next;
-                                });
-                                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 ${likedIds.has(photo.id) ? 'text-white fill-white' : 'text-neutral-800'}`} />
-                            </button>
-                          )}
-                          {canQuickComment && (
-                            <button
-                              className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                              onClick={(e) => { e.stopPropagation(); onOpenPhotoWithFeedback?.(actualIndex); }}
-                              aria-label="Comment on photo"
-                              title="Comment"
-                            >
-                              <MessageSquare className="w-5 h-5 text-neutral-800" />
-                            </button>
-                          )}
-                        </>
-                      )}
-                    </div>
-
-                    {((photo.like_count ?? 0) > 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>
-                    )}
+                    ) : undefined}
-
+                  />
-                    {/* Selection Checkbox (visible on hover or when selected) */}
-                    <button
-                      type="button"
-                      aria-label={`Select ${photo.filename}`}
-                      role="checkbox"
-                      aria-checked={selectedPhotos.has(photo.id)}
-                      data-testid={`gallery-photo-checkbox-${photo.id}`}
-                      className={`absolute top-2 right-2 z-20 transition-opacity ${
-                        selectedPhotos.has(photo.id) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
-                      }`}
-                      onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }}
-                    >
-                      <div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
-                        {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
-                      </div>
-                    </button>
-                  </div>
                 );
               })}
             </div>