feat: Small confirmation dialogs (#3293)

* wip

* refinement

app/menus/CollectionMenu.tsx

@@ -54,7 +54,7 @@ function CollectionMenu({
   });
   const [renderModals, setRenderModals] = React.useState(false);
   const team = useCurrentTeam();
-  const { documents } = useStores();
+  const { documents, dialogs } = useStores();
   const { showToast } = useToasts();
   const { t } = useTranslation();
   const history = useHistory();
@@ -64,7 +64,6 @@ function CollectionMenu({
     setShowCollectionPermissions,
   ] = React.useState(false);
   const [showCollectionEdit, setShowCollectionEdit] = React.useState(false);
-  const [showCollectionDelete, setShowCollectionDelete] = React.useState(false);
   const [showCollectionExport, setShowCollectionExport] = React.useState(false);
 
   const handleOpen = React.useCallback(() => {
@@ -139,6 +138,19 @@ function CollectionMenu({
     [collection, menu]
   );
 
+  const handleDelete = React.useCallback(() => {
+    dialogs.openModal({
+      isCentered: true,
+      title: t("Delete collection"),
+      content: (
+        <CollectionDelete
+          collection={collection}
+          onSubmit={dialogs.closeAllModals}
+        />
+      ),
+    });
+  }, [dialogs, t, collection]);
+
   const alphabeticalSort = collection.sort.field === "title";
   const can = usePolicy(collection.id);
   const canUserInTeam = usePolicy(team.id);
@@ -214,7 +226,7 @@ function CollectionMenu({
         title: `${t("Delete")}…`,
         dangerous: true,
         visible: !!(collection && can.delete),
-        onClick: () => setShowCollectionDelete(true),
+        onClick: handleDelete,
         icon: <TrashIcon />,
       },
     ],
@@ -226,6 +238,7 @@ function CollectionMenu({
       handleChangeSort,
       handleNewDocument,
       handleImportDocument,
+      handleDelete,
       collection,
       canUserInTeam.export,
     ]
@@ -282,16 +295,6 @@ function CollectionMenu({
               collectionId={collection.id}
             />
           </Modal>
-          <Modal
-            title={t("Delete collection")}
-            isOpen={showCollectionDelete}
-            onRequestClose={() => setShowCollectionDelete(false)}
-          >
-            <CollectionDelete
-              onSubmit={() => setShowCollectionDelete(false)}
-              collection={collection}
-            />
-          </Modal>
           <Modal
             title={t("Export collection")}
             isOpen={showCollectionExport}