soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Guest PWA vollständig lokalisiert

Browse Source
This commit is contained in:
Codex Agent
2025-10-17 15:00:07 +02:00
parent bd38decc23
commit 25e8f0511b
26 changed files with 1464 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/guest/components/BottomNav.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { NavLink, useParams, useLocation } from 'react-router-dom';
import { CheckSquare, GalleryHorizontal, Home, Trophy } from 'lucide-react';
import { useEventData } from '../hooks/useEventData';
import { useTranslation } from '../i18n/useTranslation';
function TabLink({
to,
@@ -31,32 +32,21 @@ export default function BottomNav() {
const { token } = useParams();
const location = useLocation();
const { event, status } = useEventData();
const { t } = useTranslation();
const isReady = status === 'ready' && !!event;
if (!token || !isReady) return null; // Only show bottom nav within event context
const base = `/e/${encodeURIComponent(token)}`;
const currentPath = location.pathname;
const locale = event?.default_locale || 'de';
// Translations
const translations = {
de: {
home: 'Start',
tasks: 'Aufgaben',
achievements: 'Erfolge',
gallery: 'Galerie'
},
en: {
home: 'Home',
tasks: 'Tasks',
achievements: 'Achievements',
gallery: 'Gallery'
}
const labels = {
home: t('navigation.home'),
tasks: t('navigation.tasks'),
achievements: t('navigation.achievements'),
gallery: t('navigation.gallery'),
};
const t = translations[locale as keyof typeof translations] || translations.de;
// Improved active state logic
const isHomeActive = currentPath === base || currentPath === `/${token}`;
const isTasksActive = currentPath.startsWith(`${base}/tasks`) || currentPath === `${base}/upload`;
@@ -68,22 +58,22 @@ export default function BottomNav() {
<div className="mx-auto flex max-w-sm items-center justify-around">
<TabLink to={`${base}`} isActive={isHomeActive}>
<div className="flex flex-col items-center gap-1">
<Home className="h-5 w-5" /> <span className="text-xs">{t.home}</span>
<Home className="h-5 w-5" /> <span className="text-xs">{labels.home}</span>
</div>
</TabLink>
<TabLink to={`${base}/tasks`} isActive={isTasksActive}>
<div className="flex flex-col items-center gap-1">
<CheckSquare className="h-5 w-5" /> <span className="text-xs">{t.tasks}</span>
<CheckSquare className="h-5 w-5" /> <span className="text-xs">{labels.tasks}</span>
</div>
</TabLink>
<TabLink to={`${base}/achievements`} isActive={isAchievementsActive}>
<div className="flex flex-col items-center gap-1">
<Trophy className="h-5 w-5" /> <span className="text-xs">{t.achievements}</span>
<Trophy className="h-5 w-5" /> <span className="text-xs">{labels.achievements}</span>
</div>
</TabLink>
<TabLink to={`${base}/gallery`} isActive={isGalleryActive}>
<div className="flex flex-col items-center gap-1">
<GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">{t.gallery}</span>
<GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">{labels.gallery}</span>
</div>
</TabLink>
</div>

106
resources/js/guest/components/Header.tsx
View File

@@ -1,14 +1,77 @@
import React from 'react';
import AppearanceToggleDropdown from '@/components/appearance-dropdown';
import { User } from 'lucide-react';
import { User, Heart, Users, PartyPopper, Camera } 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 } from '../i18n/useTranslation';
const EVENT_ICON_COMPONENTS: Record<string, React.ComponentType<{ className?: string }>> = {
heart: Heart,
guests: Users,
party: PartyPopper,
camera: Camera,
};
function isLikelyEmoji(value: string): boolean {
if (!value) {
return false;
}
const characters = Array.from(value.trim());
if (characters.length === 0 || characters.length > 2) {
return false;
}
return characters.some((char) => {
const codePoint = char.codePointAt(0) ?? 0;
return codePoint > 0x2600;
});
}
function getInitials(name: string): string {
const words = name.split(' ').filter(Boolean);
if (words.length >= 2) {
return `${words[0][0]}${words[1][0]}`.toUpperCase();
}
return name.substring(0, 2).toUpperCase();
}
function renderEventAvatar(name: string, icon: unknown) {
if (typeof icon === 'string') {
const trimmed = icon.trim();
if (trimmed) {
const normalized = trimmed.toLowerCase();
const IconComponent = EVENT_ICON_COMPONENTS[normalized];
if (IconComponent) {
return (
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-100 text-pink-600">
<IconComponent className="h-5 w-5" aria-hidden />
</div>
);
}
if (isLikelyEmoji(trimmed)) {
return (
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-100 text-pink-600 text-xl">
<span aria-hidden>{trimmed}</span>
<span className="sr-only">{name}</span>
</div>
);
}
}
}
return (
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-100 text-pink-600 font-semibold text-sm">
{getInitials(name)}
</div>
);
}
export default function Header({ slug, title = '' }: { slug?: string; title?: string }) {
const statsContext = useOptionalEventStats();
const identity = useOptionalGuestIdentity();
const { t } = useTranslation();
if (!slug) {
const guestName = identity?.name && identity?.hydrated ? identity.name : null;
@@ -17,7 +80,9 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
<div className="flex flex-col">
<div className="font-semibold">{title}</div>
{guestName && (
<span className="text-xs text-muted-foreground">Hi {guestName}</span>
<span className="text-xs text-muted-foreground">
{`${t('common.hi')} ${guestName}`}
</span>
)}
</div>
<div className="flex items-center gap-2">
@@ -35,7 +100,7 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
if (status === 'loading') {
return (
<div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
<div className="font-semibold">Lade Event...</div>
<div className="font-semibold">{t('header.loading')}</div>
<div className="flex items-center gap-2">
<AppearanceToggleDropdown />
<SettingsSheet />
@@ -51,49 +116,28 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
const stats =
statsContext && statsContext.eventKey === slug ? statsContext : undefined;
const getEventAvatar = (event: any) => {
if (event.type?.icon) {
return (
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-100 text-pink-600 text-xl">
{event.type.icon}
</div>
);
}
const getInitials = (name: string) => {
const words = name.split(' ');
if (words.length >= 2) {
return `${words[0][0]}${words[1][0]}`.toUpperCase();
}
return name.substring(0, 2).toUpperCase();
};
return (
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-100 text-pink-600 font-semibold text-sm">
{getInitials(event.name)}
</div>
);
};
return (
<div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
<div className="flex items-center gap-3">
{getEventAvatar(event)}
{renderEventAvatar(event.name, event.type?.icon)}
<div className="flex flex-col">
<div className="font-semibold text-base">{event.name}</div>
{guestName && (
<span className="text-xs text-muted-foreground">Hi {guestName}</span>
<span className="text-xs text-muted-foreground">
{`${t('common.hi')} ${guestName}`}
</span>
)}
<div className="flex items-center gap-2 text-xs text-muted-foreground">
{stats && (
<>
<span className="flex items-center gap-1">
<User className="h-3 w-3" />
<span>{stats.onlineGuests} online</span>
<span>{`${stats.onlineGuests} ${t('header.stats.online')}`}</span>
</span>
<span className="text-muted-foreground">|</span>
<span className="flex items-center gap-1">
<span className="font-medium">{stats.tasksSolved}</span> Aufgaben geloest
<span className="font-medium">{stats.tasksSolved}</span>{' '}
{t('header.stats.tasksSolved')}
</span>
</>
)}

178
resources/js/guest/components/settings-sheet.tsx
View File

@@ -1,5 +1,6 @@
import React from "react";
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
Sheet,
SheetTrigger,
@@ -15,16 +16,23 @@ import { Label } from '@/components/ui/label';
import { Settings, ArrowLeft, FileText, RefreshCcw, ChevronRight, UserCircle } from 'lucide-react';
import { useOptionalGuestIdentity } from '../context/GuestIdentityContext';
import { LegalMarkdown } from './legal-markdown';
import { useLocale, type LocaleContextValue } from '../i18n/LocaleContext';
import { useTranslation } from '../i18n/useTranslation';
import type { LocaleCode } from '../i18n/messages';
const legalPages = [
{ slug: 'impressum', label: 'Impressum' },
{ slug: 'datenschutz', label: 'Datenschutz' },
{ slug: 'agb', label: 'AGB' },
{ slug: 'impressum', translationKey: 'settings.legal.section.impressum' },
{ slug: 'datenschutz', translationKey: 'settings.legal.section.privacy' },
{ slug: 'agb', translationKey: 'settings.legal.section.terms' },
] as const;
type ViewState =
| { mode: 'home' }
| { mode: 'legal'; slug: (typeof legalPages)[number]['slug']; label: string };
| {
mode: 'legal';
slug: (typeof legalPages)[number]['slug'];
translationKey: (typeof legalPages)[number]['translationKey'];
};
type LegalDocumentState =
| { phase: 'idle'; title: string; body: string }
@@ -38,11 +46,13 @@ export function SettingsSheet() {
const [open, setOpen] = React.useState(false);
const [view, setView] = React.useState<ViewState>({ mode: 'home' });
const identity = useOptionalGuestIdentity();
const localeContext = useLocale();
const { t } = useTranslation();
const [nameDraft, setNameDraft] = React.useState(identity?.name ?? '');
const [nameStatus, setNameStatus] = React.useState<NameStatus>('idle');
const [savingName, setSavingName] = React.useState(false);
const isLegal = view.mode === 'legal';
const legalDocument = useLegalDocument(isLegal ? view.slug : null);
const legalDocument = useLegalDocument(isLegal ? view.slug : null, localeContext.locale);
React.useEffect(() => {
if (open && identity?.hydrated) {
@@ -56,10 +66,13 @@ export function SettingsSheet() {
}, []);
const handleOpenLegal = React.useCallback(
(slug: (typeof legalPages)[number]['slug'], label: string) => {
setView({ mode: 'legal', slug, label });
(
slug: (typeof legalPages)[number]['slug'],
translationKey: (typeof legalPages)[number]['translationKey'],
) => {
setView({ mode: 'legal', slug, translationKey });
},
[]
[],
);
const handleOpenChange = React.useCallback((next: boolean) => {
@@ -100,7 +113,7 @@ export function SettingsSheet() {
<SheetTrigger asChild>
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-md">
<Settings className="h-5 w-5" />
<span className="sr-only">Einstellungen oeffnen</span>
<span className="sr-only">{t('settings.sheet.openLabel')}</span>
</Button>
</SheetTrigger>
<SheetContent side="right" className="sm:max-w-md">
@@ -115,32 +128,36 @@ export function SettingsSheet() {
onClick={handleBack}
>
<ArrowLeft className="h-5 w-5" />
<span className="sr-only">Zurück</span>
<span className="sr-only">{t('settings.sheet.backLabel')}</span>
</Button>
<div className="min-w-0">
<SheetTitle className="truncate">
{legalDocument.phase === 'ready' && legalDocument.title
? legalDocument.title
: view.label}
: t(view.translationKey)}
</SheetTitle>
<SheetDescription>
{legalDocument.phase === 'loading' ? 'Laedt...' : 'Rechtlicher Hinweis'}
{legalDocument.phase === 'loading'
? t('common.actions.loading')
: t('settings.sheet.legalDescription')}
</SheetDescription>
</div>
</div>
) : (
<div>
<SheetTitle>Einstellungen</SheetTitle>
<SheetDescription>
Verwalte deinen Gastzugang, rechtliche Dokumente und lokale Daten.
</SheetDescription>
<SheetTitle>{t('settings.title')}</SheetTitle>
<SheetDescription>{t('settings.subtitle')}</SheetDescription>
</div>
)}
</header>
<main className="flex-1 overflow-y-auto px-6 py-4">
{isLegal ? (
<LegalView document={legalDocument} onClose={() => handleOpenChange(false)} />
<LegalView
document={legalDocument}
onClose={() => handleOpenChange(false)}
translationKey={view.mode === 'legal' ? view.translationKey : null}
/>
) : (
<HomeView
identity={identity}
@@ -151,13 +168,14 @@ export function SettingsSheet() {
canSaveName={canSaveName}
savingName={savingName}
nameStatus={nameStatus}
localeContext={localeContext}
onOpenLegal={handleOpenLegal}
/>
)}
</main>
<SheetFooter className="border-t bg-muted/40 px-6 py-3 text-xs text-muted-foreground">
<div>Gastbereich - Daten werden lokal im Browser gespeichert.</div>
<div>{t('settings.footer.notice')}</div>
</SheetFooter>
</div>
</SheetContent>
@@ -165,31 +183,41 @@ export function SettingsSheet() {
);
}
function LegalView({ document, onClose }: { document: LegalDocumentState; onClose: () => void }) {
function LegalView({
document,
onClose,
translationKey,
}: {
document: LegalDocumentState;
onClose: () => void;
translationKey: string | null;
}) {
const { t } = useTranslation();
if (document.phase === 'error') {
return (
<div className="space-y-4">
<Alert variant="destructive">
<AlertDescription>
Das Dokument konnte nicht geladen werden. Bitte versuche es spaeter erneut.
{t('settings.legal.error')}
</AlertDescription>
</Alert>
<Button variant="secondary" onClick={onClose}>
Schliessen
{t('common.actions.close')}
</Button>
</div>
);
}
if (document.phase === 'loading' || document.phase === 'idle') {
return <div className="text-sm text-muted-foreground">Dokument wird geladen...</div>;
return <div className="text-sm text-muted-foreground">{t('settings.legal.loading')}</div>;
}
return (
<div className="space-y-4">
<Card>
<CardHeader>
<CardTitle>{document.title || 'Rechtlicher Hinweis'}</CardTitle>
<CardTitle>{document.title || t(translationKey ?? 'settings.legal.fallbackTitle')}</CardTitle>
</CardHeader>
<CardContent className="prose prose-sm max-w-none dark:prose-invert">
<LegalMarkdown markdown={document.body} />
@@ -208,7 +236,11 @@ interface HomeViewProps {
canSaveName: boolean;
savingName: boolean;
nameStatus: NameStatus;
onOpenLegal: (slug: (typeof legalPages)[number]['slug'], label: string) => void;
localeContext: LocaleContextValue;
onOpenLegal: (
slug: (typeof legalPages)[number]['slug'],
translationKey: (typeof legalPages)[number]['translationKey'],
) => void;
}
function HomeView({
@@ -220,17 +252,65 @@ function HomeView({
canSaveName,
savingName,
nameStatus,
localeContext,
onOpenLegal,
}: HomeViewProps) {
const { t } = useTranslation();
const legalLinks = React.useMemo(
() =>
legalPages.map((page) => ({
slug: page.slug,
translationKey: page.translationKey,
label: t(page.translationKey),
})),
[t],
);
return (
<div className="space-y-6">
<Card>
<CardHeader className="pb-3">
<CardTitle>{t('settings.language.title')}</CardTitle>
<CardDescription>{t('settings.language.description')}</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-2">
{localeContext.availableLocales.map((option) => {
const isActive = localeContext.locale === option.code;
return (
<Button
key={option.code}
type="button"
variant={isActive ? 'default' : 'outline'}
className={`flex h-12 flex-col justify-center gap-1 rounded-lg border text-sm ${
isActive ? 'bg-pink-500 text-white hover:bg-pink-600' : 'bg-background'
}`}
onClick={() => localeContext.setLocale(option.code)}
aria-pressed={isActive}
disabled={!localeContext.hydrated}
>
<span aria-hidden className="text-lg leading-none">{option.flag}</span>
<span className="font-medium">{t(`settings.language.option.${option.code}`)}</span>
{isActive && (
<Badge
variant="secondary"
className="border border-white/40 bg-white/10 text-[10px] uppercase tracking-wide text-white"
>
{t('settings.language.activeBadge')}
</Badge>
)}
</Button>
);
})}
</div>
</CardContent>
</Card>
{identity && (
<Card>
<CardHeader className="pb-3">
<CardTitle>Dein Name</CardTitle>
<CardDescription>
Passe an, wie wir dich im Event begruessen. Der Name wird nur lokal gespeichert.
</CardDescription>
<CardTitle>{t('settings.name.title')}</CardTitle>
<CardDescription>{t('settings.name.description')}</CardDescription>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-center gap-3">
@@ -239,12 +319,12 @@ function HomeView({
</div>
<div className="flex-1 space-y-2">
<Label htmlFor="guest-name" className="text-sm font-medium">
Anzeigename
{t('settings.name.label')}
</Label>
<Input
id="guest-name"
value={nameDraft}
placeholder="z.B. Anna"
placeholder={t('settings.name.placeholder')}
onChange={(event) => onNameChange(event.target.value)}
autoComplete="name"
disabled={!identity.hydrated || savingName}
@@ -253,16 +333,16 @@ function HomeView({
</div>
<div className="flex flex-wrap items-center gap-2">
<Button onClick={onSaveName} disabled={!canSaveName || savingName}>
{savingName ? 'Speichere...' : 'Name speichern'}
{savingName ? t('settings.name.saving') : t('settings.name.save')}
</Button>
<Button type="button" variant="ghost" onClick={onResetName} disabled={savingName}>
zurücksetzen
{t('settings.name.reset')}
</Button>
{nameStatus === 'saved' && (
<span className="text-xs text-muted-foreground">Gespeichert (ok)</span>
<span className="text-xs text-muted-foreground">{t('settings.name.saved')}</span>
)}
{!identity.hydrated && (
<span className="text-xs text-muted-foreground">Lade gespeicherten Namen...</span>
<span className="text-xs text-muted-foreground">{t('settings.name.loading')}</span>
)}
</div>
</CardContent>
@@ -274,20 +354,18 @@ function HomeView({
<CardTitle>
<div className="flex items-center gap-2">
<FileText className="h-4 w-4 text-pink-500" />
Rechtliches
{t('settings.legal.title')}
</div>
</CardTitle>
<CardDescription>
Die rechtlich verbindlichen Texte sind jederzeit hier abrufbar.
</CardDescription>
<CardDescription>{t('settings.legal.description')}</CardDescription>
</CardHeader>
<CardContent className="space-y-2">
{legalPages.map((page) => (
{legalLinks.map((page) => (
<Button
key={page.slug}
variant="ghost"
className="w-full justify-between px-3"
onClick={() => onOpenLegal(page.slug, page.label)}
onClick={() => onOpenLegal(page.slug, page.translationKey)}
>
<span className="text-left text-sm">{page.label}</span>
<ChevronRight className="h-4 w-4" />
@@ -298,16 +376,14 @@ function HomeView({
<Card>
<CardHeader>
<CardTitle>Offline Cache</CardTitle>
<CardDescription>
Loesche lokale Daten, falls Inhalte veraltet erscheinen oder Uploads haengen bleiben.
</CardDescription>
<CardTitle>{t('settings.cache.title')}</CardTitle>
<CardDescription>{t('settings.cache.description')}</CardDescription>
</CardHeader>
<CardContent className="space-y-3">
<ClearCacheButton />
<div className="flex items-start gap-2 text-xs text-muted-foreground">
<RefreshCcw className="mt-0.5 h-3.5 w-3.5" />
<span>Dies betrifft nur diesen Browser und muss pro Geraet erneut ausgefuehrt werden.</span>
<span>{t('settings.cache.note')}</span>
</div>
</CardContent>
</Card>
@@ -315,7 +391,7 @@ function HomeView({
);
}
function useLegalDocument(slug: string | null): LegalDocumentState {
function useLegalDocument(slug: string | null, locale: LocaleCode): LegalDocumentState {
const [state, setState] = React.useState<LegalDocumentState>({
phase: 'idle',
title: '',
@@ -331,7 +407,8 @@ function useLegalDocument(slug: string | null): LegalDocumentState {
const controller = new AbortController();
setState({ phase: 'loading', title: '', body: '' });
fetch(`/api/v1/legal/${encodeURIComponent(slug)}?lang=de`, {
const langParam = encodeURIComponent(locale);
fetch(`/api/v1/legal/${encodeURIComponent(slug)}?lang=${langParam}`, {
headers: { 'Cache-Control': 'no-store' },
signal: controller.signal,
})
@@ -355,7 +432,7 @@ function useLegalDocument(slug: string | null): LegalDocumentState {
});
return () => controller.abort();
}, [slug]);
}, [slug, locale]);
return state;
}
@@ -363,6 +440,7 @@ function useLegalDocument(slug: string | null): LegalDocumentState {
function ClearCacheButton() {
const [busy, setBusy] = React.useState(false);
const [done, setDone] = React.useState(false);
const { t } = useTranslation();
async function clearAll() {
setBusy(true);
@@ -393,9 +471,9 @@ function ClearCacheButton() {
return (
<div className="space-y-2">
<Button variant="secondary" onClick={clearAll} disabled={busy} className="w-full">
{busy ? 'Leere Cache...' : 'Cache leeren'}
{busy ? t('settings.cache.clearing') : t('settings.cache.clear')}
</Button>
{done && <div className="text-xs text-muted-foreground">Cache geloescht.</div>}
{done && <div className="text-xs text-muted-foreground">{t('settings.cache.cleared')}</div>}
</div>
);
}