Migrate billing from Paddle to Lemon Squeezy

resources/js/guest-v2/components/AppShell.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { YStack } from '@tamagui/stacks';
-import { Trophy, UploadCloud, Sparkles, Cast, Share2, Compass, Image, Camera, Settings, Home } from 'lucide-react';
+import { Button } from '@tamagui/button';
+import { Sparkles, Share2, Compass, Image, Camera, Settings, Home } from 'lucide-react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import TopBar from './TopBar';
-import BottomDock from './BottomDock';
 import FloatingActionButton from './FloatingActionButton';
-import FabActionSheet from './FabActionSheet';
+import FabActionRing from './FabActionRing';
 import CompassHub, { type CompassAction } from './CompassHub';
 import AmbientBackground from './AmbientBackground';
 import NotificationSheet from './NotificationSheet';
@@ -22,7 +22,7 @@ type AppShellProps = {
 };
 
 export default function AppShell({ children }: AppShellProps) {
-  const [sheetOpen, setSheetOpen] = React.useState(false);
+  const [fabOpen, setFabOpen] = React.useState(false);
   const [compassOpen, setCompassOpen] = React.useState(false);
   const [notificationsOpen, setNotificationsOpen] = React.useState(false);
   const [settingsOpen, setSettingsOpen] = React.useState(false);
@@ -38,100 +38,24 @@ export default function AppShell({ children }: AppShellProps) {
   const showFab = !/\/photo\/\d+/.test(location.pathname);
 
   const goTo = (path: string) => () => {
-    setSheetOpen(false);
+    setFabOpen(false);
     setCompassOpen(false);
     setNotificationsOpen(false);
     setSettingsOpen(false);
-    navigate(buildEventPath(token, path));
-  };
-
-  const openSheet = () => {
-    setCompassOpen(false);
-    setNotificationsOpen(false);
-    setSettingsOpen(false);
-    setSheetOpen(true);
+    const target = buildEventPath(token, path);
+    if (location.pathname === target) {
+      return;
+    }
+    navigate(target);
   };
 
   const openCompass = () => {
-    setSheetOpen(false);
+    setFabOpen(false);
     setNotificationsOpen(false);
     setSettingsOpen(false);
     setCompassOpen(true);
   };
 
-  const actions = [
-    {
-      key: 'upload',
-      label: t('appShell.actions.upload.label', 'Upload / Take photo'),
-      description: t('appShell.actions.upload.description', 'Add a moment from your device or camera.'),
-      icon: <UploadCloud size={18} color={actionIconColor} />,
-      onPress: goTo('/upload'),
-    },
-    {
-      key: 'compass',
-      label: t('appShell.actions.compass.label', 'Compass hub'),
-      description: t('appShell.actions.compass.description', 'Quick jump to key areas.'),
-      icon: <Compass size={18} color={actionIconColor} />,
-      onPress: () => {
-        setSheetOpen(false);
-        openCompass();
-      },
-    },
-    tasksEnabled
-      ? {
-          key: 'task',
-          label: t('appShell.actions.task.label', 'Start a task'),
-          description: t('appShell.actions.task.description', 'Pick a challenge and capture it now.'),
-          icon: <Sparkles size={18} color={actionIconColor} />,
-          onPress: goTo('/tasks'),
-        }
-      : null,
-    {
-      key: 'live',
-      label: t('appShell.actions.live.label', 'Live show'),
-      description: t('appShell.actions.live.description', 'See the real-time highlight stream.'),
-      icon: <Cast size={18} color={actionIconColor} />,
-      onPress: () => {
-        setSheetOpen(false);
-        setCompassOpen(false);
-        setNotificationsOpen(false);
-        setSettingsOpen(false);
-        if (token) {
-          navigate(`/show/${encodeURIComponent(token)}`);
-        }
-      },
-    },
-    {
-      key: 'slideshow',
-      label: t('appShell.actions.slideshow.label', 'Slideshow'),
-      description: t('appShell.actions.slideshow.description', 'Lean back and watch the gallery roll.'),
-      icon: <Image size={18} color={actionIconColor} />,
-      onPress: goTo('/slideshow'),
-    },
-    {
-      key: 'share',
-      label: t('appShell.actions.share.label', 'Share invite'),
-      description: t('appShell.actions.share.description', 'Send the event link or QR code.'),
-      icon: <Share2 size={18} color={actionIconColor} />,
-      onPress: goTo('/share'),
-    },
-    tasksEnabled
-      ? {
-          key: 'achievements',
-          label: t('appShell.actions.achievements.label', 'Achievements'),
-          description: t('appShell.actions.achievements.description', 'Track your photo streaks.'),
-          icon: <Trophy size={18} color={actionIconColor} />,
-          onPress: goTo('/achievements'),
-        }
-      : null,
-  ].filter(Boolean) as Array<{
-    key: string;
-    label: string;
-    description: string;
-    icon: React.ReactNode;
-    onPress?: () => void;
-  }>;
-
   const compassQuadrants: [CompassAction, CompassAction, CompassAction, CompassAction] = [
     {
       key: 'home',
@@ -166,6 +90,13 @@ export default function AppShell({ children }: AppShellProps) {
     },
   ];
 
+  const fabActions = compassQuadrants.map((action) => ({
+    key: action.key,
+    label: action.label,
+    icon: action.icon,
+    onPress: action.onPress,
+  }));
+
   return (
     <AmbientBackground>
       <YStack minHeight="100vh" position="relative">
@@ -176,23 +107,23 @@ export default function AppShell({ children }: AppShellProps) {
           right={0}
           zIndex={1000}
           style={{
-            backgroundColor: isDark ? 'rgba(10, 14, 28, 0.72)' : 'rgba(255, 255, 255, 0.85)',
-            backdropFilter: 'saturate(160%) blur(18px)',
-            WebkitBackdropFilter: 'saturate(160%) blur(18px)',
+            backgroundColor: 'transparent',
+            backdropFilter: 'saturate(120%) blur(8px)',
+            WebkitBackdropFilter: 'saturate(120%) blur(8px)',
           }}
         >
           <TopBar
             eventName={event?.name ?? t('galleryPage.hero.eventFallback', 'Event')}
             onProfilePress={() => {
               setNotificationsOpen(false);
-              setSheetOpen(false);
               setCompassOpen(false);
+              setFabOpen(false);
               setSettingsOpen(true);
             }}
             onNotificationsPress={() => {
               setSettingsOpen(false);
-              setSheetOpen(false);
               setCompassOpen(false);
+              setFabOpen(false);
               setNotificationsOpen(true);
             }}
             notificationCount={notificationCenter?.unreadCount ?? 0}
@@ -204,18 +135,58 @@ export default function AppShell({ children }: AppShellProps) {
           gap="$4"
           position="relative"
           zIndex={1}
-          style={{ paddingTop: '88px', paddingBottom: '128px' }}
+          style={{ paddingTop: '88px', paddingBottom: '112px' }}
         >
           {children}
         </YStack>
-        {showFab ? <FloatingActionButton onPress={openSheet} onLongPress={openCompass} /> : null}
-        <BottomDock />
-        <FabActionSheet
-          open={sheetOpen}
-          onOpenChange={(next) => setSheetOpen(next)}
-          title={t('appShell.fab.title', 'Create a moment')}
-          actions={actions}
-        />
+        {showFab ? (
+          <>
+            <Button
+              size="$3"
+              circular
+              position="fixed"
+              bottom={28}
+              left="calc(50% - 84px)"
+              zIndex={1100}
+              backgroundColor={isDark ? 'rgba(12, 16, 32, 0.75)' : 'rgba(255, 255, 255, 0.9)'}
+              borderWidth={1}
+              borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.12)'}
+              onPress={goTo('/')}
+              style={{ boxShadow: isDark ? '0 10px 20px rgba(2, 6, 23, 0.45)' : '0 8px 16px rgba(15, 23, 42, 0.14)' }}
+            >
+              <Home size={16} color={actionIconColor} />
+            </Button>
+            <FloatingActionButton
+              onPress={() => {
+                setCompassOpen(false);
+                setNotificationsOpen(false);
+                setSettingsOpen(false);
+                setFabOpen((prev) => !prev);
+              }}
+              onLongPress={openCompass}
+            />
+            <Button
+              size="$3"
+              circular
+              position="fixed"
+              bottom={28}
+              left="calc(50% + 48px)"
+              zIndex={1100}
+              backgroundColor={isDark ? 'rgba(12, 16, 32, 0.75)' : 'rgba(255, 255, 255, 0.9)'}
+              borderWidth={1}
+              borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.12)'}
+              onPress={location.pathname.includes('/gallery') && tasksEnabled ? goTo('/tasks') : goTo('/gallery')}
+              style={{ boxShadow: isDark ? '0 10px 20px rgba(2, 6, 23, 0.45)' : '0 8px 16px rgba(15, 23, 42, 0.14)' }}
+            >
+              {location.pathname.includes('/gallery') && tasksEnabled ? (
+                <Sparkles size={16} color={actionIconColor} />
+              ) : (
+                <Image size={16} color={actionIconColor} />
+              )}
+            </Button>
+          </>
+        ) : null}
+        <FabActionRing open={fabOpen} onOpenChange={setFabOpen} actions={fabActions} />
         <CompassHub
           open={compassOpen}
           onOpenChange={setCompassOpen}