Modernize guest PWA header and homepage

2026-01-31 23:15:44 +01:00
parent e233cddcc8
commit 386d0004ed
6 changed files with 253 additions and 94 deletions
--- a/resources/js/guest/components/BottomNav.tsx
+++ b/resources/js/guest/components/BottomNav.tsx
@@ -86,11 +86,12 @@ export default function BottomNav() {

  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/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 ${
+      className={`guest-bottom-nav fixed inset-x-0 bottom-0 z-30 border-t border-white/15 bg-gradient-to-t from-black/55 via-black/30 to-black/5 px-4 shadow-2xl backdrop-blur-xl transition-all duration-200 dark:border-white/10 dark:from-gray-950/85 dark:via-gray-900/55 dark:to-gray-900/20 ${
        compact ? 'pt-1' : 'pt-2 pb-1'
      }`}
      style={{ paddingBottom: navPaddingBottom }}
    >
+      <div className="pointer-events-none absolute -top-7 inset-x-0 h-7 bg-gradient-to-b from-black/0 via-black/30 to-black/60 dark:via-black/40 dark:to-black/70" aria-hidden />
      <div className="mx-auto flex max-w-lg items-center gap-3">
        <div className="flex flex-1 justify-evenly gap-2">
          <TabLink
--- a/resources/js/guest/components/EmotionPicker.tsx
+++ b/resources/js/guest/components/EmotionPicker.tsx
@@ -139,19 +139,24 @@ export default function EmotionPicker({
                key={emotion.id}
                type="button"
                onClick={() => handleEmotionSelect(emotion)}
-                className="group flex flex-col gap-2 rounded-2xl border border-muted/40 bg-white/80 px-4 py-3 text-left shadow-sm transition hover:-translate-y-0.5 hover:border-foreground/10 hover:shadow-md dark:border-gray-700/60 dark:bg-gray-900/70"
+                className="group relative flex flex-col gap-2 rounded-2xl p-[1px] text-left shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg active:scale-[0.98]"
+                style={{
+                  backgroundImage: 'linear-gradient(135deg, color-mix(in oklch, var(--guest-primary) 45%, white), color-mix(in oklch, var(--guest-secondary) 40%, white))',
+                }}
              >
-                <div className="flex items-center gap-3">
-                  <span className="text-2xl" aria-hidden>
-                    {emotion.emoji}
-                  </span>
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium text-sm text-foreground dark:text-white">{localizedName}</div>
-                    {localizedDescription && (
-                      <div className="text-xs text-muted-foreground line-clamp-2 dark:text-white/60">{localizedDescription}</div>
-                    )}
+                <div className="relative flex flex-col gap-2 rounded-[0.95rem] border border-white/50 bg-white/80 px-4 py-3 shadow-sm backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
+                  <div className="flex items-center gap-3">
+                    <span className="text-2xl" aria-hidden>
+                      {emotion.emoji}
+                    </span>
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-medium text-foreground dark:text-white">{localizedName}</div>
+                      {localizedDescription && (
+                        <div className="text-xs text-muted-foreground line-clamp-2 dark:text-white/60">{localizedDescription}</div>
+                      )}
+                    </div>
+                    <ChevronRight className="h-4 w-4 text-muted-foreground opacity-0 transition group-hover:opacity-100 dark:text-white/60" />
                  </div>
-                  <ChevronRight className="h-4 w-4 text-muted-foreground opacity-0 transition group-hover:opacity-100 dark:text-white/60" />
                </div>
              </button>
            );
--- a/resources/js/guest/components/GalleryPreview.tsx
+++ b/resources/js/guest/components/GalleryPreview.tsx
@@ -8,6 +8,7 @@ import { Heart } from 'lucide-react';
 import { useTranslation } from '../i18n/useTranslation';
 import { useEventBranding } from '../context/EventBrandingContext';
 import { cn } from '@/lib/utils';
+import { motion } from 'framer-motion';

 type Props = { token: string };

@@ -97,14 +98,16 @@ export default function GalleryPreview({ token }: Props) {
      style={{ borderRadius: radius, fontFamily: bodyFont }}
    >
      <CardContent className="space-y-3 p-3">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between gap-3">
          <div>
-            <p className="text-xs uppercase tracking-wide text-muted-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>Live-Galerie</p>
+            <div className="mb-1 inline-flex items-center rounded-full border border-white/50 bg-white/80 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.3em] text-muted-foreground shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70" style={headingFont ? { fontFamily: headingFont } : undefined}>
+              Live-Galerie
+            </div>
            <h3 className="text-lg font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>Alle Uploads auf einen Blick</h3>
          </div>
          <Link
            to={`/e/${encodeURIComponent(token)}/gallery?mode=${mode}`}
-            className="text-sm font-semibold transition"
+            className="rounded-full border border-white/40 bg-white/70 px-3 py-1 text-sm font-semibold shadow-sm backdrop-blur transition hover:bg-white/90 dark:border-white/10 dark:bg-slate-950/70 dark:hover:bg-slate-950"
            style={{ color: linkColor }}
          >
            Alle ansehen →
@@ -112,28 +115,31 @@ export default function GalleryPreview({ token }: Props) {
        </div>

        <div className="flex overflow-x-auto pb-1 text-xs font-semibold [-ms-overflow-style:none] [scrollbar-width:none]">
-          <div className="inline-flex items-center rounded-full border border-border/70 bg-white/80 p-1 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
-            {filters.map((filter, index) => {
+          <div className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-white/80 p-1 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
+            {filters.map((filter) => {
              const isActive = mode === filter.value;

              return (
-                <div key={filter.value} className="flex items-center">
-                  <button
-                    type="button"
-                    onClick={() => setMode(filter.value)}
-                    className={cn(
-                      'inline-flex items-center rounded-full px-3 py-1.5 transition',
-                      isActive
-                        ? 'bg-pink-500 text-white shadow'
-                        : 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600 dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white',
-                    )}
-                  >
-                    <span className="whitespace-nowrap">{filter.label}</span>
-                  </button>
-                  {index < filters.length - 1 && (
-                    <span className="mx-1 h-4 w-px bg-border/60 dark:bg-white/10" aria-hidden />
+                <button
+                  key={filter.value}
+                  type="button"
+                  onClick={() => setMode(filter.value)}
+                  className={cn(
+                    'relative inline-flex items-center rounded-full px-3 py-1.5 transition',
+                    isActive
+                      ? 'text-white'
+                      : 'text-muted-foreground hover:text-pink-600 dark:text-white/70 dark:hover:text-white',
                  )}
-                </div>
+                >
+                  {isActive && (
+                    <motion.span
+                      layoutId="gallery-filter-pill"
+                      className="absolute inset-0 rounded-full bg-gradient-to-r from-pink-500 to-rose-500 shadow"
+                      transition={{ type: 'spring', stiffness: 380, damping: 30 }}
+                    />
+                  )}
+                  <span className="relative z-10 whitespace-nowrap">{filter.label}</span>
+                </button>
              );
            })}
          </div>
--- a/resources/js/guest/components/Header.tsx
+++ b/resources/js/guest/components/Header.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
-import { Link, useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import AppearanceToggleDropdown from '@/components/appearance-dropdown';
 import {
  User,
@@ -22,13 +22,12 @@ import {
 } from 'lucide-react';
 import { useEventData } from '../hooks/useEventData';
 import { useOptionalEventStats } from '../context/EventStatsContext';
-import { useOptionalGuestIdentity } from '../context/GuestIdentityContext';
 import { SettingsSheet } from './settings-sheet';
 import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
 import { DEFAULT_EVENT_BRANDING, useOptionalEventBranding } from '../context/EventBrandingContext';
 import { useOptionalNotificationCenter, type NotificationCenterValue } from '../context/NotificationCenterContext';
 import { usePushSubscription } from '../hooks/usePushSubscription';
-import { getContrastingTextColor, relativeLuminance } from '../lib/color';
+import { getContrastingTextColor, relativeLuminance, hexToRgb } from '../lib/color';
 import { isTaskModeEnabled } from '../lib/engagement';

 const EVENT_ICON_COMPONENTS: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -81,6 +80,14 @@ function getInitials(name: string): string {
  return name.substring(0, 2).toUpperCase();
 }

+function toRgba(value: string, alpha: number): string {
+  const rgb = hexToRgb(value);
+  if (!rgb) {
+    return `rgba(255, 255, 255, ${alpha})`;
+  }
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+}
+
 function EventAvatar({
  name,
  icon,
@@ -167,9 +174,7 @@ function EventAvatar({
 }

 export default function Header({ eventToken, title = '' }: { eventToken?: string; title?: string }) {
-  const location = useLocation();
  const statsContext = useOptionalEventStats();
-  const identity = useOptionalGuestIdentity();
  const { t } = useTranslation();
  const brandingContext = useOptionalEventBranding();
  const branding = brandingContext?.branding ?? DEFAULT_EVENT_BRANDING;
@@ -206,23 +211,6 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
    return () => document.removeEventListener('mousedown', handler);
  }, [notificationsOpen]);

-  if (!eventToken) {
-    return (
-      <div
-        className="guest-header z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 dark:bg-black/40"
-        style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}
-      >
-        <div className="flex flex-col">
-          <div className="font-semibold">{title}</div>
-        </div>
-        <div className="flex items-center gap-2">
-          <AppearanceToggleDropdown />
-          <SettingsSheet />
-        </div>
-      </div>
-    );
-  }
-
  const headerFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
  const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
  const logoPosition = branding.logo?.position ?? 'left';
@@ -231,16 +219,48 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
    color: headerTextColor,
    fontFamily: headerFont,
  };
+  const headerGlowPrimary = toRgba(branding.primaryColor, 0.35);
+  const headerGlowSecondary = toRgba(branding.secondaryColor, 0.35);
+  const headerShimmer = `linear-gradient(120deg, ${toRgba(branding.primaryColor, 0.28)}, transparent 45%, ${toRgba(branding.secondaryColor, 0.32)})`;
+  const headerHairline = `linear-gradient(90deg, transparent, ${toRgba(headerTextColor, 0.4)}, transparent)`;
+
+  if (!eventToken) {
+    return (
+      <div
+        className="guest-header sticky top-0 z-30 relative overflow-hidden border-b border-white/20 bg-white/70 px-4 py-2 shadow-[0_14px_40px_-30px_rgba(15,23,42,0.6)] backdrop-blur-2xl dark:border-white/10 dark:bg-black/40"
+        style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}
+      >
+        <div className="pointer-events-none absolute inset-0 opacity-70 guest-aurora-soft" style={{ backgroundImage: headerShimmer }} aria-hidden />
+        <div className="pointer-events-none absolute -top-8 right-0 h-24 w-24 rounded-full bg-white/60 blur-3xl dark:bg-white/10" aria-hidden />
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-white/40 to-transparent dark:via-white/15" aria-hidden />
+        <div className="relative z-10 flex w-full items-center gap-3 flex-nowrap">
+          <div className="flex min-w-0 flex-col">
+            <div className="font-semibold">{title}</div>
+          </div>
+          <div className="ml-auto flex items-center justify-end gap-2">
+            <AppearanceToggleDropdown />
+            <SettingsSheet />
+          </div>
+        </div>
+      </div>
+    );
+  }

  const accentColor = branding.secondaryColor;

  if (status === 'loading') {
    return (
-      <div className="guest-header z-20 flex items-center justify-between border-b border-white/10 px-4 py-2 text-white shadow-sm backdrop-blur" style={headerStyle}>
-        <div className="font-semibold" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>{t('header.loading')}</div>
-        <div className="flex items-center gap-2">
-          <AppearanceToggleDropdown />
-          <SettingsSheet />
+      <div className="guest-header sticky top-0 z-30 relative overflow-hidden border-b border-white/20 px-4 py-2 shadow-[0_18px_45px_-30px_rgba(15,23,42,0.65)] backdrop-blur-2xl" style={headerStyle}>
+        <div className="pointer-events-none absolute inset-0 opacity-70 guest-aurora" style={{ backgroundImage: headerShimmer }} aria-hidden />
+        <div className="pointer-events-none absolute -top-10 right-[-32px] h-28 w-28 rounded-full blur-3xl" style={{ background: headerGlowSecondary }} aria-hidden />
+        <div className="pointer-events-none absolute -bottom-8 left-1/3 h-20 w-40 -translate-x-1/2 rounded-full blur-3xl" style={{ background: headerGlowPrimary }} aria-hidden />
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px" style={{ background: headerHairline }} aria-hidden />
+        <div className="relative z-10 flex w-full items-center gap-3 flex-nowrap">
+          <div className="font-semibold" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>{t('header.loading')}</div>
+          <div className="ml-auto flex items-center justify-end gap-2">
+            <AppearanceToggleDropdown />
+            <SettingsSheet />
+          </div>
        </div>
      </div>
    );
@@ -254,16 +274,20 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
    statsContext && statsContext.eventKey === eventToken ? statsContext : undefined;
  return (
    <div
-      className="guest-header z-20 flex items-center justify-between border-b border-white/10 px-4 py-3 text-white shadow-sm backdrop-blur"
+      className="guest-header sticky top-0 z-30 relative flex flex-nowrap items-center gap-3 overflow-hidden border-b border-white/20 px-4 py-2 shadow-[0_18px_45px_-30px_rgba(15,23,42,0.65)] backdrop-blur-2xl"
      style={headerStyle}
    >
+      <div className="pointer-events-none absolute inset-0 opacity-70 guest-aurora" style={{ backgroundImage: headerShimmer }} aria-hidden />
+      <div className="pointer-events-none absolute -top-12 right-[-40px] h-32 w-32 rounded-full blur-3xl" style={{ background: headerGlowSecondary }} aria-hidden />
+      <div className="pointer-events-none absolute -bottom-10 left-1/3 h-24 w-44 -translate-x-1/2 rounded-full blur-3xl" style={{ background: headerGlowPrimary }} aria-hidden />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px" style={{ background: headerHairline }} aria-hidden />
      <div
        className={
-          logoPosition === 'center'
-            ? 'flex flex-col items-center gap-2 text-center'
+          `relative z-10 flex min-w-0 flex-1 ${logoPosition === 'center'
+            ? 'flex-col items-center gap-1 text-center'
            : logoPosition === 'right'
-              ? 'flex flex-row-reverse items-center gap-3'
-              : 'flex items-center gap-3'
+              ? 'flex-row-reverse items-center gap-3'
+              : 'items-center gap-3'}`
        }
      >
        <EventAvatar
@@ -277,7 +301,7 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
          className={`flex flex-col${logoPosition === 'center' ? ' items-center text-center' : ''}`}
          style={headerFont ? { fontFamily: headerFont } : undefined}
        >
-          <div className="font-semibold text-lg">{event.name}</div>
+          <div className="truncate text-base font-semibold sm:text-lg">{event.name}</div>
          <div className="flex items-center gap-2 text-xs opacity-70" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
            {stats && tasksEnabled && (
              <>
@@ -295,7 +319,7 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
          </div>
        </div>
      </div>
-      <div className="flex items-center gap-2">
+      <div className="relative z-10 ml-auto flex shrink-0 items-center justify-end gap-2">
        {notificationCenter && eventToken && (
          <NotificationButton
            eventToken={eventToken}