added upload queue notifications

2025-12-21 12:37:20 +01:00
parent 1e6027f438
commit 6ee40745ca
13 changed files with 566 additions and 114 deletions
--- a/app/Http/Controllers/Api/EventPublicController.php
+++ b/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,
--- a/database/migrations/2025_12_20_203307_add_created_by_device_id_to_photos_table.php
+++ b/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');
+        });
+    }
+};
--- a/resources/css/app.css
+++ b/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;
 }

--- a/resources/js/guest/components/Header.tsx
+++ b/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="flex items-center gap-2">
-                <UploadCloud className="h-4 w-4 text-slate-400" aria-hidden />
-                <span>{t('header.notifications.queueLabel', 'Uploads in Warteschlange')}</span>
-                <span className="font-semibold text-slate-900">{center.queueCount}</span>
-              </div>
-              <Link
-                to={`/e/${encodeURIComponent(eventToken)}/queue`}
-                className="inline-flex items-center gap-1 font-semibold text-pink-600"
-                onClick={() => {
-                  if (center.unreadCount > 0) {
-                    void center.refresh();
-                  }
-                }}
-              >
-                {t('header.notifications.queueCta', 'Verlauf')}
-                <ArrowUpRight className="h-4 w-4" aria-hidden />
-              </Link>
+            <div className="mt-3 space-y-2">
+              {center.pendingCount > 0 && (
+                <div className="flex items-center justify-between rounded-xl bg-amber-50/90 px-3 py-2 text-xs text-amber-900">
+                  <div className="flex items-center gap-2">
+                    <Clock className="h-4 w-4 text-amber-500" aria-hidden />
+                    <span>{t('header.notifications.pendingLabel', 'Uploads in Prüfung')}</span>
+                    <span className="font-semibold text-amber-900">{center.pendingCount}</span>
+                  </div>
+                  <Link
+                    to={`/e/${encodeURIComponent(eventToken)}/queue`}
+                    className="inline-flex items-center gap-1 font-semibold text-amber-700"
+                    onClick={() => {
+                      if (center.unreadCount > 0) {
+                        void center.refresh();
+                      }
+                    }}
+                  >
+                    {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 && (
--- a/resources/js/guest/components/tests/HeaderNotificationToggle.test.tsx
+++ b/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(),
--- a/resources/js/guest/context/NotificationCenterContext.tsx
+++ b/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()]);
-  }, [loadNotifications, refreshQueue]);
+    await Promise.all([loadNotifications(), refreshQueue(), loadPendingUploads()]);
+  }, [loadNotifications, refreshQueue, loadPendingUploads]);

-  const loading = loadingNotifications || queueLoading;
-  const totalCount = unreadCount + queueCount;
+  const loading = loadingNotifications || queueLoading || pendingLoading;
+  const totalCount = unreadCount + queueCount + pendingCount;

  const value: NotificationCenterValue = {
    notifications,
    unreadCount,
    queueItems: items,
    queueCount,
+    pendingCount,
    totalCount,
    loading,
+    pendingLoading,
    refresh,
    setFilters,
    markAsRead,
--- a/resources/js/guest/i18n/messages.ts
+++ b/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...',
--- a/resources/js/guest/pages/UploadPage.tsx
+++ b/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">
--- a/resources/js/guest/pages/UploadQueuePage.tsx
+++ b/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>
  );
 }
--- a/resources/js/guest/pages/tests/UploadPageNavVisibility.test.tsx
+++ b/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);
+    });
  });
 });
--- a/resources/js/guest/services/pendingUploadsApi.ts
+++ b/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),
+  };
+}
--- a/routes/api.php
+++ b/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')
--- a/tests/Feature/Api/Event/PendingUploadsTest.php
+++ b/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]]);
+    }
+}