feat: interaction change (#788)

apps/web/src/components/help-island/index.tsx

@@ -40,6 +40,7 @@ export const HelpIsland = ({
   return (
     <StyledIsland
       spread={spread}
+      data-testid="help-island"
       onClick={() => {
         setShowSpread(!spread);
       }}

apps/web/src/components/page-list/OperationCell.tsx

@@ -1,8 +1,13 @@
 import { useConfirm } from '@/providers/ConfirmProvider';
 import { PageMeta } from '@/providers/app-state-provider';
-import { Menu, MenuItem } from '@affine/component';
-import { FlexWrapper } from '@affine/component';
-import { IconButton } from '@affine/component';
+import {
+  Menu,
+  MenuItem,
+  Tooltip,
+  FlexWrapper,
+  IconButton,
+} from '@affine/component';
+
 import {
   MoreVerticalIcon,
   RestoreIcon,
@@ -15,6 +20,7 @@ import {
 import { toast } from '@affine/component';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useTranslation } from '@affine/i18n';
+
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id, favorite } = pageMeta;
   const { openPage } = usePageHelper();
@@ -81,33 +87,39 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { t } = useTranslation();
   return (
     <FlexWrapper>
-      <IconButton
-        darker={true}
-        style={{ marginRight: '12px' }}
-        onClick={() => {
-          toggleDeletePage(id);
-          toast(t('restored', { title: getPageMeta(id)?.title || 'Untitled' }));
-          openPage(id);
-        }}
-      >
-        <RestoreIcon />
-      </IconButton>
-      <IconButton
-        darker={true}
-        onClick={() => {
-          confirm({
-            title: t('Delete permanently?'),
-            content: t("Once deleted, you can't undo this action."),
-            confirmText: t('Delete'),
-            confirmType: 'danger',
-          }).then(confirm => {
-            confirm && permanentlyDeletePage(id);
-            toast(t('Permanently deleted'));
-          });
-        }}
-      >
-        <DeleteForeverIcon />
-      </IconButton>
+      <Tooltip content={t('Restore it')} placement="top-start">
+        <IconButton
+          darker={true}
+          style={{ marginRight: '12px' }}
+          onClick={() => {
+            toggleDeletePage(id);
+            toast(
+              t('restored', { title: getPageMeta(id)?.title || 'Untitled' })
+            );
+            openPage(id);
+          }}
+        >
+          <RestoreIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip content={t('Delete permanently')} placement="top-start">
+        <IconButton
+          darker={true}
+          onClick={() => {
+            confirm({
+              title: t('Delete permanently?'),
+              content: t("Once deleted, you can't undo this action."),
+              confirmText: t('Delete'),
+              confirmType: 'danger',
+            }).then(confirm => {
+              confirm && permanentlyDeletePage(id);
+              toast(t('Permanently deleted'));
+            });
+          }}
+        >
+          <DeleteForeverIcon />
+        </IconButton>
+      </Tooltip>
     </FlexWrapper>
   );
 };

apps/web/src/components/shortcuts-modal/index.tsx

@@ -13,8 +13,11 @@ import {
   useWindowsKeyboardShortcuts,
   useWinMarkdownShortcuts,
 } from '@/components/shortcuts-modal/config';
-import { MuiSlide } from '@affine/component';
-import { ModalCloseButton } from '@affine/component';
+import {
+  MuiSlide,
+  MuiClickAwayListener,
+  ModalCloseButton,
+} from '@affine/component';
 import { getUaHelper } from '@/utils';
 import { useTranslation } from '@affine/i18n';
 type ModalProps = {
@@ -42,44 +45,50 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
   return createPortal(
     <MuiSlide direction="left" in={open} mountOnEnter unmountOnExit>
       <StyledShortcutsModal data-testid="shortcuts-modal">
-        <>
-          <StyledModalHeader>
-            <StyledTitle>
-              <KeyboardIcon />
-              {t('Shortcuts')}
-            </StyledTitle>
+        <MuiClickAwayListener
+          onClickAway={() => {
+            onClose();
+          }}
+        >
+          <div>
+            <StyledModalHeader>
+              <StyledTitle>
+                <KeyboardIcon />
+                {t('Shortcuts')}
+              </StyledTitle>
 
-            <ModalCloseButton
-              top={6}
-              right={6}
-              size={[24, 24]}
-              iconSize={[15, 15]}
-              onClick={() => {
-                onClose();
-              }}
-            />
-          </StyledModalHeader>
-          <StyledSubTitle style={{ marginTop: 0 }}>
-            {t('Keyboard Shortcuts')}
-          </StyledSubTitle>
-          {Object.entries(keyboardShortcuts).map(([title, shortcuts]) => {
-            return (
-              <StyledListItem key={title}>
-                <span>{title}</span>
-                <span>{shortcuts}</span>
-              </StyledListItem>
-            );
-          })}
-          <StyledSubTitle>{t('Markdown Syntax')}</StyledSubTitle>
-          {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
-            return (
-              <StyledListItem key={title}>
-                <span>{title}</span>
-                <span>{shortcuts}</span>
-              </StyledListItem>
-            );
-          })}
-        </>
+              <ModalCloseButton
+                top={6}
+                right={6}
+                size={[24, 24]}
+                iconSize={[15, 15]}
+                onClick={() => {
+                  onClose();
+                }}
+              />
+            </StyledModalHeader>
+            <StyledSubTitle style={{ marginTop: 0 }}>
+              {t('Keyboard Shortcuts')}
+            </StyledSubTitle>
+            {Object.entries(keyboardShortcuts).map(([title, shortcuts]) => {
+              return (
+                <StyledListItem key={title}>
+                  <span>{title}</span>
+                  <span>{shortcuts}</span>
+                </StyledListItem>
+              );
+            })}
+            <StyledSubTitle>{t('Markdown Syntax')}</StyledSubTitle>
+            {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
+              return (
+                <StyledListItem key={title}>
+                  <span>{title}</span>
+                  <span>{shortcuts}</span>
+                </StyledListItem>
+              );
+            })}
+          </div>
+        </MuiClickAwayListener>
       </StyledShortcutsModal>
     </MuiSlide>,
     document.body