Modernize gallery UI and fix nav motion

resources/js/guest/lib/__tests__/motion.test.ts

@@ -1,4 +1,4 @@
-import { getMotionContainerPropsForNavigation, STAGGER_FAST } from '../motion';
+import { getMotionContainerPropsForNavigation, getMotionItemPropsForNavigation, STAGGER_FAST, FADE_UP } from '../motion';
 
 describe('getMotionContainerPropsForNavigation', () => {
   it('returns initial hidden for POP navigation', () => {
@@ -23,3 +23,25 @@ describe('getMotionContainerPropsForNavigation', () => {
     });
   });
 });
+
+describe('getMotionItemPropsForNavigation', () => {
+  it('returns animate props for POP navigation', () => {
+    expect(getMotionItemPropsForNavigation(true, FADE_UP, 'POP')).toEqual({
+      variants: FADE_UP,
+      initial: 'hidden',
+      animate: 'show',
+    });
+  });
+
+  it('skips initial animation for PUSH navigation', () => {
+    expect(getMotionItemPropsForNavigation(true, FADE_UP, 'PUSH')).toEqual({
+      variants: FADE_UP,
+      initial: false,
+      animate: 'show',
+    });
+  });
+
+  it('returns empty props when motion disabled', () => {
+    expect(getMotionItemPropsForNavigation(false, FADE_UP, 'POP')).toEqual({});
+  });
+});

resources/js/guest/lib/motion.ts

@@ -70,3 +70,17 @@ export function getMotionContainerPropsForNavigation(
 
   return { variants, initial, animate: 'show' } as const;
 }
+
+export function getMotionItemPropsForNavigation(
+  enabled: boolean,
+  variants: Variants,
+  navigationType: 'POP' | 'PUSH' | 'REPLACE'
+) {
+  if (!enabled) {
+    return {};
+  }
+
+  const initial = navigationType === 'POP' ? 'hidden' : false;
+
+  return { variants, initial, animate: 'show' } as const;
+}

resources/js/guest/pages/GalleryPage.tsx

@@ -16,7 +16,14 @@ import { createPhotoShareLink } from '../services/photosApi';
 import { cn } from '@/lib/utils';
 import { useEventBranding } from '../context/EventBrandingContext';
 import ShareSheet from '../components/ShareSheet';
-import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerPropsForNavigation, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
+import {
+  FADE_SCALE,
+  FADE_UP,
+  STAGGER_FAST,
+  getMotionContainerPropsForNavigation,
+  getMotionItemPropsForNavigation,
+  prefersReducedMotion,
+} from '../lib/motion';
 import PullToRefresh from '../components/PullToRefresh';
 import { triggerHaptic } from '../lib/haptics';
 
@@ -70,8 +77,8 @@ export default function GalleryPage() {
   const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
   const motionEnabled = !prefersReducedMotion();
   const containerMotion = getMotionContainerPropsForNavigation(motionEnabled, STAGGER_FAST, navigationType);
-  const fadeUpMotion = getMotionItemProps(motionEnabled, FADE_UP);
+  const fadeUpMotion = getMotionItemPropsForNavigation(motionEnabled, FADE_UP, navigationType);
-  const fadeScaleMotion = getMotionItemProps(motionEnabled, FADE_SCALE);
+  const fadeScaleMotion = getMotionItemPropsForNavigation(motionEnabled, FADE_SCALE, navigationType);
   const gridMotion = getMotionContainerPropsForNavigation(motionEnabled, STAGGER_FAST, navigationType);
   const [filter, setFilterState] = React.useState<GalleryFilter>('latest');
   const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
@@ -308,41 +315,51 @@ export default function GalleryPage() {
         releaseLabel={t('common.releaseToRefresh')}
         refreshingLabel={t('common.refreshing')}
       >
-        <motion.div className="space-y-2" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
+        <motion.div className="space-y-3" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
-          <motion.div className="flex items-center gap-3" {...fadeUpMotion}>
+          <motion.div
-            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}>
+            className="rounded-3xl border border-pink-200/40 bg-gradient-to-br from-pink-50 via-white to-white p-4 shadow-sm dark:border-white/10 dark:from-pink-500/10 dark:via-slate-950 dark:to-slate-950"
-              <ImageIcon className="h-5 w-5" aria-hidden />
+            style={{ borderRadius: radius }}
-            </div>
+            {...fadeUpMotion}
-            <div>
+          >
-              <h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
+            <div className="flex flex-wrap items-start justify-between gap-4">
-              <p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
+              <div className="flex items-center gap-3">
-            </div>
+                <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>
+                  <h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
+                  <p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
+                </div>
+              </div>
 
-            {newCount > 0 ? (
+              {newCount > 0 ? (
-              <button
+                <button
-                type="button"
+                  type="button"
-                onClick={acknowledgeNew}
+                  onClick={acknowledgeNew}
-                className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`}
+                  className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`}
-                style={{ borderRadius: radius }}
+                  style={{ borderRadius: radius }}
-              >
+                >
-                {newPhotosBadgeText}
+                  {newPhotosBadgeText}
-              </button>
+                </button>
-            ) : (
+              ) : (
-              <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`} style={{ borderRadius: radius }}>
+                <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`} style={{ borderRadius: radius }}>
-                {newPhotosBadgeText}
+                  {newPhotosBadgeText}
-              </span>
+                </span>
-            )}
+              )}
+            </div>
           </motion.div>
         </motion.div>
 
-        <motion.div {...fadeUpMotion}>
+        <motion.div className="sticky top-2 z-20" {...fadeUpMotion}>
-          <FiltersBar
+          <div className="rounded-2xl border border-border/60 bg-white/85 p-2 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
-            value={filter}
+            <FiltersBar
-            onChange={setFilter}
+              value={filter}
-            className="mt-2"
+              onChange={setFilter}
-            showPhotobooth={showPhotoboothFilter}
+              className="mt-0"
-            styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
+              showPhotobooth={showPhotoboothFilter}
-          />
+              styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
+            />
+          </div>
         </motion.div>
         {loading && (
           <motion.p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}>
@@ -391,15 +408,24 @@ export default function GalleryPage() {
                   }}
                   loading="lazy"
                 />
-                <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent" aria-hidden />
+                <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" aria-hidden />
-                <div className="absolute inset-x-0 bottom-0 space-y-2 px-4 pb-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+                <div className="absolute inset-x-0 bottom-0 space-y-2 px-3 pb-3" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
-                  {localizedTaskTitle && <p className="text-sm font-medium leading-tight line-clamp-2 text-white" style={headingFont ? { fontFamily: headingFont } : undefined}>{localizedTaskTitle}</p>}
+                  {localizedTaskTitle && (
-                  <div className="flex items-center justify-between text-xs text-white/90" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+                    <p
-                    <span className="truncate">{createdLabel}</span>
+                      className="text-sm font-semibold leading-tight line-clamp-2 text-white"
-                    <span className="ml-3 truncate text-right">{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
+                      style={headingFont ? { fontFamily: headingFont } : undefined}
+                    >
+                      {localizedTaskTitle}
+                    </p>
+                  )}
+                  <div className="flex flex-wrap items-center gap-2 text-[11px] text-white/90">
+                    <span className="rounded-full bg-white/15 px-2 py-1 backdrop-blur">{createdLabel}</span>
+                    <span className="rounded-full bg-white/10 px-2 py-1 backdrop-blur">
+                      {p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}
+                    </span>
                   </div>
                 </div>
-                <div className="absolute right-3 top-3 z-10 flex items-center gap-2">
+                <div className="absolute right-3 top-3 z-10 flex items-center gap-1 rounded-full border border-white/20 bg-black/50 p-1 backdrop-blur">
                   <button
                     type="button"
                     onClick={(e) => {
@@ -407,15 +433,13 @@ export default function GalleryPage() {
                       onShare(p);
                     }}
                     className={cn(
-                      'flex h-9 w-9 items-center justify-center border text-white transition backdrop-blur',
+                      'flex h-9 w-9 items-center justify-center text-white transition',
                       shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/10'
                     )}
                     aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
                     disabled={shareTargetId === p.id}
                     style={{
                       borderRadius: radius,
-                      background: buttonStyle === 'outline' ? 'transparent' : '#00000066',
-                      border: buttonStyle === 'outline' ? `1px solid ${linkColor}` : '1px solid rgba(255,255,255,0.4)',
                       color: buttonStyle === 'outline' ? linkColor : undefined,
                     }}
                   >
@@ -428,14 +452,12 @@ export default function GalleryPage() {
                       onLike(p.id);
                     }}
                     className={cn(
-                      'flex items-center gap-1 px-3 py-1 text-sm font-medium transition backdrop-blur',
+                      'flex items-center gap-1 px-3 py-1 text-sm font-medium transition',
                       liked.has(p.id) ? 'text-pink-300' : 'text-white'
                     )}
                     aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
                     style={{
                       borderRadius: radius,
-                      background: buttonStyle === 'outline' ? 'transparent' : '#00000066',
-                      border: buttonStyle === 'outline' ? `1px solid ${linkColor}` : '1px solid rgba(255,255,255,0.4)',
                       color: buttonStyle === 'outline' ? linkColor : undefined,
                     }}
                   >