feat: replace modal with new design (#4324)

Co-authored-by: Peng Xiao <pengxiao@outlook.com>

apps/core/src/components/pure/quick-search-modal/index.tsx

@@ -1,5 +1,5 @@
-import { Modal, ModalWrapper } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Modal } from '@toeverything/components/modal';
 import { Command } from 'cmdk';
 import { startTransition, Suspense } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -75,93 +75,86 @@ export const QuickSearchModal = ({
   return (
     <Modal
       open={open}
-      onClose={handleClose}
-      wrapperPosition={['top', 'center']}
-      data-testid="quickSearch"
-    >
-      <ModalWrapper
-        width={608}
-        style={{
+      onOpenChange={setOpen}
+      width={608}
+      contentOptions={{
+        ['data-testid' as string]: 'quickSearch',
+        style: {
           maxHeight: '80vh',
           minHeight: '412px',
           top: '80px',
           overflow: 'hidden',
+          transform: 'translateX(-50%)',
+        },
+      }}
+    >
+      <Command
+        shouldFilter={false}
+        //Handle KeyboardEvent conflicts with blocksuite
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (
+            e.key === 'ArrowDown' ||
+            e.key === 'ArrowUp' ||
+            e.key === 'ArrowLeft' ||
+            e.key === 'ArrowRight'
+          ) {
+            e.stopPropagation();
+          }
         }}
       >
-        {/* <NavigationPath
-          blockSuiteWorkspace={blockSuiteWorkspace}
-          onJumpToPage={() => {
-            setOpen(false);
-          }}
-        /> */}
-        <Command
-          shouldFilter={false}
-          //Handle KeyboardEvent conflicts with blocksuite
-          onKeyDown={(e: React.KeyboardEvent) => {
-            if (
-              e.key === 'ArrowDown' ||
-              e.key === 'ArrowUp' ||
-              e.key === 'ArrowLeft' ||
-              e.key === 'ArrowRight'
-            ) {
-              e.stopPropagation();
-            }
-          }}
-        >
-          <StyledModalHeader>
-            <SearchInput
-              ref={inputRef}
-              onValueChange={value => {
-                setQuery(value);
-              }}
-              onKeyDown={e => {
-                // Avoid triggering the cmdk onSelect event when the input method is in use
-                if (e.nativeEvent.isComposing) {
-                  e.stopPropagation();
-                  return;
-                }
-              }}
-              placeholder={t['Quick search placeholder']()}
-            />
-            <StyledShortcut>
-              {environment.isBrowser && environment.isMacOs
-                ? '⌘ + K'
-                : 'Ctrl + K'}
-            </StyledShortcut>
-          </StyledModalHeader>
-          <StyledModalDivider />
-          <Command.List>
-            <StyledContent>
-              <Suspense
-                fallback={
-                  <StyledNotFound>
-                    <span>{t['com.affine.loading']()}</span>
-                  </StyledNotFound>
-                }
-              >
-                <Results
+        <StyledModalHeader>
+          <SearchInput
+            ref={inputRef}
+            onValueChange={value => {
+              setQuery(value);
+            }}
+            onKeyDown={e => {
+              // Avoid triggering the cmdk onSelect event when the input method is in use
+              if (e.nativeEvent.isComposing) {
+                e.stopPropagation();
+                return;
+              }
+            }}
+            placeholder={t['Quick search placeholder']()}
+          />
+          <StyledShortcut>
+            {environment.isBrowser && environment.isMacOs
+              ? '⌘ + K'
+              : 'Ctrl + K'}
+          </StyledShortcut>
+        </StyledModalHeader>
+        <StyledModalDivider />
+        <Command.List>
+          <StyledContent>
+            <Suspense
+              fallback={
+                <StyledNotFound>
+                  <span>{t['com.affine.loading']()}</span>
+                </StyledNotFound>
+              }
+            >
+              <Results
+                query={query}
+                onClose={handleClose}
+                workspace={workspace}
+                setShowCreatePage={setShowCreatePage}
+              />
+            </Suspense>
+          </StyledContent>
+          {showCreatePage ? (
+            <>
+              <StyledModalDivider />
+              <StyledModalFooter>
+                <Footer
                   query={query}
                   onClose={handleClose}
-                  workspace={workspace}
-                  setShowCreatePage={setShowCreatePage}
+                  blockSuiteWorkspace={blockSuiteWorkspace}
                 />
-              </Suspense>
-            </StyledContent>
-            {showCreatePage ? (
-              <>
-                <StyledModalDivider />
-                <StyledModalFooter>
-                  <Footer
-                    query={query}
-                    onClose={handleClose}
-                    blockSuiteWorkspace={blockSuiteWorkspace}
-                  />
-                </StyledModalFooter>
-              </>
-            ) : null}
-          </Command.List>
-        </Command>
-      </ModalWrapper>
+              </StyledModalFooter>
+            </>
+          ) : null}
+        </Command.List>
+      </Command>
     </Modal>
   );
 };

apps/core/src/components/pure/shortcuts-modal/index.tsx

@@ -1,9 +1,7 @@
-import {
-  ModalCloseButton,
-  MuiClickAwayListener,
-  MuiSlide,
-} from '@affine/component';
+import { MuiClickAwayListener, MuiSlide } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { CloseIcon } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
 
 import {
   type ShortcutsInfo,
@@ -14,13 +12,7 @@ import {
 } from '../../../hooks/affine/use-shortcuts';
 import { KeyboardIcon } from './icons';
 import * as styles from './style.css';
-// import {
-//   StyledListItem,
-//   StyledModalHeader,
-//   StyledShortcutsModal,
-//   StyledSubTitle,
-//   StyledTitle,
-// } from './style';
+
 type ModalProps = {
   open: boolean;
   onClose: () => void;
@@ -81,12 +73,16 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
                 {t['Shortcuts']()}
               </div>
 
-              <ModalCloseButton
-                top={6}
-                right={6}
+              <IconButton
+                style={{
+                  position: 'absolute',
+                  right: 6,
+                  top: 6,
+                }}
                 onClick={() => {
                   onClose();
                 }}
+                icon={<CloseIcon />}
               />
             </div>
             <ShortcutsPanel shortcutsInfo={generalShortcutsInfo} />

apps/core/src/components/pure/trash-button-group/index.tsx

@@ -1,8 +1,8 @@
-import { Confirm } from '@affine/component';
 import { WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/global/utils';
 import { Button } from '@toeverything/components/button';
+import { ConfirmModal } from '@toeverything/components/modal';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { currentPageIdAtom } from '@toeverything/infra/atom';
 import { useAtomValue } from 'jotai';
@@ -61,23 +61,21 @@ export const TrashButtonGroup = () => {
           {t['com.affine.trashOperation.deletePermanently']()}
         </Button>
       </div>
-      <Confirm
+      <ConfirmModal
         title={t['com.affine.trashOperation.delete.title']()}
-        content={t['com.affine.trashOperation.delete.description']()}
-        confirmText={t['com.affine.trashOperation.delete']()}
-        confirmType="error"
+        cancelText={t['com.affine.confirmModal.button.cancel']()}
+        description={t['com.affine.trashOperation.delete.description']()}
+        confirmButtonOptions={{
+          type: 'error',
+          children: t['com.affine.trashOperation.delete'](),
+        }}
         open={open}
         onConfirm={useCallback(() => {
           jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
           blockSuiteWorkspace.removePage(pageId);
           toast(t['com.affine.toastMessage.permanentlyDeleted']());
         }, [blockSuiteWorkspace, jumpToSubPath, pageId, workspace.id, t])}
-        onCancel={() => {
-          setOpen(false);
-        }}
-        onClose={() => {
-          setOpen(false);
-        }}
+        onOpenChange={setOpen}
       />
     </div>
   );

apps/core/src/components/pure/workspace-list-modal/index.tsx

@@ -177,6 +177,7 @@ export const WorkspaceListModal = ({
   const localWorkspaces = workspaces.filter(
     ({ flavour }) => flavour === WorkspaceFlavour.LOCAL
   ) as (AffineCloudWorkspace | LocalWorkspace)[];
+  // FIXME: replace mui popover
   return (
     <Popover
       sx={{
@@ -209,6 +210,7 @@ export const WorkspaceListModal = ({
                     openModal: true,
                   }));
                 }
+                onClose();
               }}
               data-testid="cloud-signin-button"
             >

apps/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx

@@ -1,5 +1,5 @@
 import {
-  EditCollectionModel,
+  EditCollectionModal,
   useCollectionManager,
 } from '@affine/component/page-list';
 import type { Collection } from '@affine/env/filter';
@@ -46,12 +46,12 @@ export const AddCollectionButton = ({
         <PlusIcon />
       </IconButton>
 
-      <EditCollectionModel
+      <EditCollectionModal
         propertiesMeta={workspace.meta.properties}
         getPageInfo={getPageInfo}
         onConfirm={setting.saveCollection}
         open={show}
-        onClose={() => showUpdateCollection(false)}
+        onOpenChange={showUpdateCollection}
         title={t['com.affine.editCollection.saveCollection']()}
         init={defaultCollection}
       />

apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -1,6 +1,6 @@
 import { MenuItem as CollectionItem } from '@affine/component/app-sidebar';
 import {
-  EditCollectionModel,
+  EditCollectionModal,
   useCollectionManager,
   useSavedCollections,
 } from '@affine/component/page-list';
@@ -203,13 +203,13 @@ const CollectionRenderer = ({
 
   return (
     <Collapsible.Root open={!collapsed}>
-      <EditCollectionModel
+      <EditCollectionModal
         propertiesMeta={workspace.meta.properties}
         getPageInfo={getPageInfo}
         init={collection}
         onConfirm={setting.saveCollection}
         open={show}
-        onClose={() => showUpdateCollection(false)}
+        onOpenChange={showUpdateCollection}
       />
       <CollectionItem
         data-testid="collection-item"