Guest PWA vollständig lokalisiert

resources/js/guest/components/Header.tsx

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