Update guest v2 home and tasks experience

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import { YStack } from '@tamagui/stacks';
 import { Button } from '@tamagui/button';
-import { Sparkles, Share2, Compass, Image, Camera, Settings, Home } from 'lucide-react';
+import { Sparkles, Share2, Image, Camera, Settings, Home, Menu } from 'lucide-react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import TopBar from './TopBar';
 import FloatingActionButton from './FloatingActionButton';
-import FabActionRing from './FabActionRing';
 import CompassHub, { type CompassAction } from './CompassHub';
 import AmbientBackground from './AmbientBackground';
 import NotificationSheet from './NotificationSheet';
@@ -22,7 +21,6 @@ type AppShellProps = {
 };
 
 export default function AppShell({ children }: AppShellProps) {
-  const [fabOpen, setFabOpen] = React.useState(false);
   const [compassOpen, setCompassOpen] = React.useState(false);
   const [notificationsOpen, setNotificationsOpen] = React.useState(false);
   const [settingsOpen, setSettingsOpen] = React.useState(false);
@@ -37,7 +35,6 @@ export default function AppShell({ children }: AppShellProps) {
   const showFab = !/\/photo\/\d+/.test(location.pathname);
 
   const goTo = (path: string) => () => {
-    setFabOpen(false);
     setCompassOpen(false);
     setNotificationsOpen(false);
     setSettingsOpen(false);
@@ -49,10 +46,9 @@ export default function AppShell({ children }: AppShellProps) {
   };
 
   const openCompass = () => {
-    setFabOpen(false);
     setNotificationsOpen(false);
     setSettingsOpen(false);
-    setCompassOpen(true);
+    setCompassOpen((prev) => !prev);
   };
 
   const compassQuadrants: [CompassAction, CompassAction, CompassAction, CompassAction] = [
@@ -89,13 +85,6 @@ 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">
@@ -117,13 +106,11 @@ export default function AppShell({ children }: AppShellProps) {
             onProfilePress={() => {
               setNotificationsOpen(false);
               setCompassOpen(false);
-              setFabOpen(false);
               setSettingsOpen(true);
             }}
             onNotificationsPress={() => {
               setSettingsOpen(false);
               setCompassOpen(false);
-              setFabOpen(false);
               setNotificationsOpen(true);
             }}
             notificationCount={notificationCenter?.unreadCount ?? 0}
@@ -135,7 +122,7 @@ export default function AppShell({ children }: AppShellProps) {
           gap="$4"
           position="relative"
           zIndex={1}
-          style={{ paddingTop: '88px', paddingBottom: '112px' }}
+          style={{ paddingTop: '88px', paddingBottom: '142px' }}
         >
           {children}
         </YStack>
@@ -157,36 +144,27 @@ export default function AppShell({ children }: AppShellProps) {
               <Home size={16} color={actionIconColor} />
             </Button>
             <FloatingActionButton
-              onPress={() => {
-                setCompassOpen(false);
-                setNotificationsOpen(false);
-                setSettingsOpen(false);
-                setFabOpen((prev) => !prev);
-              }}
-              onLongPress={openCompass}
+              onPress={goTo('/upload')}
             />
             <Button
-              size="$3"
+              size="$4"
               circular
               position="fixed"
               bottom={28}
-              left="calc(50% + 48px)"
+              left="calc(50% + 52px)"
               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')}
+              width={54}
+              height={54}
+              onPress={openCompass}
               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} />
-              )}
+              <Menu size={18} color={actionIconColor} />
             </Button>
           </>
         ) : null}
-        <FabActionRing open={fabOpen} onOpenChange={setFabOpen} actions={fabActions} />
         <CompassHub
           open={compassOpen}
           onOpenChange={setCompassOpen}