'use client'; import { useState, useRef, useEffect } from 'react'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { motion, AnimatePresence } from 'motion/react'; import { apiFetch } from '@/lib/api-client'; import { ToggleChipBar } from '@/components/toggle-chip-bar'; import { getCuisineOptions } from '@/lib/cuisine'; import { LanguageSwitch } from '@/components/language-switch'; import { TutorialOverlay } from '@/components/tutorial-overlay'; import { useTranslation } from '@/lib/i18n/context'; import { usePageTitle } from '@/lib/use-page-title'; import { PwaInstallBanner } from '@/components/pwa-install-banner'; import { useNavVisibility } from '@/components/nav-visibility'; import { getStoredDisplayName, setStoredDisplayName, getStoredLastCity, setStoredLastCity, getActiveSession, } from '@/lib/storage'; type Screen = 'intro' | 'create'; type JoinStep = 'code' | 'name'; const CREATE_STEPS = 3; const DEFAULT_CITY = 'Karlsruhe'; const DEFAULT_RADIUS_KM = 5; /** * Animierter Karten-Stapel als neues Hero-Visual - ersetzt das vorherige * statische Logo-Icon neben dem "Yumder"-Schriftzug. Faechert bei Hover * per CSS auf (siehe .card-stack-Regeln in globals.css), um die * Kernmechanik (Swipen fuer Essen) schon vor dem ersten Tap visuell zu * kommunizieren. Farben bewusst aus unseren bestehenden Tailwind-Tokens * (yumder-pink/yumder-teal/neutral-*) statt der zinc-*-Klassen aus der * urspruenglichen Mockup-Vorlage. */ function SwipeCardStackHero() { return (
); } export function HomeClient() { const router = useRouter(); const { t, locale } = useTranslation(); const cuisineOptions = getCuisineOptions(locale); const { setHidden } = useNavVisibility(); // BUGFIX (i18n-Nachtrag): der Tab-Titel kam bisher NUR aus der statischen // metadata in app/page.tsx (server-seitig, kennt die Sprache nicht) - war // fuer EN-Nutzer:innen also immer "Start · Yumder" statt "Home · Yumder". // usePageTitle() ueberschreibt document.title clientseitig, sobald t // bekannt ist, analog zum -Fix. usePageTitle(t.home.pageTitle); const [screen, setScreen] = useState('intro'); const [step, setStep] = useState(1); // Aktive Teilnahme erkennen, um auf der Startseite einen "Weiter swipen"- // Button anzubieten (statt nur Starten/Beitreten). Window-sicher, wird // nach dem Mount gesetzt. const [resumeCode, setResumeCode] = useState(null); useEffect(() => { const active = getActiveSession(); if (active.participantId && active.code) { setResumeCode(active.code); } }, []); // Bottom-Navigation waehrend des Erstellen-Wizards (screen === 'create') // ausblenden, damit der mehrstufige Flow fokussiert bleibt. Beim Verlassen // des Wizards bzw. der Seite wird die Nav wieder eingeblendet. useEffect(() => { setHidden(screen === 'create'); return () => setHidden(false); }, [screen, setHidden]); // UPDATE: "So geht\'s"-Button oben links oeffnet das bestehende // TutorialOverlay direkt vom Start-Screen aus. Der frueher zusaetzliche // automatische Aufruf nach Erstellen/Beitreten (yumder_show_tutorial-Flag) // wurde am 13.08. entfernt - Tutorial startet jetzt ausschliesslich // manuell ueber diesen Button. const [showTutorial, setShowTutorial] = useState(false); // UPDATE (v3): "Session beitreten" ist kein eigener Screen mehr, sondern // klappt sich INLINE unterhalb des Buttons auf. Zwei-Schritt-Flow: erst // Code (joinStep 'code'), nach Bestaetigung per Pfeil/Enter DANN erst das // Namensfeld (joinStep 'name'). const [isJoinMode, setIsJoinMode] = useState(false); const [joinStep, setJoinStep] = useState('code'); const [displayName, setDisplayName] = useState(getStoredDisplayName() ?? ''); const [city, setCity] = useState(getStoredLastCity() ?? DEFAULT_CITY); const [cityTouched, setCityTouched] = useState(false); const [radiusKm, setRadiusKm] = useState(DEFAULT_RADIUS_KM); const [cuisineTags, setCuisineTags] = useState([]); const [excludeFastFood, setExcludeFastFood] = useState(true); const [spinningWheel, setSpinningWheel] = useState(false); const [joinCode, setJoinCode] = useState(''); const [loading, setLoading] = useState(false); // BUGFIX (13.08.): eigener Loading-State fuer die Code-Vorabpruefung, // getrennt von "loading" (das fuer den Namens-Schritt/Create genutzt wird) // - so bleibt der Namens-Schritt-Button unberuehrt, waehrend der // Code-Schritt seinen eigenen Spinner zeigt. const [checkingCode, setCheckingCode] = useState(false); const [error, setError] = useState(null); const joinCodeInputRef = useRef(null); const joinNameInputRef = useRef(null); const nameTrimmed = displayName.trim(); const cityTitle = nameTrimmed ? t.home.step2TitleWithName(nameTrimmed) : t.home.step2TitleNoName; function toggleCuisine(value: string) { setCuisineTags((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value] ); } function spinCuisineWheel() { if (spinningWheel) return; setSpinningWheel(true); const randomIndex = Math.floor(Math.random() * cuisineOptions.length); const picked = cuisineOptions[randomIndex]; setTimeout(() => { setCuisineTags([picked.value]); setSpinningWheel(false); }, 600); } function goIntro() { setScreen('intro'); setStep(1); setIsJoinMode(false); setJoinStep('code'); setError(null); } function startCreate() { setScreen('create'); setStep(1); setError(null); } function openJoinInline() { setIsJoinMode(true); setJoinStep('code'); setError(null); } function closeJoinInline() { setIsJoinMode(false); setJoinStep('code'); setJoinCode(''); setError(null); } // BUGFIX (13.08.): Vorher wurde beim Bestaetigen des Codes NUR geprueft, // ob das Feld nicht leer ist, und direkt zum Namens-Schritt gewechselt. // Existierte die Session gar nicht, kam der Fehler "Session nicht // gefunden" erst NACH der Namenseingabe (Join-API-Call in handleJoin) - // Nutzer musste zurueckspringen. Jetzt: Session-Existenz vorab pruefen // (per bestehender, nebenwirkungsfreier Poll-Route), erst bei Erfolg // zum Namens-Schritt wechseln. async function submitJoinCode() { if (!joinCode.trim() || checkingCode) return; setError(null); setCheckingCode(true); try { const code = joinCode.toUpperCase().trim(); await apiFetch(`/api/session/${code}/poll`); setJoinStep('name'); } catch (e: unknown) { setError(e instanceof Error ? e.message : t.common.errorJoinDefault); } finally { setCheckingCode(false); } } function backToCodeStep() { setJoinStep('code'); setError(null); } function handleJoinCodeKeyDown(e: React.KeyboardEvent) { if (e.key === 'Enter' && !checkingCode) { e.preventDefault(); submitJoinCode(); } } function handleJoinNameKeyDown(e: React.KeyboardEvent) { if (e.key === 'Enter' && !loading) { e.preventDefault(); handleJoin(); } } function goToStep2() { setError(null); setStep(2); } function goToStep3() { if (!city.trim()) return; setError(null); setStep(3); } function handleStep1KeyDown(e: React.KeyboardEvent) { if (e.key === 'Enter') { e.preventDefault(); goToStep2(); } } function handleStep2KeyDown(e: React.KeyboardEvent) { if (e.key === 'Enter') { e.preventDefault(); goToStep3(); } } function onCityFocus(e: React.FocusEvent) { if (!cityTouched) e.target.select(); } function onCityChange(e: React.ChangeEvent) { if (!cityTouched) { setCityTouched(true); const native = e.nativeEvent as InputEvent; if (native.inputType === 'insertText' && native.data) { setCity(native.data); return; } } setCity(e.target.value); } async function handleCreate() { if (!city.trim() || loading) return; setLoading(true); setError(null); try { const data = await apiFetch('/api/session', { method: 'POST', body: JSON.stringify({ city: city.trim(), radiusKm, priceMin: 1, priceMax: 4, displayName: nameTrimmed || undefined, excludeFastFood, excludeChains: excludeFastFood, openNowOnly: false, cuisineTags, }), }); localStorage.setItem('yumder_anonymous_id', data.anonymousId); localStorage.setItem('yumder_participant_id', String(data.participantId)); localStorage.setItem('yumder_session_code', data.code); setStoredDisplayName(nameTrimmed); setStoredLastCity(city.trim()); router.push(`/session/${data.code}`); } catch (e: unknown) { setError(e instanceof Error ? e.message : t.home.errorCreateDefault); } finally { setLoading(false); } } async function handleJoin() { if (!joinCode.trim() || loading) return; setLoading(true); setError(null); try { const code = joinCode.toUpperCase().trim(); const data = await apiFetch(`/api/session/${code}/join`, { method: 'POST', body: JSON.stringify({ displayName }), }); localStorage.setItem('yumder_anonymous_id', data.anonymousId); localStorage.setItem('yumder_participant_id', String(data.participantId)); localStorage.setItem('yumder_session_code', code); setStoredDisplayName(displayName.trim()); router.push(`/session/${code}`); } catch (e: unknown) { setError(e instanceof Error ? e.message : t.common.errorJoinDefault); } finally { setLoading(false); } } return (
{/* UPDATE: "So geht\'s"-Button links (oeffnet TutorialOverlay direkt), Language-Toggle bleibt rechts. Das Settings-Zahnrad aus dem v3- Mockup wird weiterhin bewusst NICHT gerendert - es gibt aktuell keine Einstellungen, die es oeffnen wuerde. */}
{/* UPDATE: Animierter Karten-Stapel ersetzt das vorherige statische Logo-Icon (img/logo.svg) - jetzt vertikal ueber dem Schriftzug statt daneben, siehe SwipeCardStackHero oben. */}

Yumder

{screen === 'intro' && (

{t.home.introSubtitle}

)} {screen === 'create' && (
{Array.from({ length: CREATE_STEPS }, (_, i) => { const n = i + 1; const active = n === step; const done = n < step; return (
); })}
)} {screen === 'intro' && ( {resumeCode && ( {t.home.resumeButton} )} {t.home.startSessionButton} {!isJoinMode ? ( {t.home.joinSessionButton} ) : ( {joinStep === 'code' ? ( setJoinCode(e.target.value)} onKeyDown={handleJoinCodeKeyDown} disabled={checkingCode} autoFocus className="w-full bg-neutral-900 border border-yumder-teal/50 focus:border-yumder-teal text-white font-bold text-center text-lg py-3.5 pl-10 pr-14 rounded-xl outline-none transition-colors placeholder:font-normal placeholder:text-neutral-600 uppercase tracking-widest disabled:opacity-60" /> {checkingCode ? ( ) : ( )} ) : (
{joinCode.toUpperCase()}
setDisplayName(e.target.value)} onKeyDown={handleJoinNameKeyDown} autoFocus className="w-full bg-neutral-900 rounded-xl px-4 py-3 pr-14 border border-yumder-pink/40 focus:border-yumder-pink outline-none transition-colors text-neutral-100" /> {loading ? ( ) : ( )}
)} {error && ( {error} )} )} )} {screen === 'create' && ( {step === 1 && (

{t.home.step1Title}

{t.home.step1Subtitle}

setDisplayName(e.target.value)} onKeyDown={handleStep1KeyDown} autoComplete="nickname" className="bg-neutral-800 rounded-xl px-4 py-3 border border-white/5 focus:border-yumder-pink/60 outline-none transition-colors" />
{t.common.next}
)} {step === 2 && (

{cityTitle}

{t.home.step2Subtitle}

setRadiusKm(Number(e.target.value))} className="flex-1 accent-yumder-pink" /> {radiusKm} km
{t.common.next}
)} {step === 3 && (

{t.home.step3Title}

{t.home.step3Subtitle}

{t.home.cuisineLabel}

{t.home.diceButton} } />
{t.home.excludeFastFoodLabel} {excludeFastFood ? t.home.excludeFastFoodExcluded : t.home.excludeFastFoodAllowed}
{loading ? t.home.creatingButton : t.home.createButton}
)} {error && ( {error} )} )} setShowTutorial(false)} />
); }