Group guest v2 fab controls

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

@@ -7,12 +7,17 @@ type FloatingActionButtonProps = {
   onPress: () => void;
   onLongPress?: () => void;
   hidden?: boolean;
+  inline?: boolean;
 };
 
-export default function FloatingActionButton({ onPress, onLongPress, hidden = false }: FloatingActionButtonProps) {
+export default function FloatingActionButton({ onPress, onLongPress, hidden = false, inline = false }: FloatingActionButtonProps) {
   const longPressTriggered = React.useRef(false);
   const { isDark } = useGuestThemeVariant();
-  const translateValue = hidden ? 'translateX(-50%) translateY(36px) scale(0.72)' : 'translateX(-50%)';
+  const translateValue = inline
+    ? 'none'
+    : hidden
+      ? 'translateX(-50%) translateY(36px) scale(0.72)'
+      : 'translateX(-50%)';
 
   return (
     <Button
@@ -33,9 +38,9 @@ export default function FloatingActionButton({ onPress, onLongPress, hidden = fa
         longPressTriggered.current = true;
         onLongPress();
       }}
-      position="fixed"
-      bottom={20}
-      left="50%"
+      position={inline ? 'relative' : 'fixed'}
+      bottom={inline ? undefined : 20}
+      left={inline ? undefined : '50%'}
       zIndex={1100}
       width={68}
       height={68}
@@ -51,7 +56,7 @@ export default function FloatingActionButton({ onPress, onLongPress, hidden = fa
       pointerEvents={hidden ? 'none' : 'auto'}
       style={{
         transform: translateValue,
-        transition: 'transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms ease',
+        transition: inline ? undefined : '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)',