Add context modal

src/renderer/app.tsx

@@ -5,6 +5,7 @@ import { ModalsProvider } from '@mantine/modals';
 import { NotificationsProvider } from '@mantine/notifications';
 import isElectron from 'is-electron';
 import { BrowserRouter, HashRouter } from 'react-router-dom';
+import { BaseContextModal } from '@/renderer/components';
 import { useDefaultSettings } from './features/settings';
 import { AppRouter } from './router/app-router';
 import './styles/global.scss';
@@ -68,7 +69,7 @@ export const App = () => {
         }}
         transitionDuration={200}
       >
-        <ModalsProvider>
+        <ModalsProvider modals={{ base: BaseContextModal }}>
           <SelectRouter>
             <AppRouter />
           </SelectRouter>

src/renderer/components/modal/index.tsx

@@ -3,6 +3,7 @@ import {
   Modal as MantineModal,
   ModalProps as MantineModalProps,
 } from '@mantine/core';
+import { ContextModalProps } from '@mantine/modals';
 
 export interface ModalProps extends Omit<MantineModalProps, 'onClose'> {
   children?: React.ReactNode;
@@ -26,6 +27,19 @@ export const Modal = ({ children, handlers, ...rest }: ModalProps) => {
   );
 };
 
+export type ContextModalVars = {
+  context: ContextModalProps['context'];
+  id: ContextModalProps['id'];
+};
+
+export const BaseContextModal = ({
+  context,
+  id,
+  innerProps,
+}: ContextModalProps<{
+  modalBody: (vars: ContextModalVars) => React.ReactNode;
+}>) => <>{innerProps.modalBody({ context, id })}</>;
+
 Modal.defaultProps = {
   children: undefined,
 };