bild teilen: erledigt nun sharesheet.tsx, demoswitchertenants seeder hinzugefügt;

unnötige pakete entfernt
2025-12-05 11:23:39 +01:00
parent 7afcc206f3
commit 946d09764a
7 changed files with 1290 additions and 3329 deletions
--- a/app/Console/Commands/SeedDemoSwitcherTenants.php
+++ b/app/Console/Commands/SeedDemoSwitcherTenants.php
@@ -0,0 +1,613 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Models\Event;
+use App\Models\EventPackage;
+use App\Models\EventType;
+use App\Models\Package;
+use App\Models\Photo;
+use App\Models\TaskCollection;
+use App\Models\Tenant;
+use App\Models\TenantPackage;
+use App\Models\User;
+use Carbon\Carbon;
+use Illuminate\Console\Command;
+use Illuminate\Support\Arr;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+
+class SeedDemoSwitcherTenants extends Command
+{
+    protected $signature = 'demo:seed-switcher {--with-photos : Download sample photos from Pexels} {--photos-per-event=18 : Target photos per event when downloading} {--cleanup : Remove demo switcher tenants/events/photos instead of seeding}';
+
+    protected $description = 'Seeds demo tenants used by the DevTenantSwitcher (endcustomer + reseller profiles)';
+
+    public function handle(): int
+    {
+        if (! app()->environment(['local', 'development', 'demo'])) {
+            $this->error('Cleanup/Seeding is restricted to local/development/demo environments.');
+
+            return self::FAILURE;
+        }
+
+        if ($this->option('cleanup')) {
+            return $this->cleanup();
+        }
+
+        $this->info('Seeding demo tenants for switcher...');
+
+        $packages = $this->loadPackages();
+        $eventTypes = $this->loadEventTypes();
+
+        DB::transaction(function () use ($packages, $eventTypes) {
+            $this->seedCustomerStandardEmpty($packages, $eventTypes);
+            $this->seedCustomerStarterWedding($packages, $eventTypes);
+            $this->seedResellerActive($packages, $eventTypes);
+            $this->seedResellerFull($packages, $eventTypes);
+        });
+
+        if ($this->option('with-photos')) {
+            $this->seedPhotosFromPexels((int) $this->option('photos-per-event'));
+        }
+
+        $this->info('Done.');
+
+        return self::SUCCESS;
+    }
+
+    private function cleanup(): int
+    {
+        $slugs = [
+            'demo-standard-empty',
+            'demo-starter-wedding',
+            'demo-reseller-active',
+            'demo-reseller-full',
+        ];
+
+        $eventsDeleted = 0;
+        $photosDeleted = 0;
+        $photoLikesDeleted = 0;
+        $usersDeleted = 0;
+
+        foreach ($slugs as $slug) {
+            $tenant = Tenant::where('slug', $slug)->first();
+
+            if (! $tenant) {
+                continue;
+            }
+
+            foreach ($tenant->events as $event) {
+                $eventsDeleted++;
+                $photos = Photo::where('event_id', $event->id)->get();
+                foreach ($photos as $photo) {
+                    $deletedLikes = $photo->likes()->count();
+                    $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);
+                    }
+
+                    $photo->delete();
+                    $photosDeleted++;
+                }
+
+                Storage::disk('public')->deleteDirectory("events/{$event->id}/gallery");
+                Storage::disk('public')->deleteDirectory("events/{$event->id}/gallery/thumbs");
+
+                $event->taskCollections()->detach();
+                $event->tasks()->detach();
+                $event->eventPackages()->delete();
+                $event->delete();
+            }
+
+            TenantPackage::where('tenant_id', $tenant->id)->delete();
+            $usersDeleted += User::where('tenant_id', $tenant->id)->count();
+            User::where('tenant_id', $tenant->id)->delete();
+            $tenant->delete();
+        }
+
+        $this->info(
+            'Cleanup completed. Tenants deleted: '.count($slugs)
+            .", Users deleted: {$usersDeleted}, Events deleted: {$eventsDeleted}, Photos deleted: {$photosDeleted}, Photo likes deleted: {$photoLikesDeleted}"
+        );
+
+        return self::SUCCESS;
+    }
+
+    private function loadPackages(): array
+    {
+        $slugs = [
+            'starter' => 'Starter',
+            'standard' => 'Standard',
+            's-small-reseller' => 'Reseller S',
+        ];
+
+        $packages = [];
+        foreach ($slugs as $slug => $label) {
+            $package = Package::where('slug', $slug)->first();
+            if (! $package) {
+                $this->error("Package {$label} ({$slug}) not found. Run PackageSeeder first.");
+                abort(1);
+            }
+
+            $packages[$slug] = $package;
+        }
+
+        return $packages;
+    }
+
+    private function loadEventTypes(): array
+    {
+        $slugs = ['wedding', 'corporate', 'birthday', 'festival'];
+        $types = [];
+
+        foreach ($slugs as $slug) {
+            $eventType = EventType::where('slug', $slug)->first();
+            if ($eventType) {
+                $types[$slug] = $eventType;
+            }
+        }
+
+        return $types;
+    }
+
+    private function seedCustomerStandardEmpty(array $packages, array $eventTypes): void
+    {
+        $tenant = $this->upsertTenant(
+            slug: 'demo-standard-empty',
+            name: 'Demo Standard (ohne Event)',
+            contactEmail: 'standard-empty@demo.fotospiel',
+            attributes: [
+                'subscription_tier' => 'standard',
+                'subscription_status' => 'active',
+                'event_credits_balance' => 1,
+            ],
+        );
+
+        $this->upsertAdmin($tenant, 'standard-empty@demo.fotospiel');
+
+        TenantPackage::updateOrCreate(
+            ['tenant_id' => $tenant->id, 'package_id' => $packages['standard']->id],
+            [
+                'price' => $packages['standard']->price,
+                'purchased_at' => Carbon::now()->subDays(1),
+                'expires_at' => Carbon::now()->addMonths(12),
+                'used_events' => 0,
+                'active' => true,
+            ]
+        );
+
+        $this->comment('Seeded Standard tenant without events.');
+    }
+
+    private function seedCustomerStarterWedding(array $packages, array $eventTypes): void
+    {
+        $tenant = $this->upsertTenant(
+            slug: 'demo-starter-wedding',
+            name: 'Demo Starter Wedding',
+            contactEmail: 'starter-wedding@demo.fotospiel',
+            attributes: [
+                'subscription_tier' => 'starter',
+                'subscription_status' => 'active',
+                'event_credits_balance' => 0,
+            ],
+        );
+
+        $this->upsertAdmin($tenant, 'starter-wedding@demo.fotospiel');
+
+        $event = $this->upsertEvent(
+            tenant: $tenant,
+            package: $packages['starter'],
+            eventType: $eventTypes['wedding'] ?? null,
+            attributes: [
+                'name' => ['de' => 'Hochzeit Mia & Jonas', 'en' => 'Wedding Mia & Jonas'],
+                'slug' => 'demo-starter-wedding',
+                'status' => 'published',
+                'is_active' => true,
+                'date' => Carbon::now()->addWeeks(5),
+            ],
+        );
+
+        $this->attachDefaultCollections($event);
+    }
+
+    private function seedResellerActive(array $packages, array $eventTypes): void
+    {
+        $tenant = $this->upsertTenant(
+            slug: 'demo-reseller-active',
+            name: 'Demo Reseller Active',
+            contactEmail: 'reseller-active@demo.fotospiel',
+            attributes: [
+                'subscription_tier' => 'reseller',
+                'subscription_status' => 'active',
+                'event_credits_balance' => 2,
+            ],
+        );
+
+        $this->upsertAdmin($tenant, 'reseller-active@demo.fotospiel');
+
+        TenantPackage::updateOrCreate(
+            ['tenant_id' => $tenant->id, 'package_id' => $packages['s-small-reseller']->id],
+            [
+                'price' => $packages['s-small-reseller']->price,
+                'purchased_at' => Carbon::now()->subMonths(1),
+                'expires_at' => Carbon::now()->addMonths(11),
+                'used_events' => 3,
+                'active' => true,
+            ]
+        );
+
+        $events = [
+            [
+                'name' => ['de' => 'Corporate Summit', 'en' => 'Corporate Summit'],
+                'slug' => 'demo-reseller-corporate',
+                'type' => $eventTypes['corporate'] ?? null,
+                'date' => Carbon::now()->addWeeks(3),
+            ],
+            [
+                'name' => ['de' => 'Sommerfestival', 'en' => 'Summer Festival'],
+                'slug' => 'demo-reseller-festival',
+                'type' => $eventTypes['festival'] ?? ($eventTypes['birthday'] ?? null),
+                'date' => Carbon::now()->addWeeks(6),
+            ],
+            [
+                'name' => ['de' => 'Geburtstag Lisa', 'en' => 'Lisa Birthday'],
+                'slug' => 'demo-reseller-birthday',
+                'type' => $eventTypes['birthday'] ?? null,
+                'date' => Carbon::now()->addWeeks(9),
+            ],
+        ];
+
+        foreach ($events as $index => $config) {
+            $event = $this->upsertEvent(
+                tenant: $tenant,
+                package: $packages['standard'],
+                eventType: $config['type'],
+                attributes: [
+                    'name' => $config['name'],
+                    'slug' => $config['slug'],
+                    'status' => 'published',
+                    'is_active' => true,
+                    'date' => $config['date'],
+                ],
+            );
+
+            $this->attachDefaultCollections($event);
+        }
+    }
+
+    private function seedResellerFull(array $packages, array $eventTypes): void
+    {
+        $tenant = $this->upsertTenant(
+            slug: 'demo-reseller-full',
+            name: 'Demo Reseller Voll',
+            contactEmail: 'reseller-full@demo.fotospiel',
+            attributes: [
+                'subscription_tier' => 'reseller',
+                'subscription_status' => 'active',
+                'event_credits_balance' => 0,
+            ],
+        );
+
+        $this->upsertAdmin($tenant, 'reseller-full@demo.fotospiel');
+
+        TenantPackage::updateOrCreate(
+            ['tenant_id' => $tenant->id, 'package_id' => $packages['s-small-reseller']->id],
+            [
+                'price' => $packages['s-small-reseller']->price,
+                'purchased_at' => Carbon::now()->subMonths(6),
+                'expires_at' => Carbon::now()->addMonths(6),
+                'used_events' => 5,
+                'active' => true,
+            ]
+        );
+
+        $eventConfigs = [
+            ['slug' => 'demo-full-wedding', 'name' => ['de' => 'Hochzeit Clara & Ben', 'en' => 'Wedding Clara & Ben'], 'type' => $eventTypes['wedding'] ?? null],
+            ['slug' => 'demo-full-corporate', 'name' => ['de' => 'Jahrestagung', 'en' => 'Annual Summit'], 'type' => $eventTypes['corporate'] ?? null],
+            ['slug' => 'demo-full-birthday', 'name' => ['de' => 'Geburtstag Jonas', 'en' => 'Birthday Jonas'], 'type' => $eventTypes['birthday'] ?? null],
+            ['slug' => 'demo-full-festival', 'name' => ['de' => 'Stadtfest', 'en' => 'City Festival'], 'type' => $eventTypes['festival'] ?? null],
+            ['slug' => 'demo-full-christmas', 'name' => ['de' => 'Weihnachtsfeier', 'en' => 'Christmas Party'], 'type' => $eventTypes['corporate'] ?? null],
+        ];
+
+        foreach ($eventConfigs as $index => $config) {
+            $event = $this->upsertEvent(
+                tenant: $tenant,
+                package: $packages['standard'],
+                eventType: $config['type'],
+                attributes: [
+                    'name' => $config['name'],
+                    'slug' => $config['slug'],
+                    'status' => 'archived',
+                    'is_active' => false,
+                    'date' => Carbon::now()->subWeeks(5 - $index),
+                ],
+            );
+
+            $this->attachDefaultCollections($event);
+        }
+    }
+
+    private function upsertTenant(string $slug, string $name, string $contactEmail, array $attributes = []): Tenant
+    {
+        $defaults = [
+            'name' => $name,
+            'contact_email' => $contactEmail,
+            'subscription_expires_at' => Carbon::now()->addMonths(12),
+            'is_active' => true,
+            'is_suspended' => false,
+            'settings_updated_at' => Carbon::now(),
+            'settings' => [
+                'branding' => [
+                    'logo_url' => null,
+                    'primary_color' => '#1D4ED8',
+                    'secondary_color' => '#0F172A',
+                    'font_family' => 'Inter, sans-serif',
+                ],
+                'features' => [
+                    'photo_likes_enabled' => true,
+                    'event_checklist' => true,
+                ],
+                'contact_email' => $contactEmail,
+            ],
+        ];
+
+        return Tenant::updateOrCreate(
+            ['slug' => $slug],
+            array_merge($defaults, $attributes, ['slug' => $slug])
+        );
+    }
+
+    private function upsertAdmin(Tenant $tenant, string $email): User
+    {
+        $password = config('seeding.demo_tenant_password', 'Demo1234!');
+
+        $user = User::updateOrCreate(
+            ['email' => $email],
+            [
+                'tenant_id' => $tenant->id,
+                'role' => 'tenant_admin',
+                'password' => Hash::make($password),
+                'first_name' => Str::headline(Str::before($tenant->slug, '-')),
+                'last_name' => 'Demo',
+            ]
+        );
+
+        if (! $user->email_verified_at) {
+            $user->forceFill(['email_verified_at' => now()])->save();
+        }
+
+        return $user;
+    }
+
+    private function upsertEvent(Tenant $tenant, Package $package, ?EventType $eventType, array $attributes): Event
+    {
+        $resolvedEventType = $eventType ?? $this->fallbackEventType();
+
+        $payload = array_merge([
+            'tenant_id' => $tenant->id,
+            'event_type_id' => $resolvedEventType?->id,
+            'settings' => [
+                'features' => [
+                    'photo_likes_enabled' => true,
+                    'event_checklist' => true,
+                ],
+            ],
+        ], $attributes);
+
+        /** @var Event $event */
+        $event = Event::updateOrCreate(
+            ['slug' => $attributes['slug']],
+            $payload
+        );
+
+        EventPackage::updateOrCreate(
+            [
+                'event_id' => $event->id,
+                'package_id' => $package->id,
+            ],
+            [
+                'purchased_price' => $package->price,
+                'purchased_at' => Carbon::now()->subDays(2),
+                'used_photos' => 0,
+                'used_guests' => 0,
+                'gallery_expires_at' => Carbon::now()->addDays($package->gallery_days ?? 30),
+            ]
+        );
+
+        return $event;
+    }
+
+    private function fallbackEventType(): ?EventType
+    {
+        $fallback = EventType::first();
+
+        if (! $fallback) {
+            $this->warn('No EventType available, events will miss type. Please run EventTypesSeeder.');
+        }
+
+        return $fallback;
+    }
+
+    private function attachDefaultCollections(Event $event): void
+    {
+        if (! $event->event_type_id) {
+            return;
+        }
+
+        $collection = TaskCollection::where('event_type_id', $event->event_type_id)
+            ->where('is_default', true)
+            ->orderBy('position')
+            ->first();
+
+        if (! $collection) {
+            return;
+        }
+
+        $event->taskCollections()->syncWithoutDetaching([$collection->id]);
+
+        $taskIds = $collection->tasks()->pluck('tasks.id')->all();
+        if ($taskIds !== []) {
+            $event->tasks()->syncWithoutDetaching($taskIds);
+        }
+    }
+
+    private function seedPhotosFromPexels(int $targetPerEvent): void
+    {
+        $apiKey = config('services.pexels.key') ?? env('PEXELS_API_KEY');
+        if (! $apiKey) {
+            $this->warn('PEXELS_API_KEY missing, skipping photo download.');
+
+            return;
+        }
+
+        $events = Event::whereIn('slug', [
+            'demo-starter-wedding',
+            'demo-reseller-corporate',
+            'demo-reseller-festival',
+            'demo-reseller-birthday',
+            'demo-full-wedding',
+            'demo-full-corporate',
+            'demo-full-birthday',
+            'demo-full-festival',
+            'demo-full-christmas',
+        ])->get();
+
+        foreach ($events as $event) {
+            $query = $this->guessQueryForEvent($event);
+            $this->info("Downloading photos for {$event->slug} ({$query})...");
+
+            $photos = $this->fetchPexels($apiKey, $query, $targetPerEvent);
+            if ($photos === []) {
+                $this->warn('No photos returned from Pexels.');
+
+                continue;
+            }
+
+            $this->storePhotos($event, $photos);
+        }
+    }
+
+    private function guessQueryForEvent(Event $event): string
+    {
+        $typeSlug = optional($event->eventType)->slug;
+
+        return match ($typeSlug) {
+            'wedding' => 'wedding photography couple',
+            'corporate' => 'corporate event people',
+            'birthday' => 'birthday party friends',
+            default => 'event celebration crowd',
+        };
+    }
+
+    private function fetchPexels(string $apiKey, string $query, int $count): array
+    {
+        $perPage = min(40, max(5, $count));
+
+        $response = Http::withHeaders([
+            'Authorization' => $apiKey,
+        ])->get('https://api.pexels.com/v1/search', [
+            'query' => $query,
+            'per_page' => $perPage,
+            'orientation' => 'landscape',
+        ]);
+
+        if (! $response->ok()) {
+            $this->warn('Pexels request failed: '.$response->status());
+
+            return [];
+        }
+
+        $data = $response->json();
+
+        return Arr::get($data, 'photos', []);
+    }
+
+    private function storePhotos(Event $event, array $photos): void
+    {
+        $tenantId = $event->tenant_id;
+        $storage = Storage::disk('public');
+        $storage->makeDirectory("events/{$event->id}/gallery");
+        $storage->makeDirectory("events/{$event->id}/gallery/thumbs");
+
+        $demoPhotos = Photo::where('event_id', $event->id)
+            ->where('metadata->demo', true)
+            ->get();
+
+        foreach ($demoPhotos as $photo) {
+            $storage->delete([$photo->file_path, $photo->thumbnail_path]);
+            $photo->delete();
+        }
+
+        $limit = min(count($photos), (int) $this->option('photos-per-event'));
+        for ($i = 0; $i < $limit; $i++) {
+            $photo = $photos[$i];
+            $src = $photo['src'] ?? [];
+            $originalUrl = $src['large2x'] ?? $src['large'] ?? null;
+            $thumbUrl = $src['medium'] ?? $src['small'] ?? $originalUrl;
+
+            if (! $originalUrl) {
+                continue;
+            }
+
+            $filename = sprintf('%s-demo-%02d.jpg', $event->slug, $i + 1);
+            $thumbFilename = sprintf('%s-demo-%02d_thumb.jpg', $event->slug, $i + 1);
+
+            $filePath = "events/{$event->id}/gallery/{$filename}";
+            $thumbPath = "events/{$event->id}/gallery/thumbs/{$thumbFilename}";
+
+            try {
+                $imageResponse = Http::get($originalUrl);
+                if ($imageResponse->ok()) {
+                    $storage->put($filePath, $imageResponse->body());
+                }
+
+                if ($thumbUrl) {
+                    $thumbResponse = Http::get($thumbUrl);
+                    if ($thumbResponse->ok()) {
+                        $storage->put($thumbPath, $thumbResponse->body());
+                    }
+                }
+            } catch (\Throwable $exception) {
+                $this->warn('Failed to download image: '.$exception->getMessage());
+
+                continue;
+            }
+
+            $timestamp = Carbon::parse($event->date ?? Carbon::now())->addHours($i);
+
+            Photo::updateOrCreate(
+                [
+                    'tenant_id' => $tenantId,
+                    'event_id' => $event->id,
+                    'file_path' => $filePath,
+                ],
+                [
+                    'thumbnail_path' => $thumbPath,
+                    'guest_name' => 'Demo Guest '.($i + 1),
+                    'likes_count' => rand(1, 25),
+                    'is_featured' => $i === 0,
+                    'metadata' => ['demo' => true, 'source' => 'pexels'],
+                    'created_at' => $timestamp,
+                    'updated_at' => $timestamp,
+                ]
+            );
+        }
+
+        EventPackage::where('event_id', $event->id)->update([
+            'used_photos' => max($limit, 0),
+            'used_guests' => max(15, $event->eventPackage?->used_guests ?? 0),
+        ]);
+
+        $this->info("Seeded {$limit} photos for {$event->slug}");
+    }
+}
--- a/app/Http/Controllers/Api/EventPublicController.php
+++ b/app/Http/Controllers/Api/EventPublicController.php
@@ -1215,7 +1215,8 @@ class EventPublicController extends BaseController
            [
                'slug' => $shareLink->slug,
                'variant' => $variant,
-            ]
+            ],
+            absolute: false
        );
    }

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
        "@testing-library/user-event": "^14.5.2",
        "@types/fabric": "^5.3.9",
        "@types/node": "^22.13.5",
+        "dotenv": "^16.4.7",
        "eslint": "^9.17.0",
        "eslint-config-prettier": "^10.0.1",
        "eslint-plugin-react": "^7.37.3",
@@ -35,23 +36,15 @@
        "jsdom": "^25.0.1",
        "playwright": "^1.55.1",
        "prettier": "^3.4.2",
-        "prettier-plugin-organize-imports": "^4.1.0",
-        "prettier-plugin-tailwindcss": "^0.6.11",
        "shadcn": "^3.3.1",
        "typescript-eslint": "^8.23.0",
        "vitest": "^2.1.5"
    },
    "dependencies": {
        "@dnd-kit/core": "^6.3.1",
-        "@dnd-kit/modifiers": "^9.0.0",
-        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
        "@headlessui/react": "^2.2.0",
        "@inertiajs/react": "^2.1.0",
-        "@jpisnice/shadcn-ui-mcp-server": "^1.1.4",
-        "@modelcontextprotocol/server-puppeteer": "^2025.5.12",
-        "@modelcontextprotocol/server-sequential-thinking": "^2025.7.1",
-        "@paypal/react-paypal-js": "^8.9.2",
-        "@playwright/mcp": "^0.0.46",
        "@radix-ui/react-accordion": "^1.2.12",
        "@radix-ui/react-avatar": "^1.1.10",
        "@radix-ui/react-checkbox": "^1.1.4",
@@ -69,24 +62,19 @@
        "@radix-ui/react-toggle": "^1.1.2",
        "@radix-ui/react-toggle-group": "^1.1.2",
        "@radix-ui/react-tooltip": "^1.1.8",
-        "@stripe/react-stripe-js": "^5.0.0",
        "@stripe/stripe-js": "^8.0.0",
        "@tailwindcss/vite": "^4.1.11",
        "@tanstack/react-query": "^5.90.2",
        "@types/react": "^19.0.3",
        "@types/react-dom": "^19.0.2",
-        "@upstash/context7-mcp": "^1.0.26",
        "@vitejs/plugin-react": "^4.6.0",
-        "chrome-devtools-mcp": "^0.10.1",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
-        "concurrently": "^9.0.1",
        "date-fns": "^4.1.0",
        "embla-carousel": "^8.6.0",
        "embla-carousel-autoplay": "^8.6.0",
        "embla-carousel-react": "^8.6.0",
        "fabric": "^6.0.1",
-        "fabricjs-design-tool": "github:rifrocket/fabricjs-design-tool#main",
        "globals": "^15.14.0",
        "html5-qrcode": "^2.3.8",
        "i18next": "^25.5.3",
@@ -99,7 +87,6 @@
        "react-dom": "^19.0.0",
        "react-hot-toast": "^2.6.0",
        "react-i18next": "^16.0.0",
-        "react-rnd": "^10.4.12",
        "react-router-dom": "^7.8.2",
        "tailwind-merge": "^3.0.1",
        "tailwindcss": "^4.0.0",
--- a/resources/js/guest/components/ShareSheet.tsx
+++ b/resources/js/guest/components/ShareSheet.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import { Share2, MessageSquare, Copy } from 'lucide-react';
+import { useTranslation } from '../i18n/useTranslation';
+
+type ShareSheetProps = {
+  open: boolean;
+  photoId?: number | null;
+  eventName?: string | null;
+  url?: string | null;
+  loading?: boolean;
+  onClose: () => void;
+  onShareNative: () => void;
+  onShareWhatsApp: () => void;
+  onShareMessages: () => void;
+  onCopyLink: () => void;
+  radius?: number;
+  bodyFont?: string | null;
+  headingFont?: string | null;
+};
+
+const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
+    <path
+      fill="currentColor"
+      d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
+    />
+  </svg>
+);
+
+export function ShareSheet({
+  open,
+  photoId,
+  eventName,
+  url,
+  loading = false,
+  onClose,
+  onShareNative,
+  onShareWhatsApp,
+  onShareMessages,
+  onCopyLink,
+  radius = 12,
+  bodyFont,
+  headingFont,
+}: ShareSheetProps) {
+  const { t } = useTranslation();
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/70 backdrop-blur-sm">
+      <div
+        className="w-full max-w-md rounded-t-3xl border border-border bg-white/98 p-4 text-slate-900 shadow-2xl ring-1 ring-black/10 backdrop-blur-md dark:border-white/10 dark:bg-slate-900/98 dark:text-white"
+        style={{ ...(bodyFont ? { fontFamily: bodyFont } : {}), borderRadius: radius }}
+      >
+        <div className="mb-4 flex items-start justify-between gap-3">
+          <div className="space-y-1">
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              {t('share.title', 'Geteiltes Foto')}
+            </p>
+            <p className="text-base font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>
+              {photoId ? `#${photoId}` : ''}
+            </p>
+            {eventName ? <p className="text-xs text-muted-foreground line-clamp-2">{eventName}</p> : null}
+          </div>
+          <button
+            type="button"
+            className="rounded-full border border-muted px-3 py-1 text-xs font-semibold text-foreground transition hover:bg-muted/80 dark:border-white/20 dark:text-white"
+            style={{ borderRadius: radius }}
+            onClick={onClose}
+          >
+            {t('lightbox.close', 'Schließen')}
+          </button>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <button
+            type="button"
+            className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-800 disabled:opacity-100 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/10 dark:disabled:text-white/80"
+            onClick={onShareNative}
+            disabled={loading}
+            style={{ borderRadius: radius }}
+          >
+            <Share2 className="h-4 w-4" aria-hidden />
+            <div>
+              <div>{t('share.button', 'Teilen')}</div>
+              <div className="text-xs text-slate-600 dark:text-white/70">{t('share.title', 'Geteiltes Foto')}</div>
+            </div>
+          </button>
+          <button
+            type="button"
+            className="flex items-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-emerald-600 disabled:opacity-60 dark:border-emerald-400/40"
+            onClick={onShareWhatsApp}
+            disabled={loading}
+            style={{ borderRadius: radius }}
+          >
+            <WhatsAppIcon className="h-5 w-5" />
+            <div>
+              <div>{t('share.whatsapp', 'WhatsApp')}</div>
+              <div className="text-xs text-white/80">{loading ? '…' : ''}</div>
+            </div>
+          </button>
+          <button
+            type="button"
+            className="flex items-center gap-3 rounded-2xl border border-sky-200 bg-sky-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-sky-600 disabled:opacity-60 dark:border-sky-400/40"
+            onClick={onShareMessages}
+            disabled={loading}
+            style={{ borderRadius: radius }}
+          >
+            <MessageSquare className="h-5 w-5" />
+            <div>
+              <div>{t('share.imessage', 'Nachrichten')}</div>
+              <div className="text-xs text-white/80">{loading ? '…' : ''}</div>
+            </div>
+          </button>
+          <button
+            type="button"
+            className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-500 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/5 dark:disabled:text-white/50"
+            onClick={onCopyLink}
+            disabled={loading}
+            style={{ borderRadius: radius }}
+          >
+            <Copy className="h-4 w-4" aria-hidden />
+            <div>
+              <div className="text-slate-900 dark:text-white">{t('share.copyLink', 'Link kopieren')}</div>
+              <div className="text-xs text-slate-600 dark:text-white/80">{loading ? t('share.loading', 'Lädt…') : ''}</div>
+            </div>
+          </button>
+        </div>
+
+        {url ? (
+          <p className="mt-3 truncate text-xs text-slate-700 dark:text-white/80" title={url}>
+            {url}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export default ShareSheet;
--- a/resources/js/guest/pages/GalleryPage.tsx
+++ b/resources/js/guest/pages/GalleryPage.tsx
@@ -4,17 +4,17 @@ import { Page } from './_util';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
 import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
-import { Heart, Image as ImageIcon, Share2, MessageSquare, Copy } from 'lucide-react';
+import { Heart, Image as ImageIcon, Share2 } from 'lucide-react';
 import { likePhoto } from '../services/photosApi';
 import PhotoLightbox from './PhotoLightbox';
 import { fetchEvent, type EventData } from '../services/eventApi';
 import { useTranslation } from '../i18n/useTranslation';
-import { sharePhotoLink } from '../lib/sharePhoto';
 import { useToast } from '../components/ToastHost';
 import { localizeTaskLabel } from '../lib/localizeTaskLabel';
 import { createPhotoShareLink } from '../services/photosApi';
 import { cn } from '@/lib/utils';
 import { useEventBranding } from '../context/EventBrandingContext';
+import ShareSheet from '../components/ShareSheet';

 const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
 type GalleryPhoto = {
@@ -262,15 +262,6 @@ export default function GalleryPage() {
    setShareSheet({ photo: null, url: null, loading: false });
  }

-  const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
-    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
-      <path
-        fill="currentColor"
-        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
-      />
-    </svg>
-  );
-
  if (!token) {
    return (
      <Page title={t('galleryPage.title', 'Galerie')}>
@@ -442,98 +433,25 @@ export default function GalleryPage() {
          onClose={() => setCurrentPhotoIndex(null)}
          onIndexChange={(index: number) => setCurrentPhotoIndex(index)}
          token={token}
+          eventName={event?.name ?? null}
        />
      )}

-      {shareSheet.photo && (
-        <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/70 backdrop-blur-sm">
-          <div
-            className="w-full max-w-md rounded-t-3xl border border-border bg-white/98 p-4 text-slate-900 shadow-2xl ring-1 ring-black/10 backdrop-blur-md dark:border-white/10 dark:bg-slate-900/98 dark:text-white"
-            style={{ ...(bodyFont ? { fontFamily: bodyFont } : {}), borderRadius: radius }}
-          >
-            <div className="mb-4 flex items-start justify-between gap-3">
-              <div className="space-y-1">
-                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                  {t('share.title', 'Geteiltes Foto')}
-                </p>
-                <p className="text-base font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>
-                  #{shareSheet.photo.id}
-                </p>
-                {event?.name && <p className="text-xs text-muted-foreground line-clamp-2">{event.name}</p>}
-              </div>
-              <button
-                type="button"
-                className="rounded-full border border-muted px-3 py-1 text-xs font-semibold text-foreground transition hover:bg-muted/80 dark:border-white/20 dark:text-white"
-                style={{ borderRadius: radius }}
-                onClick={closeShareSheet}
-              >
-                {t('lightbox.close', 'Schließen')}
-              </button>
-            </div>
-
-            <div className="grid grid-cols-2 gap-3">
-              <button
-                type="button"
-                className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-800 disabled:opacity-100 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/10 dark:disabled:text-white/80"
-                onClick={() => shareNative(shareSheet.url)}
-                disabled={shareSheet.loading}
-                style={{ borderRadius: radius }}
-              >
-                <Share2 className="h-4 w-4" aria-hidden />
-                <div>
-                  <div>{t('share.button', 'Teilen')}</div>
-                  <div className="text-xs text-slate-600 dark:text-white/70">{t('share.title', 'Geteiltes Foto')}</div>
-                </div>
-              </button>
-              <button
-                type="button"
-                className="flex items-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-emerald-600 disabled:opacity-60 dark:border-emerald-400/40"
-                onClick={() => shareWhatsApp(shareSheet.url)}
-                disabled={shareSheet.loading}
-                style={{ borderRadius: radius }}
-              >
-                <WhatsAppIcon className="h-5 w-5" />
-                <div>
-                  <div>{t('share.whatsapp', 'WhatsApp')}</div>
-                  <div className="text-xs text-white/80">{shareSheet.loading ? '…' : ''}</div>
-                </div>
-              </button>
-              <button
-                type="button"
-                className="flex items-center gap-3 rounded-2xl border border-sky-200 bg-sky-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-sky-600 disabled:opacity-60 dark:border-sky-400/40"
-                onClick={() => shareMessages(shareSheet.url)}
-                disabled={shareSheet.loading}
-                style={{ borderRadius: radius }}
-              >
-                <MessageSquare className="h-5 w-5" />
-                <div>
-                  <div>{t('share.imessage', 'Nachrichten')}</div>
-                  <div className="text-xs text-white/80">{shareSheet.loading ? '…' : ''}</div>
-                </div>
-              </button>
-              <button
-                type="button"
-                className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-500 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/5 dark:disabled:text-white/50"
-                onClick={() => copyLink(shareSheet.url)}
-                disabled={shareSheet.loading}
-                style={{ borderRadius: radius }}
-              >
-                <Copy className="h-4 w-4" aria-hidden />
-                <div>
-                  <div className="text-slate-900 dark:text-white">{t('share.copyLink', 'Link kopieren')}</div>
-                  <div className="text-xs text-slate-600 dark:text-white/80">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
-                </div>
-              </button>
-            </div>
-
-            {shareSheet.url && (
-              <p className="mt-3 truncate text-xs text-slate-700 dark:text-white/80" title={shareSheet.url}>
-                {shareSheet.url}
-              </p>
-            )}
-          </div>
-        </div>
-      )}
+      <ShareSheet
+        open={Boolean(shareSheet.photo)}
+        photoId={shareSheet.photo?.id ?? null}
+        eventName={event?.name ?? null}
+        url={shareSheet.url}
+        loading={shareSheet.loading}
+        onClose={closeShareSheet}
+        onShareNative={() => shareNative(shareSheet.url)}
+        onShareWhatsApp={() => shareWhatsApp(shareSheet.url)}
+        onShareMessages={() => shareMessages(shareSheet.url)}
+        onCopyLink={() => copyLink(shareSheet.url)}
+        radius={radius}
+        bodyFont={bodyFont}
+        headingFont={headingFont}
+      />
    </Page>
  );
 }
--- a/resources/js/guest/pages/PhotoLightbox.tsx
+++ b/resources/js/guest/pages/PhotoLightbox.tsx
@@ -2,10 +2,12 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Heart, ChevronLeft, ChevronRight, X, Share2, MessageSquare, Copy } from 'lucide-react';
+import { Heart, ChevronLeft, ChevronRight, X, Share2 } from 'lucide-react';
 import { likePhoto, createPhotoShareLink } from '../services/photosApi';
 import { useTranslation } from '../i18n/useTranslation';
 import { useToast } from '../components/ToastHost';
+import ShareSheet from '../components/ShareSheet';
+import { useEventBranding } from '../context/EventBrandingContext';

 type Photo = {
  id: number;
@@ -25,9 +27,10 @@ interface Props {
  onClose?: () => void;
  onIndexChange?: (index: number) => void;
  token?: string;
+  eventName?: string | null;
 }

-export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexChange, token }: Props) {
+export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexChange, token, eventName }: Props) {
  const params = useParams<{ token?: string; photoId?: string }>();
  const location = useLocation();
  const navigate = useNavigate();
@@ -35,6 +38,7 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
  const eventToken = params.token || token;
  const { t, locale } = useTranslation();
  const toast = useToast();
+  const { branding } = useEventBranding();

  const [standalonePhoto, setStandalonePhoto] = useState<Photo | null>(null);
  const [task, setTask] = useState<Task | null>(null);
@@ -101,6 +105,10 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
    }
  }, [photo]);

+  const radius = branding.buttons?.radius ?? 12;
+  const bodyFont = branding.typography?.body ?? branding.fontFamily ?? null;
+  const headingFont = branding.typography?.heading ?? branding.fontFamily ?? null;
+
  const touchRef = React.useRef<HTMLDivElement>(null);
  const startX = React.useRef(0);
  const currentX = React.useRef(0);
@@ -212,16 +220,7 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
  }

  const shareTitle = photo?.task_title ?? task?.title ?? t('share.title', 'Geteiltes Foto');
-  const shareText = t('share.shareText', { event: shareTitle || 'Fotospiel' });
-
-  const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
-    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
-      <path
-        fill="currentColor"
-        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
-      />
-    </svg>
-  );
+  const shareText = t('share.shareText', { event: eventName ?? shareTitle ?? 'Fotospiel' });

  async function openShareSheet() {
    if (!photo || !eventToken) return;
@@ -250,6 +249,21 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
    setShareSheet({ url: null, loading: false });
  }

+  function shareNative(url?: string | null) {
+    if (!url) return;
+    const data: ShareData = {
+      title: shareTitle,
+      text: shareText,
+      url,
+    };
+    if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
+      navigator.share(data).catch(() => {});
+      setShareSheet({ url: null, loading: false });
+      return;
+    }
+    void copyLink(url);
+  }
+
  async function copyLink(url?: string | null) {
    if (!url) return;
    try {
@@ -375,91 +389,21 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
          </div>
        )}

-        {(shareSheet.url !== null || shareSheet.loading) && (
-          <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
-            <div className="w-full max-w-md rounded-t-3xl bg-white p-4 shadow-xl dark:bg-slate-900">
-              <div className="mb-3 flex items-center justify-between">
-                <div>
-                  <p className="text-xs uppercase tracking-wide text-muted-foreground">
-                    {t('share.title', 'Geteiltes Foto')}
-                  </p>
-                  <p className="text-sm font-semibold text-foreground">#{photo?.id}</p>
-                </div>
-                <button
-                  type="button"
-                  className="rounded-full border border-muted px-3 py-1 text-xs font-semibold"
-                  onClick={closeShareSheet}
-                >
-                  {t('lightbox.close', 'Schließen')}
-                </button>
-              </div>
-
-              <div className="grid grid-cols-2 gap-3">
-                <button
-                  type="button"
-                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
-                  onClick={() => {
-                    if (!shareSheet.url) return;
-                    const data: ShareData = {
-                      title: shareTitle,
-                      text: shareText,
-                      url: shareSheet.url,
-                    };
-                    if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
-                      navigator.share(data).catch(() => {});
-                      setShareSheet({ url: null, loading: false });
-                    } else {
-                      void copyLink(shareSheet.url);
-                    }
-                  }}
-                  disabled={shareSheet.loading}
-                >
-                  <Share2 className="h-4 w-4" />
-                  <div>
-                    <div>{t('share.button', 'Teilen')}</div>
-                    <div className="text-xs text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</div>
-                  </div>
-                </button>
-                <button
-                  type="button"
-                  className="flex items-center gap-2 rounded-2xl border border-muted bg-emerald-50 px-3 py-3 text-left text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200"
-                  onClick={() => shareWhatsApp(shareSheet.url)}
-                  disabled={shareSheet.loading}
-                >
-                  <WhatsAppIcon className="h-5 w-5" />
-                  <div>
-                    <div>{t('share.whatsapp', 'WhatsApp')}</div>
-                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
-                  </div>
-                </button>
-                <button
-                  type="button"
-                  className="flex items-center gap-2 rounded-2xl border border-muted bg-sky-50 px-3 py-3 text-left text-sm font-semibold text-sky-700 transition hover:bg-sky-100 dark:border-sky-900/40 dark:bg-sky-900/20 dark:text-sky-200"
-                  onClick={() => shareMessages(shareSheet.url)}
-                  disabled={shareSheet.loading}
-                >
-                  <MessageSquare className="h-5 w-5" />
-                  <div>
-                    <div>{t('share.imessage', 'Nachrichten')}</div>
-                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
-                  </div>
-                </button>
-                <button
-                  type="button"
-                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
-                  onClick={() => copyLink(shareSheet.url)}
-                  disabled={shareSheet.loading}
-                >
-                  <Copy className="h-4 w-4" />
-                  <div>
-                    <div>{t('share.copyLink', 'Link kopieren')}</div>
-                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
-                  </div>
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
+        <ShareSheet
+          open={shareSheet.loading || Boolean(shareSheet.url)}
+          photoId={photo?.id}
+          eventName={eventName ?? null}
+          url={shareSheet.url}
+          loading={shareSheet.loading}
+          onClose={closeShareSheet}
+          onShareNative={() => shareNative(shareSheet.url)}
+          onShareWhatsApp={() => shareWhatsApp(shareSheet.url)}
+          onShareMessages={() => shareMessages(shareSheet.url)}
+          onCopyLink={() => copyLink(shareSheet.url)}
+          radius={radius}
+          bodyFont={bodyFont}
+          headingFont={headingFont}
+        />
      </DialogContent>
    </Dialog>
  );