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/app/Console/Commands/SeedDemoSwitcherTenants.php
+++ b/app/Console/Commands/SeedDemoSwitcherTenants.php
@@ -3,6 +3,7 @@
 namespace App\Console\Commands;

 use App\Models\Event;
+use App\Models\EventMediaAsset;
 use App\Models\EventPackage;
 use App\Models\EventType;
 use App\Models\Package;
@@ -11,6 +12,7 @@ use App\Models\TaskCollection;
 use App\Models\Tenant;
 use App\Models\TenantPackage;
 use App\Models\User;
+use App\Services\Storage\EventStorageManager;
 use Carbon\Carbon;
 use Illuminate\Console\Command;
 use Illuminate\Support\Arr;
@@ -26,6 +28,11 @@ class SeedDemoSwitcherTenants extends Command

    protected $description = 'Seeds demo tenants used by the DevTenantSwitcher (endcustomer + reseller profiles)';

+    public function __construct(private EventStorageManager $eventStorageManager)
+    {
+        parent::__construct();
+    }
+
    public function handle(): int
    {
        if (! app()->environment(['local', 'development', 'demo'])) {
@@ -88,20 +95,14 @@ class SeedDemoSwitcherTenants extends Command
                    $photo->likes()->delete();
                    $photoLikesDeleted += $deletedLikes;

-                    if ($photo->thumbnail_path) {
-                        Storage::disk('public')->delete($photo->thumbnail_path);
-                    }
-
-                    if ($photo->file_path) {
-                        Storage::disk('public')->delete($photo->file_path);
-                    }
-
+                    $this->deleteDemoPhotoAssets($photo, $event);
                    $photo->delete();
                    $photosDeleted++;
                }

-                Storage::disk('public')->deleteDirectory("events/{$event->id}/gallery");
-                Storage::disk('public')->deleteDirectory("events/{$event->id}/gallery/thumbs");
+                $cleanupDisk = $this->eventStorageManager->getHotDiskForEvent($event);
+                Storage::disk($cleanupDisk)->deleteDirectory("events/{$event->id}/gallery");
+                Storage::disk($cleanupDisk)->deleteDirectory("events/{$event->id}/gallery/thumbs");

                $event->taskCollections()->detach();
                $event->tasks()->detach();
@@ -489,7 +490,7 @@ class SeedDemoSwitcherTenants extends Command
                continue;
            }

-            $this->storePhotos($event, $photos);
+            $this->storePhotos($event, $photos, $targetPerEvent);
        }
    }

@@ -528,10 +529,11 @@ class SeedDemoSwitcherTenants extends Command
        return Arr::get($data, 'photos', []);
    }

-    private function storePhotos(Event $event, array $photos): void
+    private function storePhotos(Event $event, array $photos, int $targetPerEvent): void
    {
        $tenantId = $event->tenant_id;
-        $storage = Storage::disk('public');
+        $disk = $this->eventStorageManager->getHotDiskForEvent($event);
+        $storage = Storage::disk($disk);
        $storage->makeDirectory("events/{$event->id}/gallery");
        $storage->makeDirectory("events/{$event->id}/gallery/thumbs");

@@ -540,11 +542,11 @@ class SeedDemoSwitcherTenants extends Command
            ->get();

        foreach ($demoPhotos as $photo) {
-            $storage->delete([$photo->file_path, $photo->thumbnail_path]);
+            $this->deleteDemoPhotoAssets($photo, $event);
            $photo->delete();
        }

-        $limit = min(count($photos), (int) $this->option('photos-per-event'));
+        $limit = min(count($photos), $targetPerEvent);
        for ($i = 0; $i < $limit; $i++) {
            $photo = $photos[$i];
            $src = $photo['src'] ?? [];
@@ -561,16 +563,20 @@ class SeedDemoSwitcherTenants extends Command
            $filePath = "events/{$event->id}/gallery/{$filename}";
            $thumbPath = "events/{$event->id}/gallery/thumbs/{$thumbFilename}";

+            $originalBody = null;
+            $thumbBody = null;
            try {
                $imageResponse = Http::get($originalUrl);
                if ($imageResponse->ok()) {
-                    $storage->put($filePath, $imageResponse->body());
+                    $originalBody = $imageResponse->body();
+                    $storage->put($filePath, $originalBody);
                }

                if ($thumbUrl) {
                    $thumbResponse = Http::get($thumbUrl);
                    if ($thumbResponse->ok()) {
-                        $storage->put($thumbPath, $thumbResponse->body());
+                        $thumbBody = $thumbResponse->body();
+                        $storage->put($thumbPath, $thumbBody);
                    }
                }
            } catch (\Throwable $exception) {
@@ -581,7 +587,7 @@ class SeedDemoSwitcherTenants extends Command

            $timestamp = Carbon::parse($event->date ?? Carbon::now())->addHours($i);

-            Photo::updateOrCreate(
+            $photoRecord = Photo::updateOrCreate(
                [
                    'tenant_id' => $tenantId,
                    'event_id' => $event->id,
@@ -592,11 +598,36 @@ class SeedDemoSwitcherTenants extends Command
                    'guest_name' => 'Demo Guest '.($i + 1),
                    'likes_count' => rand(1, 25),
                    'is_featured' => $i === 0,
+                    'status' => 'approved',
+                    'mime_type' => 'image/jpeg',
+                    'size' => $originalBody ? strlen($originalBody) : null,
                    'metadata' => ['demo' => true, 'source' => 'pexels'],
                    'created_at' => $timestamp,
                    'updated_at' => $timestamp,
                ]
            );
+
+            $originalAsset = $this->eventStorageManager->recordAsset($event, $disk, $filePath, [
+                'variant' => 'original',
+                'mime_type' => 'image/jpeg',
+                'size_bytes' => $originalBody ? strlen($originalBody) : null,
+                'checksum' => $originalBody ? hash('sha256', $originalBody) : null,
+                'photo_id' => $photoRecord->id,
+            ]);
+
+            if ($thumbBody) {
+                $this->eventStorageManager->recordAsset($event, $disk, $thumbPath, [
+                    'variant' => 'thumbnail',
+                    'mime_type' => 'image/jpeg',
+                    'size_bytes' => strlen($thumbBody),
+                    'photo_id' => $photoRecord->id,
+                    'meta' => [
+                        'source_variant_id' => $originalAsset->id,
+                    ],
+                ]);
+            }
+
+            $photoRecord->update(['media_asset_id' => $originalAsset->id]);
        }

        EventPackage::where('event_id', $event->id)->update([
@@ -606,4 +637,31 @@ class SeedDemoSwitcherTenants extends Command

        $this->info("Seeded {$limit} photos for {$event->slug}");
    }
+
+    private function deleteDemoPhotoAssets(Photo $photo, Event $event): void
+    {
+        $fallbackDisk = $this->eventStorageManager->getHotDiskForEvent($event);
+        $assets = EventMediaAsset::where('photo_id', $photo->id)->get();
+
+        foreach ($assets as $asset) {
+            $assetDisk = $asset->disk ?: $fallbackDisk;
+            if (! config("filesystems.disks.{$assetDisk}")) {
+                $assetDisk = $fallbackDisk;
+            }
+
+            if ($asset->path) {
+                Storage::disk($assetDisk)->delete($asset->path);
+            }
+
+            $asset->delete();
+        }
+
+        if ($photo->file_path) {
+            Storage::disk($fallbackDisk)->delete($photo->file_path);
+        }
+
+        if ($photo->thumbnail_path) {
+            Storage::disk($fallbackDisk)->delete($photo->thumbnail_path);
+        }
+    }
 }
--- a/app/Http/Controllers/Api/EventPublicController.php
+++ b/app/Http/Controllers/Api/EventPublicController.php
@@ -1785,6 +1785,8 @@ class EventPublicController extends BaseController
            $this->joinTokenService->incrementUsage($joinToken);
        }

+        $demoReadOnly = (bool) Arr::get($joinToken?->metadata ?? [], 'demo_read_only', false);
+
        return response()->json([
            'id' => $event->id,
            'slug' => $event->slug,
@@ -1794,6 +1796,7 @@ class EventPublicController extends BaseController
            'updated_at' => $event->updated_at,
            'type' => $eventTypeData,
            'join_token' => $joinToken?->token,
+            'demo_read_only' => $demoReadOnly,
            'photobooth_enabled' => (bool) ($event->photoboothSetting?->enabled),
            'branding' => $branding,
            'guest_upload_visibility' => Arr::get($event->settings ?? [], 'guest_upload_visibility', 'review'),
@@ -2751,6 +2754,28 @@ class EventPublicController extends BaseController

        [$event, $joinToken] = $result;
        $eventId = $event->id;
+        $demoReadOnly = (bool) Arr::get($joinToken?->metadata ?? [], 'demo_read_only', false);
+
+        if ($demoReadOnly) {
+            $this->recordTokenEvent(
+                $joinToken,
+                $request,
+                'demo_read_only',
+                ['event_id' => $eventId],
+                $token,
+                Response::HTTP_FORBIDDEN
+            );
+
+            return ApiError::response(
+                'demo_read_only',
+                'Demo mode',
+                'Uploads are disabled in demo mode.',
+                Response::HTTP_FORBIDDEN,
+                [
+                    'event_id' => $eventId,
+                ]
+            );
+        }

        $eventModel = Event::with([
            'tenant',
--- a/app/Services/EventJoinTokenService.php
+++ b/app/Services/EventJoinTokenService.php
@@ -42,6 +42,7 @@ class EventJoinTokenService

    public function revoke(EventJoinToken $joinToken, ?string $reason = null): EventJoinToken
    {
+        unset($joinToken->plain_token);
        $joinToken->revoked_at = now();

        if ($reason) {
--- a/database/seeders/DemoEventSeeder.php
+++ b/database/seeders/DemoEventSeeder.php
@@ -11,9 +11,9 @@ use App\Models\Task;
 use App\Models\TaskCollection;
 use App\Models\Tenant;
 use App\Services\EventJoinTokenService;
-use Illuminate\Support\Facades\Crypt;
 use Illuminate\Database\Seeder;
 use Illuminate\Support\Carbon;
+use Illuminate\Support\Facades\Crypt;
 use Illuminate\Support\Facades\Schema;

 class DemoEventSeeder extends Seeder
@@ -111,15 +111,30 @@ class DemoEventSeeder extends Seeder
    private function ensureJoinToken(Event $event, string $label, ?string $token = null): void
    {
        if ($event->joinTokens()->exists()) {
+            $existingToken = $event->joinTokens()->latest('id')->first();
+            if ($existingToken) {
+                $metadata = $existingToken->metadata ?? [];
+                if (! array_key_exists('demo_read_only', $metadata)) {
+                    $metadata['demo_read_only'] = true;
+                    $existingToken->metadata = $metadata;
+                    $existingToken->save();
+                }
+            }
+
            return;
        }

-        $attributes = ['label' => $label];
+        $metadata = ['demo_read_only' => true];

        if ($token) {
-            $attributes['metadata'] = ['seeded' => true, 'plain_token' => $token];
+            $metadata = array_merge($metadata, ['seeded' => true, 'plain_token' => $token]);
        }

+        $attributes = [
+            'label' => $label,
+            'metadata' => $metadata,
+        ];
+
        $tokenModel = app(EventJoinTokenService::class)->createToken($event, $attributes);

        if ($token) {
--- 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) => (
+          {filters.map((filter) => {
+            const isActive = mode === filter.value;
+
+            return (
              <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',
+                  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="px-4 py-1 transition"
+                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>
+      <AppearanceProvider>
        <SharedPhotoStandalone />
+      </AppearanceProvider>
    </React.StrictMode>
  );
 };
@@ -52,6 +54,7 @@ const appRoot = async () => {

  createRoot(rootEl).render(
    <React.StrictMode>
+      <AppearanceProvider>
        <LocaleProvider>
          <ToastProvider>
            <MatomoTracker config={matomoConfig} />
@@ -66,6 +69,7 @@ const appRoot = async () => {
            </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('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,7 +1433,9 @@ 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">
+        <>
+          <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}
@@ -1413,6 +1446,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
              </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) {
--- a/tests/Feature/GuestJoinTokenFlowTest.php
+++ b/tests/Feature/GuestJoinTokenFlowTest.php
@@ -3,6 +3,9 @@
 namespace Tests\Feature;

 use App\Models\Event;
+use App\Models\EventPackage;
+use App\Models\MediaStorageTarget;
+use App\Models\Package;
 use App\Models\Photo;
 use App\Services\EventJoinTokenService;
 use Illuminate\Foundation\Testing\RefreshDatabase;
@@ -62,11 +65,32 @@ class GuestJoinTokenFlowTest extends TestCase
        Storage::fake('public');

        $event = $this->createPublishedEvent();
+        $package = Package::factory()->endcustomer()->create([
+            'max_photos' => 100,
+        ]);
+        EventPackage::create([
+            'event_id' => $event->id,
+            'package_id' => $package->id,
+            'purchased_price' => $package->price,
+            'purchased_at' => now(),
+            'used_photos' => 0,
+            'used_guests' => 0,
+        ]);
+        MediaStorageTarget::create([
+            'key' => 'public',
+            'name' => 'Public',
+            'driver' => 'local',
+            'is_hot' => true,
+            'is_default' => true,
+            'is_active' => true,
+        ]);
        $token = $this->tokenService->createToken($event);

        Mockery::mock('alias:App\Support\ImageHelper')
            ->shouldReceive('makeThumbnailOnDisk')
-            ->andReturn("events/{$event->id}/photos/thumbs/generated_thumb.jpg");
+            ->andReturn("events/{$event->id}/photos/thumbs/generated_thumb.jpg")
+            ->shouldReceive('copyWithWatermark')
+            ->andReturnNull();

        $file = UploadedFile::fake()->image('example.jpg', 1200, 800);

@@ -76,7 +100,7 @@ class GuestJoinTokenFlowTest extends TestCase
            ]);

        $response->assertCreated()
-            ->assertJsonStructure(['id', 'file_path', 'thumbnail_path']);
+            ->assertJsonStructure(['id', 'status', 'message']);

        $this->assertDatabaseCount('photos', 1);

@@ -96,6 +120,41 @@ class GuestJoinTokenFlowTest extends TestCase
        }
    }

+    public function test_guest_event_response_includes_demo_read_only_flag(): void
+    {
+        $event = $this->createPublishedEvent();
+        $token = $this->tokenService->createToken($event, [
+            'metadata' => ['demo_read_only' => true],
+        ]);
+
+        $response = $this->getJson("/api/v1/events/{$token->token}");
+
+        $response->assertOk()
+            ->assertJsonPath('demo_read_only', true);
+    }
+
+    public function test_guest_cannot_upload_photo_with_demo_token(): void
+    {
+        Storage::fake('public');
+
+        $event = $this->createPublishedEvent();
+        $token = $this->tokenService->createToken($event, [
+            'metadata' => ['demo_read_only' => true],
+        ]);
+
+        $file = UploadedFile::fake()->image('example.jpg', 1200, 800);
+
+        $response = $this->withHeader('X-Device-Id', 'token-device')
+            ->postJson("/api/v1/events/{$token->token}/upload", [
+                'photo' => $file,
+            ]);
+
+        $response->assertStatus(403)
+            ->assertJsonPath('error.code', 'demo_read_only');
+
+        $this->assertDatabaseCount('photos', 0);
+    }
+
    public function test_guest_can_like_photo_after_joining_with_token(): void
    {
        $event = $this->createPublishedEvent();
--- a/tests/Feature/SeedDemoSwitcherTenantsTest.php
+++ b/tests/Feature/SeedDemoSwitcherTenantsTest.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Console\Commands\SeedDemoSwitcherTenants;
+use App\Models\Event;
+use App\Models\MediaStorageTarget;
+use App\Models\Photo;
+use Illuminate\Console\OutputStyle;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Storage;
+use Symfony\Component\Console\Input\ArrayInput;
+use Symfony\Component\Console\Output\NullOutput;
+use Tests\TestCase;
+
+class SeedDemoSwitcherTenantsTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_demo_seeder_records_media_assets_on_event_disk(): void
+    {
+        Storage::fake('local-ssd');
+
+        MediaStorageTarget::create([
+            'key' => 'local-ssd',
+            'name' => 'Local SSD',
+            'driver' => 'local',
+            'config' => [],
+            'is_hot' => true,
+            'is_default' => true,
+            'is_active' => true,
+            'priority' => 10,
+        ]);
+
+        $event = Event::factory()->create();
+
+        $originalUrl = 'https://images.test/demo-original.jpg';
+        $thumbUrl = 'https://images.test/demo-thumb.jpg';
+
+        Http::fake([
+            $originalUrl => Http::response('demo-original', 200, ['Content-Type' => 'image/jpeg']),
+            $thumbUrl => Http::response('demo-thumb', 200, ['Content-Type' => 'image/jpeg']),
+        ]);
+
+        $command = app(SeedDemoSwitcherTenants::class);
+        $command->setOutput(new OutputStyle(new ArrayInput([]), new NullOutput));
+        $method = new \ReflectionMethod($command, 'storePhotos');
+        $method->setAccessible(true);
+
+        $method->invoke($command, $event, [
+            [
+                'src' => [
+                    'large2x' => $originalUrl,
+                    'medium' => $thumbUrl,
+                ],
+            ],
+        ], 1);
+
+        $photo = Photo::where('event_id', $event->id)->first();
+
+        $this->assertNotNull($photo);
+        $this->assertNotNull($photo->media_asset_id);
+        $this->assertSame('approved', $photo->status);
+
+        Storage::disk('local-ssd')->assertExists($photo->file_path);
+        Storage::disk('local-ssd')->assertExists($photo->thumbnail_path);
+
+        $this->assertDatabaseHas('event_media_assets', [
+            'photo_id' => $photo->id,
+            'variant' => 'original',
+            'disk' => 'local-ssd',
+            'path' => $photo->file_path,
+        ]);
+
+        $this->assertDatabaseHas('event_media_assets', [
+            'photo_id' => $photo->id,
+            'variant' => 'thumbnail',
+            'disk' => 'local-ssd',
+            'path' => $photo->thumbnail_path,
+        ]);
+    }
+}