Implemented guest-only PWA using vite-plugin-pwa (the actual published package; @vite-pwa/plugin isn’t on npm) with

injectManifest, a new typed SW source, runtime caching, and a non‑blocking update toast with an action button. The
  guest shell now links a dedicated manifest and theme color, and background upload sync is managed in a single
  PwaManager component.

  Key changes (where/why)

  - vite.config.ts: added VitePWA injectManifest config, guest manifest, and output to /public so the SW can control /
    scope.
  - resources/js/guest/guest-sw.ts: new Workbox SW (precache + runtime caching for guest navigation, GET /api/v1/*,
    images, fonts) and preserves push/sync/notification logic.
  - resources/js/guest/components/PwaManager.tsx: registers SW, shows update/offline toasts, and processes the upload
    queue on sync/online.
  - resources/js/guest/components/ToastHost.tsx: action-capable toasts so update prompts can include a CTA.
  - resources/js/guest/i18n/messages.ts: added common.updateAvailable, common.updateAction, common.offlineReady.
  - resources/views/guest.blade.php: manifest + theme color + apple touch icon.
  - .gitignore: ignore generated public/guest-sw.js and public/guest.webmanifest; public/guest-sw.js removed since it’s
    now build output.

resources/js/guest/pages/GalleryPage.tsx

@@ -5,6 +5,7 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
 import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
 import { Heart, Image as ImageIcon, Share2 } from 'lucide-react';
+import { motion } from 'framer-motion';
 import { likePhoto } from '../services/photosApi';
 import PhotoLightbox from './PhotoLightbox';
 import { fetchEvent, type EventData } from '../services/eventApi';
@@ -15,6 +16,8 @@ import { createPhotoShareLink } from '../services/photosApi';
 import { cn } from '@/lib/utils';
 import { useEventBranding } from '../context/EventBrandingContext';
 import ShareSheet from '../components/ShareSheet';
+import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
+import PullToRefresh from '../components/PullToRefresh';
 
 const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
 type GalleryPhoto = {
@@ -54,7 +57,7 @@ export default function GalleryPage() {
   const { token } = useParams<{ token?: string }>();
   const { t, locale } = useTranslation();
   const { branding } = useEventBranding();
-  const { photos, loading, newCount, acknowledgeNew } = usePollGalleryDelta(token ?? '', locale);
+  const { photos, loading, newCount, acknowledgeNew, refreshNow } = usePollGalleryDelta(token ?? '', locale);
   const [searchParams, setSearchParams] = useSearchParams();
   const photoIdParam = searchParams.get('photoId');
   const modeParam = searchParams.get('mode');
@@ -63,6 +66,11 @@ export default function GalleryPage() {
   const linkColor = branding.buttons?.linkColor ?? branding.secondaryColor;
   const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
   const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
+  const motionEnabled = !prefersReducedMotion();
+  const containerMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
+  const fadeUpMotion = getMotionItemProps(motionEnabled, FADE_UP);
+  const fadeScaleMotion = getMotionItemProps(motionEnabled, FADE_SCALE);
+  const gridMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
   const [filter, setFilterState] = React.useState<GalleryFilter>('latest');
   const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
   const [hasOpenedPhoto, setHasOpenedPhoto] = useState(false);
@@ -122,24 +130,28 @@ export default function GalleryPage() {
   }, [typedPhotos, photos.length, photoIdParam, currentPhotoIndex, hasOpenedPhoto]);
 
   // Load event and package info
-  useEffect(() => {
+  const loadEventData = React.useCallback(async () => {
     if (!token) return;
-
-    const loadEventData = async () => {
-      try {
-        setEventLoading(true);
-        const eventData = await fetchEvent(token);
-        setEvent(eventData);
-      } catch (err) {
-        console.error('Failed to load event data', err);
-      } finally {
-        setEventLoading(false);
-      }
-    };
-
-    loadEventData();
+    try {
+      setEventLoading(true);
+      const eventData = await fetchEvent(token);
+      setEvent(eventData);
+    } catch (err) {
+      console.error('Failed to load event data', err);
+    } finally {
+      setEventLoading(false);
+    }
   }, [token]);
 
+  useEffect(() => {
+    void loadEventData();
+  }, [loadEventData]);
+
+  const handleRefresh = React.useCallback(async () => {
+    await Promise.all([refreshNow(), loadEventData()]);
+    acknowledgeNew();
+  }, [acknowledgeNew, loadEventData, refreshNow]);
+
   const myPhotoIds = React.useMemo(() => {
     try {
       const raw = localStorage.getItem('my-photo-ids');
@@ -287,152 +299,167 @@ export default function GalleryPage() {
 
   return (
     <Page title="">
-      <div className="space-y-2" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
-        <div className="flex items-center gap-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}>
-            <ImageIcon className="h-5 w-5" aria-hidden />
-          </div>
-          <div>
-            <h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
-            <p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
-          </div>
+      <PullToRefresh
+        onRefresh={handleRefresh}
+        pullLabel={t('common.pullToRefresh')}
+        releaseLabel={t('common.releaseToRefresh')}
+        refreshingLabel={t('common.refreshing')}
+      >
+        <motion.div className="space-y-2" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
+          <motion.div className="flex items-center gap-3" {...fadeUpMotion}>
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}>
+              <ImageIcon className="h-5 w-5" aria-hidden />
+            </div>
+            <div>
+              <h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
+              <p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
+            </div>
 
-          {newCount > 0 ? (
-            <button
-              type="button"
-              onClick={acknowledgeNew}
-              className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`}
-              style={{ borderRadius: radius }}
-            >
-              {newPhotosBadgeText}
-            </button>
-          ) : (
-            <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`} style={{ borderRadius: radius }}>
-              {newPhotosBadgeText}
-            </span>
-          )}
-        </div>
-      </div>
+            {newCount > 0 ? (
+              <button
+                type="button"
+                onClick={acknowledgeNew}
+                className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`}
+                style={{ borderRadius: radius }}
+              >
+                {newPhotosBadgeText}
+              </button>
+            ) : (
+              <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`} style={{ borderRadius: radius }}>
+                {newPhotosBadgeText}
+              </span>
+            )}
+          </motion.div>
+        </motion.div>
 
-      <FiltersBar
-        value={filter}
-        onChange={setFilter}
-        className="mt-2"
-        showPhotobooth={showPhotoboothFilter}
-        styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
-      />
-      {loading && <p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>{t('galleryPage.loading', 'Lade…')}</p>}
-      <div className="grid grid-cols-2 gap-2 px-2 pb-16 sm:grid-cols-3 lg:grid-cols-4">
-        {list.map((p: GalleryPhoto) => {
-          const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
-          const createdLabel = p.created_at
-            ? new Date(p.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-            : t('galleryPage.photo.justNow', 'Gerade eben');
-          const likeCount = counts[p.id] ?? (p.likes_count || 0);
-          const localizedTaskTitle = localizeTaskLabel(p.task_title ?? null, locale);
-          const altSuffix = localizedTaskTitle
-            ? t('galleryPage.photo.altTaskSuffix', { task: localizedTaskTitle })
-            : '';
-          const altText = t('galleryPage.photo.alt', { id: p.id, suffix: altSuffix }, `Foto ${p.id}${altSuffix}`);
+        <motion.div {...fadeUpMotion}>
+          <FiltersBar
+            value={filter}
+            onChange={setFilter}
+            className="mt-2"
+            showPhotobooth={showPhotoboothFilter}
+            styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
+          />
+        </motion.div>
+        {loading && (
+          <motion.p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}>
+            {t('galleryPage.loading', 'Lade…')}
+          </motion.p>
+        )}
+        <motion.div className="grid grid-cols-2 gap-2 px-2 pb-16 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
+          {list.map((p: GalleryPhoto) => {
+            const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
+            const createdLabel = p.created_at
+              ? new Date(p.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+              : t('galleryPage.photo.justNow', 'Gerade eben');
+            const likeCount = counts[p.id] ?? (p.likes_count || 0);
+            const localizedTaskTitle = localizeTaskLabel(p.task_title ?? null, locale);
+            const altSuffix = localizedTaskTitle
+              ? t('galleryPage.photo.altTaskSuffix', { task: localizedTaskTitle })
+              : '';
+            const altText = t('galleryPage.photo.alt', { id: p.id, suffix: altSuffix }, `Foto ${p.id}${altSuffix}`);
 
-          const openPhoto = () => {
-            const index = list.findIndex((photo) => photo.id === p.id);
-            setCurrentPhotoIndex(index >= 0 ? index : null);
-          };
+            const openPhoto = () => {
+              const index = list.findIndex((photo) => photo.id === p.id);
+              setCurrentPhotoIndex(index >= 0 ? index : null);
+            };
 
-          return (
-            <div
-              key={p.id}
-              role="button"
-              tabIndex={0}
-              onClick={openPhoto}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  openPhoto();
-                }
-              }}
-              className="group relative overflow-hidden border border-white/20 bg-gray-950 text-white shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400"
-              style={{ borderRadius: radius }}
-            >
-              <img
-                src={imageUrl}
-                alt={altText}
-                className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
-                onError={(e) => {
-                  (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
+            return (
+              <motion.div
+                key={p.id}
+                role="button"
+                tabIndex={0}
+                onClick={openPhoto}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    openPhoto();
+                  }
                 }}
-                loading="lazy"
-              />
-              <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent" aria-hidden />
-              <div className="absolute inset-x-0 bottom-0 space-y-2 px-4 pb-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
-                {localizedTaskTitle && <p className="text-sm font-medium leading-tight line-clamp-2 text-white" style={headingFont ? { fontFamily: headingFont } : undefined}>{localizedTaskTitle}</p>}
-                <div className="flex items-center justify-between text-xs text-white/90" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
-                  <span className="truncate">{createdLabel}</span>
-                  <span className="ml-3 truncate text-right">{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
+                className="group relative overflow-hidden border border-white/20 bg-gray-950 text-white shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400"
+                style={{ borderRadius: radius }}
+                {...fadeScaleMotion}
+              >
+                <img
+                  src={imageUrl}
+                  alt={altText}
+                  className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
+                  }}
+                  loading="lazy"
+                />
+                <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent" aria-hidden />
+                <div className="absolute inset-x-0 bottom-0 space-y-2 px-4 pb-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+                  {localizedTaskTitle && <p className="text-sm font-medium leading-tight line-clamp-2 text-white" style={headingFont ? { fontFamily: headingFont } : undefined}>{localizedTaskTitle}</p>}
+                  <div className="flex items-center justify-between text-xs text-white/90" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+                    <span className="truncate">{createdLabel}</span>
+                    <span className="ml-3 truncate text-right">{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
+                  </div>
                 </div>
+                <div className="absolute right-3 top-3 z-10 flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onShare(p);
+                    }}
+                    className={cn(
+                      'flex h-9 w-9 items-center justify-center border text-white transition backdrop-blur',
+                      shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/10'
+                    )}
+                    aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
+                    disabled={shareTargetId === p.id}
+                    style={{
+                      borderRadius: radius,
+                      background: buttonStyle === 'outline' ? 'transparent' : '#00000066',
+                      border: buttonStyle === 'outline' ? `1px solid ${linkColor}` : '1px solid rgba(255,255,255,0.4)',
+                      color: buttonStyle === 'outline' ? linkColor : undefined,
+                    }}
+                  >
+                    <Share2 className="h-4 w-4" aria-hidden />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onLike(p.id);
+                    }}
+                    className={cn(
+                      'flex items-center gap-1 px-3 py-1 text-sm font-medium transition backdrop-blur',
+                      liked.has(p.id) ? 'text-pink-300' : 'text-white'
+                    )}
+                    aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
+                    style={{
+                      borderRadius: radius,
+                      background: buttonStyle === 'outline' ? 'transparent' : '#00000066',
+                      border: buttonStyle === 'outline' ? `1px solid ${linkColor}` : '1px solid rgba(255,255,255,0.4)',
+                      color: buttonStyle === 'outline' ? linkColor : undefined,
+                    }}
+                  >
+                    <Heart className={`h-4 w-4 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
+                    {likeCount}
+                  </button>
+                </div>
+              </motion.div>
+            );
+          })}
+          {list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
+            <motion.div
+              key={`placeholder-${idx}`}
+              className="relative overflow-hidden border border-muted/40 bg-[var(--guest-surface,#f7f7f7)] shadow-sm"
+              style={{ borderRadius: radius }}
+              {...fadeScaleMotion}
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-white/60 via-white/30 to-transparent dark:from-white/5 dark:via-white/0" aria-hidden />
+              <div className="flex aspect-[3/4] items-center justify-center gap-2 p-4 text-muted-foreground/70">
+                <ImageIcon className="h-6 w-6" aria-hidden />
+                <div className="h-2 w-10 rounded-full bg-muted/40" />
               </div>
-              <div className="absolute right-3 top-3 z-10 flex items-center gap-2">
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onShare(p);
-                  }}
-                  className={cn(
-                    'flex h-9 w-9 items-center justify-center border text-white transition backdrop-blur',
-                    shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/10'
-                  )}
-                  aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
-                  disabled={shareTargetId === p.id}
-                  style={{
-                    borderRadius: radius,
-                    background: buttonStyle === 'outline' ? 'transparent' : '#00000066',
-                    border: buttonStyle === 'outline' ? `1px solid ${linkColor}` : '1px solid rgba(255,255,255,0.4)',
-                    color: buttonStyle === 'outline' ? linkColor : undefined,
-                  }}
-                >
-                  <Share2 className="h-4 w-4" aria-hidden />
-                </button>
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onLike(p.id);
-                  }}
-                  className={cn(
-                    'flex items-center gap-1 px-3 py-1 text-sm font-medium transition backdrop-blur',
-                    liked.has(p.id) ? 'text-pink-300' : 'text-white'
-                  )}
-                  aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
-                  style={{
-                    borderRadius: radius,
-                    background: buttonStyle === 'outline' ? 'transparent' : '#00000066',
-                    border: buttonStyle === 'outline' ? `1px solid ${linkColor}` : '1px solid rgba(255,255,255,0.4)',
-                    color: buttonStyle === 'outline' ? linkColor : undefined,
-                  }}
-                >
-                  <Heart className={`h-4 w-4 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
-                  {likeCount}
-                </button>
-              </div>
-            </div>
-          );
-        })}
-        {list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
-          <div
-            key={`placeholder-${idx}`}
-            className="relative overflow-hidden border border-muted/40 bg-[var(--guest-surface,#f7f7f7)] shadow-sm"
-            style={{ borderRadius: radius }}
-          >
-            <div className="absolute inset-0 bg-gradient-to-br from-white/60 via-white/30 to-transparent dark:from-white/5 dark:via-white/0" aria-hidden />
-            <div className="flex aspect-[3/4] items-center justify-center gap-2 p-4 text-muted-foreground/70">
-              <ImageIcon className="h-6 w-6" aria-hidden />
-              <div className="h-2 w-10 rounded-full bg-muted/40" />
-            </div>
-            <div className="absolute inset-0 animate-pulse bg-white/30 dark:bg-white/5" aria-hidden />
-          </div>
-        ))}
-      </div>
+              <div className="absolute inset-0 animate-pulse bg-white/30 dark:bg-white/5" aria-hidden />
+            </motion.div>
+          ))}
+        </motion.div>
+      </PullToRefresh>
       {currentPhotoIndex !== null && list.length > 0 && (
         <PhotoLightbox
           photos={list}