added upload queue notifications

resources/js/guest/pages/UploadPage.tsx

@@ -192,7 +192,6 @@ const [canUpload, setCanUpload] = useState(true);
     if (typeof document === 'undefined') return undefined;
     const className = 'guest-immersive';
     document.body.classList.add(className);
-    document.body.classList.add('guest-nav-visible'); // show nav by default on upload page
 
     return () => {
       document.body.classList.remove(className);
@@ -227,8 +226,8 @@ const [canUpload, setCanUpload] = useState(true);
     if (typeof document === 'undefined') {
       return;
     }
-    // nav is always visible on upload page unless user explicitly toggles immersive off via button
-    document.body.classList.add('guest-nav-visible');
+    const shouldShow = typeof window !== 'undefined' && window.scrollY > 24;
+    document.body.classList.toggle('guest-nav-visible', shouldShow);
   }, []);
 
   useEffect(() => {
@@ -236,11 +235,12 @@ const [canUpload, setCanUpload] = useState(true);
       return;
     }
 
-    // ensure nav remains visible; hide only when immersive toggled off via the menu button
     updateNavVisibility();
+    window.addEventListener('scroll', updateNavVisibility, { passive: true });
 
     return () => {
       document.body.classList.remove('guest-nav-visible');
+      window.removeEventListener('scroll', updateNavVisibility);
     };
   }, [updateNavVisibility]);
 
@@ -721,9 +721,10 @@ const [canUpload, setCanUpload] = useState(true);
       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()}`);
+      const target = uploadsRequireApproval ? 'queue' : 'gallery';
+      navigate(`/e/${encodeURIComponent(eventKey)}/${target}?${params.toString()}`);
     },
-    [emotionSlug, navigate, eventKey, task?.id]
+    [emotionSlug, navigate, eventKey, task?.id, uploadsRequireApproval]
   );
 
   const handleUsePhoto = useCallback(async () => {
@@ -1009,39 +1010,11 @@ const [canUpload, setCanUpload] = useState(true);
         <div className="space-y-1">
           <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Bereit für dein Foto?</p>
           <p className="text-base font-semibold leading-tight">Teile den Moment mit allen Gästen.</p>
-          <p className="text-xs text-white/75">Zieh eine Mission oder starte direkt.</p>
         </div>
         <Badge variant="secondary" className="rounded-full bg-white/15 px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-white/90">
           Live
         </Badge>
       </div>
-      <div className="mt-3 flex flex-wrap items-center gap-2">
-        <Button
-          size="sm"
-          className="rounded-full bg-white text-black shadow"
-          onClick={() => {
-            setShowHeroOverlay(false);
-            navigate(tasksUrl);
-          }}
-        >
-          Mission ziehen
-        </Button>
-        <Button
-          size="sm"
-          variant="secondary"
-          className="rounded-full border border-white/30 bg-white/10 text-white"
-          onClick={() => {
-            setShowHeroOverlay(false);
-            navigate(tasksUrl);
-          }}
-        >
-          Stimmung wählen
-        </Button>
-        <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-[11px] text-white/85">
-          <Sparkles className="h-4 w-4 text-amber-200" />
-          Mini-Mission: Fang ein Lachen ein
-        </span>
-      </div>
     </div>
   ) : null;
 
@@ -1228,12 +1201,6 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
       >
         {taskFloatingCard}
         {heroOverlay}
-        {uploadsRequireApproval ? (
-          <div className="mx-4 rounded-xl border border-amber-300/70 bg-amber-50/80 p-3 text-amber-900 shadow-sm backdrop-blur dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-50">
-            <p className="text-sm font-semibold">{t('upload.review.noticeTitle', 'Uploads werden geprüft')}</p>
-            <p className="text-xs">{t('upload.review.noticeBody', 'Dein Foto erscheint, sobald es freigegeben wurde.')}</p>
-          </div>
-        ) : null}
         <section
           className="relative flex flex-col overflow-hidden border border-white/10 bg-black text-white shadow-2xl"
           style={{ borderRadius: radius }}
@@ -1462,16 +1429,24 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
               </Button>
 
               {mode === 'review' && reviewPhoto ? (
-                <div className="flex w-full max-w-md flex-col gap-3 sm:flex-row">
-                  <Button variant="secondary" className="flex-1" onClick={handleRetake}>
-                    {t('upload.review.retake')}
-                  </Button>
-                  <Button
-                    className="flex-1 animate-pulse bg-pink-500 text-white shadow-lg hover:bg-pink-600 focus-visible:ring-pink-300"
-                    onClick={handleUsePhoto}
-                  >
-                    {t('upload.review.keep')}
-                  </Button>
+                <div className="flex w-full max-w-md flex-col gap-3">
+                  {uploadsRequireApproval ? (
+                    <div className="rounded-xl border border-amber-300/70 bg-amber-50/80 p-3 text-amber-900 shadow-sm backdrop-blur dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-50">
+                      <p className="text-sm font-semibold">{t('upload.review.noticeTitle', 'Uploads werden geprüft')}</p>
+                      <p className="text-xs">{t('upload.review.noticeBody', 'Dein Foto erscheint, sobald es freigegeben wurde.')}</p>
+                    </div>
+                  ) : null}
+                  <div className="flex flex-col gap-3 sm:flex-row">
+                    <Button variant="secondary" className="flex-1" onClick={handleRetake}>
+                      {t('upload.review.retake')}
+                    </Button>
+                    <Button
+                      className="flex-1 animate-pulse bg-pink-500 text-white shadow-lg hover:bg-pink-600 focus-visible:ring-pink-300"
+                      onClick={handleUsePhoto}
+                    >
+                      {t('upload.review.keep')}
+                    </Button>
+                  </div>
                 </div>
               ) : (
                 <div className="relative h-24 w-24">

resources/js/guest/pages/UploadQueuePage.tsx

@@ -1,12 +1,153 @@
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { Page } from './_util';
 import { useTranslation } from '../i18n/useTranslation';
+import { fetchPendingUploadsSummary, type PendingUpload } from '../services/pendingUploadsApi';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Image as ImageIcon, Loader2, RefreshCcw } from 'lucide-react';
+import { useEventBranding } from '../context/EventBrandingContext';
 
 export default function UploadQueuePage() {
-  const { t } = useTranslation();
+  const { t, locale } = useTranslation();
+  const { token } = useParams<{ token?: string }>();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const { branding } = useEventBranding();
+  const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
+  const [pending, setPending] = useState<PendingUpload[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const showSuccess = searchParams.get('uploaded') === 'true';
+  const buttonStyle = branding.buttons?.style ?? 'filled';
+  const linkColor = branding.buttons?.linkColor ?? branding.secondaryColor;
+  const radius = branding.buttons?.radius ?? 12;
+
+  const formatter = useMemo(
+    () => new Intl.DateTimeFormat(locale, { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' }),
+    [locale],
+  );
+
+  const formatTimestamp = useCallback((value?: string | null) => {
+    if (!value) {
+      return t('pendingUploads.card.justNow');
+    }
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+      return t('pendingUploads.card.justNow');
+    }
+    return formatter.format(date);
+  }, [formatter, t]);
+
+  const loadPendingUploads = useCallback(async () => {
+    if (!token) return;
+    try {
+      setLoading(true);
+      setError(null);
+      const result = await fetchPendingUploadsSummary(token, 12);
+      setPending(result.items);
+    } catch (err) {
+      console.error('Pending uploads load failed', err);
+      setError(t('pendingUploads.error'));
+    } finally {
+      setLoading(false);
+    }
+  }, [t, token]);
+
+  useEffect(() => {
+    if (!token) return;
+    loadPendingUploads();
+  }, [loadPendingUploads, token]);
+
+  const emptyState = !loading && pending.length === 0;
+
   return (
-    <Page title={t('uploadQueue.title')}>
-      <p>{t('uploadQueue.description')}</p>
+    <Page title={t('pendingUploads.title')}>
+      <div className="space-y-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+        <p className="text-sm text-muted-foreground">{t('pendingUploads.subtitle')}</p>
+
+        {showSuccess && (
+          <Alert className="border-amber-300/70 bg-amber-50/80 text-amber-900 dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-50">
+            <AlertDescription>
+              <p className="text-sm font-semibold">{t('pendingUploads.successTitle')}</p>
+              <p className="text-xs">{t('pendingUploads.successBody')}</p>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription className="text-sm">{error}</AlertDescription>
+          </Alert>
+        )}
+
+        <div className="flex flex-wrap items-center gap-2">
+          <Button
+            size="sm"
+            onClick={() => {
+              if (token) {
+                navigate(`/e/${encodeURIComponent(token)}/upload`);
+              }
+            }}
+            style={buttonStyle === 'outline'
+              ? { borderRadius: radius, background: 'transparent', color: linkColor, border: `1px solid ${linkColor}` }
+              : { borderRadius: radius }}
+          >
+            {t('pendingUploads.cta')}
+          </Button>
+          <Button
+            size="sm"
+            variant="secondary"
+            onClick={loadPendingUploads}
+            disabled={loading}
+            style={buttonStyle === 'outline'
+              ? { borderRadius: radius, background: 'transparent', color: linkColor, border: `1px solid ${linkColor}` }
+              : { borderRadius: radius }}
+          >
+            <RefreshCcw className="mr-2 h-4 w-4" />
+            {t('pendingUploads.refresh')}
+          </Button>
+        </div>
+
+        {loading ? (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            {t('pendingUploads.loading', 'Lade Uploads...')}
+          </div>
+        ) : (
+          <div className="grid gap-3">
+            {pending.map((photo) => (
+              <div
+                key={photo.id}
+                className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/90 p-3 shadow-sm dark:border-white/10 dark:bg-white/5"
+              >
+                <div className="h-16 w-16 overflow-hidden rounded-lg bg-slate-200/70 dark:bg-white/10">
+                  {photo.thumbnail_url ? (
+                    <img src={photo.thumbnail_url} alt="" className="h-full w-full object-cover" />
+                  ) : (
+                    <div className="flex h-full w-full items-center justify-center text-slate-500 dark:text-white/50">
+                      <ImageIcon className="h-6 w-6" />
+                    </div>
+                  )}
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-semibold">{t('pendingUploads.card.pending')}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {t('pendingUploads.card.uploadedAt').replace('{time}', formatTimestamp(photo.created_at))}
+                  </p>
+                </div>
+              </div>
+            ))}
+
+            {emptyState && (
+              <div className="rounded-2xl border border-dashed border-white/20 bg-white/80 p-6 text-center text-sm text-muted-foreground dark:border-white/10 dark:bg-white/5">
+                <p className="font-semibold text-foreground">{t('pendingUploads.emptyTitle')}</p>
+                <p className="mt-2 text-xs text-muted-foreground">{t('pendingUploads.emptyBody')}</p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
     </Page>
   );
 }

resources/js/guest/pages/__tests__/UploadPageNavVisibility.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import UploadPage from '../UploadPage';
 
 vi.mock('react-router-dom', () => ({
@@ -69,6 +69,7 @@ describe('UploadPage bottom nav visibility', () => {
   beforeEach(() => {
     document.body.classList.remove('guest-nav-visible');
     document.body.classList.remove('guest-immersive');
+    Object.defineProperty(window, 'scrollY', { value: 0, writable: true, configurable: true });
     vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
       cb(0);
       return 0;
@@ -76,46 +77,21 @@ describe('UploadPage bottom nav visibility', () => {
     vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
   });
 
-  it('shows the nav after the KPI chips are scrolled past', async () => {
+  it('toggles the nav visibility based on scroll position', async () => {
     render(<UploadPage />);
 
-    const chips = screen.getByTestId('upload-kpi-chips');
-    const sentinel = screen.getByTestId('nav-visibility-sentinel');
-    let bottom = 20;
-    let top = 20;
-    vi.spyOn(chips, 'getBoundingClientRect').mockImplementation(() => ({
-      bottom,
-      top: bottom - 40,
-      left: 0,
-      right: 0,
-      width: 0,
-      height: 0,
-      x: 0,
-      y: 0,
-      toJSON: () => ({}),
-    }) as DOMRect);
-    vi.spyOn(sentinel, 'getBoundingClientRect').mockImplementation(() => ({
-      bottom: top,
-      top,
-      left: 0,
-      right: 0,
-      width: 0,
-      height: 0,
-      x: 0,
-      y: 0,
-      toJSON: () => ({}),
-    }) as DOMRect);
+    expect(document.body.classList.contains('guest-nav-visible')).toBe(false);
 
-    // nav is on by default now
-    expect(document.body.classList.contains('guest-nav-visible')).toBe(true);
-
-    bottom = -1;
-    top = -10;
+    window.scrollY = 120;
     window.dispatchEvent(new Event('scroll'));
     await waitFor(() => {
       expect(document.body.classList.contains('guest-nav-visible')).toBe(true);
     });
 
-    // Nav stays visible by design now
+    window.scrollY = 0;
+    window.dispatchEvent(new Event('scroll'));
+    await waitFor(() => {
+      expect(document.body.classList.contains('guest-nav-visible')).toBe(false);
+    });
   });
 });