feat: implement tenant OAuth flow and guest achievements

resources/js/guest/components/Header.tsx

@@ -1,18 +1,25 @@
-import React from 'react';
-import { Button } from '@/components/ui/button';
-import { Link } from 'react-router-dom';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import React from 'react';
 import AppearanceToggleDropdown from '@/components/appearance-dropdown';
-import { Settings, ChevronDown, User } from 'lucide-react';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { User } from 'lucide-react';
 import { useEventData } from '../hooks/useEventData';
-import { usePollStats } from '../polling/usePollStats';
+import { useOptionalEventStats } from '../context/EventStatsContext';
+import { useOptionalGuestIdentity } from '../context/GuestIdentityContext';
+import { SettingsSheet } from './settings-sheet';
 
 export default function Header({ slug, title = '' }: { slug?: string; title?: string }) {
+  const statsContext = useOptionalEventStats();
+  const identity = useOptionalGuestIdentity();
+
   if (!slug) {
+    const guestName = identity?.name && identity?.hydrated ? identity.name : null;
     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">{title}</div>
+        <div className="flex flex-col">
+          <div className="font-semibold">{title}</div>
+          {guestName && (
+            <span className="text-xs text-muted-foreground">Hi {guestName}</span>
+          )}
+        </div>
         <div className="flex items-center gap-2">
           <AppearanceToggleDropdown />
           <SettingsSheet />
@@ -22,7 +29,8 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
   }
 
   const { event, loading: eventLoading, error: eventError } = useEventData();
-  const stats = usePollStats(slug);
+  const stats = statsContext && statsContext.slug === slug ? statsContext : undefined;
+  const guestName = identity && identity.slug === slug && identity.hydrated && identity.name ? identity.name : null;
 
   if (eventLoading) {
     return (
@@ -48,7 +56,6 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
     );
   }
 
-  // Get event icon or generate initials
   const getEventAvatar = (event: any) => {
     if (event.type?.icon) {
       return (
@@ -57,8 +64,7 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
         </div>
       );
     }
-    
-    // Fallback to initials
+
     const getInitials = (name: string) => {
       const words = name.split(' ');
       if (words.length >= 2) {
@@ -80,6 +86,9 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
         {getEventAvatar(event)}
         <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>
+          )}
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
             {stats && (
               <>
@@ -87,9 +96,9 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
                   <User className="h-3 w-3" />
                   <span>{stats.onlineGuests} online</span>
                 </span>
-                <span>•</span>
+                <span className="text-muted-foreground">|</span>
                 <span className="flex items-center gap-1">
-                  <span className="font-medium">{stats.tasksSolved}</span> Aufgaben gelöst
+                  <span className="font-medium">{stats.tasksSolved}</span> Aufgaben geloest
                 </span>
               </>
             )}
@@ -104,88 +113,4 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
   );
 }
 
-function SettingsSheet() {
-  return (
-    <Sheet>
-      <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 öffnen</span>
-        </Button>
-      </SheetTrigger>
-      <SheetContent side="right" className="w-80 sm:w-96">
-        <SheetHeader>
-          <SheetTitle>Einstellungen</SheetTitle>
-        </SheetHeader>
-        <div className="mt-4 space-y-4">
-          <Collapsible defaultOpen>
-            <div className="flex items-center justify-between">
-              <div className="text-sm font-medium">Cache</div>
-              <CollapsibleTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-7 px-2">
-                  <ChevronDown className="h-4 w-4" />
-                </Button>
-              </CollapsibleTrigger>
-            </div>
-            <CollapsibleContent>
-              <div className="mt-2">
-                <ClearCacheButton />
-              </div>
-            </CollapsibleContent>
-          </Collapsible>
-
-          <Collapsible defaultOpen>
-            <div className="flex items-center justify-between">
-              <div className="text-sm font-medium">Rechtliches</div>
-              <CollapsibleTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-7 px-2">
-                  <ChevronDown className="h-4 w-4" />
-                </Button>
-              </CollapsibleTrigger>
-            </div>
-            <CollapsibleContent>
-              <ul className="mt-2 list-disc pl-5 text-sm">
-                <li><Link to="/legal/impressum" className="underline">Impressum</Link></li>
-                <li><Link to="/legal/datenschutz" className="underline">Datenschutz</Link></li>
-                <li><Link to="/legal/agb" className="underline">AGB</Link></li>
-              </ul>
-            </CollapsibleContent>
-          </Collapsible>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-function ClearCacheButton() {
-  const [busy, setBusy] = React.useState(false);
-  const [done, setDone] = React.useState(false);
-
-  async function clearAll() {
-    setBusy(true); setDone(false);
-    try {
-      // Clear CacheStorage
-      if ('caches' in window) {
-        const keys = await caches.keys();
-        await Promise.all(keys.map((k) => caches.delete(k)));
-      }
-      // Clear known IndexedDB dbs (best-effort)
-      if ('indexedDB' in window) {
-        try { await new Promise((res, rej) => { const r = indexedDB.deleteDatabase('upload-queue'); r.onsuccess=()=>res(null); r.onerror=()=>res(null); }); } catch {}
-      }
-      setDone(true);
-    } finally {
-      setBusy(false);
-      setTimeout(() => setDone(false), 2500);
-    }
-  }
-
-  return (
-    <div className="mt-2">
-      <Button variant="secondary" onClick={clearAll} disabled={busy}>
-        {busy ? 'Leere Cache…' : 'Cache leeren'}
-      </Button>
-      {done && <div className="mt-2 text-xs text-muted-foreground">Cache gelöscht.</div>}
-    </div>
-  );
-}
+export {}