Initial commit - Project start (July 17, 2025)

Original: feat: enhance security logging and ensure rate limit blocks are properly tracked - Add comprehensive logging for rate limit blocks with full request details - IP address (with proper proxy detection), user agent, headers, timestamps - Rate limit info (current count, limit, remaining, reset time) - Separate tracking for auth vs general endpoints - Enhance authentication failure logging - JWT validation failures with detailed error info - Admin auth attempts without token - Failed token validation with user context - All events include IP, path, method, user agent - Improve Winston logger configuration for production - Add automatic log rotation (10MB errors, 50MB combined) - Create separate security.log for auth/rate limit events - Ensure logs directory exists automatically - Add structured JSON format for log aggregation - Support container logging with LOG_TO_CONSOLE env var - Create comprehensive documentation - Security logging guide with examples - Monitoring recommendations - Configuration reference - Add test script to verify logging functionality All rate limit settings remain configurable via admin panel: - Window duration, max requests, auth limits - Skip authenticated requests option - Public endpoints only option 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-18 19:25:15 +02:00
commit 1773ed5f95
354 changed files with 61508 additions and 0 deletions
@@ -0,0 +1,20 @@
+import React from 'react';
+import type { Photo } from '../../../types';
+
+export interface BaseGalleryLayoutProps {
+  photos: Photo[];
+  slug: string;
+  onPhotoClick: (index: number) => void;
+  onDownload: (photo: Photo, e: React.MouseEvent) => void;
+  selectedPhotos?: Set<number>;
+  isSelectionMode?: boolean;
+  onPhotoSelect?: (photoId: number) => void;
+  eventName?: string;
+  eventLogo?: string | null;
+  eventDate?: string;
+  expiresAt?: string;
+}
+
+export abstract class BaseGalleryLayout<T extends BaseGalleryLayoutProps = BaseGalleryLayoutProps> extends React.Component<T> {
+  abstract render(): React.ReactNode;
+}
@@ -0,0 +1,187 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { ChevronLeft, ChevronRight, Download, Maximize2, Play, Pause } from 'lucide-react';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { AuthenticatedImage, Button } from '../../common';
+import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
+
+export const CarouselGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
+  photos,
+  onPhotoClick,
+  onDownload,
+  // selectedPhotos = new Set(),
+  // isSelectionMode = false
+}) => {
+  const { theme } = useTheme();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  
+  const gallerySettings = theme.gallerySettings || {};
+  const autoplay = gallerySettings.carouselAutoplay || false;
+  const interval = gallerySettings.carouselInterval || 5000;
+  const showThumbnails = gallerySettings.carouselShowThumbnails !== false;
+
+  // Auto-play functionality
+  useEffect(() => {
+    if (isPlaying && photos.length > 1) {
+      intervalRef.current = setInterval(() => {
+        setCurrentIndex((prev) => (prev + 1) % photos.length);
+      }, interval);
+    } else if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [isPlaying, photos.length, interval]);
+
+  // Start autoplay if enabled
+  useEffect(() => {
+    if (autoplay) {
+      setIsPlaying(true);
+    }
+  }, [autoplay]);
+
+  const goToPrevious = () => {
+    setCurrentIndex((prev) => (prev - 1 + photos.length) % photos.length);
+  };
+
+  const goToNext = () => {
+    setCurrentIndex((prev) => (prev + 1) % photos.length);
+  };
+
+  const togglePlayPause = () => {
+    setIsPlaying(!isPlaying);
+  };
+
+  if (photos.length === 0) return null;
+
+  const currentPhoto = photos[currentIndex];
+
+  return (
+    <div className="relative">
+      {/* Main Carousel */}
+      <div className="relative h-[50vh] sm:h-[60vh] lg:h-[70vh] bg-black rounded-lg overflow-hidden">
+        <AuthenticatedImage
+          src={currentPhoto.url}
+          alt={currentPhoto.filename}
+          className="w-full h-full object-contain"
+          isGallery={true}
+        />
+        
+        {/* Navigation Controls */}
+        <div className="absolute inset-0 flex items-center justify-between p-4">
+          <button
+            onClick={goToPrevious}
+            className="p-2 bg-black/50 text-white rounded-full hover:bg-black/70 transition-colors"
+            aria-label="Previous photo"
+          >
+            <ChevronLeft className="w-6 h-6" />
+          </button>
+          
+          <button
+            onClick={goToNext}
+            className="p-2 bg-black/50 text-white rounded-full hover:bg-black/70 transition-colors"
+            aria-label="Next photo"
+          >
+            <ChevronRight className="w-6 h-6" />
+          </button>
+        </div>
+        
+        {/* Top Controls */}
+        <div className="absolute top-4 left-4 right-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="px-3 py-1 bg-black/50 text-white rounded-full text-sm">
+              {currentIndex + 1} / {photos.length}
+            </span>
+            {currentPhoto.category_name && (
+              <span className="px-3 py-1 bg-black/50 text-white rounded-full text-sm">
+                {currentPhoto.category_name}
+              </span>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={togglePlayPause}
+              className="text-white hover:bg-white/20"
+              title={isPlaying ? 'Pause slideshow' : 'Play slideshow'}
+            >
+              {isPlaying ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
+            </Button>
+            
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onPhotoClick(currentIndex)}
+              className="text-white hover:bg-white/20"
+              title="View fullscreen"
+            >
+              <Maximize2 className="w-5 h-5" />
+            </Button>
+            
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={(e) => onDownload(currentPhoto, e)}
+              className="text-white hover:bg-white/20"
+              title="Download photo"
+            >
+              <Download className="w-5 h-5" />
+            </Button>
+          </div>
+        </div>
+        
+        {/* Progress Bar */}
+        {isPlaying && (
+          <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/20">
+            <div 
+              className="h-full bg-white transition-all duration-1000 ease-linear"
+              style={{
+                width: '100%',
+                animation: `progress ${interval}ms linear infinite`
+              }}
+            />
+          </div>
+        )}
+      </div>
+      
+      {/* Thumbnails */}
+      {showThumbnails && photos.length > 1 && (
+        <div className="mt-4 relative">
+          <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-neutral-400">
+            {photos.map((photo, index) => (
+              <button
+                key={photo.id}
+                onClick={() => setCurrentIndex(index)}
+                className={`relative flex-shrink-0 w-20 h-20 rounded overflow-hidden transition-all ${
+                  index === currentIndex 
+                    ? 'ring-2 ring-primary-600 scale-110' 
+                    : 'opacity-70 hover:opacity-100'
+                }`}
+              >
+                <AuthenticatedImage
+                  src={photo.thumbnail_url || photo.url}
+                  alt={photo.filename}
+                  className="w-full h-full object-cover"
+                  loading="lazy"
+                  isGallery={true}
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+      
+      <style>{`
+        @keyframes progress {
+          from { width: 0%; }
+          to { width: 100%; }
+        }
+      `}</style>
+    </div>
+  );
+};
@@ -0,0 +1,146 @@
+import React from 'react';
+import { Download, Maximize2, Check } from 'lucide-react';
+import { useInView } from 'react-intersection-observer';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { AuthenticatedImage } from '../../common';
+import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
+import type { Photo } from '../../../types';
+
+interface GridPhotoProps {
+  photo: Photo;
+  isSelected: boolean;
+  isSelectionMode: boolean;
+  onClick: (e: React.MouseEvent) => void;
+  onDownload: (e: React.MouseEvent) => void;
+  animationType?: string;
+}
+
+const GridPhoto: React.FC<GridPhotoProps> = ({
+  photo,
+  isSelected,
+  isSelectionMode,
+  onClick,
+  onDownload,
+  animationType = 'fade'
+}) => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+  });
+
+  const animationClass = animationType === 'scale' 
+    ? 'transition-transform duration-300 hover:scale-105' 
+    : animationType === 'fade'
+    ? 'transition-opacity duration-300'
+    : '';
+
+  return (
+    <div
+      ref={ref}
+      className={`relative group cursor-pointer aspect-square ${animationClass}`}
+      onClick={onClick}
+      style={{
+        opacity: !inView && animationType === 'fade' ? 0 : 1
+      }}
+    >
+      {inView ? (
+        <>
+          <AuthenticatedImage
+            src={photo.thumbnail_url || photo.url}
+            alt={photo.filename}
+            className="w-full h-full object-cover rounded-lg"
+            loading="lazy"
+            isGallery={true}
+          />
+          
+          <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>
+                <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>
+              </>
+            )}
+          </div>
+
+          {isSelectionMode && (
+            <div className={`absolute top-2 right-2 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}>
+              <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/80 border-white'} flex items-center justify-center transition-colors`}>
+                {isSelected && <Check className="w-4 h-4 text-white" />}
+              </div>
+            </div>
+          )}
+
+          {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 className="skeleton aspect-square w-full rounded-lg" />
+      )}
+    </div>
+  );
+};
+
+export const GridGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
+  photos,
+  onPhotoClick,
+  onDownload,
+  selectedPhotos = new Set(),
+  isSelectionMode = false,
+  onPhotoSelect
+}) => {
+  const { theme } = useTheme();
+  const gallerySettings = theme.gallerySettings || {};
+  const columns = gallerySettings.gridColumns || { mobile: 2, tablet: 3, desktop: 4 };
+  const spacing = gallerySettings.spacing || 'normal';
+  const animation = gallerySettings.photoAnimation || 'fade';
+
+  const spacingClass = spacing === 'tight' ? 'gap-2' : spacing === 'relaxed' ? 'gap-6' : 'gap-4';
+  
+  const gridClass = `grid ${spacingClass} 
+    grid-cols-${columns.mobile} 
+    sm:grid-cols-${columns.tablet} 
+    lg:grid-cols-${columns.desktop} 
+    xl:grid-cols-${columns.desktop + 1}`;
+
+  return (
+    <div className={gridClass}>
+      {photos.map((photo, index) => (
+        <GridPhoto
+          key={photo.id}
+          photo={photo}
+          isSelected={selectedPhotos.has(photo.id)}
+          isSelectionMode={isSelectionMode}
+          onClick={() => {
+            if (isSelectionMode && onPhotoSelect) {
+              onPhotoSelect(photo.id);
+            } else {
+              onPhotoClick(index);
+            }
+          }}
+          onDownload={(e) => onDownload(photo, e)}
+          animationType={animation}
+        />
+      ))}
+    </div>
+  );
+};
@@ -0,0 +1,209 @@
+import React, { useState, useEffect } from 'react';
+import { Download, Maximize2, Check, ChevronDown, Calendar, Clock } from 'lucide-react';
+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 type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
+import type { Photo } from '../../../types';
+import { buildResourceUrl } from '../../../utils/url';
+
+interface HeroGalleryLayoutProps extends BaseGalleryLayoutProps {
+  eventName?: string;
+  eventLogo?: string | null;
+  eventDate?: string;
+  expiresAt?: string;
+}
+
+export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
+  photos,
+  onPhotoClick,
+  onDownload,
+  selectedPhotos = new Set(),
+  isSelectionMode = false,
+  onPhotoSelect,
+  eventName,
+  eventLogo,
+  eventDate,
+  expiresAt
+}) => {
+  const { t } = useTranslation();
+  const { format } = useLocalizedDate();
+  const { theme } = useTheme();
+  const [heroPhoto, setHeroPhoto] = useState<Photo | null>(null);
+  const [hasInitialized, setHasInitialized] = useState(false);
+  const gallerySettings = theme.gallerySettings || {};
+  const overlayOpacity = gallerySettings.heroOverlayOpacity || 0.3;
+
+  // Reset initialization when heroImageId changes
+  useEffect(() => {
+    if (gallerySettings.heroImageId) {
+      setHasInitialized(false);
+    }
+  }, [gallerySettings.heroImageId]);
+
+  // Select hero photo (admin-selected or first photo only if gallery was empty)
+  useEffect(() => {
+    if (photos.length > 0) {
+      const heroId = gallerySettings.heroImageId;
+      // Process hero layout with provided photos
+      
+      // If admin has selected a specific hero image, always use it
+      if (heroId) {
+        const adminSelectedHero = photos.find(p => p.id === heroId);
+        // Hero photo selected by admin
+        if (adminSelectedHero) {
+          setHeroPhoto(adminSelectedHero);
+          setHasInitialized(true);
+          return;
+        }
+      }
+      
+      // Only auto-select first photo on initial load when gallery was empty
+      // This prevents changing the hero when new photos are uploaded
+      if (!hasInitialized) {
+        setHeroPhoto(photos[0]);
+        setHasInitialized(true);
+      }
+    }
+  }, [photos, gallerySettings.heroImageId, hasInitialized]);
+
+  if (!heroPhoto) return null;
+
+  // Show all photos including the hero photo in the grid
+  const remainingPhotos = photos;
+
+  return (
+    <div className="relative -mt-6">
+      {/* Hero Section */}
+      <div className="relative h-[60vh] sm:h-[70vh] lg:h-[80vh] -mx-4 sm:-mx-6 lg:-mx-8 mb-8">
+        <AuthenticatedImage
+          src={heroPhoto.url}
+          alt={heroPhoto.filename}
+          className="w-full h-full object-cover"
+          isGallery={true}
+        />
+        
+        {/* Overlay */}
+        <div 
+          className="absolute inset-0 bg-black"
+          style={{ opacity: overlayOpacity }}
+        />
+        
+        {/* Hero Content */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="text-center px-4">
+            {/* Logo - Show custom logo or fallback to PicPeak logo */}
+            <div className="mb-6">
+              <img 
+                src={eventLogo ? 
+                  buildResourceUrl(eventLogo) : 
+                  '/picpeak-logo-transparent.png'
+                } 
+                alt="Event logo" 
+                className="h-20 sm:h-24 lg:h-32 mx-auto"
+                style={{ 
+                  filter: 'brightness(0) invert(1) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5))'
+                }}
+              />
+            </div>
+            
+            {/* Event Title */}
+            {eventName && (
+              <h1 className="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold text-white drop-shadow-lg mb-4">
+                {eventName}
+              </h1>
+            )}
+            
+            {/* Event Dates */}
+            {(eventDate || expiresAt) && (
+              <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 text-white/90">
+                {eventDate && (
+                  <span className="flex items-center text-lg sm:text-xl">
+                    <Calendar className="w-5 h-5 sm:w-6 sm:h-6 mr-2" />
+                    {format(parseISO(eventDate), 'PP')}
+                  </span>
+                )}
+                {expiresAt && (
+                  <span className="flex items-center text-lg sm:text-xl">
+                    <Clock className="w-5 h-5 sm:w-6 sm:h-6 mr-2" />
+                    {t('gallery.expires')} {format(parseISO(expiresAt), 'PP')}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+        
+        {/* Scroll Indicator */}
+        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+          <ChevronDown className="w-8 h-8 text-white drop-shadow-lg" />
+        </div>
+      </div>
+
+      {/* Grid Section */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+        {remainingPhotos.map((photo) => {
+          const actualIndex = photos.findIndex(p => p.id === photo.id);
+          return (
+            <div
+              key={photo.id}
+              className="relative group cursor-pointer aspect-square"
+              onClick={() => {
+                if (isSelectionMode && onPhotoSelect) {
+                  onPhotoSelect(photo.id);
+                } else {
+                  onPhotoClick(actualIndex);
+                }
+              }}
+            >
+              <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-105"
+                loading="lazy"
+                isGallery={true}
+              />
+              
+              <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();
+                        onPhotoClick(actualIndex);
+                      }}
+                      aria-label="View full size"
+                    >
+                      <Maximize2 className="w-5 h-5 text-neutral-800" />
+                    </button>
+                    <button
+                      className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDownload(photo, e);
+                      }}
+                      aria-label="Download photo"
+                    >
+                      <Download className="w-5 h-5 text-neutral-800" />
+                    </button>
+                  </>
+                )}
+              </div>
+
+              {isSelectionMode && (
+                <div className={`absolute top-2 right-2 ${selectedPhotos.has(photo.id) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}>
+                  <div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-primary-600 border-primary-600' : 'bg-white/80 border-white'} flex items-center justify-center transition-colors`}>
+                    {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,167 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Download, Maximize2, Check } from 'lucide-react';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { AuthenticatedImage } from '../../common';
+import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
+import type { Photo } from '../../../types';
+
+interface MasonryPhotoProps {
+  photo: Photo;
+  isSelected: boolean;
+  isSelectionMode: boolean;
+  onClick: (e: React.MouseEvent) => void;
+  onDownload: (e: React.MouseEvent) => void;
+  style?: React.CSSProperties;
+}
+
+const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
+  photo,
+  isSelected,
+  isSelectionMode,
+  onClick,
+  onDownload,
+  style
+}) => {
+  const [imageHeight, setImageHeight] = useState<number>(200);
+
+  // Generate random heights for masonry effect
+  useEffect(() => {
+    const heights = [200, 250, 300, 350, 400];
+    const randomHeight = heights[Math.floor(Math.random() * heights.length)];
+    setImageHeight(randomHeight);
+  }, [photo.id]);
+
+  return (
+    <div
+      className="relative group cursor-pointer transition-all duration-300 hover:scale-[1.02]"
+      onClick={onClick}
+      style={{
+        ...style,
+        height: `${imageHeight}px`,
+        breakInside: 'avoid'
+      }}
+    >
+      <AuthenticatedImage
+        src={photo.thumbnail_url || photo.url}
+        alt={photo.filename}
+        className="w-full h-full object-cover rounded-lg"
+        loading="lazy"
+        isGallery={true}
+      />
+      
+      <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>
+            <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>
+          </>
+        )}
+      </div>
+
+      {isSelectionMode && (
+        <div className={`absolute top-2 right-2 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}>
+          <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/80 border-white'} flex items-center justify-center transition-colors`}>
+            {isSelected && <Check className="w-4 h-4 text-white" />}
+          </div>
+        </div>
+      )}
+
+      {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>
+  );
+};
+
+export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
+  photos,
+  onPhotoClick,
+  onDownload,
+  selectedPhotos = new Set(),
+  isSelectionMode = false,
+  onPhotoSelect
+}) => {
+  const { theme } = useTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [columns, setColumns] = useState(3);
+  const gallerySettings = theme.gallerySettings || {};
+  const gutter = gallerySettings.masonryGutter || 16;
+
+  // Calculate number of columns based on container width
+  useEffect(() => {
+    const updateColumns = () => {
+      if (containerRef.current) {
+        const width = containerRef.current.offsetWidth;
+        if (width < 640) setColumns(2);
+        else if (width < 1024) setColumns(3);
+        else if (width < 1280) setColumns(4);
+        else setColumns(5);
+      }
+    };
+
+    updateColumns();
+    window.addEventListener('resize', updateColumns);
+    return () => window.removeEventListener('resize', updateColumns);
+  }, []);
+
+  // Distribute photos across columns
+  const photoColumns: Photo[][] = Array.from({ length: columns }, () => []);
+  photos.forEach((photo, index) => {
+    photoColumns[index % columns].push(photo);
+  });
+
+  return (
+    <div 
+      ref={containerRef}
+      className="flex gap-4"
+      style={{ gap: `${gutter}px` }}
+    >
+      {photoColumns.map((column, columnIndex) => (
+        <div 
+          key={columnIndex} 
+          className="flex-1 flex flex-col"
+          style={{ gap: `${gutter}px` }}
+        >
+          {column.map((photo) => {
+            const originalIndex = photos.findIndex(p => p.id === photo.id);
+            return (
+              <MasonryPhoto
+                key={photo.id}
+                photo={photo}
+                isSelected={selectedPhotos.has(photo.id)}
+                isSelectionMode={isSelectionMode}
+                onClick={() => {
+                  if (isSelectionMode && onPhotoSelect) {
+                    onPhotoSelect(photo.id);
+                  } else {
+                    onPhotoClick(originalIndex);
+                  }
+                }}
+                onDownload={(e) => onDownload(photo, e)}
+              />
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+};
@@ -0,0 +1,271 @@
+import React from 'react';
+import { Download, Maximize2, Check } from 'lucide-react';
+// import { useTheme } from '../../../contexts/ThemeContext';
+import { AuthenticatedImage } from '../../common';
+import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
+import type { Photo } from '../../../types';
+
+interface MosaicPhotoProps {
+  photo: Photo;
+  isSelected: boolean;
+  isSelectionMode: boolean;
+  onClick: (e: React.MouseEvent) => void;
+  onDownload: (e: React.MouseEvent) => void;
+  className?: string;
+}
+
+const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
+  photo,
+  isSelected,
+  isSelectionMode,
+  onClick,
+  onDownload,
+  className = ''
+}) => {
+  return (
+    <div
+      className={`relative group cursor-pointer overflow-hidden rounded-lg bg-neutral-100 ${className}`}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick(e);
+      }}
+    >
+      <div className="absolute inset-0">
+        <AuthenticatedImage
+          src={photo.thumbnail_url || photo.url}
+          alt={photo.filename}
+          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+          loading="lazy"
+          isGallery={true}
+        />
+      </div>
+      
+      <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
+              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>
+            <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>
+          </>
+        )}
+      </div>
+
+      {isSelectionMode && (
+        <div className={`absolute top-2 right-2 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}>
+          <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/80 border-white'} flex items-center justify-center transition-colors`}>
+            {isSelected && <Check className="w-4 h-4 text-white" />}
+          </div>
+        </div>
+      )}
+
+      {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>
+  );
+};
+
+export const MosaicGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
+  photos,
+  onPhotoClick,
+  onDownload,
+  selectedPhotos = new Set(),
+  isSelectionMode = false,
+  onPhotoSelect
+}) => {
+  // const { theme } = useTheme();
+  // const gallerySettings = theme.gallerySettings || {};
+  // const pattern = gallerySettings.mosaicPattern || 'structured';
+
+  const handlePhotoClick = (index: number, photoId: number) => {
+    if (isSelectionMode && onPhotoSelect) {
+      onPhotoSelect(photoId);
+    } else {
+      onPhotoClick(index);
+    }
+  };
+
+  // Create a more structured mosaic layout
+  const renderMosaicLayout = () => {
+    const elements = [];
+    let photoIndex = 0;
+    let patternIndex = 0;
+    
+    while (photoIndex < photos.length) {
+      const remainingPhotos = photos.length - photoIndex;
+      
+      // Choose pattern based on rotation and remaining photos
+      if (patternIndex % 3 === 0 && remainingPhotos >= 3) {
+        // Pattern 1: Large left, 2 small right
+        // Capture indices immediately to avoid closure issues
+        const idx0 = photoIndex;
+        const idx1 = photoIndex + 1;
+        const idx2 = photoIndex + 2;
+        const photo0 = photos[idx0];
+        const photo1 = photos[idx1];
+        const photo2 = photos[idx2];
+        
+        elements.push(
+          <div key={`pattern-${photoIndex}`} className="grid grid-cols-2 gap-2 mb-2 h-[400px]">
+            {photo0 && (
+              <MosaicPhoto
+                photo={photo0}
+                isSelected={selectedPhotos.has(photo0.id)}
+                isSelectionMode={isSelectionMode}
+                onClick={() => handlePhotoClick(idx0, photo0.id)}
+                onDownload={(e) => onDownload(photo0, e)}
+                className="col-span-1"
+              />
+            )}
+            <div className="grid grid-rows-2 gap-2">
+              {photo1 && (
+                <MosaicPhoto
+                  photo={photo1}
+                  isSelected={selectedPhotos.has(photo1.id)}
+                  isSelectionMode={isSelectionMode}
+                  onClick={() => handlePhotoClick(idx1, photo1.id)}
+                  onDownload={(e) => onDownload(photo1, e)}
+                  className=""
+                />
+              )}
+              {photo2 && (
+                <MosaicPhoto
+                  photo={photo2}
+                  isSelected={selectedPhotos.has(photo2.id)}
+                  isSelectionMode={isSelectionMode}
+                  onClick={() => handlePhotoClick(idx2, photo2.id)}
+                  onDownload={(e) => onDownload(photo2, e)}
+                  className=""
+                />
+              )}
+            </div>
+          </div>
+        );
+        photoIndex += 3;
+      } else if (patternIndex % 3 === 1 && remainingPhotos >= 3) {
+        // Pattern 2: 3 equal columns
+        elements.push(
+          <div key={`pattern-${photoIndex}`} className="grid grid-cols-3 gap-2 mb-2 h-[250px]">
+            {[0, 1, 2].map(offset => {
+              const currentIndex = photoIndex + offset;
+              const photo = photos[currentIndex];
+              return photo ? (
+                <MosaicPhoto
+                  key={photo.id}
+                  photo={photo}
+                  isSelected={selectedPhotos.has(photo.id)}
+                  isSelectionMode={isSelectionMode}
+                  onClick={() => handlePhotoClick(currentIndex, photo.id)}
+                  onDownload={(e) => onDownload(photo, e)}
+                  className=""
+                />
+              ) : null;
+            })}
+          </div>
+        );
+        photoIndex += 3;
+      } else if (patternIndex % 3 === 2 && remainingPhotos >= 3) {
+        // Pattern 3: Large span-2 with 2 small on right
+        // Capture indices immediately to avoid closure issues
+        const idx0 = photoIndex;
+        const idx1 = photoIndex + 1;
+        const idx2 = photoIndex + 2;
+        const photo0 = photos[idx0];
+        const photo1 = photos[idx1];
+        const photo2 = photos[idx2];
+        
+        elements.push(
+          <div key={`pattern-${photoIndex}`} className="grid grid-cols-3 gap-2 mb-2 h-[400px]">
+            {photo0 && (
+              <MosaicPhoto
+                photo={photo0}
+                isSelected={selectedPhotos.has(photo0.id)}
+                isSelectionMode={isSelectionMode}
+                onClick={() => handlePhotoClick(idx0, photo0.id)}
+                onDownload={(e) => onDownload(photo0, e)}
+                className="col-span-2"
+              />
+            )}
+            <div className="grid grid-rows-2 gap-2">
+              {photo1 && (
+                <MosaicPhoto
+                  photo={photo1}
+                  isSelected={selectedPhotos.has(photo1.id)}
+                  isSelectionMode={isSelectionMode}
+                  onClick={() => handlePhotoClick(idx1, photo1.id)}
+                  onDownload={(e) => onDownload(photo1, e)}
+                  className=""
+                />
+              )}
+              {photo2 && (
+                <MosaicPhoto
+                  photo={photo2}
+                  isSelected={selectedPhotos.has(photo2.id)}
+                  isSelectionMode={isSelectionMode}
+                  onClick={() => handlePhotoClick(idx2, photo2.id)}
+                  onDownload={(e) => onDownload(photo2, e)}
+                  className=""
+                />
+              )}
+            </div>
+          </div>
+        );
+        photoIndex += 3;
+      } else {
+        // Handle remaining photos that don't fit patterns
+        break;
+      }
+      
+      patternIndex++;
+    }
+    
+    // Add remaining photos in a regular grid
+    if (photoIndex < photos.length) {
+      const remainingPhotos = photos.slice(photoIndex);
+      elements.push(
+        <div key={`remaining-${photoIndex}`} className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2">
+          {remainingPhotos.map((photo, idx) => {
+            const index = photoIndex + idx;
+            return (
+              <MosaicPhoto
+                key={photo.id}
+                photo={photo}
+                isSelected={selectedPhotos.has(photo.id)}
+                isSelectionMode={isSelectionMode}
+                onClick={() => handlePhotoClick(index, photo.id)}
+                onDownload={(e) => onDownload(photo, e)}
+                className="aspect-square"
+              />
+            );
+          })}
+        </div>
+      );
+    }
+    
+    return elements;
+  };
+  
+  return (
+    <div className="w-full max-w-7xl mx-auto">
+      {renderMosaicLayout()}
+    </div>
+  );
+};
@@ -0,0 +1,156 @@
+import React, { useMemo } from 'react';
+import { Download, Maximize2, Check, Calendar } from 'lucide-react';
+import { format, parseISO, startOfDay, startOfWeek, startOfMonth } from 'date-fns';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { AuthenticatedImage } from '../../common';
+import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
+import type { Photo } from '../../../types';
+
+export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
+  photos,
+  onPhotoClick,
+  onDownload,
+  selectedPhotos = new Set(),
+  isSelectionMode = false,
+  onPhotoSelect
+}) => {
+  const { theme } = useTheme();
+  const gallerySettings = theme.gallerySettings || {};
+  const grouping = gallerySettings.timelineGrouping || 'day';
+  const showDates = gallerySettings.timelineShowDates !== false;
+
+  // Group photos by date
+  const groupedPhotos = useMemo(() => {
+    const groups = new Map<string, Photo[]>();
+    
+    photos.forEach(photo => {
+      const date = parseISO(photo.uploaded_at);
+      let groupKey: string;
+      
+      switch (grouping) {
+        case 'week':
+          const weekStart = startOfWeek(date);
+          groupKey = format(weekStart, 'yyyy-MM-dd');
+          // groupLabel = `Week of ${format(weekStart, 'MMM d, yyyy')}`;
+          break;
+        case 'month':
+          const monthStart = startOfMonth(date);
+          groupKey = format(monthStart, 'yyyy-MM');
+          // groupLabel = format(monthStart, 'MMMM yyyy');
+          break;
+        default: // day
+          const dayStart = startOfDay(date);
+          groupKey = format(dayStart, 'yyyy-MM-dd');
+          // groupLabel = format(dayStart, 'EEEE, MMMM d, yyyy');
+      }
+      
+      if (!groups.has(groupKey)) {
+        groups.set(groupKey, []);
+      }
+      groups.get(groupKey)!.push(photo);
+    });
+    
+    // Convert to array and sort by date
+    return Array.from(groups.entries())
+      .map(([date, photos]) => ({
+        date,
+        label: photos[0] ? format(parseISO(photos[0].uploaded_at), grouping === 'month' ? 'MMMM yyyy' : grouping === 'week' ? "'Week of' MMM d, yyyy" : 'EEEE, MMMM d, yyyy') : date,
+        photos: photos.sort((a, b) => new Date(b.uploaded_at).getTime() - new Date(a.uploaded_at).getTime())
+      }))
+      .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  }, [photos, grouping]);
+
+  return (
+    <div className="relative">
+      {/* Timeline line */}
+      <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-neutral-300 hidden lg:block" />
+      
+      {/* Timeline groups */}
+      <div className="space-y-12">
+        {groupedPhotos.map((group) => (
+          <div key={group.date} className="relative">
+            {/* Date marker */}
+            {showDates && (
+              <div className="flex items-center gap-4 mb-6">
+                <div className="hidden lg:flex items-center justify-center w-16 h-16 bg-white border-4 border-primary-600 rounded-full z-10">
+                  <Calendar className="w-6 h-6 text-primary-600" />
+                </div>
+                <h3 className="text-xl font-semibold text-neutral-800">
+                  {group.label}
+                </h3>
+              </div>
+            )}
+            
+            {/* Photos grid for this date */}
+            <div className="lg:ml-24 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+              {group.photos.map((photo) => {
+                const actualIndex = photos.findIndex(p => p.id === photo.id);
+                return (
+                  <div
+                    key={photo.id}
+                    className="relative group cursor-pointer aspect-square"
+                    onClick={() => {
+                      if (isSelectionMode && onPhotoSelect) {
+                        onPhotoSelect(photo.id);
+                      } else {
+                        onPhotoClick(actualIndex);
+                      }
+                    }}
+                  >
+                    <AuthenticatedImage
+                      src={photo.thumbnail_url || photo.url}
+                      alt={photo.filename}
+                      className="w-full h-full object-cover rounded-lg"
+                      loading="lazy"
+                      isGallery={true}
+                    />
+                    
+                    {/* Time label */}
+                    <div className="absolute bottom-2 left-2 px-2 py-1 bg-black/60 text-white text-xs rounded">
+                      {format(parseISO(photo.uploaded_at), 'h:mm a')}
+                    </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();
+                              onPhotoClick(actualIndex);
+                            }}
+                            aria-label="View full size"
+                          >
+                            <Maximize2 className="w-5 h-5 text-neutral-800" />
+                          </button>
+                          <button
+                            className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onDownload(photo, e);
+                            }}
+                            aria-label="Download photo"
+                          >
+                            <Download className="w-5 h-5 text-neutral-800" />
+                          </button>
+                        </>
+                      )}
+                    </div>
+
+                    {isSelectionMode && (
+                      <div className={`absolute top-2 right-2 ${selectedPhotos.has(photo.id) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}>
+                        <div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-primary-600 border-primary-600' : 'bg-white/80 border-white'} flex items-center justify-center transition-colors`}>
+                          {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,7 @@
+export { GridGalleryLayout } from './GridGalleryLayout';
+export { MasonryGalleryLayout } from './MasonryGalleryLayout';
+export { CarouselGalleryLayout } from './CarouselGalleryLayout';
+export { TimelineGalleryLayout } from './TimelineGalleryLayout';
+export { HeroGalleryLayout } from './HeroGalleryLayout';
+export { MosaicGalleryLayout } from './MosaicGalleryLayout';
+export type { BaseGalleryLayoutProps } from './BaseGalleryLayout';