Added opaque join-token support across backend and frontend: new migration/model/service/endpoints, guest controllers now resolve tokens, and the demo seeder seeds a token. Tenant event details list/manage tokens with copy/revoke actions, and the guest PWA uses tokens end-to-end (routing, storage, uploads, achievements, etc.). Docs TODO updated to reflect completed steps.

resources/js/admin/components/AdminLayout.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { cn } from '@/lib/utils';
 import {
   ADMIN_HOME_PATH,
@@ -8,13 +9,14 @@ import {
   ADMIN_TASKS_PATH,
   ADMIN_BILLING_PATH,
 } from '../constants';
+import { LanguageSwitcher } from './LanguageSwitcher';
 
 const navItems = [
-  { to: ADMIN_HOME_PATH, label: 'Dashboard', end: true },
-  { to: ADMIN_EVENTS_PATH, label: 'Events' },
-  { to: ADMIN_TASKS_PATH, label: 'Tasks' },
-  { to: ADMIN_BILLING_PATH, label: 'Billing' },
-  { to: ADMIN_SETTINGS_PATH, label: 'Einstellungen' },
+  { to: ADMIN_HOME_PATH, labelKey: 'navigation.dashboard', end: true },
+  { to: ADMIN_EVENTS_PATH, labelKey: 'navigation.events' },
+  { to: ADMIN_TASKS_PATH, labelKey: 'navigation.tasks' },
+  { to: ADMIN_BILLING_PATH, labelKey: 'navigation.billing' },
+  { to: ADMIN_SETTINGS_PATH, labelKey: 'navigation.settings' },
 ];
 
 interface AdminLayoutProps {
@@ -25,6 +27,8 @@ interface AdminLayoutProps {
 }
 
 export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutProps) {
+  const { t } = useTranslation('common');
+
   React.useEffect(() => {
     document.body.classList.add('tenant-admin-theme');
     return () => {
@@ -37,11 +41,14 @@ export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutP
       <header className="border-b border-brand-rose-soft bg-brand-card/90 shadow-brand-primary backdrop-blur-md">
         <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-6 py-6 md:flex-row md:items-center md:justify-between">
           <div>
-            <p className="text-xs uppercase tracking-[0.35em] text-brand-rose">Fotospiel Tenant Admin</p>
+            <p className="text-xs uppercase tracking-[0.35em] text-brand-rose">{t('app.brand')}</p>
             <h1 className="font-display text-3xl font-semibold text-brand-slate">{title}</h1>
             {subtitle && <p className="mt-1 text-sm font-sans-marketing text-brand-navy/75">{subtitle}</p>}
           </div>
-          {actions && <div className="flex flex-wrap gap-2">{actions}</div>}
+          <div className="flex flex-wrap items-center gap-2">
+            <LanguageSwitcher />
+            {actions}
+          </div>
         </div>
         <nav className="mx-auto flex w-full max-w-6xl gap-3 px-6 pb-4 text-sm font-medium text-brand-navy/80">
           {navItems.map((item) => (
@@ -58,7 +65,7 @@ export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutP
                 )
               }
             >
-              {item.label}
+              {t(item.labelKey)}
             </NavLink>
           ))}
         </nav>

resources/js/admin/components/LanguageSwitcher.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Check, Languages } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+import i18n from '../i18n';
+
+type SupportedLocale = 'de' | 'en';
+
+const SUPPORTED_LANGUAGES: Array<{ code: SupportedLocale; labelKey: string }> = [
+  { code: 'de', labelKey: 'language.de' },
+  { code: 'en', labelKey: 'language.en' },
+];
+
+function getCsrfToken(): string {
+  return document.querySelector<HTMLMetaElement>('meta[name=\"csrf-token\"]')?.content ?? '';
+}
+
+async function persistLocale(locale: SupportedLocale): Promise<void> {
+  const response = await fetch('/set-locale', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+      Accept: 'application/json',
+      'X-Requested-With': 'XMLHttpRequest',
+    },
+    body: JSON.stringify({ locale }),
+    credentials: 'include',
+  });
+
+  if (!response.ok) {
+    throw new Error(`locale update failed with status ${response.status}`);
+  }
+}
+
+export function LanguageSwitcher() {
+  const { t } = useTranslation('common');
+  const [pendingLocale, setPendingLocale] = React.useState<SupportedLocale | null>(null);
+
+  const currentLocale = (i18n.language || document.documentElement.lang || 'de') as SupportedLocale;
+
+  const changeLanguage = React.useCallback(
+    async (locale: SupportedLocale) => {
+      if (locale === currentLocale || pendingLocale) {
+        return;
+      }
+
+      setPendingLocale(locale);
+      try {
+        await persistLocale(locale);
+        await i18n.changeLanguage(locale);
+        document.documentElement.setAttribute('lang', locale);
+      } catch (error) {
+        if (import.meta.env.DEV) {
+          // eslint-disable-next-line no-console
+          console.error('Failed to switch language', error);
+        }
+      } finally {
+        setPendingLocale(null);
+      }
+    },
+    [currentLocale, pendingLocale]
+  );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40"
+          aria-label={t('app.languageSwitch')}
+        >
+          <Languages className="mr-2 h-4 w-4" />
+          <span className="hidden sm:inline">{t('app.languageSwitch')}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {SUPPORTED_LANGUAGES.map(({ code, labelKey }) => {
+          const isActive = currentLocale === code;
+          const isPending = pendingLocale === code;
+
+          return (
+            <DropdownMenuItem
+              key={code}
+              onSelect={(event) => {
+                event.preventDefault();
+                changeLanguage(code);
+              }}
+              className="flex items-center justify-between gap-3"
+              disabled={isPending}
+            >
+              <span>{t(labelKey)}</span>
+              {(isActive || isPending) && <Check className="h-4 w-4 text-brand-rose" />}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}