Remove recoil sync (#11569)

Recoil-sync was causing issues with Firefox, replacing it with a simpler
mechanism to hydrate variables on page load

---------

Co-authored-by: etiennejouan <jouan.etienne@gmail.com>

packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx

@@ -174,7 +174,6 @@ export type ModalProps = React.PropsWithChildren & {
   className?: string;
   hotkeyScope?: ModalHotkeyScope;
   onEnter?: () => void;
-  isOpenAnimated?: boolean;
   modalVariant?: ModalVariants;
 } & (
     | { isClosable: true; onClose: () => void }
@@ -197,7 +196,6 @@ export const Modal = ({
   isClosable = false,
   onClose,
   modalVariant = 'primary',
-  isOpenAnimated = true,
 }: ModalProps) => {
   const isMobile = useIsMobile();
   const modalRef = useRef<HTMLDivElement>(null);
@@ -263,7 +261,7 @@ export const Modal = ({
         ref={modalRef}
         size={size}
         padding={padding}
-        initial={isOpenAnimated ? 'hidden' : 'visible'}
+        initial="hidden"
         animate="visible"
         exit="exit"
         layout

packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx

@@ -1,5 +1,4 @@
 import { AuthModal } from '@/auth/components/AuthModal';
-import { animateModalState } from '@/auth/states/animateModalState';
 import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
 import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { AppFullScreenErrorFallback } from '@/error-handler/components/AppFullScreenErrorFallback';
@@ -19,7 +18,6 @@ import { Global, css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import { Outlet } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
 import { useScreenSize } from 'twenty-ui/utilities';
 
 const StyledLayout = styled.div`
@@ -65,7 +63,6 @@ export const DefaultLayout = () => {
   const windowsWidth = useScreenSize().width;
   const showAuthModal = useShowAuthModal();
   const useShowFullScreen = useShowFullscreen();
-  const animateModal = useRecoilValue(animateModalState);
 
   return (
     <>
@@ -111,7 +108,7 @@ export const DefaultLayout = () => {
                 </StyledMainContainer>
                 <AnimatePresence mode="wait">
                   <LayoutGroup>
-                    <AuthModal isOpenAnimated={animateModal}>
+                    <AuthModal>
                       <Outlet />
                     </AuthModal>
                   </LayoutGroup>