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/spreadsheet-import/components/SpreadSheetImportModalWrapper.tsx

@@ -0,0 +1,56 @@
+import styled from '@emotion/styled';
+
+import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
+
+import { Modal } from '@/ui/layout/modal/components/Modal';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { SpreadSheetImportModalCloseButton } from './SpreadSheetImportModalCloseButton';
+
+const StyledModal = styled(Modal)`
+  height: 61%;
+  min-height: 600px;
+  min-width: 800px;
+  padding: 0;
+  position: relative;
+  width: 63%;
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    min-width: auto;
+    min-height: auto;
+    width: 100%;
+    height: 80%;
+  }
+`;
+
+const StyledRtlLtr = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+`;
+
+type SpreadSheetImportModalWrapperProps = {
+  children: React.ReactNode;
+  modalId: string;
+  onClose?: () => void;
+};
+
+export const SpreadSheetImportModalWrapper = ({
+  modalId,
+  children,
+  onClose,
+}: SpreadSheetImportModalWrapperProps) => {
+  const { rtl } = useSpreadsheetImportInternal();
+
+  return (
+    <StyledModal
+      size="large"
+      modalId={modalId}
+      isClosable={true}
+      onClose={onClose}
+    >
+      <StyledRtlLtr dir={rtl ? 'rtl' : 'ltr'}>
+        <SpreadSheetImportModalCloseButton onClose={onClose} />
+        {children}
+      </StyledRtlLtr>
+    </StyledModal>
+  );
+};