377 lines
12 KiB
TypeScript
377 lines
12 KiB
TypeScript
import React from 'react';
|
|
import { Link, useParams } from 'react-router-dom';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import EmotionPicker from '../components/EmotionPicker';
|
|
import GalleryPreview from '../components/GalleryPreview';
|
|
import { useGuestIdentity } from '../context/GuestIdentityContext';
|
|
import { useEventStats } from '../context/EventStatsContext';
|
|
import { useEventData } from '../hooks/useEventData';
|
|
import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
|
|
import { Sparkles, UploadCloud, Images, CheckCircle2, Users, TimerReset, X, Camera, ArrowUpRight } from 'lucide-react';
|
|
import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
|
|
import { useEventBranding } from '../context/EventBrandingContext';
|
|
import type { EventBranding } from '../types/event-branding';
|
|
|
|
export default function HomePage() {
|
|
const { token } = useParams<{ token: string }>();
|
|
const { name, hydrated } = useGuestIdentity();
|
|
const stats = useEventStats();
|
|
const { event } = useEventData();
|
|
const { completedCount } = useGuestTaskProgress(token);
|
|
const { t } = useTranslation();
|
|
const { branding } = useEventBranding();
|
|
|
|
const heroStorageKey = token ? `guestHeroDismissed_${token}` : 'guestHeroDismissed';
|
|
const [heroVisible, setHeroVisible] = React.useState(() => {
|
|
if (typeof window === 'undefined') {
|
|
return true;
|
|
}
|
|
|
|
try {
|
|
return window.sessionStorage.getItem(heroStorageKey) !== '1';
|
|
} catch {
|
|
return true;
|
|
}
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setHeroVisible(window.sessionStorage.getItem(heroStorageKey) !== '1');
|
|
} catch {
|
|
setHeroVisible(true);
|
|
}
|
|
}, [heroStorageKey]);
|
|
|
|
const dismissHero = React.useCallback(() => {
|
|
setHeroVisible(false);
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
window.sessionStorage.setItem(heroStorageKey, '1');
|
|
} catch {
|
|
// ignore storage exceptions (e.g. private mode)
|
|
}
|
|
}, [heroStorageKey]);
|
|
|
|
const displayName = hydrated && name ? name : t('home.fallbackGuestName');
|
|
const eventNameDisplay = event?.name ?? t('home.hero.defaultEventName');
|
|
const latestUploadText = formatLatestUpload(stats.latestPhotoAt, t);
|
|
const accentColor = branding.primaryColor;
|
|
const secondaryAccent = branding.secondaryColor;
|
|
|
|
const statItems = React.useMemo(
|
|
() => [
|
|
{
|
|
icon: <Users className="h-4 w-4" aria-hidden />,
|
|
label: t('home.stats.online'),
|
|
value: `${stats.onlineGuests}`,
|
|
},
|
|
{
|
|
icon: <Sparkles className="h-4 w-4" aria-hidden />,
|
|
label: t('home.stats.tasksSolved'),
|
|
value: `${stats.tasksSolved}`,
|
|
},
|
|
{
|
|
icon: <TimerReset className="h-4 w-4" aria-hidden />,
|
|
label: t('home.stats.lastUpload'),
|
|
value: latestUploadText,
|
|
},
|
|
{
|
|
icon: <CheckCircle2 className="h-4 w-4" aria-hidden />,
|
|
label: t('home.stats.completedTasks'),
|
|
value: `${completedCount}`,
|
|
},
|
|
],
|
|
[completedCount, latestUploadText, stats.onlineGuests, stats.tasksSolved, t],
|
|
);
|
|
|
|
const quickActions = React.useMemo(
|
|
() => [
|
|
{
|
|
to: 'upload',
|
|
label: t('home.actions.items.upload.label'),
|
|
description: t('home.actions.items.upload.description'),
|
|
icon: <Camera className="h-5 w-5" aria-hidden />,
|
|
highlight: true,
|
|
},
|
|
{
|
|
to: 'tasks',
|
|
label: t('home.actions.items.tasks.label'),
|
|
description: t('home.actions.items.tasks.description'),
|
|
icon: <Sparkles className="h-5 w-5" aria-hidden />,
|
|
},
|
|
{
|
|
to: 'gallery',
|
|
label: t('home.actions.items.gallery.label'),
|
|
description: t('home.actions.items.gallery.description'),
|
|
icon: <Images className="h-5 w-5" aria-hidden />,
|
|
},
|
|
],
|
|
[t],
|
|
);
|
|
|
|
const checklistItems = React.useMemo(
|
|
() => [
|
|
t('home.checklist.steps.first'),
|
|
t('home.checklist.steps.second'),
|
|
t('home.checklist.steps.third'),
|
|
],
|
|
[t],
|
|
);
|
|
|
|
if (!token) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6 pb-32">
|
|
{heroVisible && (
|
|
<HeroCard
|
|
name={displayName}
|
|
eventName={eventNameDisplay}
|
|
tasksCompleted={completedCount}
|
|
t={t}
|
|
branding={branding}
|
|
onDismiss={dismissHero}
|
|
ctaLabel={t('home.actions.items.tasks.label')}
|
|
ctaHref={`/e/${encodeURIComponent(token)}/tasks`}
|
|
/>
|
|
)}
|
|
|
|
<StatsRibbon items={statItems} accentColor={accentColor} fontFamily={branding.fontFamily} />
|
|
|
|
<section className="space-y-4" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-foreground">{t('home.actions.title')}</h2>
|
|
<p className="text-xs text-muted-foreground">{t('home.actions.subtitle')}</p>
|
|
</div>
|
|
<ArrowUpRight className="h-5 w-5 text-muted-foreground" aria-hidden />
|
|
</div>
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
{quickActions.map((action) => (
|
|
<QuickActionCard
|
|
key={action.to}
|
|
action={action}
|
|
accentColor={accentColor}
|
|
secondaryAccent={secondaryAccent}
|
|
/>
|
|
))}
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
asChild
|
|
className="w-full touch-manipulation border-dashed"
|
|
style={{ borderColor: `${accentColor}44` }}
|
|
>
|
|
<Link to="queue">{t('home.actions.queueButton')}</Link>
|
|
</Button>
|
|
</section>
|
|
|
|
<Card>
|
|
<CardHeader style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>
|
|
<CardTitle>{t('home.checklist.title')}</CardTitle>
|
|
<CardDescription>{t('home.checklist.description')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{checklistItems.map((item) => (
|
|
<div key={item} className="flex items-start gap-3">
|
|
<CheckCircle2 className="mt-0.5 h-5 w-5 text-green-500" aria-hidden />
|
|
<span className="text-sm leading-relaxed text-muted-foreground">{item}</span>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Separator />
|
|
|
|
<EmotionPicker />
|
|
|
|
<GalleryPreview token={token} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HeroCard({
|
|
name,
|
|
eventName,
|
|
tasksCompleted,
|
|
t,
|
|
branding,
|
|
onDismiss,
|
|
ctaLabel,
|
|
ctaHref,
|
|
}: {
|
|
name: string;
|
|
eventName: string;
|
|
tasksCompleted: number;
|
|
t: TranslateFn;
|
|
branding: EventBranding;
|
|
onDismiss: () => void;
|
|
ctaLabel?: string;
|
|
ctaHref?: string;
|
|
}) {
|
|
const heroTitle = t('home.hero.title').replace('{name}', name);
|
|
const heroDescription = t('home.hero.description').replace('{eventName}', eventName);
|
|
const progressMessage = tasksCompleted > 0
|
|
? t('home.hero.progress.some').replace('{count}', `${tasksCompleted}`)
|
|
: t('home.hero.progress.none');
|
|
|
|
const style = React.useMemo(() => ({
|
|
background: `linear-gradient(135deg, ${branding.primaryColor}, ${branding.secondaryColor})`,
|
|
color: '#ffffff',
|
|
fontFamily: branding.fontFamily ?? undefined,
|
|
}), [branding.fontFamily, branding.primaryColor, branding.secondaryColor]);
|
|
|
|
return (
|
|
<Card className="relative overflow-hidden border-0 text-white shadow-md" style={style}>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute right-3 top-3 h-8 w-8 rounded-full bg-white/20 text-white hover:bg-white/30"
|
|
onClick={onDismiss}
|
|
>
|
|
<X className="h-4 w-4" aria-hidden />
|
|
<span className="sr-only">{t('common.actions.close')}</span>
|
|
</Button>
|
|
<CardHeader className="space-y-4 pr-10">
|
|
<CardDescription className="text-sm text-white/80">{t('home.hero.subtitle')}</CardDescription>
|
|
<CardTitle className="text-2xl font-bold leading-snug">{heroTitle}</CardTitle>
|
|
<p className="text-sm text-white/85">{heroDescription}</p>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<p className="text-sm font-medium text-white/90">{progressMessage}</p>
|
|
{ctaHref && ctaLabel && (
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
asChild
|
|
className="rounded-full bg-white/15 px-4 py-1 text-xs font-semibold uppercase tracking-wide text-white hover:bg-white/25"
|
|
>
|
|
<Link to={ctaHref}>{ctaLabel}</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function StatsRibbon({
|
|
items,
|
|
accentColor,
|
|
fontFamily,
|
|
}: {
|
|
items: { icon: React.ReactNode; label: string; value: string }[];
|
|
accentColor: string;
|
|
fontFamily?: string | null;
|
|
}) {
|
|
return (
|
|
<div className="overflow-hidden rounded-3xl border border-muted/40 bg-white/70 shadow-sm backdrop-blur">
|
|
<div
|
|
className="flex gap-3 overflow-x-auto px-4 py-3 [scrollbar-width:none] sm:grid sm:grid-cols-4 sm:overflow-visible"
|
|
style={fontFamily ? { fontFamily } : undefined}
|
|
>
|
|
{items.map((item) => (
|
|
<div
|
|
key={item.label}
|
|
className="flex min-w-[150px] flex-1 items-center gap-3 rounded-2xl border border-transparent bg-white/60 px-3 py-2 shadow-sm transition hover:-translate-y-0.5 hover:border-white"
|
|
>
|
|
<div
|
|
className="flex h-10 w-10 items-center justify-center rounded-full bg-white shadow"
|
|
style={{ color: accentColor }}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-[11px] uppercase tracking-wide text-muted-foreground">{item.label}</span>
|
|
<span className="text-lg font-semibold text-foreground">{item.value}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function QuickActionCard({
|
|
action,
|
|
accentColor,
|
|
secondaryAccent,
|
|
}: {
|
|
action: { to: string; label: string; description: string; icon: React.ReactNode; highlight?: boolean };
|
|
accentColor: string;
|
|
secondaryAccent: string;
|
|
}) {
|
|
const highlightStyle = action.highlight
|
|
? {
|
|
background: `linear-gradient(120deg, ${accentColor}, ${secondaryAccent})`,
|
|
color: '#fff',
|
|
}
|
|
: undefined;
|
|
|
|
return (
|
|
<Link to={action.to} className="group block">
|
|
<Card
|
|
className="relative overflow-hidden border-0 shadow-sm transition-all group-hover:shadow-lg"
|
|
style={highlightStyle}
|
|
>
|
|
<CardContent className="flex items-start gap-4 py-4">
|
|
<div
|
|
className={`flex h-11 w-11 items-center justify-center rounded-2xl shadow-sm ${
|
|
action.highlight ? 'bg-white/15 text-white' : 'bg-pink-50'
|
|
}`}
|
|
style={!action.highlight ? { color: secondaryAccent } : undefined}
|
|
>
|
|
{action.icon}
|
|
</div>
|
|
<div className="flex flex-1 flex-col">
|
|
<span className={`text-base font-semibold ${action.highlight ? 'text-white' : 'text-foreground'}`}>
|
|
{action.label}
|
|
</span>
|
|
<span className={`text-sm ${action.highlight ? 'text-white/80' : 'text-muted-foreground'}`}>
|
|
{action.description}
|
|
</span>
|
|
</div>
|
|
<ArrowUpRight
|
|
className={`h-4 w-4 transition ${action.highlight ? 'text-white/70 group-hover:translate-x-0.5 group-hover:-translate-y-0.5' : 'text-muted-foreground group-hover:text-foreground'}`}
|
|
aria-hidden
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function formatLatestUpload(isoDate: string | null, t: TranslateFn) {
|
|
if (!isoDate) {
|
|
return t('home.latestUpload.none');
|
|
}
|
|
const date = new Date(isoDate);
|
|
if (Number.isNaN(date.getTime())) {
|
|
return t('home.latestUpload.invalid');
|
|
}
|
|
const diffMs = Date.now() - date.getTime();
|
|
const diffMinutes = Math.round(diffMs / 60000);
|
|
if (diffMinutes < 1) {
|
|
return t('home.latestUpload.justNow');
|
|
}
|
|
if (diffMinutes < 60) {
|
|
return t('home.latestUpload.minutes').replace('{count}', `${diffMinutes}`);
|
|
}
|
|
const diffHours = Math.round(diffMinutes / 60);
|
|
if (diffHours < 24) {
|
|
return t('home.latestUpload.hours').replace('{count}', `${diffHours}`);
|
|
}
|
|
const diffDays = Math.round(diffHours / 24);
|
|
return t('home.latestUpload.days').replace('{count}', `${diffDays}`);
|
|
}
|