photobooth funktionen im event admin verlinkt, gäste pwa zeigt photobooth nur noch an, wenn diese aktiviert ist. kontaktformular optimiert. teilen-link mit iMessage und whatsapp erweitert.

2025-11-23 22:22:06 +01:00
parent 3d9eaa1194
commit df414a31cd
32 changed files with 809 additions and 280 deletions
--- a/resources/js/guest/components/FiltersBar.tsx
+++ b/resources/js/guest/components/FiltersBar.tsx
@@ -5,15 +5,27 @@ import { useTranslation } from '../i18n/useTranslation';

 export type GalleryFilter = 'latest' | 'popular' | 'mine' | 'photobooth';

-const filterConfig: Array<{ value: GalleryFilter; labelKey: string; icon: React.ReactNode }> = [
+type FilterConfig = Array<{ value: GalleryFilter; labelKey: string; icon: React.ReactNode }>;
+
+const baseFilters: FilterConfig = [
  { value: 'latest', labelKey: 'galleryPage.filters.latest', icon: <Sparkles className="h-4 w-4" aria-hidden /> },
  { value: 'popular', labelKey: 'galleryPage.filters.popular', icon: <Flame className="h-4 w-4" aria-hidden /> },
  { value: 'mine', labelKey: 'galleryPage.filters.mine', icon: <UserRound className="h-4 w-4" aria-hidden /> },
-  { value: 'photobooth', labelKey: 'galleryPage.filters.photobooth', icon: <Camera className="h-4 w-4" aria-hidden /> },
 ];

-export default function FiltersBar({ value, onChange, className }: { value: GalleryFilter; onChange: (v: GalleryFilter) => void; className?: string }) {
+export default function FiltersBar({
+  value,
+  onChange,
+  className,
+  showPhotobooth = true,
+}: { value: GalleryFilter; onChange: (v: GalleryFilter) => void; className?: string; showPhotobooth?: boolean }) {
  const { t } = useTranslation();
+  const filters: FilterConfig = React.useMemo(
+    () => (showPhotobooth
+      ? [...baseFilters, { value: 'photobooth', labelKey: 'galleryPage.filters.photobooth', icon: <Camera className="h-4 w-4" aria-hidden /> }]
+      : baseFilters),
+    [showPhotobooth],
+  );

  return (
    <div
@@ -22,7 +34,7 @@ export default function FiltersBar({ value, onChange, className }: { value: Gall
        className,
      )}
    >
-      {filterConfig.map((filter) => (
+      {filters.map((filter) => (
        <button
          key={filter.value}
          type="button"
--- a/resources/js/guest/components/GalleryPreview.tsx
+++ b/resources/js/guest/components/GalleryPreview.tsx
@@ -28,10 +28,11 @@ export default function GalleryPreview({ token }: Props) {
  const { locale } = useTranslation();
  const { photos, loading } = usePollGalleryDelta(token, locale);
  const [mode, setMode] = React.useState<PreviewFilter>('latest');
+  const typedPhotos = React.useMemo(() => photos as PreviewPhoto[], [photos]);
+  const hasPhotobooth = React.useMemo(() => typedPhotos.some((p) => p.ingest_source === 'photobooth'), [typedPhotos]);

  const items = React.useMemo(() => {
-    const typed = photos as PreviewPhoto[];
-    let arr = typed.slice();
+    let arr = typedPhotos.slice();
    
    // MyPhotos filter (requires session_id matching)
    if (mode === 'mine') {
@@ -49,7 +50,13 @@ export default function GalleryPreview({ token }: Props) {
    }
    
    return arr.slice(0, 4); // 2x2 = 4 items
-  }, [photos, mode]);
+  }, [typedPhotos, mode]);
+
+  React.useEffect(() => {
+    if (mode === 'photobooth' && !hasPhotobooth) {
+      setMode('latest');
+    }
+  }, [mode, hasPhotobooth]);

  // Helper function to generate photo title (must be before return)
  function getPhotoTitle(photo: PreviewPhoto): string {
@@ -72,7 +79,7 @@ export default function GalleryPreview({ token }: Props) {
    { value: 'latest', label: 'Newest' },
    { value: 'popular', label: 'Popular' },
    { value: 'mine', label: 'My Photos' },
-    { value: 'photobooth', label: 'Fotobox' },
+    ...(hasPhotobooth ? [{ value: 'photobooth', label: 'Fotobox' } as const] : []),
  ];

  return (
--- a/resources/js/guest/context/EventBrandingContext.tsx
+++ b/resources/js/guest/context/EventBrandingContext.tsx
@@ -54,8 +54,10 @@ function applyCssVariables(branding: EventBranding) {

  if (branding.fontFamily) {
    root.style.setProperty('--guest-font-family', branding.fontFamily);
+    root.style.setProperty('--guest-heading-font', branding.fontFamily);
  } else {
    root.style.removeProperty('--guest-font-family');
+    root.style.removeProperty('--guest-heading-font');
  }
 }

@@ -69,6 +71,7 @@ function resetCssVariables() {
  root.style.removeProperty('--guest-secondary');
  root.style.removeProperty('--guest-background');
  root.style.removeProperty('--guest-font-family');
+  root.style.removeProperty('--guest-heading-font');
 }

 export function EventBrandingProvider({
--- a/resources/js/guest/i18n/messages.ts
+++ b/resources/js/guest/i18n/messages.ts
@@ -349,6 +349,9 @@ export const messages: Record<LocaleCode, NestedMessages> = {
      expiredDescription: 'Dieser Link ist nicht mehr verfügbar.',
      shareText: 'Schau dir diesen Moment bei Fotospiel an.',
      error: 'Teilen fehlgeschlagen',
+      whatsapp: 'WhatsApp',
+      imessage: 'Nachrichten',
+      copyError: 'Link konnte nicht kopiert werden.',
    },
    uploadQueue: {
      title: 'Uploads',
--- a/resources/js/guest/pages/GalleryPage.tsx
+++ b/resources/js/guest/pages/GalleryPage.tsx
@@ -3,7 +3,7 @@ import { Page } from './_util';
 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 { Heart, Image as ImageIcon, Share2, MessageSquare, Copy } from 'lucide-react';
 import { likePhoto } from '../services/photosApi';
 import PhotoLightbox from './PhotoLightbox';
 import { fetchEvent, type EventData } from '../services/eventApi';
@@ -11,8 +11,10 @@ import { useTranslation } from '../i18n/useTranslation';
 import { sharePhotoLink } from '../lib/sharePhoto';
 import { useToast } from '../components/ToastHost';
 import { localizeTaskLabel } from '../lib/localizeTaskLabel';
+import { createPhotoShareLink } from '../services/photosApi';
+import { cn } from '@/lib/utils';

-const allowedGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
+const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
 type GalleryPhoto = {
  id: number;
  likes_count?: number | null;
@@ -29,9 +31,6 @@ type GalleryPhoto = {
  uploader_name?: string | null;
 };

-const parseGalleryFilter = (value: string | null): GalleryFilter =>
-  allowedGalleryFilters.includes(value as GalleryFilter) ? (value as GalleryFilter) : 'latest';
-
 const normalizeImageUrl = (src?: string | null) => {
  if (!src) {
    return '';
@@ -56,7 +55,7 @@ export default function GalleryPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const photoIdParam = searchParams.get('photoId');
  const modeParam = searchParams.get('mode');
-  const [filter, setFilterState] = React.useState<GalleryFilter>(() => parseGalleryFilter(modeParam));
+  const [filter, setFilterState] = React.useState<GalleryFilter>('latest');
  const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
  const [hasOpenedPhoto, setHasOpenedPhoto] = useState(false);

@@ -65,10 +64,30 @@ export default function GalleryPage() {
  const toast = useToast();
  const [shareTargetId, setShareTargetId] = React.useState<number | null>(null);
  const numberFormatter = React.useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const [shareSheet, setShareSheet] = React.useState<{ photo: GalleryPhoto | null; url: string | null; loading: boolean }>({
+    photo: null,
+    url: null,
+    loading: false,
+  });
+
+  const typedPhotos = photos as GalleryPhoto[];
+  const showPhotoboothFilter = React.useMemo(
+    () => Boolean(event?.photobooth_enabled) || typedPhotos.some((p) => p.ingest_source === 'photobooth'),
+    [event?.photobooth_enabled, typedPhotos],
+  );
+  const allowedGalleryFilters = React.useMemo<GalleryFilter[]>(
+    () => (showPhotoboothFilter ? allGalleryFilters : ['latest', 'popular', 'mine']),
+    [showPhotoboothFilter],
+  );
+  const parseGalleryFilter = React.useCallback(
+    (value: string | null): GalleryFilter =>
+      allowedGalleryFilters.includes(value as GalleryFilter) ? (value as GalleryFilter) : 'latest',
+    [allowedGalleryFilters],
+  );

  useEffect(() => {
    setFilterState(parseGalleryFilter(modeParam));
-  }, [modeParam]);
+  }, [modeParam, parseGalleryFilter]);

  const setFilter = React.useCallback((next: GalleryFilter) => {
    setFilterState(next);
@@ -76,7 +95,12 @@ export default function GalleryPage() {
    params.set('mode', next);
    setSearchParams(params, { replace: true });
  }, [searchParams, setSearchParams]);
-  const typedPhotos = photos as GalleryPhoto[];
+
+  useEffect(() => {
+    if (filter === 'photobooth' && !showPhotoboothFilter) {
+      setFilter('latest');
+    }
+  }, [filter, showPhotoboothFilter, setFilter]);

  // Auto-open lightbox if photoId in query params
  useEffect(() => {
@@ -152,31 +176,89 @@ export default function GalleryPage() {
    }
  }

+  const buildShareText = (fallback?: string) => t('share.shareText', { event: event?.name ?? fallback ?? 'Fotospiel' });
+
  async function onShare(photo: GalleryPhoto) {
    if (!token) return;
+    setShareSheet({ photo, url: null, loading: true });
    setShareTargetId(photo.id);
    try {
-      const localizedTask = localizeTaskLabel(photo.task_title ?? null, locale);
-      const result = await sharePhotoLink({
-        token,
-        photoId: photo.id,
-        title: localizedTask ?? event?.name ?? t('share.title', 'Geteiltes Foto'),
-        text: t('share.shareText', { event: event?.name ?? 'Fotospiel' }),
-      });
-
-      if (result.method === 'clipboard') {
-        toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
-      } else if (result.method === 'manual') {
-        window.prompt(t('share.manualPrompt', 'Link kopieren'), result.url);
-      }
+      const url = await ensureShareUrl(photo);
+      setShareSheet({ photo, url, loading: false });
    } catch (error) {
      console.error('share failed', error);
      toast.push({ text: t('share.error', 'Teilen fehlgeschlagen'), type: 'error' });
+      setShareSheet({ photo: null, url: null, loading: false });
    } finally {
      setShareTargetId(null);
    }
  }

+  async function ensureShareUrl(photo: GalleryPhoto): Promise<string> {
+    if (!token) throw new Error('missing token');
+    const payload = await createPhotoShareLink(token, photo.id);
+    return payload.url;
+  }
+
+  function shareNative(url?: string | null) {
+    if (!shareSheet.photo || !url) return;
+    const localizedTask = localizeTaskLabel(shareSheet.photo.task_title ?? null, locale);
+    const data: ShareData = {
+      title: localizedTask ?? event?.name ?? t('share.title', 'Geteiltes Foto'),
+      text: buildShareText(),
+      url,
+    };
+    if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
+      navigator.share(data).catch(() => {
+        // user cancelled; no toast
+      });
+      setShareSheet({ photo: null, url: null, loading: false });
+      return;
+    }
+    void copyLink(url);
+  }
+
+  function shareWhatsApp(url?: string) {
+    if (!url) return;
+    const text = `${buildShareText()} ${url}`;
+    const waUrl = `https://wa.me/?text=${encodeURIComponent(text)}`;
+    window.open(waUrl, '_blank', 'noopener');
+    setShareSheet({ photo: null, url: null, loading: false });
+  }
+
+  function shareMessages(url?: string) {
+    if (!url) return;
+    const text = `${buildShareText()} ${url}`;
+    const smsUrl = `sms:?&body=${encodeURIComponent(text)}`;
+    window.open(smsUrl, '_blank', 'noopener');
+    setShareSheet({ photo: null, url: null, loading: false });
+  }
+
+  async function copyLink(url?: string | null) {
+    if (!url) return;
+    try {
+      await navigator.clipboard?.writeText(url);
+      toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
+    } catch {
+      toast.push({ text: t('share.copyError', 'Link konnte nicht kopiert werden.'), type: 'error' });
+    } finally {
+      setShareSheet({ photo: null, url: null, loading: false });
+    }
+  }
+
+  function closeShareSheet() {
+    setShareSheet({ photo: null, url: null, loading: false });
+  }
+
+  const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
+      <path
+        fill="currentColor"
+        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
+      />
+    </svg>
+  );
+
  if (!token) {
    return (
      <Page title={t('galleryPage.title', 'Galerie')}>
@@ -230,7 +312,7 @@ export default function GalleryPage() {
        
      </div>

-      <FiltersBar value={filter} onChange={setFilter} className="mt-2" />
+      <FiltersBar value={filter} onChange={setFilter} className="mt-2" showPhotobooth={showPhotoboothFilter} />
      {loading && <p className="px-4">{t('galleryPage.loading', 'Lade…')}</p>}
      <div className="grid gap-3 px-4 pb-16 sm:grid-cols-2 lg:grid-cols-3">
        {list.map((p: GalleryPhoto) => {
@@ -272,22 +354,32 @@ export default function GalleryPage() {
                }}
                loading="lazy"
              />
-              <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" aria-hidden />
-              <div className="pointer-events-none absolute inset-x-0 bottom-0 space-y-2 px-4 pb-4">
-                {localizedTaskTitle && <p className="text-sm font-medium leading-tight line-clamp-2">{localizedTaskTitle}</p>}
-                <div className="flex items-center justify-between text-xs text-white/80">
-                  <span>{createdLabel}</span>
-                  <span>{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
+              <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">
+                {localizedTaskTitle && <p className="text-sm font-medium leading-tight line-clamp-2 text-white">{localizedTaskTitle}</p>}
+                <div className="flex items-center justify-between text-xs text-white/90">
+                  <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 bottom-3 right-3 flex items-center gap-2">
+              <div className="absolute left-3 top-3 z-10 flex flex-col items-start gap-2">
+                {localizedTaskTitle && (
+                  <span className="rounded-full bg-white/20 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-white shadow">
+                    {localizedTaskTitle}
+                  </span>
+                )}
+              </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={`flex h-9 w-9 items-center justify-center rounded-full border border-white/30 bg-white/10 transition ${shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/20'}`}
+                  className={cn(
+                    'flex h-9 w-9 items-center justify-center rounded-full border border-white/40 bg-black/40 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}
                >
@@ -299,7 +391,10 @@ export default function GalleryPage() {
                    e.stopPropagation();
                    onLike(p.id);
                  }}
-                  className={`flex items-center gap-1 rounded-full border border-white/30 bg-white/10 px-3 py-1 text-sm font-medium transition ${liked.has(p.id) ? 'text-pink-300' : 'text-white'}`}
+                  className={cn(
+                    'flex items-center gap-1 rounded-full border border-white/40 bg-black/40 px-3 py-1 text-sm font-medium text-white transition backdrop-blur',
+                    liked.has(p.id) ? 'text-pink-300' : 'text-white'
+                  )}
                  aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
                >
                  <Heart className={`h-4 w-4 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
@@ -319,6 +414,79 @@ export default function GalleryPage() {
          token={token}
        />
      )}
+
+      {shareSheet.photo && (
+        <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
+          <div className="w-full max-w-md rounded-t-3xl bg-white p-4 shadow-xl dark:bg-slate-900">
+            <div className="mb-3 flex items-center justify-between">
+              <div>
+                <p className="text-xs uppercase tracking-wide text-muted-foreground">
+                  {t('share.title', 'Geteiltes Foto')}
+                </p>
+                <p className="text-sm font-semibold text-foreground">#{shareSheet.photo.id}</p>
+              </div>
+              <button
+                type="button"
+                className="rounded-full border border-muted px-3 py-1 text-xs font-semibold"
+                onClick={closeShareSheet}
+              >
+                {t('lightbox.close', 'Schließen')}
+              </button>
+            </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
+                  onClick={() => shareNative(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <Share2 className="h-4 w-4" />
+                  <div>
+                    <div>{t('share.button', 'Teilen')}</div>
+                    <div className="text-xs text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-emerald-50 px-3 py-3 text-left text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200"
+                  onClick={() => shareWhatsApp(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <WhatsAppIcon className="h-5 w-5" />
+                  <div>
+                    <div>{t('share.whatsapp', 'WhatsApp')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-sky-50 px-3 py-3 text-left text-sm font-semibold text-sky-700 transition hover:bg-sky-100 dark:border-sky-900/40 dark:bg-sky-900/20 dark:text-sky-200"
+                  onClick={() => shareMessages(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <MessageSquare className="h-5 w-5" />
+                  <div>
+                    <div>{t('share.imessage', 'Nachrichten')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
+                  onClick={() => copyLink(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <Copy className="h-4 w-4" />
+                  <div>
+                    <div>{t('share.copyLink', 'Link kopieren')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
+                  </div>
+                </button>
+              </div>
+          </div>
+        </div>
+      )}
    </Page>
  );
 }
--- a/resources/js/guest/pages/PhotoLightbox.tsx
+++ b/resources/js/guest/pages/PhotoLightbox.tsx
@@ -2,10 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Heart, ChevronLeft, ChevronRight, X, Share2 } from 'lucide-react';
-import { likePhoto } from '../services/photosApi';
+import { Heart, ChevronLeft, ChevronRight, X, Share2, MessageSquare, Copy } from 'lucide-react';
+import { likePhoto, createPhotoShareLink } from '../services/photosApi';
 import { useTranslation } from '../i18n/useTranslation';
-import { sharePhotoLink } from '../lib/sharePhoto';
 import { useToast } from '../components/ToastHost';

 type Photo = {
@@ -42,7 +41,10 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
  const [taskLoading, setTaskLoading] = useState(false);
  const [likes, setLikes] = useState<number>(0);
  const [liked, setLiked] = useState(false);
-  const [shareLoading, setShareLoading] = useState(false);
+  const [shareSheet, setShareSheet] = useState<{ url: string | null; loading: boolean }>({
+    url: null,
+    loading: false,
+  });

  // Determine mode and photo
  const isStandalone = !photos || photos.length === 0;
@@ -209,30 +211,61 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
    }
  }

-  async function onShare() {
-    if (!photo || !eventToken) return;
-    setShareLoading(true);
-    try {
-      const result = await sharePhotoLink({
-        token: eventToken,
-        photoId: photo.id,
-        title: photo.task_title ?? task?.title ?? t('share.title', 'Geteiltes Foto'),
-        text: t('share.shareText', { event: '' }),
-      });
+  const shareTitle = photo?.task_title ?? task?.title ?? t('share.title', 'Geteiltes Foto');
+  const shareText = t('share.shareText', { event: shareTitle || 'Fotospiel' });

-      if (result.method === 'clipboard') {
-        toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
-      } else if (result.method === 'manual') {
-        window.prompt(t('share.manualPrompt', 'Link kopieren'), result.url);
-      }
+  const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
+      <path
+        fill="currentColor"
+        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
+      />
+    </svg>
+  );
+
+  async function openShareSheet() {
+    if (!photo || !eventToken) return;
+    setShareSheet({ url: null, loading: true });
+    try {
+      const payload = await createPhotoShareLink(eventToken, photo.id);
+      setShareSheet({ url: payload.url, loading: false });
    } catch (error) {
      console.error('share failed', error);
      toast.push({ text: t('share.error', 'Teilen fehlgeschlagen'), type: 'error' });
-    } finally {
-      setShareLoading(false);
+      setShareSheet({ url: null, loading: false });
    }
  }

+  function shareWhatsApp(url?: string | null) {
+    if (!url) return;
+    const waUrl = `https://wa.me/?text=${encodeURIComponent(`${shareText} ${url}`)}`;
+    window.open(waUrl, '_blank', 'noopener');
+    setShareSheet({ url: null, loading: false });
+  }
+
+  function shareMessages(url?: string | null) {
+    if (!url) return;
+    const smsUrl = `sms:?&body=${encodeURIComponent(`${shareText} ${url}`)}`;
+    window.open(smsUrl, '_blank', 'noopener');
+    setShareSheet({ url: null, loading: false });
+  }
+
+  async function copyLink(url?: string | null) {
+    if (!url) return;
+    try {
+      await navigator.clipboard?.writeText(url);
+      toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
+    } catch {
+      toast.push({ text: t('share.copyError', 'Link konnte nicht kopiert werden.'), type: 'error' });
+    } finally {
+      setShareSheet({ url: null, loading: false });
+    }
+  }
+
+  function closeShareSheet() {
+    setShareSheet({ url: null, loading: false });
+  }
+
  function onOpenChange(open: boolean) {
    if (!open) handleClose();
  }
@@ -255,8 +288,8 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
            <Button
              variant="secondary"
              size="sm"
-              onClick={onShare}
-              disabled={shareLoading || !eventToken || !photo}
+              onClick={openShareSheet}
+              disabled={!eventToken || !photo}
            >
              <Share2 className="mr-1 h-4 w-4" />
              {t('share.button', 'Teilen')}
@@ -341,6 +374,92 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
            </div>
          </div>
        )}
+
+        {(shareSheet.url !== null || shareSheet.loading) && (
+          <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
+            <div className="w-full max-w-md rounded-t-3xl bg-white p-4 shadow-xl dark:bg-slate-900">
+              <div className="mb-3 flex items-center justify-between">
+                <div>
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">
+                    {t('share.title', 'Geteiltes Foto')}
+                  </p>
+                  <p className="text-sm font-semibold text-foreground">#{photo?.id}</p>
+                </div>
+                <button
+                  type="button"
+                  className="rounded-full border border-muted px-3 py-1 text-xs font-semibold"
+                  onClick={closeShareSheet}
+                >
+                  {t('lightbox.close', 'Schließen')}
+                </button>
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
+                  onClick={() => {
+                    if (!shareSheet.url) return;
+                    const data: ShareData = {
+                      title: shareTitle,
+                      text: shareText,
+                      url: shareSheet.url,
+                    };
+                    if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
+                      navigator.share(data).catch(() => {});
+                      setShareSheet({ url: null, loading: false });
+                    } else {
+                      void copyLink(shareSheet.url);
+                    }
+                  }}
+                  disabled={shareSheet.loading}
+                >
+                  <Share2 className="h-4 w-4" />
+                  <div>
+                    <div>{t('share.button', 'Teilen')}</div>
+                    <div className="text-xs text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-emerald-50 px-3 py-3 text-left text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200"
+                  onClick={() => shareWhatsApp(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <WhatsAppIcon className="h-5 w-5" />
+                  <div>
+                    <div>{t('share.whatsapp', 'WhatsApp')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-sky-50 px-3 py-3 text-left text-sm font-semibold text-sky-700 transition hover:bg-sky-100 dark:border-sky-900/40 dark:bg-sky-900/20 dark:text-sky-200"
+                  onClick={() => shareMessages(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <MessageSquare className="h-5 w-5" />
+                  <div>
+                    <div>{t('share.imessage', 'Nachrichten')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
+                  onClick={() => copyLink(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <Copy className="h-4 w-4" />
+                  <div>
+                    <div>{t('share.copyLink', 'Link kopieren')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
      </DialogContent>
    </Dialog>
  );
--- a/resources/js/guest/pages/UploadPage.tsx
+++ b/resources/js/guest/pages/UploadPage.tsx
@@ -279,7 +279,7 @@ const [canUpload, setCanUpload] = useState(true);

  // Check upload limits
  useEffect(() => {
-    if (!eventKey || !task) return;
+    if (!eventKey) return;

    const checkLimits = async () => {
      try {
@@ -326,7 +326,7 @@ const [canUpload, setCanUpload] = useState(true);
    };

    checkLimits();
-  }, [eventKey, task, t]);
+  }, [eventKey, t]);

  const stopStream = useCallback(() => {
    if (streamRef.current) {
@@ -542,19 +542,19 @@ const [canUpload, setCanUpload] = useState(true);

  const navigateAfterUpload = useCallback(
    (photoId: number | undefined) => {
-      if (!eventKey || !task) return;
+      if (!eventKey) return;
      const params = new URLSearchParams();
      params.set('uploaded', 'true');
-      if (task.id) params.set('task', String(task.id));
+      if (task?.id) params.set('task', String(task.id));
      if (photoId) params.set('photo', String(photoId));
      if (emotionSlug) params.set('emotion', emotionSlug);
      navigate(`/e/${encodeURIComponent(eventKey)}/gallery?${params.toString()}`);
    },
-    [emotionSlug, navigate, eventKey, task]
+    [emotionSlug, navigate, eventKey, task?.id]
  );

  const handleUsePhoto = useCallback(async () => {
-    if (!eventKey || !reviewPhoto || !task || !canUpload) return;
+    if (!eventKey || !reviewPhoto || !canUpload) return;
    setMode('uploading');
    setUploadProgress(2);
    setUploadError(null);
--- a/resources/js/guest/polling/usePollGalleryDelta.ts
+++ b/resources/js/guest/polling/usePollGalleryDelta.ts
@@ -64,17 +64,22 @@ export function usePollGalleryDelta(token: string, locale: LocaleCode) {
      
      if (newPhotos.length > 0) {
        const added = newPhotos.length;
-        
-        if (latestAt.current) {
-          // Delta mode: Add new photos to existing list
-          const merged = [...newPhotos, ...photos];
-          const byId = new Map<number, Photo>();
-          merged.forEach((photo) => byId.set(photo.id, photo));
-          setPhotos(Array.from(byId.values()));
-          if (added > 0) setNewCount((c) => c + added);
-        } else {
-          // Initial load: Set all photos
-          setPhotos(newPhotos);
+        const hasBaseline = latestAt.current !== null;
+
+        setPhotos((prev) => {
+          if (hasBaseline) {
+            // Delta mode: merge new photos with existing list by id
+            const merged = [...newPhotos, ...prev];
+            const byId = new Map<number, Photo>();
+            merged.forEach((photo) => byId.set(photo.id, photo));
+            return Array.from(byId.values());
+          }
+
+          return newPhotos;
+        });
+
+        if (hasBaseline && added > 0) {
+          setNewCount((c) => c + added);
        }
        
        // Update latest timestamp
@@ -103,7 +108,7 @@ export function usePollGalleryDelta(token: string, locale: LocaleCode) {
      setLoading(false);
      // Don't update state on error - keep previous photos
    }
-  }, [locale, photos, token]);
+  }, [locale, token]);

  useEffect(() => {
    const onVis = () => setVisible(document.visibilityState === 'visible');
--- a/resources/js/guest/router.tsx
+++ b/resources/js/guest/router.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { createBrowserRouter, Outlet, useParams, Link } from 'react-router-dom';
+import { createBrowserRouter, Outlet, useParams, Link, Navigate } from 'react-router-dom';
 import Header from './components/Header';
 import BottomNav from './components/BottomNav';
 import { useEventData } from './hooks/useEventData';
 import { AlertTriangle, Loader2 } from 'lucide-react';
 import { EventStatsProvider } from './context/EventStatsContext';
-import { GuestIdentityProvider } from './context/GuestIdentityContext';
+import { GuestIdentityProvider, useOptionalGuestIdentity } from './context/GuestIdentityContext';
 import { EventBrandingProvider } from './context/EventBrandingContext';
 import { LocaleProvider } from './i18n/LocaleContext';
 import { DEFAULT_LOCALE, isLocaleCode } from './i18n/messages';
@@ -92,6 +92,7 @@ export const router = createBrowserRouter([
 ]);

 function EventBoundary({ token }: { token: string }) {
+  const identity = useOptionalGuestIdentity();
  const { event, status, error, errorCode } = useEventData();

  if (status === 'loading') {
@@ -102,6 +103,10 @@ function EventBoundary({ token }: { token: string }) {
    return <EventErrorView code={errorCode} message={error} />;
  }

+  if (identity?.hydrated && !identity.name) {
+    return <Navigate to={`/setup/${encodeURIComponent(token)}`} replace />;
+  }
+
  const eventLocale = isLocaleCode(event.default_locale) ? event.default_locale : DEFAULT_LOCALE;
  const localeStorageKey = `guestLocale_event_${event.id ?? token}`;
  const branding = mapEventBranding(event.branding);
--- a/resources/js/guest/services/eventApi.ts
+++ b/resources/js/guest/services/eventApi.ts
@@ -16,6 +16,7 @@ export interface EventData {
  created_at: string;
  updated_at: string;
  join_token?: string | null;
+  photobooth_enabled?: boolean | null;
  type?: {
    slug: string;
    name: string;