7499 refactor right drawer to have contextual actions (#7954)

Closes #7499
- Modifies context store states to be component states
- Introduces the concept of `mainContextStore` which will dictate the
available actions inside the command K
- Adds contextual actions inside the right drawer
- Creates a new type of modal variant

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

@@ -7,7 +7,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import { Button, ButtonAccent } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 
-import { Modal } from '@/ui/layout/modal/components/Modal';
+import { Modal, ModalVariants } from '@/ui/layout/modal/components/Modal';
 import {
   Section,
   SectionAlignment,
@@ -26,6 +26,7 @@ export type ConfirmationModalProps = {
   confirmationValue?: string;
   confirmButtonAccent?: ButtonAccent;
   AdditionalButtons?: React.ReactNode;
+  modalVariant?: ModalVariants;
 };
 
 const StyledConfirmationModal = styled(Modal)`
@@ -71,6 +72,7 @@ export const ConfirmationModal = ({
   confirmationPlaceholder,
   confirmButtonAccent = 'danger',
   AdditionalButtons,
+  modalVariant = 'primary',
 }: ConfirmationModalProps) => {
   const [inputConfirmationValue, setInputConfirmationValue] =
     useState<string>('');
@@ -113,6 +115,7 @@ export const ConfirmationModal = ({
             onEnter={handleEnter}
             isClosable={true}
             padding="large"
+            modalVariant={modalVariant}
           >
             <StyledCenteredTitle>
               <H1Title title={title} fontColor={H1TitleFontColor.Primary} />

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

@@ -94,7 +94,9 @@ const StyledBackDrop = styled(motion.div)<{
   background: ${({ theme, modalVariant }) =>
     modalVariant === 'primary'
       ? theme.background.overlayPrimary
-      : theme.background.overlaySecondary};
+      : modalVariant === 'secondary'
+        ? theme.background.overlaySecondary
+        : theme.background.overlayTertiary};
   display: flex;
   height: 100%;
   justify-content: center;
@@ -132,7 +134,7 @@ const ModalFooter = ({ children, className }: ModalFooterProps) => (
 
 export type ModalSize = 'small' | 'medium' | 'large';
 export type ModalPadding = 'none' | 'small' | 'medium' | 'large';
-export type ModalVariants = 'primary' | 'secondary';
+export type ModalVariants = 'primary' | 'secondary' | 'tertiary';
 
 export type ModalProps = React.PropsWithChildren & {
   size?: ModalSize;