upgrade to tamagui v2 and guest pwa overhaul

2026-02-02 13:01:20 +01:00
parent 2e78f3ab8d
commit 7c6e14ffe2
168 changed files with 47462 additions and 8914 deletions
--- a/resources/js/guest-v2/screens/ProfileSetupScreen.tsx
+++ b/resources/js/guest-v2/screens/ProfileSetupScreen.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { YStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { Input } from '@tamagui/input';
+import { Card } from '@tamagui/card';
+import { useTranslation } from '@/guest/i18n/useTranslation';
+import { useEventData } from '../context/EventDataContext';
+import { useGuestIdentity } from '../context/GuestIdentityContext';
+import { useAppearance } from '@/hooks/use-appearance';
+
+export default function ProfileSetupScreen() {
+  const { token } = useParams<{ token: string }>();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { event, status } = useEventData();
+  const identity = useGuestIdentity();
+  const { resolved } = useAppearance();
+  const isDark = resolved === 'dark';
+  const primaryText = isDark ? '#F8FAFF' : '#0F172A';
+  const mutedText = isDark ? 'rgba(226, 232, 240, 0.7)' : 'rgba(15, 23, 42, 0.6)';
+  const cardBackground = isDark ? 'rgba(15, 23, 42, 0.75)' : 'rgba(255, 255, 255, 0.9)';
+  const cardBorder = isDark ? 'rgba(148, 163, 184, 0.18)' : 'rgba(15, 23, 42, 0.12)';
+  const [nameDraft, setNameDraft] = React.useState(identity.name ?? '');
+  const [saving, setSaving] = React.useState(false);
+
+  React.useEffect(() => {
+    if (identity.hydrated) {
+      setNameDraft(identity.name ?? '');
+    }
+  }, [identity.hydrated, identity.name]);
+
+  const handleSubmit = React.useCallback(() => {
+    if (!token) {
+      return;
+    }
+    const trimmed = nameDraft.trim();
+    if (!trimmed) {
+      return;
+    }
+    setSaving(true);
+    identity.setName(trimmed);
+    navigate(`/e/${encodeURIComponent(token)}`);
+  }, [identity, nameDraft, navigate, token]);
+
+  if (status === 'loading' || status === 'idle') {
+    return (
+      <YStack flex={1} minHeight="100vh" justifyContent="center" padding="$5" backgroundColor={isDark ? '#0B101E' : '#FFF8F5'}>
+        <Text color={mutedText}>{t('profileSetup.loading')}</Text>
+      </YStack>
+    );
+  }
+
+  if (!event) {
+    return (
+      <YStack flex={1} minHeight="100vh" justifyContent="center" padding="$5" backgroundColor={isDark ? '#0B101E' : '#FFF8F5'}>
+        <Text color="#FCA5A5">{t('profileSetup.error.default')}</Text>
+        <Button onPress={() => navigate('/event')} marginTop="$3">
+          {t('profileSetup.error.backToStart')}
+        </Button>
+      </YStack>
+    );
+  }
+
+  return (
+    <YStack flex={1} minHeight="100vh" padding="$5" justifyContent="center" backgroundColor={isDark ? '#0B101E' : '#FFF8F5'}>
+      <YStack gap="$5" maxWidth={420} width="100%" alignSelf="center">
+        <YStack gap="$2">
+          <Text fontSize="$7" fontFamily="$display" fontWeight="$9" color={primaryText}>
+            {event.name}
+          </Text>
+          <Text color={mutedText}>
+            {t('profileSetup.card.description')}
+          </Text>
+        </YStack>
+
+        <Card padding="$4" backgroundColor={cardBackground} borderColor={cardBorder} borderWidth={1}>
+          <YStack gap="$3">
+            <Text color={mutedText} fontSize="$3">
+              {t('profileSetup.form.label')}
+            </Text>
+            <Input
+              value={nameDraft}
+              onChangeText={setNameDraft}
+              placeholder={t('profileSetup.form.placeholder')}
+              backgroundColor={isDark ? 'rgba(15, 23, 42, 0.6)' : 'rgba(15, 23, 42, 0.05)'}
+              borderColor={cardBorder}
+              color={primaryText}
+            />
+            <Button
+              onPress={handleSubmit}
+              disabled={!nameDraft.trim() || saving}
+              backgroundColor="$primary"
+              color="#FFFFFF"
+            >
+              {saving ? t('profileSetup.form.submitting') : t('profileSetup.form.submit')}
+            </Button>
+          </YStack>
+        </Card>
+      </YStack>
+    </YStack>
+  );
+}