Revamp guest v2 upload camera controls

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

@@ -32,6 +32,7 @@ export default function AppShell({ children }: AppShellProps) {
   const { isDark } = useGuestThemeVariant();
   const actionIconColor = isDark ? '#F8FAFF' : '#0F172A';
   const matomoEnabled = typeof window !== 'undefined' && Boolean((window as any).__MATOMO_GUEST__?.enabled);
+  const isUploadRoute = /\/upload(?:\/|$)/.test(location.pathname);
   const showFab = !/\/photo\/\d+/.test(location.pathname);
 
   const goTo = (path: string) => () => {
@@ -145,13 +146,14 @@ export default function AppShell({ children }: AppShellProps) {
             </Button>
             <FloatingActionButton
               onPress={goTo('/upload')}
+              hidden={isUploadRoute}
             />
             <Button
               size="$4"
               circular
               position="fixed"
               bottom={28}
-              left="calc(50% + 52px)"
+              right={20}
               zIndex={1100}
               backgroundColor={isDark ? 'rgba(12, 16, 32, 0.75)' : 'rgba(255, 255, 255, 0.9)'}
               borderWidth={1}

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

@@ -6,11 +6,13 @@ import { useGuestThemeVariant } from '../lib/guestTheme';
 type FloatingActionButtonProps = {
   onPress: () => void;
   onLongPress?: () => void;
+  hidden?: boolean;
 };
 
-export default function FloatingActionButton({ onPress, onLongPress }: FloatingActionButtonProps) {
+export default function FloatingActionButton({ onPress, onLongPress, hidden = false }: FloatingActionButtonProps) {
   const longPressTriggered = React.useRef(false);
   const { isDark } = useGuestThemeVariant();
+  const translateValue = hidden ? 'translateX(-50%) translateY(36px) scale(0.72)' : 'translateX(-50%)';
 
   return (
     <Button
@@ -45,8 +47,11 @@ export default function FloatingActionButton({ onPress, onLongPress }: FloatingA
       shadowOpacity={0.5}
       shadowRadius={22}
       shadowOffset={{ width: 0, height: 10 }}
+      opacity={hidden ? 0 : 1}
+      pointerEvents={hidden ? 'none' : 'auto'}
       style={{
-        transform: 'translateX(-50%)',
+        transform: translateValue,
+        transition: 'transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms ease',
         boxShadow: isDark
           ? '0 20px 40px rgba(255, 79, 216, 0.38), 0 0 0 8px rgba(255, 79, 216, 0.16)'
           : '0 18px 32px rgba(15, 23, 42, 0.2), 0 0 0 8px rgba(255, 255, 255, 0.7)',