Modal API Refactoring (#12062)

# Modal API Refactoring

This PR refactors the modal system to use an imperative approach for
setting hotkey scopes, addressing race conditions that occurred with the
previous effect-based implementation.

Fixes #11986
Closes #12087

## Key Changes:

- **New Modal API**: Introduced a `useModal` hook with `openModal`,
`closeModal`, and `toggleModal` functions, similar to the existing
dropdown API
- **Modal Identification**: Added a `modalId` prop to uniquely identify
modals
- **State Management**: Introduced `isModalOpenedComponentState` and
removed individual boolean state atoms (like
`isRemoveSortingModalOpenState`)
- **Modal Constants**: Added consistent modal ID constants (e.g.,
`FavoriteFolderDeleteModalId`, `RecordIndexRemoveSortingModalId`) for
better maintainability
- **Mount Effects**: Created mount effect components (like
`AuthModalMountEffect`) to handle initial modal opening where needed

## Implementation Details:

- Modified `Modal` and `ConfirmationModal` components to accept the new
`modalId` prop
- Added a component-state-based approach using
`ModalComponentInstanceContext` to track modal state
- Introduced imperative modal handlers that properly manage hotkey
scopes
- Components like `ActionModal` and `AttachmentList` now use the new
`useModal` hook for better control over modal state

## Benefits:

- **Race Condition Prevention**: Hotkey scopes are now set imperatively,
eliminating race conditions
- **Consistent API**: Modal and dropdown now share similar patterns,
improving developer experience

## Tests to do before merging:

1. Action Modals (Modal triggered by an action, for example the delete
action)

2. Auth Modal (`AuthModal.tsx` and `AuthModalMountEffect.tsx`)
   - Test that auth modal opens automatically on mount
   - Verify authentication flow works properly

3. Email Verification Sent Modal (in `SignInUp.tsx`)
   - Verify this modal displays correctly

4. Attachment Preview Modal (in `AttachmentList.tsx`)
   - Test opening preview modal by clicking on attachments
   - Verify close, download functionality works
   - Test modal navigation and interactions

5. Favorite Folder Delete Modal (`CurrentWorkspaceMemberFavorites.tsx`)
   - Test deletion confirmation flow
- Check that modal opens when attempting to delete folders with
favorites

6. Record Board Remove Sorting Modal (`RecordBoard.tsx` using
`RecordIndexRemoveSortingModalId`)
- Test that modal appears when trying to drag records with sorting
enabled
   - Verify sorting removal works correctly

7. Record Group Reorder Confirmation Modal
(`RecordGroupReorderConfirmationModal.tsx`)
   - Test group reordering with sorting enabled
   - Verify confirmation modal properly handles sorting removal

8. Confirmation Modal (base component used by several modals)
   - Test all variants with different confirmation options

For each modal, verify:
- Opening/closing behavior
- Hotkey support (Esc to close, Enter to confirm where applicable)
- Click outside behavior
- Proper z-index stacking
- Any modal-specific functionality

packages/twenty-front/src/modules/auth/components/AuthModal.tsx

@@ -1,3 +1,5 @@
+import { AuthModalMountEffect } from '@/auth/components/AuthModalMountEffect';
+import { AUTH_MODAL_ID } from '@/auth/constants/AuthModalId';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
@@ -13,9 +15,12 @@ type AuthModalProps = {
 };
 
 export const AuthModal = ({ children }: AuthModalProps) => (
-  <Modal padding={'none'} modalVariant="primary">
-    <ScrollWrapper componentInstanceId="scroll-wrapper-modal-content">
-      <StyledContent>{children}</StyledContent>
-    </ScrollWrapper>
-  </Modal>
+  <>
+    <AuthModalMountEffect />
+    <Modal modalId={AUTH_MODAL_ID} padding={'none'} modalVariant="primary">
+      <ScrollWrapper componentInstanceId="scroll-wrapper-modal-content">
+        <StyledContent>{children}</StyledContent>
+      </ScrollWrapper>
+    </Modal>
+  </>
 );

packages/twenty-front/src/modules/auth/components/AuthModalMountEffect.tsx

@@ -0,0 +1,14 @@
+import { useModal } from '@/ui/layout/modal/hooks/useModal';
+import { useEffect } from 'react';
+
+import { AUTH_MODAL_ID } from '../constants/AuthModalId';
+
+export const AuthModalMountEffect = () => {
+  const { openModal } = useModal();
+
+  useEffect(() => {
+    openModal(AUTH_MODAL_ID);
+  }, [openModal]);
+
+  return null;
+};

packages/twenty-front/src/modules/auth/constants/AuthModalId.ts

@@ -0,0 +1 @@
+export const AUTH_MODAL_ID = 'auth-modal';

packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx

@@ -10,7 +10,11 @@ const RenderWithModal = (
   args: React.ComponentProps<typeof EmailVerificationSent>,
 ) => {
   return (
-    <Modal padding="none" modalVariant="primary">
+    <Modal
+      modalId={'email-verification-sent-modal'}
+      padding="none"
+      modalVariant="primary"
+    >
       <Modal.Content isVerticalCentered isHorizontalCentered>
         <EmailVerificationSent email={args.email} isError={args.isError} />
       </Modal.Content>