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/components/BottomDock.tsx
+++ b/resources/js/guest-v2/components/BottomDock.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { XStack, YStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { Home, Image, Share2 } from 'lucide-react';
+import { useEventData } from '../context/EventDataContext';
+import { buildEventPath } from '../lib/routes';
+import { useTranslation } from '@/guest/i18n/useTranslation';
+import { useAppearance } from '@/hooks/use-appearance';
+
+export default function BottomDock() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { token } = useEventData();
+  const { t } = useTranslation();
+  const { resolved } = useAppearance();
+  const isDark = resolved === 'dark';
+
+  const dockItems = [
+    { key: 'home', label: t('navigation.home', 'Home'), path: '/', icon: Home },
+    { key: 'gallery', label: t('navigation.gallery', 'Gallery'), path: '/gallery', icon: Image },
+    { key: 'share', label: t('navigation.share', 'Share'), path: '/share', icon: Share2 },
+  ];
+  const activeIconColor = isDark ? '#F8FAFF' : '#0F172A';
+  const inactiveIconColor = isDark ? '#94A3B8' : '#64748B';
+
+  return (
+    <XStack
+      position="fixed"
+      left={0}
+      right={0}
+      bottom={0}
+      zIndex={1000}
+      paddingHorizontal="$4"
+      paddingBottom="$3"
+      paddingTop="$2"
+      alignItems="flex-end"
+      justifyContent="space-between"
+      borderTopWidth={1}
+      borderColor="rgba(255, 255, 255, 0.08)"
+      style={{
+        paddingBottom: 'calc(12px + env(safe-area-inset-bottom))',
+        backgroundColor: isDark ? 'rgba(10, 14, 28, 0.85)' : 'rgba(255, 255, 255, 0.9)',
+        backdropFilter: 'saturate(160%) blur(18px)',
+        WebkitBackdropFilter: 'saturate(160%) blur(18px)',
+      }}
+    >
+      {dockItems.map((item) => {
+        const targetPath = buildEventPath(token, item.path);
+        const active = location.pathname === targetPath || (item.path !== '/' && location.pathname.startsWith(targetPath));
+        const Icon = item.icon;
+        return (
+          <Button
+            key={item.key}
+            unstyled
+            onPress={() => navigate(targetPath)}
+            padding="$2"
+            borderRadius="$pill"
+            backgroundColor={active ? '$surface' : 'transparent'}
+            borderWidth={active ? 1 : 0}
+            borderColor={active ? '$borderColor' : 'transparent'}
+          >
+            <YStack alignItems="center" gap="$1">
+              <Icon size={18} color={active ? activeIconColor : inactiveIconColor} />
+              <Text fontSize="$1" color={active ? '$color' : '$color'} opacity={active ? 1 : 0.6}>
+                {item.label}
+              </Text>
+            </YStack>
+          </Button>
+        );
+      })}
+    </XStack>
+  );
+}