photo visibility for demo events, hardened the demo mode. fixed dark/light mode toggle and notification bell toggle. fixed photo upload page sizes & header visibility.

2025-12-18 21:14:24 +01:00
parent 7c4067b32b
commit 53ec427e6e
25 changed files with 965 additions and 102 deletions
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -538,11 +538,17 @@ h4,
    animation: aurora 20s ease infinite;
 }

-.guest-immersive .guest-header,
-.guest-immersive .guest-bottom-nav {
+.guest-immersive .guest-header {
    display: none !important;
 }

+.guest-immersive .guest-bottom-nav {
+    display: flex !important;
+    opacity: 1 !important;
+    transform: none !important;
+    pointer-events: auto !important;
+}
+
 .guest-immersive {
    overscroll-behavior: contain;
    background-color: #000;
--- a/resources/js/components/tests/AppearanceToggleDropdown.test.tsx
+++ b/resources/js/components/tests/AppearanceToggleDropdown.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import AppearanceToggleDropdown from '../appearance-dropdown';
+import { AppearanceProvider } from '@/hooks/use-appearance';
+
+const matchMediaStub = (matches = false) => ({
+  matches,
+  media: '(prefers-color-scheme: dark)',
+  onchange: null,
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+});
+
+describe('AppearanceToggleDropdown', () => {
+  beforeEach(() => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation(() => matchMediaStub(false)),
+    });
+    localStorage.setItem('theme', 'light');
+    document.documentElement.classList.remove('dark');
+  });
+
+  it('toggles the document class to dark mode', () => {
+    render(
+      <AppearanceProvider>
+        <AppearanceToggleDropdown />
+      </AppearanceProvider>,
+    );
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+    expect(localStorage.getItem('theme')).toBe('dark');
+  });
+});
--- a/resources/js/guest/components/BottomNav.tsx
+++ b/resources/js/guest/components/BottomNav.tsx
@@ -82,12 +82,14 @@ export default function BottomNav() {
  const isUploadActive = currentPath.startsWith(`${base}/upload`);

  const compact = isUploadActive;
+  const navPaddingBottom = `calc(env(safe-area-inset-bottom, 0px) + ${compact ? 12 : 18}px)`;

  return (
    <div
-      className={`guest-bottom-nav fixed inset-x-0 bottom-0 z-30 border-t border-white/20 bg-gradient-to-t from-black/40 via-black/20 to-transparent px-4 shadow-xl backdrop-blur-2xl transition-all duration-200 dark:border-white/10 dark:from-gray-950/90 dark:via-gray-900/70 dark:to-gray-900/35 ${
-        compact ? 'pb-1 pt-1 translate-y-3' : 'pb-3 pt-2'
+      className={`guest-bottom-nav fixed inset-x-0 bottom-0 z-30 border-t border-white/20 bg-gradient-to-t from-black/70 via-black/45 to-black/10 px-4 shadow-xl backdrop-blur-2xl transition-all duration-200 dark:border-white/10 dark:from-gray-950/90 dark:via-gray-900/70 dark:to-gray-900/35 ${
+        compact ? 'pt-1' : 'pt-2 pb-1'
      }`}
+      style={{ paddingBottom: navPaddingBottom }}
    >
      <div className="mx-auto flex max-w-lg items-center gap-3">
        <div className="flex flex-1 justify-evenly gap-2">
--- a/resources/js/guest/components/GalleryPreview.tsx
+++ b/resources/js/guest/components/GalleryPreview.tsx
@@ -7,6 +7,7 @@ import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
 import { Heart } from 'lucide-react';
 import { useTranslation } from '../i18n/useTranslation';
 import { useEventBranding } from '../context/EventBrandingContext';
+import { cn } from '@/lib/utils';

 type Props = { token: string };

@@ -90,7 +91,11 @@ export default function GalleryPreview({ token }: Props) {
  ];

  return (
-    <Card className="border border-muted/30 shadow-sm" style={{ borderRadius: radius, background: 'var(--guest-surface)', fontFamily: bodyFont }}>
+    <Card
+      className="border border-muted/30 bg-[var(--guest-surface)] shadow-sm dark:border-slate-800/70 dark:bg-slate-950/70"
+      data-testid="gallery-preview"
+      style={{ borderRadius: radius, fontFamily: bodyFont }}
+    >
      <CardContent className="space-y-3 p-3">
        <div className="flex items-center justify-between">
          <div>
@@ -107,28 +112,36 @@ export default function GalleryPreview({ token }: Props) {
        </div>

        <div className="flex gap-2 overflow-x-auto pb-1 text-sm font-medium [-ms-overflow-style:none] [scrollbar-width:none]">
-        {filters.map((filter) => (
-          <button
-            key={filter.value}
-            type="button"
-            onClick={() => setMode(filter.value)}
-            style={{
-              borderRadius: radius,
-              border: mode === filter.value ? `1px solid ${branding.primaryColor}` : `1px solid ${branding.primaryColor}22`,
-              background: mode === filter.value ? branding.primaryColor : 'var(--guest-surface)',
-              color: mode === filter.value ? '#ffffff' : 'var(--foreground)',
-              boxShadow: mode === filter.value ? `0 8px 18px ${branding.primaryColor}33` : 'none',
-            }}
-            className="px-4 py-1 transition"
-          >
-            {filter.label}
-          </button>
-        ))}
-      </div>
+          {filters.map((filter) => {
+            const isActive = mode === filter.value;
+
+            return (
+              <button
+                key={filter.value}
+                type="button"
+                onClick={() => setMode(filter.value)}
+                style={{
+                  borderRadius: radius,
+                  border: isActive ? `1px solid ${branding.primaryColor}` : `1px solid ${branding.primaryColor}22`,
+                  background: isActive ? branding.primaryColor : undefined,
+                  boxShadow: isActive ? `0 8px 18px ${branding.primaryColor}33` : 'none',
+                }}
+                className={cn(
+                  'px-4 py-1 transition',
+                  isActive
+                    ? 'text-white'
+                    : 'bg-[var(--guest-surface)] text-foreground dark:bg-slate-950/70 dark:text-slate-100',
+                )}
+              >
+                {filter.label}
+              </button>
+            );
+          })}
+        </div>

        {loading && <p className="text-sm text-muted-foreground">Lädt…</p>}
        {!loading && items.length === 0 && (
-          <div className="flex items-center gap-3 rounded-xl border border-muted/30 bg-[var(--guest-surface)] p-3 text-sm text-muted-foreground">
+          <div className="flex items-center gap-3 rounded-xl border border-muted/30 bg-[var(--guest-surface)] p-3 text-sm text-muted-foreground dark:border-slate-800/60 dark:bg-slate-950/60">
            <Heart className="h-4 w-4" style={{ color: branding.secondaryColor }} aria-hidden />
            Noch keine Fotos. Starte mit deinem ersten Upload!
          </div>
@@ -139,11 +152,10 @@ export default function GalleryPreview({ token }: Props) {
          <Link
            key={p.id}
            to={`/e/${encodeURIComponent(token)}/gallery?photoId=${p.id}`}
-            className="group relative block overflow-hidden text-foreground"
+            className="group relative block overflow-hidden bg-[var(--guest-surface)] text-foreground dark:bg-slate-950/70"
            style={{
              borderRadius: radius,
              border: `1px solid ${branding.primaryColor}22`,
-              background: 'var(--guest-surface)',
              boxShadow: `0 12px 26px ${branding.primaryColor}22`,
            }}
          >
--- a/resources/js/guest/components/Header.tsx
+++ b/resources/js/guest/components/Header.tsx
@@ -152,11 +152,15 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
  const taskProgress = useGuestTaskProgress(eventToken);
  const tasksEnabled = isTaskModeEnabled(event);
  const panelRef = React.useRef<HTMLDivElement | null>(null);
+  const notificationButtonRef = React.useRef<HTMLButtonElement | null>(null);
  React.useEffect(() => {
    if (!notificationsOpen) {
      return;
    }
    const handler = (event: MouseEvent) => {
+      if (notificationButtonRef.current?.contains(event.target as Node)) {
+        return;
+      }
      if (!panelRef.current) return;
      if (panelRef.current.contains(event.target as Node)) return;
      setNotificationsOpen(false);
@@ -245,6 +249,7 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
            open={notificationsOpen}
            onToggle={() => setNotificationsOpen((prev) => !prev)}
            panelRef={panelRef}
+            buttonRef={notificationButtonRef}
            taskProgress={tasksEnabled && taskProgress?.hydrated ? taskProgress : undefined}
            t={t}
          />
@@ -262,13 +267,14 @@ type NotificationButtonProps = {
  open: boolean;
  onToggle: () => void;
  panelRef: React.RefObject<HTMLDivElement | null>;
+  buttonRef: React.RefObject<HTMLButtonElement | null>;
  taskProgress?: ReturnType<typeof useGuestTaskProgress>;
  t: TranslateFn;
 };

 type PushState = ReturnType<typeof usePushSubscription>;

-function NotificationButton({ center, eventToken, open, onToggle, panelRef, taskProgress, t }: NotificationButtonProps) {
+function NotificationButton({ center, eventToken, open, onToggle, panelRef, buttonRef, taskProgress, t }: NotificationButtonProps) {
  const badgeCount = center.unreadCount;
  const progressRatio = taskProgress
    ? Math.min(1, taskProgress.completedCount / TASK_BADGE_TARGET)
@@ -322,6 +328,7 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, task
  return (
    <div className="relative z-50">
      <button
+        ref={buttonRef}
        type="button"
        onClick={onToggle}
        className="relative rounded-full bg-white/15 p-2 text-white transition hover:bg-white/30"
--- a/resources/js/guest/components/tests/GalleryPreview.test.tsx
+++ b/resources/js/guest/components/tests/GalleryPreview.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import GalleryPreview from '../GalleryPreview';
+
+vi.mock('../../polling/usePollGalleryDelta', () => ({
+  usePollGalleryDelta: () => ({
+    photos: [],
+    loading: false,
+  }),
+}));
+
+vi.mock('../../i18n/useTranslation', () => ({
+  useTranslation: () => ({
+    locale: 'de',
+  }),
+}));
+
+vi.mock('../../context/EventBrandingContext', () => ({
+  useEventBranding: () => ({
+    branding: {
+      primaryColor: '#f43f5e',
+      secondaryColor: '#fb7185',
+      buttons: { radius: 12, linkColor: '#fb7185' },
+      typography: {},
+      fontFamily: 'Montserrat',
+    },
+  }),
+}));
+
+describe('GalleryPreview', () => {
+  it('renders dark mode-ready surfaces', () => {
+    render(
+      <MemoryRouter>
+        <GalleryPreview token="demo" />
+      </MemoryRouter>,
+    );
+
+    const card = screen.getByTestId('gallery-preview');
+    expect(card.className).toContain('bg-[var(--guest-surface)]');
+    expect(card.className).toContain('dark:bg-slate-950/70');
+
+    const emptyState = screen.getByText(/Noch keine Fotos/i).closest('div');
+    expect(emptyState).not.toBeNull();
+    expect(emptyState?.className).toContain('dark:bg-slate-950/60');
+  });
+});
--- a/resources/js/guest/components/tests/HeaderNotificationToggle.test.tsx
+++ b/resources/js/guest/components/tests/HeaderNotificationToggle.test.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import Header from '../Header';
+
+vi.mock('../settings-sheet', () => ({
+  SettingsSheet: () => <div data-testid="settings-sheet" />,
+}));
+
+vi.mock('@/components/appearance-dropdown', () => ({
+  default: () => <div data-testid="appearance-toggle" />,
+}));
+
+vi.mock('../../hooks/useEventData', () => ({
+  useEventData: () => ({
+    status: 'ready',
+    event: {
+      name: 'Demo Event',
+      type: { icon: 'heart' },
+      engagement_mode: 'photo_only',
+    },
+  }),
+}));
+
+vi.mock('../../context/EventStatsContext', () => ({
+  useOptionalEventStats: () => null,
+}));
+
+vi.mock('../../context/GuestIdentityContext', () => ({
+  useOptionalGuestIdentity: () => null,
+}));
+
+vi.mock('../../context/NotificationCenterContext', () => ({
+  useOptionalNotificationCenter: () => ({
+    notifications: [],
+    unreadCount: 0,
+    queueItems: [],
+    queueCount: 0,
+    totalCount: 0,
+    loading: false,
+    refresh: vi.fn(),
+    setFilters: vi.fn(),
+    markAsRead: vi.fn(),
+    dismiss: vi.fn(),
+    eventToken: 'demo',
+    lastFetchedAt: null,
+    isOffline: false,
+  }),
+}));
+
+vi.mock('../../hooks/useGuestTaskProgress', () => ({
+  useGuestTaskProgress: () => ({
+    hydrated: false,
+    completedCount: 0,
+  }),
+  TASK_BADGE_TARGET: 10,
+}));
+
+vi.mock('../../hooks/usePushSubscription', () => ({
+  usePushSubscription: () => ({
+    supported: false,
+    permission: 'default',
+    subscribed: false,
+    loading: false,
+    error: null,
+    enable: vi.fn(),
+    disable: vi.fn(),
+    refresh: vi.fn(),
+  }),
+}));
+
+vi.mock('../../i18n/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback?: string | { defaultValue?: string }) => {
+      if (typeof fallback === 'string') {
+        return fallback;
+      }
+      if (fallback && typeof fallback.defaultValue === 'string') {
+        return fallback.defaultValue;
+      }
+      return _key;
+    },
+  }),
+}));
+
+describe('Header notifications toggle', () => {
+  it('closes the panel when clicking the bell again', () => {
+    render(<Header eventToken="demo" title="Demo" />);
+
+    const bellButton = screen.getByLabelText('Benachrichtigungen anzeigen');
+    fireEvent.click(bellButton);
+
+    expect(screen.getByText('Benachrichtigungen')).toBeInTheDocument();
+
+    fireEvent.click(bellButton);
+
+    expect(screen.queryByText('Benachrichtigungen')).not.toBeInTheDocument();
+  });
+});
--- a/resources/js/guest/hooks/useDirectUpload.ts
+++ b/resources/js/guest/hooks/useDirectUpload.ts
@@ -4,6 +4,10 @@ import { uploadPhoto, type UploadError } from '../services/photosApi';
 import { useGuestIdentity } from '../context/GuestIdentityContext';
 import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
 import { resolveUploadErrorDialog, type UploadErrorDialog } from '../lib/uploadErrorDialog';
+import { notify } from '../queue/notify';
+import { useTranslation } from '../i18n/useTranslation';
+import { isGuestDemoModeEnabled } from '../demo/demoMode';
+import { useEventData } from './useEventData';

 type DirectUploadResult = {
  success: boolean;
@@ -23,6 +27,8 @@ type UseDirectUploadOptions = {
 export function useDirectUpload({ eventToken, taskId, emotionSlug, onCompleted }: UseDirectUploadOptions) {
  const { name } = useGuestIdentity();
  const { markCompleted } = useGuestTaskProgress(eventToken);
+  const { event } = useEventData();
+  const { t } = useTranslation();
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [warning, setWarning] = useState<string | null>(null);
@@ -66,6 +72,13 @@ export function useDirectUpload({ eventToken, taskId, emotionSlug, onCompleted }
  const upload = useCallback(
    async (file: File): Promise<DirectUploadResult> => {
      if (!canUpload || uploading) return { success: false, warning, error };
+      if (isGuestDemoModeEnabled() || event?.demo_read_only) {
+        const demoMessage = t('upload.demoReadOnly', 'Uploads sind in der Demo deaktiviert.');
+        setError(demoMessage);
+        setWarning(null);
+        notify(demoMessage, 'error');
+        return { success: false, warning, error: demoMessage };
+      }
      const preparedResult = await preparePhoto(file);
      if (!preparedResult.ok) {
        return { success: false, warning, error };
@@ -115,6 +128,10 @@ export function useDirectUpload({ eventToken, taskId, emotionSlug, onCompleted }
        setError(dialog?.description ?? uploadErr.message ?? 'Upload fehlgeschlagen.');
        setWarning(null);

+        if (uploadErr.code === 'demo_read_only') {
+          notify(t('upload.demoReadOnly', 'Uploads sind in der Demo deaktiviert.'), 'error');
+        }
+
        if (
          uploadErr.code === 'photo_limit_exceeded'
          || uploadErr.code === 'upload_device_limit'
--- a/resources/js/guest/i18n/messages.ts
+++ b/resources/js/guest/i18n/messages.ts
@@ -495,6 +495,7 @@ export const messages: Record<LocaleCode, NestedMessages> = {
        completed: 'Upload abgeschlossen.',
        failed: 'Upload fehlgeschlagen. Bitte versuche es erneut.',
      },
+      demoReadOnly: 'Uploads sind in der Demo deaktiviert.',
      optimizedNotice: 'Wir haben dein Foto verkleinert, damit der Upload schneller klappt. Eingespart: {saved}',
      optimizedFallback: 'Optimierung nicht möglich – wir laden das Original hoch.',
      retrying: 'Verbindung holperig – neuer Versuch ({attempt}).',
@@ -1149,6 +1150,7 @@ export const messages: Record<LocaleCode, NestedMessages> = {
        completed: 'Upload complete.',
        failed: 'Upload failed. Please try again.',
      },
+      demoReadOnly: 'Uploads are disabled in demo mode.',
      optimizedNotice: 'We optimized your photo to speed up the upload. Saved: {saved}',
      optimizedFallback: 'Could not optimize – uploading the original.',
      retrying: 'Connection unstable – retrying ({attempt}).',
--- a/resources/js/guest/main.tsx
+++ b/resources/js/guest/main.tsx
@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
 import '../../css/app.css';
-import { initializeTheme } from '@/hooks/use-appearance';
+import { AppearanceProvider, initializeTheme } from '@/hooks/use-appearance';
 import { enableGuestDemoMode, shouldEnableGuestDemoMode } from './demo/demoMode';

 initializeTheme();
@@ -15,7 +15,9 @@ const shareRoot = async () => {
  const { SharedPhotoStandalone } = await import('./pages/SharedPhotoPage');
  createRoot(rootEl).render(
    <React.StrictMode>
-      <SharedPhotoStandalone />
+      <AppearanceProvider>
+        <SharedPhotoStandalone />
+      </AppearanceProvider>
    </React.StrictMode>
  );
 };
@@ -52,20 +54,22 @@ const appRoot = async () => {

  createRoot(rootEl).render(
    <React.StrictMode>
-      <LocaleProvider>
-        <ToastProvider>
-          <MatomoTracker config={matomoConfig} />
-          <Suspense
-            fallback={(
-              <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
-                Erlebnisse werden geladen …
-              </div>
-            )}
-          >
-            <RouterProvider router={router} />
-          </Suspense>
-        </ToastProvider>
-      </LocaleProvider>
+      <AppearanceProvider>
+        <LocaleProvider>
+          <ToastProvider>
+            <MatomoTracker config={matomoConfig} />
+            <Suspense
+              fallback={(
+                <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
+                  Erlebnisse werden geladen …
+                </div>
+              )}
+            >
+              <RouterProvider router={router} />
+            </Suspense>
+          </ToastProvider>
+        </LocaleProvider>
+      </AppearanceProvider>
    </React.StrictMode>
  );
 };
--- a/resources/js/guest/pages/AchievementsPage.tsx
+++ b/resources/js/guest/pages/AchievementsPage.tsx
@@ -91,7 +91,7 @@ type BadgesGridProps = {
  t: TranslateFn;
 };

-function BadgesGrid({ badges, t }: BadgesGridProps) {
+export function BadgesGrid({ badges, t }: BadgesGridProps) {
  if (badges.length === 0) {
    return (
      <Card>
@@ -121,11 +121,12 @@ function BadgesGrid({ badges, t }: BadgesGridProps) {
          return (
            <div
              key={badge.id}
+              data-testid={`badge-card-${badge.id}`}
              className={cn(
                'relative overflow-hidden rounded-2xl border px-4 py-3 shadow-sm transition',
                badge.earned
-                  ? 'border-emerald-400/40 bg-gradient-to-br from-emerald-500/20 via-emerald-500/5 to-white text-emerald-900'
-                  : 'border-border/60 bg-white/80',
+                  ? 'border-emerald-400/40 bg-gradient-to-br from-emerald-500/20 via-emerald-500/5 to-white text-emerald-900 dark:border-emerald-400/30 dark:from-emerald-400/20 dark:via-emerald-400/10 dark:to-slate-950/70 dark:text-emerald-50'
+                  : 'border-border/60 bg-white/80 dark:border-slate-800/70 dark:bg-slate-950/60',
              )}
            >
              <div className="flex items-start justify-between gap-2">
--- a/resources/js/guest/pages/HomePage.tsx
+++ b/resources/js/guest/pages/HomePage.tsx
@@ -12,7 +12,7 @@ import GalleryPreview from '../components/GalleryPreview';
 import { useGuestIdentity } from '../context/GuestIdentityContext';
 import { useEventData } from '../hooks/useEventData';
 import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
-import { ChevronDown, Sparkles, UploadCloud, X, RefreshCw, Timer } from 'lucide-react';
+import { Camera, ChevronDown, Sparkles, UploadCloud, X, RefreshCw, Timer } from 'lucide-react';
 import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
 import { useEventBranding } from '../context/EventBrandingContext';
 import type { EventBranding } from '../types/event-branding';
@@ -453,7 +453,7 @@ type MissionPreview = {
  emotion?: EmotionIdentity | null;
 };

-function MissionActionCard({
+export function MissionActionCard({
  token,
  mission,
  loading,
@@ -676,8 +676,10 @@ function MissionActionCard({
                    ? `/e/${encodeURIComponent(token)}/upload?task=${card.id}`
                    : `/e/${encodeURIComponent(token)}/tasks`
                }
+                className="inline-flex items-center justify-center gap-2"
              >
-                Aufgabe starten
+                <Camera className="h-4 w-4" aria-hidden />
+                <span>Aufgabe starten</span>
              </Link>
            </Button>
            <Button
@@ -703,9 +705,9 @@ function MissionActionCard({
  const initialSlide = Math.min(initialIndex, Math.max(0, slides.length - 1));

  return (
-    <Card className="border-0 bg-transparent shadow-none" style={{ fontFamily: bodyFont }}>
+    <Card className="border-0 bg-transparent py-2 shadow-none" style={{ fontFamily: bodyFont }}>
      <CardContent className="px-0 py-0">
-        <div className="relative min-h-[280px] px-2">
+        <div className="relative min-h-[240px] px-2 sm:min-h-[260px]" data-testid="mission-card-stack">
          <Swiper
            effect="cards"
            modules={[EffectCards]}
@@ -733,7 +735,7 @@ function MissionActionCard({
              lastSlideIndexRef.current = realIndex;
              onIndexChange(realIndex, slides.length);
            }}
-            className="!pb-2"
+            className="!pb-1"
            style={{ paddingLeft: '0.25rem', paddingRight: '0.25rem' }}
          >
            {slides.map((card, index) => {
@@ -769,7 +771,7 @@ function EmotionActionCard() {
  );
 }

-function UploadActionCard({
+export function UploadActionCard({
  token,
  accentColor,
  secondaryAccent,
@@ -829,14 +831,14 @@ function UploadActionCard({

  return (
    <Card
-      className="overflow-hidden border border-muted/30 shadow-sm"
+      className="gap-2 overflow-hidden border border-muted/30 bg-[var(--guest-surface)] py-2 shadow-sm dark:border-slate-800/60 dark:bg-slate-950/70"
+      data-testid="upload-action-card"
      style={{
-        background: 'var(--guest-surface)',
        borderRadius: `${radius}px`,
        fontFamily: bodyFont,
      }}
    >
-      <CardContent className="flex flex-col gap-2 py-[4px]">
+      <CardContent className="flex flex-col gap-1.5 px-4 py-2">
        <Button
          type="button"
          className="text-white justify-center"
--- a/resources/js/guest/pages/UploadPage.tsx
+++ b/resources/js/guest/pages/UploadPage.tsx
@@ -41,6 +41,7 @@ import { compressPhoto, formatBytes } from '../lib/image';
 import { useGuestIdentity } from '../context/GuestIdentityContext';
 import { useEventData } from '../hooks/useEventData';
 import { isTaskModeEnabled } from '../lib/engagement';
+import { getDeviceId } from '../lib/device';

 interface Task {
  id: number;
@@ -130,6 +131,7 @@ export default function UploadPage() {
  const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
  const uploadsRequireApproval =
    (event?.guest_upload_visibility as 'immediate' | 'review' | undefined) !== 'immediate';
+  const demoReadOnly = Boolean(event?.demo_read_only);

  const taskIdParam = searchParams.get('task');
  const emotionSlug = searchParams.get('emotion') || '';
@@ -154,9 +156,11 @@ export default function UploadPage() {
 const [uploadProgress, setUploadProgress] = useState(0);
 const [uploadError, setUploadError] = useState<string | null>(null);
 const [uploadWarning, setUploadWarning] = useState<string | null>(null);
-const [immersiveMode, setImmersiveMode] = useState(false);
+const [immersiveMode, setImmersiveMode] = useState(true);
 const [showCelebration, setShowCelebration] = useState(false);
 const [showHeroOverlay, setShowHeroOverlay] = useState(true);
+const kpiChipsRef = useRef<HTMLDivElement | null>(null);
+const navSentinelRef = useRef<HTMLDivElement | null>(null);

  const [errorDialog, setErrorDialog] = useState<UploadErrorDialog | null>(null);
  const [taskDetailsExpanded, setTaskDetailsExpanded] = useState(false);
@@ -172,15 +176,35 @@ const [canUpload, setCanUpload] = useState(true);
  useEffect(() => {
    if (typeof document === 'undefined') return undefined;
    const className = 'guest-immersive';
-    if (immersiveMode) {
-      document.body.classList.add(className);
-    } else {
-      document.body.classList.remove(className);
-    }
+    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);
+      document.body.classList.remove('guest-nav-visible');
    };
-  }, [immersiveMode]);
+  }, []);
+
+  const updateNavVisibility = useCallback(() => {
+    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');
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    // ensure nav remains visible; hide only when immersive toggled off via the menu button
+    updateNavVisibility();
+
+    return () => {
+      document.body.classList.remove('guest-nav-visible');
+    };
+  }, [updateNavVisibility]);

  const [showPrimer, setShowPrimer] = useState<boolean>(() => {
    if (typeof window === 'undefined') return false;
@@ -330,6 +354,13 @@ const [canUpload, setCanUpload] = useState(true);
    if (!eventKey) return;

    const checkLimits = async () => {
+      if (demoReadOnly) {
+        setCanUpload(false);
+        setUploadError(t('upload.demoReadOnly', 'Uploads sind in der Demo deaktiviert.'));
+        setUploadWarning(null);
+        return;
+      }
+
      try {
        const pkg = await getEventPackage(eventKey);
        setEventPackage(pkg);
@@ -374,7 +405,7 @@ const [canUpload, setCanUpload] = useState(true);
    };

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

  const stopStream = useCallback(() => {
    if (streamRef.current) {
@@ -1111,7 +1142,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
    <>
      <div
        ref={cameraShellRef as unknown as React.RefObject<HTMLDivElement>}
-        className="relative flex min-h-screen flex-col gap-4 pb-[calc(env(safe-area-inset-bottom,0px)+12px)] pt-3"
+        className="relative flex min-h-screen flex-col gap-4 pb-[calc(env(safe-area-inset-bottom,0px)+72px)] pt-3"
        style={bodyFont ? { fontFamily: bodyFont } : undefined}
      >
        {taskFloatingCard}
@@ -1130,9 +1161,9 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
          ref={cameraViewportRef}
          className="relative w-full"
          style={{
-            height: 'calc(100vh - 160px)',
-            minHeight: '70vh',
-            maxHeight: '90vh',
+            height: 'clamp(60vh, calc(100vh - 220px), 82vh)',
+            minHeight: '60vh',
+            maxHeight: '88vh',
          }}
        >
            <video
@@ -1402,17 +1433,20 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
      </div>

      {socialChips.length > 0 && (
-        <div className="mt-4 flex gap-3 overflow-x-auto pb-2">
-          {socialChips.map((chip) => (
-            <div
-              key={chip.id}
-              className="shrink-0 rounded-full border border-white/15 bg-white/80 px-4 py-2 text-xs font-semibold text-slate-800 shadow dark:border-white/10 dark:bg-white/10 dark:text-white"
-            >
-              <span className="block text-[10px] uppercase tracking-wide opacity-70">{chip.label}</span>
-              <span className="text-sm">{chip.value}</span>
-            </div>
-          ))}
-        </div>
+        <>
+          <div ref={navSentinelRef} data-testid="nav-visibility-sentinel" className="h-px w-full" />
+          <div ref={kpiChipsRef} data-testid="upload-kpi-chips" className="mt-4 flex gap-3 overflow-x-auto pb-2">
+            {socialChips.map((chip) => (
+              <div
+                key={chip.id}
+                className="shrink-0 rounded-full border border-white/15 bg-white/80 px-4 py-2 text-xs font-semibold text-slate-800 shadow dark:border-white/10 dark:bg-white/10 dark:text-white"
+              >
+                <span className="block text-[10px] uppercase tracking-wide opacity-70">{chip.label}</span>
+                <span className="text-sm">{chip.value}</span>
+              </div>
+            ))}
+          </div>
+        </>
      )}

      {permissionState !== 'granted' && renderPermissionNotice()}
--- a/resources/js/guest/pages/tests/BadgesGrid.test.tsx
+++ b/resources/js/guest/pages/tests/BadgesGrid.test.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { BadgesGrid } from '../AchievementsPage';
+
+const t = (key: string) => key;
+
+describe('BadgesGrid', () => {
+  it('adds dark mode classes for earned and pending badges', () => {
+    render(
+      <BadgesGrid
+        badges={[
+          {
+            id: 1,
+            title: 'First Badge',
+            description: 'Earned badge',
+            earned: true,
+            progress: 1,
+            target: 1,
+          },
+          {
+            id: 2,
+            title: 'Second Badge',
+            description: 'Pending badge',
+            earned: false,
+            progress: 0,
+            target: 5,
+          },
+        ]}
+        t={t}
+      />,
+    );
+
+    const earnedCard = screen.getByTestId('badge-card-1');
+    expect(earnedCard.className).toContain('dark:from-emerald-400/20');
+    expect(earnedCard.className).toContain('dark:text-emerald-50');
+
+    const pendingCard = screen.getByTestId('badge-card-2');
+    expect(pendingCard.className).toContain('dark:bg-slate-950/60');
+    expect(pendingCard.className).toContain('dark:border-slate-800/70');
+  });
+});
--- a/resources/js/guest/pages/tests/MissionActionCardSpacing.test.tsx
+++ b/resources/js/guest/pages/tests/MissionActionCardSpacing.test.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { MissionActionCard } from '../HomePage';
+
+vi.mock('../../context/EventBrandingContext', () => ({
+  useEventBranding: () => ({
+    branding: {
+      primaryColor: '#f43f5e',
+      secondaryColor: '#fb7185',
+      buttons: { radius: 12 },
+      typography: {},
+      fontFamily: 'Montserrat',
+    },
+  }),
+}));
+
+vi.mock('../../lib/emotionTheme', () => ({
+  getEmotionTheme: () => ({
+    gradientBackground: 'linear-gradient(135deg, #f43f5e, #fb7185)',
+  }),
+  getEmotionIcon: () => '🙂',
+}));
+
+vi.mock('swiper/react', () => ({
+  Swiper: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  SwiperSlide: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock('swiper/modules', () => ({
+  EffectCards: {},
+}));
+
+describe('MissionActionCard layout spacing', () => {
+  it('uses a tighter min height for the stack container', () => {
+    render(
+      <MemoryRouter>
+        <MissionActionCard
+          token="demo"
+          mission={{
+            id: 1,
+            title: 'Demo Mission',
+            description: 'Do a demo task.',
+            duration: 3,
+            emotion: null,
+          }}
+          loading={false}
+          onAdvance={() => {}}
+          stack={[]}
+          initialIndex={0}
+          onIndexChange={() => {}}
+          swiperRef={{ current: null }}
+        />
+      </MemoryRouter>,
+    );
+
+    const stack = screen.getByTestId('mission-card-stack');
+    expect(stack.className).toContain('min-h-[240px]');
+    expect(stack.className).toContain('sm:min-h-[260px]');
+  });
+});
--- a/resources/js/guest/pages/tests/UploadActionCard.test.tsx
+++ b/resources/js/guest/pages/tests/UploadActionCard.test.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { UploadActionCard } from '../HomePage';
+
+vi.mock('../../hooks/useDirectUpload', () => ({
+  useDirectUpload: () => ({
+    upload: vi.fn(),
+    uploading: false,
+    error: null,
+    warning: null,
+    progress: 0,
+    reset: vi.fn(),
+  }),
+}));
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => vi.fn(),
+  };
+});
+
+describe('UploadActionCard', () => {
+  it('renders with dark mode surface classes', () => {
+    render(
+      <MemoryRouter>
+        <UploadActionCard
+          token="demo"
+          accentColor="#f43f5e"
+          secondaryAccent="#fb7185"
+          radius={12}
+          requiresApproval={false}
+        />
+      </MemoryRouter>,
+    );
+
+    const card = screen.getByTestId('upload-action-card');
+    expect(card.className).toContain('bg-[var(--guest-surface)]');
+    expect(card.className).toContain('dark:bg-slate-950/70');
+  });
+});
--- a/resources/js/guest/pages/tests/UploadPageImmersive.test.tsx
+++ b/resources/js/guest/pages/tests/UploadPageImmersive.test.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import UploadPage from '../UploadPage';
+
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => vi.fn(),
+  useParams: () => ({ token: 'demo' }),
+  useSearchParams: () => [new URLSearchParams(), vi.fn()],
+}));
+
+vi.mock('../../hooks/useGuestTaskProgress', () => ({
+  useGuestTaskProgress: () => ({
+    markCompleted: vi.fn(),
+  }),
+}));
+
+vi.mock('../../context/GuestIdentityContext', () => ({
+  useGuestIdentity: () => ({
+    name: 'Guest',
+  }),
+}));
+
+vi.mock('../../hooks/useEventData', () => ({
+  useEventData: () => ({
+    event: {
+      guest_upload_visibility: 'immediate',
+      demo_read_only: false,
+      engagement_mode: 'photo_only',
+    },
+  }),
+}));
+
+vi.mock('../../context/EventStatsContext', () => ({
+  useEventStats: () => ({
+    latestPhotoAt: null,
+    onlineGuests: 0,
+  }),
+}));
+
+vi.mock('../../context/EventBrandingContext', () => ({
+  useEventBranding: () => ({
+    branding: {
+      primaryColor: '#f43f5e',
+      secondaryColor: '#fb7185',
+      buttons: { radius: 12 },
+      typography: {},
+      fontFamily: 'Montserrat',
+    },
+  }),
+}));
+
+vi.mock('../../i18n/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback ?? key,
+    locale: 'de',
+  }),
+}));
+
+vi.mock('../../services/eventApi', () => ({
+  getEventPackage: vi.fn().mockResolvedValue(null),
+}));
+
+vi.mock('../../services/photosApi', () => ({
+  uploadPhoto: vi.fn(),
+}));
+
+describe('UploadPage immersive mode', () => {
+  it('adds the guest-immersive class on mount', async () => {
+    render(<UploadPage />);
+
+    await waitFor(() => {
+      expect(document.body.classList.contains('guest-immersive')).toBe(true);
+    });
+  });
+});
--- a/resources/js/guest/pages/tests/UploadPageNavVisibility.test.tsx
+++ b/resources/js/guest/pages/tests/UploadPageNavVisibility.test.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import UploadPage from '../UploadPage';
+
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => vi.fn(),
+  useParams: () => ({ token: 'demo' }),
+  useSearchParams: () => [new URLSearchParams(), vi.fn()],
+}));
+
+vi.mock('../../hooks/useGuestTaskProgress', () => ({
+  useGuestTaskProgress: () => ({
+    markCompleted: vi.fn(),
+  }),
+}));
+
+vi.mock('../../context/GuestIdentityContext', () => ({
+  useGuestIdentity: () => ({
+    name: 'Guest',
+  }),
+}));
+
+vi.mock('../../hooks/useEventData', () => ({
+  useEventData: () => ({
+    event: {
+      guest_upload_visibility: 'immediate',
+      demo_read_only: false,
+      engagement_mode: 'photo_only',
+    },
+  }),
+}));
+
+vi.mock('../../context/EventStatsContext', () => ({
+  useEventStats: () => ({
+    latestPhotoAt: null,
+    onlineGuests: 2,
+  }),
+}));
+
+vi.mock('../../context/EventBrandingContext', () => ({
+  useEventBranding: () => ({
+    branding: {
+      primaryColor: '#f43f5e',
+      secondaryColor: '#fb7185',
+      buttons: { radius: 12 },
+      typography: {},
+      fontFamily: 'Montserrat',
+    },
+  }),
+}));
+
+vi.mock('../../i18n/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback ?? key,
+    locale: 'de',
+  }),
+}));
+
+vi.mock('../../services/eventApi', () => ({
+  getEventPackage: vi.fn().mockResolvedValue(null),
+}));
+
+vi.mock('../../services/photosApi', () => ({
+  uploadPhoto: vi.fn(),
+}));
+
+describe('UploadPage bottom nav visibility', () => {
+  beforeEach(() => {
+    document.body.classList.remove('guest-nav-visible');
+    document.body.classList.remove('guest-immersive');
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+      cb(0);
+      return 0;
+    });
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
+  });
+
+  it('shows the nav after the KPI chips are scrolled past', 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);
+
+    // nav is on by default now
+    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
+  });
+});
--- a/resources/js/guest/services/eventApi.ts
+++ b/resources/js/guest/services/eventApi.ts
@@ -58,6 +58,7 @@ export interface EventData {
  created_at: string;
  updated_at: string;
  join_token?: string | null;
+  demo_read_only?: boolean;
  photobooth_enabled?: boolean | null;
  type?: {
    slug: string;
@@ -270,6 +271,7 @@ export async function fetchEvent(eventKey: string): Promise<EventData> {
      engagement_mode: (json?.engagement_mode as 'tasks' | 'photo_only' | undefined) ?? 'tasks',
      guest_upload_visibility:
        json?.guest_upload_visibility === 'immediate' ? 'immediate' : 'review',
+      demo_read_only: Boolean(json?.demo_read_only),
    };

    if (json?.type) {