added upload queue notifications

app/Http/Controllers/Api/EventPublicController.php

@@ -1233,6 +1233,24 @@ class EventPublicController extends BaseController
         return $this->makeSignedGalleryAssetUrlForId($token, (int) $photo->id, $variant);
     }
 
+    private function makeSignedPendingAssetUrl(string $token, int $photoId, string $variant, string $deviceId): ?string
+    {
+        if (! in_array($variant, ['thumbnail', 'full'], true)) {
+            return null;
+        }
+
+        return URL::temporarySignedRoute(
+            'api.v1.events.pending-photos.asset',
+            now()->addSeconds(self::SIGNED_URL_TTL_SECONDS),
+            [
+                'token' => $token,
+                'photo' => $photoId,
+                'variant' => $variant,
+                'device_id' => $deviceId,
+            ]
+        );
+    }
+
     private function makeSignedBrandingUrl(?string $path): ?string
     {
         if (! $path) {
@@ -1488,6 +1506,53 @@ class EventPublicController extends BaseController
         ]);
     }
 
+    public function pendingUploads(Request $request, string $token)
+    {
+        $result = $this->resolvePublishedEvent($request, $token, ['id']);
+
+        if ($result instanceof JsonResponse) {
+            return $result;
+        }
+
+        [$event] = $result;
+        $deviceId = $this->resolveDeviceIdentifier($request);
+
+        if ($deviceId === 'anonymous') {
+            return response()->json([
+                'data' => [],
+                'meta' => ['total_count' => 0],
+            ])->header('Cache-Control', 'no-store');
+        }
+
+        $limit = (int) $request->query('limit', 12);
+        $limit = max(1, min($limit, 30));
+
+        $baseQuery = Photo::query()
+            ->where('event_id', $event->id)
+            ->where('status', 'pending')
+            ->where('created_by_device_id', $deviceId);
+
+        $totalCount = (clone $baseQuery)->count();
+
+        $photos = $baseQuery
+            ->orderByDesc('created_at')
+            ->limit($limit)
+            ->get(['id', 'created_at', 'status']);
+
+        $data = $photos->map(fn (Photo $photo) => [
+            'id' => $photo->id,
+            'status' => $photo->status,
+            'created_at' => $photo->created_at?->toIso8601String(),
+            'thumbnail_url' => $this->makeSignedPendingAssetUrl($token, (int) $photo->id, 'thumbnail', $deviceId),
+            'full_url' => $this->makeSignedPendingAssetUrl($token, (int) $photo->id, 'full', $deviceId),
+        ])->all();
+
+        return response()->json([
+            'data' => $data,
+            'meta' => ['total_count' => $totalCount],
+        ])->header('Cache-Control', 'no-store');
+    }
+
     public function createShareLink(Request $request, string $token, Photo $photo)
     {
         $resolved = $this->resolvePublishedEvent($request, $token, ['id']);
@@ -1699,6 +1764,53 @@ class EventPublicController extends BaseController
         return $this->streamGalleryPhoto($event, $record, $variantPreference, 'inline');
     }
 
+    public function pendingPhotoAsset(Request $request, string $token, int $photo, string $variant)
+    {
+        $resolved = $this->resolveGalleryEvent($request, $token);
+
+        if ($resolved instanceof JsonResponse) {
+            return $resolved;
+        }
+
+        [$event] = $resolved;
+        $deviceId = $this->normalizeGuestIdentifier((string) $request->query('device_id', ''));
+
+        if ($deviceId === '') {
+            return ApiError::response(
+                'pending_photo_forbidden',
+                'Pending Photo Access Denied',
+                'The pending photo cannot be accessed.',
+                Response::HTTP_FORBIDDEN
+            );
+        }
+
+        $record = Photo::with('mediaAsset')
+            ->where('id', $photo)
+            ->where('event_id', $event->id)
+            ->where('status', 'pending')
+            ->where('created_by_device_id', $deviceId)
+            ->first();
+
+        if (! $record) {
+            return ApiError::response(
+                'photo_not_found',
+                'Photo Not Found',
+                'The requested photo is no longer available.',
+                Response::HTTP_NOT_FOUND,
+                [
+                    'photo_id' => $photo,
+                    'event_id' => $event->id,
+                ]
+            );
+        }
+
+        $variantPreference = $variant === 'thumbnail'
+            ? ['thumbnail', 'original']
+            : ['original'];
+
+        return $this->streamGalleryPhoto($event, $record, $variantPreference, 'inline');
+    }
+
     public function galleryPhotoDownload(Request $request, string $token, int $photo)
     {
         $resolved = $this->resolveGalleryEvent($request, $token);
@@ -2897,6 +3009,7 @@ class EventPublicController extends BaseController
             'tenant_id' => $tenantModel->id,
             'task_id' => $validated['task_id'] ?? null,
             'guest_name' => $validated['guest_name'] ?? $deviceId,
+            'created_by_device_id' => $deviceId !== 'anonymous' ? $deviceId : null,
             'file_path' => $url,
             'thumbnail_path' => $thumbUrl,
             'likes_count' => 0,

database/migrations/2025_12_20_203307_add_created_by_device_id_to_photos_table.php

@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('photos', function (Blueprint $table) {
+            $table->string('created_by_device_id', 120)->nullable()->after('guest_name');
+            $table->index(['event_id', 'created_by_device_id', 'status'], 'photos_event_device_status_index');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('photos', function (Blueprint $table) {
+            $table->dropIndex('photos_event_device_status_index');
+            $table->dropColumn('created_by_device_id');
+        });
+    }
+};

resources/css/app.css

@@ -544,8 +544,14 @@ h4,
 
 .guest-immersive .guest-bottom-nav {
     display: flex !important;
+    opacity: 0 !important;
+    transform: translateY(12px) !important;
+    pointer-events: none !important;
+}
+
+.guest-immersive.guest-nav-visible .guest-bottom-nav {
     opacity: 1 !important;
-    transform: none !important;
+    transform: translateY(0) !important;
     pointer-events: auto !important;
 }
 

resources/js/guest/components/Header.tsx

@@ -10,6 +10,7 @@ import {
   Camera,
   Bell,
   ArrowUpRight,
+  Clock,
   MessageSquare,
   Sparkles,
   LifeBuoy,
@@ -275,7 +276,7 @@ type NotificationButtonProps = {
 type PushState = ReturnType<typeof usePushSubscription>;
 
 function NotificationButton({ center, eventToken, open, onToggle, panelRef, buttonRef, taskProgress, t }: NotificationButtonProps) {
-  const badgeCount = center.unreadCount;
+  const badgeCount = center.unreadCount + center.pendingCount + center.queueCount;
   const progressRatio = taskProgress
     ? Math.min(1, taskProgress.completedCount / TASK_BADGE_TARGET)
     : 0;
@@ -428,24 +429,37 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
             )}
           </div>
           {activeTab === 'status' && (
-            <div className="mt-3 flex items-center justify-between rounded-xl bg-slate-50/90 px-3 py-2 text-xs text-slate-600">
+            <div className="mt-3 space-y-2">
-              <div className="flex items-center gap-2">
+              {center.pendingCount > 0 && (
-                <UploadCloud className="h-4 w-4 text-slate-400" aria-hidden />
+                <div className="flex items-center justify-between rounded-xl bg-amber-50/90 px-3 py-2 text-xs text-amber-900">
-                <span>{t('header.notifications.queueLabel', 'Uploads in Warteschlange')}</span>
+                  <div className="flex items-center gap-2">
-                <span className="font-semibold text-slate-900">{center.queueCount}</span>
+                    <Clock className="h-4 w-4 text-amber-500" aria-hidden />
-              </div>
+                    <span>{t('header.notifications.pendingLabel', 'Uploads in Prüfung')}</span>
-              <Link
+                    <span className="font-semibold text-amber-900">{center.pendingCount}</span>
-                to={`/e/${encodeURIComponent(eventToken)}/queue`}
+                  </div>
-                className="inline-flex items-center gap-1 font-semibold text-pink-600"
+                  <Link
-                onClick={() => {
+                    to={`/e/${encodeURIComponent(eventToken)}/queue`}
-                  if (center.unreadCount > 0) {
+                    className="inline-flex items-center gap-1 font-semibold text-amber-700"
-                    void center.refresh();
+                    onClick={() => {
-                  }
+                      if (center.unreadCount > 0) {
-                }}
+                        void center.refresh();
-              >
+                      }
-                {t('header.notifications.queueCta', 'Verlauf')}
+                    }}
-                <ArrowUpRight className="h-4 w-4" aria-hidden />
+                  >
-              </Link>
+                    {t('header.notifications.pendingCta', 'Details')}
+                    <ArrowUpRight className="h-4 w-4" aria-hidden />
+                  </Link>
+                </div>
+              )}
+              {center.queueCount > 0 && (
+                <div className="flex items-center justify-between rounded-xl bg-slate-50/90 px-3 py-2 text-xs text-slate-600">
+                  <div className="flex items-center gap-2">
+                    <UploadCloud className="h-4 w-4 text-slate-400" aria-hidden />
+                    <span>{t('header.notifications.queueLabel', 'Upload-Warteschlange (offline)')}</span>
+                    <span className="font-semibold text-slate-900">{center.queueCount}</span>
+                  </div>
+                </div>
+              )}
             </div>
           )}
           {taskProgress && (

resources/js/guest/components/__tests__/HeaderNotificationToggle.test.tsx

@@ -36,8 +36,10 @@ vi.mock('../../context/NotificationCenterContext', () => ({
     unreadCount: 0,
     queueItems: [],
     queueCount: 0,
+    pendingCount: 0,
     totalCount: 0,
     loading: false,
+    pendingLoading: false,
     refresh: vi.fn(),
     setFilters: vi.fn(),
     markAsRead: vi.fn(),

resources/js/guest/context/NotificationCenterContext.tsx

@@ -7,14 +7,17 @@ import {
   markGuestNotificationRead,
   type GuestNotificationItem,
 } from '../services/notificationApi';
+import { fetchPendingUploadsSummary } from '../services/pendingUploadsApi';
 
 export type NotificationCenterValue = {
   notifications: GuestNotificationItem[];
   unreadCount: number;
   queueItems: QueueItem[];
   queueCount: number;
+  pendingCount: number;
   totalCount: number;
   loading: boolean;
+  pendingLoading: boolean;
   refresh: () => Promise<void>;
   setFilters: (filters: { status?: 'new' | 'read' | 'dismissed' | 'all'; scope?: 'all' | 'uploads' | 'tips' | 'general' }) => void;
   markAsRead: (id: number) => Promise<void>;
@@ -31,6 +34,8 @@ export function NotificationCenterProvider({ eventToken, children }: { eventToke
   const [notifications, setNotifications] = React.useState<GuestNotificationItem[]>([]);
   const [unreadCount, setUnreadCount] = React.useState(0);
   const [loadingNotifications, setLoadingNotifications] = React.useState(true);
+  const [pendingCount, setPendingCount] = React.useState(0);
+  const [pendingLoading, setPendingLoading] = React.useState(true);
   const [filters, setFiltersState] = React.useState<{ status?: 'new' | 'read' | 'dismissed' | 'all'; scope?: 'all' | 'uploads' | 'tips' | 'general' }>({
     status: 'new',
     scope: 'all',
@@ -95,19 +100,40 @@ export function NotificationCenterProvider({ eventToken, children }: { eventToke
     [eventToken]
   );
 
+  const loadPendingUploads = React.useCallback(async () => {
+    if (!eventToken) {
+      setPendingLoading(false);
+      return;
+    }
+
+    try {
+      setPendingLoading(true);
+      const result = await fetchPendingUploadsSummary(eventToken, 1);
+      setPendingCount(result.totalCount);
+    } catch (error) {
+      console.error('Failed to load pending uploads', error);
+      setPendingCount(0);
+    } finally {
+      setPendingLoading(false);
+    }
+  }, [eventToken]);
+
   React.useEffect(() => {
     setNotifications([]);
     setUnreadCount(0);
     etagRef.current = null;
+    setPendingCount(0);
 
     if (!eventToken) {
       setLoadingNotifications(false);
+      setPendingLoading(false);
       return;
     }
 
     setLoadingNotifications(true);
     void loadNotifications();
-  }, [eventToken, loadNotifications]);
+    void loadPendingUploads();
+  }, [eventToken, loadNotifications, loadPendingUploads]);
 
   React.useEffect(() => {
     if (!eventToken) {
@@ -116,10 +142,11 @@ export function NotificationCenterProvider({ eventToken, children }: { eventToke
 
     const interval = window.setInterval(() => {
       void loadNotifications({ silent: true });
+      void loadPendingUploads();
     }, 90000);
 
     return () => window.clearInterval(interval);
-  }, [eventToken, loadNotifications]);
+  }, [eventToken, loadNotifications, loadPendingUploads]);
 
   React.useEffect(() => {
     const handleOnline = () => setIsOffline(false);
@@ -232,19 +259,21 @@ export function NotificationCenterProvider({ eventToken, children }: { eventToke
   }, [loadNotifications]);
 
   const refresh = React.useCallback(async () => {
-    await Promise.all([loadNotifications(), refreshQueue()]);
+    await Promise.all([loadNotifications(), refreshQueue(), loadPendingUploads()]);
-  }, [loadNotifications, refreshQueue]);
+  }, [loadNotifications, refreshQueue, loadPendingUploads]);
 
-  const loading = loadingNotifications || queueLoading;
+  const loading = loadingNotifications || queueLoading || pendingLoading;
-  const totalCount = unreadCount + queueCount;
+  const totalCount = unreadCount + queueCount + pendingCount;
 
   const value: NotificationCenterValue = {
     notifications,
     unreadCount,
     queueItems: items,
     queueCount,
+    pendingCount,
     totalCount,
     loading,
+    pendingLoading,
     refresh,
     setFilters,
     markAsRead,

resources/js/guest/i18n/messages.ts

@@ -370,6 +370,23 @@ export const messages: Record<LocaleCode, NestedMessages> = {
       title: 'Uploads',
       description: 'Warteschlange mit Fortschritt und erneuten Versuchen; Hintergrund-Sync umschalten.',
     },
+    pendingUploads: {
+      title: 'Uploads in Prüfung',
+      subtitle: 'Deine Fotos warten noch auf die Freigabe.',
+      successTitle: 'Upload gespeichert',
+      successBody: 'Dein Foto ist hochgeladen und wartet auf die Freigabe.',
+      emptyTitle: 'Keine wartenden Uploads',
+      emptyBody: 'Wenn du ein Foto hochlädst, erscheint es hier bis zur Freigabe.',
+      cta: 'Weiteres Foto aufnehmen',
+      refresh: 'Aktualisieren',
+      loading: 'Lade Uploads...',
+      error: 'Laden fehlgeschlagen. Bitte versuche es erneut.',
+      card: {
+        pending: 'Wartet auf Freigabe',
+        uploadedAt: 'Hochgeladen {time}',
+        justNow: 'Gerade eben',
+      },
+    },
     lightbox: {
       taskLabel: 'Aufgabe',
       loadingTask: 'Lade Aufgabe...',
@@ -1033,6 +1050,23 @@ export const messages: Record<LocaleCode, NestedMessages> = {
       title: 'Uploads',
       description: 'Queue with progress/retry and background sync toggle.',
     },
+    pendingUploads: {
+      title: 'Pending uploads',
+      subtitle: 'Your photos are waiting for approval.',
+      successTitle: 'Upload saved',
+      successBody: 'Your photo is uploaded and waiting for approval.',
+      emptyTitle: 'No pending uploads',
+      emptyBody: 'Once you upload a photo, it will appear here until it is approved.',
+      cta: 'Take another photo',
+      refresh: 'Refresh',
+      loading: 'Loading uploads...',
+      error: 'Failed to load uploads. Please try again.',
+      card: {
+        pending: 'Waiting for approval',
+        uploadedAt: 'Uploaded {time}',
+        justNow: 'Just now',
+      },
+    },
     lightbox: {
       taskLabel: 'Task',
       loadingTask: 'Loading task...',

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
+    const shouldShow = typeof window !== 'undefined' && window.scrollY > 24;
-    document.body.classList.add('guest-nav-visible');
+    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">
+                <div className="flex w-full max-w-md flex-col gap-3">
-                  <Button variant="secondary" className="flex-1" onClick={handleRetake}>
+                  {uploadsRequireApproval ? (
-                    {t('upload.review.retake')}
+                    <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">
-                  </Button>
+                      <p className="text-sm font-semibold">{t('upload.review.noticeTitle', 'Uploads werden geprüft')}</p>
-                  <Button
+                      <p className="text-xs">{t('upload.review.noticeBody', 'Dein Foto erscheint, sobald es freigegeben wurde.')}</p>
-                    className="flex-1 animate-pulse bg-pink-500 text-white shadow-lg hover:bg-pink-600 focus-visible:ring-pink-300"
+                    </div>
-                    onClick={handleUsePhoto}
+                  ) : null}
-                  >
+                  <div className="flex flex-col gap-3 sm:flex-row">
-                    {t('upload.review.keep')}
+                    <Button variant="secondary" className="flex-1" onClick={handleRetake}>
-                  </Button>
+                      {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')}>
+    <Page title={t('pendingUploads.title')}>
-      <p>{t('uploadQueue.description')}</p>
+      <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');
+    expect(document.body.classList.contains('guest-nav-visible')).toBe(false);
-    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);
 
-    // nav is on by default now
+    window.scrollY = 120;
-    expect(document.body.classList.contains('guest-nav-visible')).toBe(true);
-
-    bottom = -1;
-    top = -10;
     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);
+    });
   });
 });

resources/js/guest/services/pendingUploadsApi.ts

@@ -0,0 +1,52 @@
+import { getDeviceId } from '../lib/device';
+
+export type PendingUpload = {
+  id: number;
+  status: 'pending' | 'approved' | 'rejected';
+  created_at?: string | null;
+  thumbnail_url?: string | null;
+  full_url?: string | null;
+};
+
+type PendingUploadsResponse = {
+  data: PendingUpload[];
+  meta?: {
+    total_count?: number;
+  };
+};
+
+async function handleResponse<T>(response: Response): Promise<T> {
+  const data = await response.json().catch(() => null);
+
+  if (!response.ok) {
+    const errorPayload = data as { error?: { message?: string; code?: unknown } } | null;
+    const error = new Error(errorPayload?.error?.message ?? 'Request failed') as Error & { code?: unknown };
+    error.code = errorPayload?.error?.code ?? response.status;
+    throw error;
+  }
+
+  return data as T;
+}
+
+export async function fetchPendingUploadsSummary(
+  token: string,
+  limit = 12
+): Promise<{ items: PendingUpload[]; totalCount: number }> {
+  const params = new URLSearchParams();
+  params.set('limit', String(limit));
+
+  const response = await fetch(`/api/v1/events/${encodeURIComponent(token)}/pending-photos?${params.toString()}`, {
+    headers: {
+      'Accept': 'application/json',
+      'X-Device-Id': getDeviceId(),
+    },
+    credentials: 'omit',
+  });
+
+  const payload = await handleResponse<PendingUploadsResponse>(response);
+
+  return {
+    items: payload.data ?? [],
+    totalCount: payload.meta?.total_count ?? (payload.data?.length ?? 0),
+  };
+}

routes/api.php

@@ -108,6 +108,13 @@ Route::prefix('v1')->name('api.v1.')->group(function () {
             ->middleware('signed')
             ->name('photo-shares.asset');
         Route::post('/events/{token}/upload', [EventPublicController::class, 'upload'])->name('events.upload');
+        Route::get('/events/{token}/pending-photos', [EventPublicController::class, 'pendingUploads'])
+            ->name('events.pending-photos');
+        Route::get('/events/{token}/pending-photos/{photo}/{variant}', [EventPublicController::class, 'pendingPhotoAsset'])
+            ->whereNumber('photo')
+            ->where('variant', 'thumbnail|full')
+            ->middleware('signed')
+            ->name('events.pending-photos.asset');
         Route::get('/branding/asset/{path}', [EventPublicController::class, 'brandingAsset'])
             ->where('path', '.*')
             ->middleware('signed')

tests/Feature/Api/Event/PendingUploadsTest.php

@@ -0,0 +1,73 @@
+<?php
+
+namespace Tests\Feature\Api\Event;
+
+use App\Models\Event;
+use App\Models\Photo;
+use App\Services\EventJoinTokenService;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class PendingUploadsTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_pending_uploads_returns_only_device_pending_photos(): void
+    {
+        $event = Event::factory()->create([
+            'status' => 'published',
+        ]);
+
+        $token = app(EventJoinTokenService::class)
+            ->createToken($event, ['label' => 'guest'])
+            ->plain_token;
+
+        $pendingMine = Photo::factory()->for($event)->create([
+            'status' => 'pending',
+            'created_by_device_id' => 'device-123',
+        ]);
+
+        Photo::factory()->for($event)->create([
+            'status' => 'pending',
+            'created_by_device_id' => 'device-999',
+        ]);
+
+        Photo::factory()->for($event)->create([
+            'status' => 'approved',
+            'created_by_device_id' => 'device-123',
+        ]);
+
+        $response = $this->withHeaders(['X-Device-Id' => 'device-123'])
+            ->getJson("/api/v1/events/{$token}/pending-photos");
+
+        $response->assertOk();
+        $response->assertJsonCount(1, 'data');
+        $response->assertJsonFragment([
+            'id' => $pendingMine->id,
+            'status' => 'pending',
+        ]);
+        $response->assertJson(['meta' => ['total_count' => 1]]);
+        $this->assertNotEmpty($response->json('data.0.thumbnail_url'));
+    }
+
+    public function test_pending_uploads_returns_empty_without_device_id(): void
+    {
+        $event = Event::factory()->create([
+            'status' => 'published',
+        ]);
+
+        $token = app(EventJoinTokenService::class)
+            ->createToken($event, ['label' => 'guest'])
+            ->plain_token;
+
+        Photo::factory()->for($event)->create([
+            'status' => 'pending',
+            'created_by_device_id' => 'device-123',
+        ]);
+
+        $response = $this->getJson("/api/v1/events/{$token}/pending-photos");
+
+        $response->assertOk();
+        $response->assertJson(['data' => [], 'meta' => ['total_count' => 0]]);
+    }
+}