Update guest PWA v2 UI and likes

resources/js/guest/pages/GalleryPage.tsx

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import React, { useEffect, useState } from 'react';
 import { Page } from './_util';
-import { useNavigationType, useParams, useSearchParams } from 'react-router-dom';
+import { Link, useNavigationType, useParams, useSearchParams } from 'react-router-dom';
 import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
 import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
-import { Heart, Image as ImageIcon, Share2 } from 'lucide-react';
+import { Heart, Image as ImageIcon, ImagePlus, Share2, Users } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { likePhoto } from '../services/photosApi';
 import PhotoLightbox from './PhotoLightbox';
@@ -17,6 +17,7 @@ import { createPhotoShareLink } from '../services/photosApi';
 import { cn } from '@/lib/utils';
 import { useEventBranding } from '../context/EventBrandingContext';
 import ShareSheet from '../components/ShareSheet';
+import { Button } from '@/components/ui/button';
 import {
   FADE_SCALE,
   FADE_UP,
@@ -27,6 +28,7 @@ import {
 } from '../lib/motion';
 import PullToRefresh from '../components/PullToRefresh';
 import { triggerHaptic } from '../lib/haptics';
+import { useEventStats } from '../context/EventStatsContext';
 
 const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
 type GalleryPhoto = {
@@ -67,6 +69,7 @@ export default function GalleryPage() {
   const navigationType = useNavigationType();
   const { t, locale } = useTranslation();
   const { branding } = useEventBranding();
+  const stats = useEventStats();
   const { photos, loading, newCount, acknowledgeNew, refreshNow } = usePollGalleryDelta(token ?? '', locale);
   const [searchParams, setSearchParams] = useSearchParams();
   const photoIdParam = searchParams.get('photoId');
@@ -304,6 +307,14 @@ export default function GalleryPage() {
   const badgeEmphasisClass = newCount > 0
     ? 'border border-pink-200 bg-pink-500/15 text-pink-600'
     : 'border border-transparent bg-muted text-muted-foreground';
+  const uploadUrl = token ? `/e/${encodeURIComponent(token)}/upload` : '/event';
+  const heroStatsLine = t('galleryPage.hero.stats', {
+    photoCount: numberFormatter.format(list.length),
+    likeCount: numberFormatter.format(stats.likesCount ?? 0),
+    guestCount: numberFormatter.format(stats.onlineGuests || stats.guestCount || 0),
+  }, `${numberFormatter.format(list.length)} Fotos · ${numberFormatter.format(stats.likesCount ?? 0)} ❤️ · ${numberFormatter.format(stats.onlineGuests || stats.guestCount || 0)} Gäste online`);
+  const bentoShadow =
+    'shadow-[10px_10px_0_rgba(15,23,42,0.85)] dark:shadow-[10px_10px_0_rgba(15,23,42,0.6)]';
 
   return (
     <Page title="">
@@ -315,45 +326,138 @@ export default function GalleryPage() {
           refreshingLabel={t('common.refreshing')}
         >
           <motion.div className="space-y-6 pb-24" {...containerMotion}>
-            <motion.div className="space-y-2" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}>
-              <div className="flex flex-wrap items-center justify-between gap-2">
-                <div className="flex items-center gap-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}>
-                    <ImageIcon className="h-5 w-5" aria-hidden />
-                  </div>
-                  <div>
-                    <div className="flex flex-wrap items-center gap-2">
-                      <h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
-                      <span
-                        className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold ${badgeEmphasisClass}`}
-                        style={{ borderRadius: radius }}
-                      >
-                        {newPhotosBadgeText}
+            <motion.div className="space-y-4" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}>
+              <div className="grid gap-4 lg:grid-cols-[1.35fr_0.65fr]">
+                <div
+                  className={cn(
+                    'relative overflow-hidden rounded-[28px] border-2 border-slate-900/80 bg-slate-950 text-white',
+                    bentoShadow
+                  )}
+                  style={{
+                    borderRadius: radius + 14,
+                    background: `radial-gradient(120% 120% at 90% 0%, ${branding.secondaryColor}55 0%, transparent 60%), linear-gradient(135deg, ${branding.primaryColor}, ${branding.secondaryColor})`,
+                  }}
+                >
+                  <div className="absolute inset-0 opacity-40 [background-image:radial-gradient(circle_at_20%_20%,rgba(255,255,255,0.45),transparent_45%),radial-gradient(circle_at_80%_20%,rgba(255,255,255,0.25),transparent_40%)]" />
+                  <div className="absolute inset-0 opacity-25 [background-image:linear-gradient(135deg,rgba(255,255,255,0.12)_12%,transparent_12%),linear-gradient(225deg,rgba(255,255,255,0.12)_12%,transparent_12%)] [background-size:16px_16px]" />
+                  <div className="relative z-10 flex h-full flex-col gap-4 p-6 sm:p-7">
+                    <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-white/80">
+                      <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-white/15">
+                        <ImageIcon className="h-5 w-5" aria-hidden />
                       </span>
+                      <span>{t('galleryPage.hero.label')}</span>
+                    </div>
+                    <div className="space-y-2">
+                      <h1
+                        className="text-3xl font-bold leading-tight sm:text-4xl"
+                        style={headingFont ? { fontFamily: headingFont } : undefined}
+                      >
+                        {event?.name ?? t('galleryPage.hero.eventFallback')}
+                      </h1>
+                      <p className="max-w-xl text-sm text-white/85 sm:text-base">
+                        {t('galleryPage.subtitle')}
+                      </p>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2 text-sm font-semibold text-white/90">
+                      <span className="rounded-full border border-white/30 bg-white/10 px-3 py-1">
+                        {heroStatsLine}
+                      </span>
+                      {newCount > 0 && (
+                        <span className="rounded-full border border-white/30 bg-black/30 px-3 py-1">
+                          {newPhotosBadgeText}
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex flex-wrap items-center gap-3 pt-1">
+                      <Button
+                        asChild
+                        size="lg"
+                        className="h-12 rounded-full bg-white text-slate-900 shadow-[6px_6px_0_rgba(15,23,42,0.7)] transition hover:-translate-y-0.5 hover:bg-white/90"
+                      >
+                        <Link to={uploadUrl} className="flex items-center gap-2">
+                          <ImagePlus className="h-5 w-5" />
+                          {t('galleryPage.hero.upload', 'Neues Foto hochladen')}
+                        </Link>
+                      </Button>
+                      {newCount > 0 && (
+                        <button
+                          type="button"
+                          onClick={acknowledgeNew}
+                          className="rounded-full border border-white/30 bg-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-white/90 transition hover:bg-white/20"
+                        >
+                          {t('galleryPage.badge.markSeen', 'Gesehen')}
+                        </button>
+                      )}
                     </div>
-                    <p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
                   </div>
                 </div>
 
-                {newCount > 0 && (
-                  <button
-                    type="button"
-                    onClick={acknowledgeNew}
-                    className="inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold text-pink-600 transition hover:bg-pink-50"
-                    style={{ borderRadius: radius }}
+                <div className="grid gap-4">
+                  <div
+                    className={cn(
+                      'rounded-[26px] border-2 border-slate-900/80 bg-white/90 p-5 text-slate-900 shadow-[8px_8px_0_rgba(15,23,42,0.9)] dark:border-white/10 dark:bg-slate-950/80 dark:text-white',
+                    )}
+                    style={{ borderRadius: radius + 10 }}
                   >
-                    {t('galleryPage.badge.markSeen', 'Gesehen')}
-                  </button>
-                )}
+                    <p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-white/60">
+                      {t('galleryPage.feed.title', 'Live-Feed')}
+                    </p>
+                    <p className="mt-2 text-sm text-slate-700 dark:text-white/80">
+                      {t('galleryPage.feed.description', 'Alle paar Sekunden aktualisiert.')}
+                    </p>
+                    <div className="mt-4 flex items-center justify-between gap-2 rounded-2xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-800 shadow-[4px_4px_0_rgba(15,23,42,0.8)] dark:border-white/10 dark:bg-slate-900 dark:text-white">
+                      <span>{t('galleryPage.feed.newUploads', '{count} neue Uploads sind da.').replace('{count}', `${newCount}`)}</span>
+                      <span className={cn('rounded-full px-2 py-0.5', badgeEmphasisClass)}>{newCount}</span>
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-3">
+                    <div
+                      className={cn(
+                        'rounded-[22px] border-2 border-slate-900/80 bg-white/95 p-4 text-slate-900 shadow-[8px_8px_0_rgba(15,23,42,0.9)] dark:border-white/10 dark:bg-slate-950/80 dark:text-white'
+                      )}
+                      style={{ borderRadius: radius + 8 }}
+                    >
+                      <p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-white/60">
+                        Likes
+                      </p>
+                      <div className="mt-3 flex items-center gap-2 text-2xl font-bold">
+                        <Heart className="h-5 w-5 text-pink-500" />
+                        {numberFormatter.format(stats.likesCount ?? 0)}
+                      </div>
+                    </div>
+                    <div
+                      className={cn(
+                        'rounded-[22px] border-2 border-slate-900/80 bg-white/95 p-4 text-slate-900 shadow-[8px_8px_0_rgba(15,23,42,0.9)] dark:border-white/10 dark:bg-slate-950/80 dark:text-white'
+                      )}
+                      style={{ borderRadius: radius + 8 }}
+                    >
+                      <p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-white/60">
+                        {t('galleryPage.hero.statsGuests', 'Gäste online')}
+                      </p>
+                      <div className="mt-3 flex items-center gap-2 text-2xl font-bold">
+                        <Users className="h-5 w-5 text-slate-700 dark:text-white" />
+                        {numberFormatter.format(stats.onlineGuests || stats.guestCount || 0)}
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
 
-              <FiltersBar
-                value={filter}
-                onChange={setFilter}
-                className="mt-0"
-                showPhotobooth={showPhotoboothFilter}
-                styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
-              />
+              <div
+                className={cn(
+                  'rounded-[22px] border-2 border-slate-900/80 bg-white/95 p-2 shadow-[8px_8px_0_rgba(15,23,42,0.9)] dark:border-white/10 dark:bg-slate-950/80'
+                )}
+                style={{ borderRadius: radius + 8 }}
+              >
+                <FiltersBar
+                  value={filter}
+                  onChange={setFilter}
+                  className="mt-0"
+                  showPhotobooth={showPhotoboothFilter}
+                  styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
+                />
+              </div>
             </motion.div>
 
             {loading && (
@@ -363,7 +467,7 @@ export default function GalleryPage() {
             )}
 
             <motion.div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
-              {list.map((p: GalleryPhoto) => {
+              {list.map((p: GalleryPhoto, idx: number) => {
                 const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
                 const createdLabel = p.created_at
                   ? new Date(p.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
@@ -399,11 +503,13 @@ export default function GalleryPage() {
                     <img
                       src={imageUrl}
                       alt={altText}
+                      decoding="async"
+                      loading={idx < 6 ? 'eager' : 'lazy'}
+                      fetchPriority={idx < 6 ? 'high' : 'auto'}
                       className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
                       onError={(e) => {
                         (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
                       }}
-                      loading="lazy"
                     />
                     <div className="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/55 via-black/0 to-transparent" aria-hidden />
                   </div>

resources/js/guest/pages/__tests__/GalleryPageHero.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import GalleryPage from '../GalleryPage';
+import { LocaleProvider } from '../../i18n/LocaleContext';
+
+vi.mock('../../polling/usePollGalleryDelta', () => ({
+  usePollGalleryDelta: () => ({
+    photos: [],
+    loading: false,
+    newCount: 0,
+    acknowledgeNew: vi.fn(),
+    refreshNow: vi.fn(),
+  }),
+}));
+
+vi.mock('../../context/EventBrandingContext', () => ({
+  useEventBranding: () => ({
+    branding: {
+      primaryColor: '#FF5A5F',
+      secondaryColor: '#FFF8F5',
+      fontFamily: 'Space Grotesk, sans-serif',
+      buttons: { radius: 12, style: 'filled', linkColor: '#FF5A5F' },
+      typography: { heading: 'Space Grotesk, sans-serif', body: 'Space Grotesk, sans-serif' },
+    },
+  }),
+}));
+
+vi.mock('../../context/EventStatsContext', () => ({
+  useEventStats: () => ({
+    likesCount: 12,
+    guestCount: 5,
+    onlineGuests: 2,
+    tasksSolved: 0,
+    latestPhotoAt: null,
+    loading: false,
+    eventKey: 'demo',
+    slug: 'demo',
+  }),
+}));
+
+vi.mock('../../services/eventApi', () => ({
+  fetchEvent: vi.fn().mockResolvedValue({ name: 'Demo Event' }),
+}));
+
+vi.mock('../../components/ToastHost', () => ({
+  useToast: () => ({ push: vi.fn() }),
+}));
+
+vi.mock('../../components/ShareSheet', () => ({
+  default: () => null,
+}));
+
+vi.mock('../PhotoLightbox', () => ({
+  default: () => null,
+}));
+
+vi.mock('../../components/PullToRefresh', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock('../../components/FiltersBar', () => ({
+  default: () => <div data-testid="filters-bar" />,
+}));
+
+describe('GalleryPage hero CTA', () => {
+  it('links to the upload page', async () => {
+    render(
+      <LocaleProvider defaultLocale="de">
+        <MemoryRouter initialEntries={['/e/demo/gallery']}>
+          <Routes>
+            <Route path="/e/:token/gallery" element={<GalleryPage />} />
+          </Routes>
+        </MemoryRouter>
+      </LocaleProvider>
+    );
+
+    const link = await screen.findByRole('link', { name: /neues foto hochladen/i });
+    expect(link).toHaveAttribute('href', '/e/demo/upload');
+  });
+});