added upload queue notifications

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>
   );
 }