Refactor modals to use context provider

src/app/components/generator/ProjectDeletion.tsx

@@ -1,28 +1,27 @@
 import { useCallback } from 'preact/hooks'
 import { Analytics } from '../../Analytics.js'
 import { useLocale, useProject } from '../../contexts/index.js'
+import { useModal } from '../../contexts/Modal.jsx'
 import { Btn } from '../Btn.js'
 import { Modal } from '../Modal.js'
 
-interface Props {
-	onClose: () => void,
-}
-export function ProjectDeletion({ onClose }: Props) {
+export function ProjectDeletion() {
 	const { locale } = useLocale()
+	const { hideModal } = useModal()
 	const { project, deleteProject } = useProject()
 
 	const doSave = useCallback(() => {
 		Analytics.deleteProject('menu')
 		deleteProject(project.name)
-		onClose()
-	}, [onClose, deleteProject])
+		hideModal()
+	}, [deleteProject, hideModal])
 
-	return <Modal class="file-modal" onDismiss={onClose}>
+	return <Modal class="file-modal">
 		<p>{locale('project.delete_confirm.1', project.name)}</p>
 		<p><b>{locale('project.delete_confirm.2')}</b></p>
 		<div class="button-group">
 			<Btn icon="trashcan" label={locale('project.delete')} onClick={doSave} class="danger" />
-			<Btn label={locale('project.cancel')} onClick={onClose} />
+			<Btn label={locale('project.cancel')} onClick={hideModal} />
 		</div>
 	</Modal>
 }