Refactor modal (#18377)

## Summary

- Move Modal UI components (`Modal`, `ModalContent`, `ModalHeader`,
`ModalFooter`, `ModalBackdrop`) from `twenty-front` to `twenty-ui` as
stateless, reusable components
- Create `ModalStatefulWrapper` in `twenty-front` that connects Jotai
state (`isModalOpenedComponentState`) to the stateless `Modal` via an
`isOpen` prop
- Rename `modalVariant` prop to `overlay` with clearer values: `'dark'`
(default), `'light'` (in-container), `'transparent'` (invisible panel).
Remove unused `'medium'` overlay
- Rename `modalId` to `modalInstanceId` across the entire modal zone
(~30 consumer files)
- Extract `ModalProps` to its own file in
`twenty-ui/types/ModalProps.ts`; extract `ModalStatefulWrapperProps` to
its own file using `Pick<ModalProps, ...>` for shared props
- Extract `ModalBackdrop` to its own file and export from `twenty-ui`;
use it in `UserOrMetadataLoader` instead of a local styled component
- Use `ModalFooter` in `StepNavigationButton` and `ModalHeader` in
`SpreadsheetImportStepperContainer` instead of duplicated `styled.div`
definitions
- Remove unused `onClose` prop from stateless `Modal`; fix `typeof
document` guard in `ModalStatefulWrapper`
- Split shared types into individual files: `ModalSize.ts`,
`ModalPadding.ts`, `ModalOverlay.ts`
- Extract wyw profiling instrumentation from `vite.config.ts` into
reusable `createWywProfilingPlugin` with parametrized threshold and
improved logging
- Delete old `Modal.tsx`, `Modal.styles.ts`, `ModalContent.tsx`,
`ModalHeader.tsx`, `ModalFooter.tsx` from `twenty-front`
- Add comprehensive Storybook stories in `twenty-ui` covering Default,
Confirmation, Small, ExtraLarge, Closed, and Interactive variants

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminDeleteJobsConfirmationModal.tsx

@@ -2,14 +2,14 @@ import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModa
 import { plural, t } from '@lingui/core/macro';
 
 type SettingsAdminDeleteJobsConfirmationModalProps = {
-  modalId: string;
+  modalInstanceId: string;
   jobCount: number;
   onConfirm: () => void;
   onClose?: () => void;
 };
 
 export const SettingsAdminDeleteJobsConfirmationModal = ({
-  modalId,
+  modalInstanceId,
   jobCount,
   onConfirm,
   onClose,
@@ -26,7 +26,7 @@ export const SettingsAdminDeleteJobsConfirmationModal = ({
 
   return (
     <ConfirmationModal
-      modalId={modalId}
+      modalInstanceId={modalInstanceId}
       title={title}
       subtitle={subtitle}
       onConfirmClick={onConfirm}

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminQueueJobsTable.tsx

@@ -399,12 +399,12 @@ export const SettingsAdminQueueJobsTable = ({
       )}
 
       <SettingsAdminRetryJobsConfirmationModal
-        modalId={RETRY_MODAL_ID}
+        modalInstanceId={RETRY_MODAL_ID}
         jobCount={selectedCount > 0 ? selectedCount : failedJobs.length}
         onConfirm={confirmRetrySelected}
       />
       <SettingsAdminDeleteJobsConfirmationModal
-        modalId={DELETE_MODAL_ID}
+        modalInstanceId={DELETE_MODAL_ID}
         jobCount={selectedCount}
         onConfirm={confirmDeleteSelected}
       />

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminRetryJobsConfirmationModal.tsx

@@ -2,14 +2,14 @@ import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModa
 import { plural, t } from '@lingui/core/macro';
 
 type SettingsAdminRetryJobsConfirmationModalProps = {
-  modalId: string;
+  modalInstanceId: string;
   jobCount: number;
   onConfirm: () => void;
   onClose?: () => void;
 };
 
 export const SettingsAdminRetryJobsConfirmationModal = ({
-  modalId,
+  modalInstanceId,
   jobCount,
   onConfirm,
   onClose,
@@ -26,7 +26,7 @@ export const SettingsAdminRetryJobsConfirmationModal = ({
 
   return (
     <ConfirmationModal
-      modalId={modalId}
+      modalInstanceId={modalInstanceId}
       title={title}
       subtitle={subtitle}
       onConfirmClick={onConfirm}