Guest PWA vollständig lokalisiert

resources/js/guest/components/settings-sheet.tsx

@@ -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>
   );
 }