upgrade to tamagui v2 and guest pwa overhaul

This commit is contained in:
Codex Agent
2026-02-02 13:01:20 +01:00
parent 2e78f3ab8d
commit 7c6e14ffe2
168 changed files with 47462 additions and 8914 deletions

View File

@@ -191,15 +191,15 @@ export default function MobileEventPhotoboothPage() {
) : null}
{loading ? (
<YStack space="$2">
<YStack gap="$2">
{Array.from({ length: 3 }).map((_, idx) => (
<SkeletonCard key={`ph-skel-${idx}`} height={110} />
))}
</YStack>
) : (
<YStack space="$2">
<MobileCard space="$3">
<YStack space="$1">
<YStack gap="$2">
<MobileCard gap="$3">
<YStack gap="$1">
<Text fontSize="$sm" fontWeight="800" color={text}>
{t('photobooth.steps.activate.title', '1. Photobooth aktivieren')}
</Text>
@@ -207,7 +207,7 @@ export default function MobileEventPhotoboothPage() {
{t('photobooth.steps.activate.description', 'Schalte den Upload-Zugang fuer dieses Event frei.')}
</Text>
</YStack>
<XStack alignItems="center" justifyContent="space-between" space="$3" flexWrap="wrap">
<XStack alignItems="center" justifyContent="space-between" gap="$3" flexWrap="wrap">
<PillBadge tone={isActive ? 'success' : 'warning'}>
{isActive ? t('photobooth.status.badgeActive', 'ACTIVE') : t('photobooth.status.badgeInactive', 'INACTIVE')}
</PillBadge>
@@ -215,7 +215,7 @@ export default function MobileEventPhotoboothPage() {
{t('photobooth.mode.active', 'Current: {{mode}}', { mode: modeLabel })}
</Text>
</XStack>
<XStack space="$2" marginTop="$2">
<XStack gap="$2" marginTop="$2">
<CTAButton
label={isActive ? t('photobooth.actions.disable', 'Disable uploads') : t('photobooth.actions.enable', 'Enable uploads')}
onPress={() => (isActive ? handleDisable() : handleEnable())}
@@ -237,8 +237,8 @@ export default function MobileEventPhotoboothPage() {
</XStack>
</MobileCard>
<MobileCard space="$3">
<YStack space="$1">
<MobileCard gap="$3">
<YStack gap="$1">
<Text fontSize="$sm" fontWeight="800" color={text}>
{t('photobooth.steps.download.title', '2. Uploader App herunterladen')}
</Text>
@@ -249,7 +249,7 @@ export default function MobileEventPhotoboothPage() {
)}
</Text>
</YStack>
<XStack space="$2" marginTop="$2" flexWrap="wrap">
<XStack gap="$2" marginTop="$2" flexWrap="wrap">
<CTAButton
label={t('photobooth.uploaderDownload.actionWindows', 'Uploader herunterladen (Windows)')}
onPress={() => {
@@ -278,7 +278,7 @@ export default function MobileEventPhotoboothPage() {
fullWidth={false}
/>
</XStack>
<XStack space="$2" marginTop="$2">
<XStack gap="$2" marginTop="$2">
<CTAButton
label={
sendingEmail
@@ -294,8 +294,8 @@ export default function MobileEventPhotoboothPage() {
</XStack>
</MobileCard>
<MobileCard space="$3">
<YStack space="$1">
<MobileCard gap="$3">
<YStack gap="$1">
<Text fontSize="$sm" fontWeight="800" color={text}>
{t('photobooth.steps.access.title', '3. Verbindungscode erstellen')}
</Text>
@@ -303,7 +303,7 @@ export default function MobileEventPhotoboothPage() {
{t('photobooth.steps.access.description', 'Der Code verbindet die App sicher mit deinem Event.')}
</Text>
</YStack>
<XStack space="$2" marginTop="$2">
<XStack gap="$2" marginTop="$2">
<CTAButton
label={
connectLoading
@@ -326,7 +326,7 @@ export default function MobileEventPhotoboothPage() {
fullWidth={false}
/>
</XStack>
<YStack space="$2" marginTop="$2">
<YStack gap="$2" marginTop="$2">
{connectCode ? (
<CredentialRow label={t('photobooth.connectCode.label', 'Connect code')} value={connectCode} border={border} />
) : null}
@@ -338,7 +338,7 @@ export default function MobileEventPhotoboothPage() {
</Text>
) : null}
{showCredentials ? (
<YStack space="$1">
<YStack gap="$1">
<CredentialRow label={t('photobooth.credentials.postUrl', 'Upload URL')} value={uploadUrl ?? '—'} border={border} />
<CredentialRow label={t('photobooth.credentials.username', 'Username')} value={username ?? '—'} border={border} />
<CredentialRow label={t('photobooth.credentials.password', 'Password')} value={password ?? '—'} border={border} masked />
@@ -354,11 +354,11 @@ export default function MobileEventPhotoboothPage() {
</YStack>
</MobileCard>
<MobileCard space="$2">
<MobileCard gap="$2">
<Text fontSize="$sm" fontWeight="700" color={text}>
{t('photobooth.status.heading', 'Status')}
</Text>
<YStack space="$1">
<YStack gap="$1">
<StatusRow icon={<ShieldCheck size={16} color={text} />} label={t('photobooth.status.mode', 'Mode')} value={modeLabel} />
<StatusRow
icon={<PlugZap size={16} color={text} />}
@@ -437,7 +437,7 @@ function StatusRow({ icon, label, value }: { icon: React.ReactNode; label: strin
const { text } = useAdminTheme();
return (
<XStack alignItems="center" justifyContent="space-between">
<XStack alignItems="center" space="$2">
<XStack alignItems="center" gap="$2">
{icon}
<Text fontSize="$sm" color={text}>
{label}