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.

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">

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"

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

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

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]');
+  });
+});

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

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

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