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

apps/web/src/pages/workspace/[workspaceId]/favorite.tsx

@@ -19,6 +19,7 @@ export const Favorite = () => {
       </PageListHeader>
       <PageList
         pageList={pageList.filter(p => p.favorite && !p.trash)}
+        showFavoriteTag={true}
         listType="favorite"
       />
     </>

apps/web/src/templates/Welcome-to-AFFiNE-Alpha-Downhills.md

@@ -10,18 +10,18 @@ There are common styling options from such as **bold**, _italics,_ <u>underline<
 
 Or maybe we can list the latest features:
 
-*   Drag Handle
-    *   Easily select, drag and rearrange your blocks.
-    *   Find the `⬦` to the left of your blocks and interact with it!
-*   Block Hub
-    *   A convenient home for all blocks that can empower your doc.
-    *   Find it in the lower right, look for the `□+`.
-*   Slash Menu
-    *   Want a convenient way to edit and empower your doc without the mouse?
-    *   Try activating this feature with just the `/` key.
-*   Workspaces
-    *   Further improved, with cloud support, collaboration and publishing.
-    *   Explore more features from the `Settings` in the sidebar.
+- Drag Handle
+  - Easily select, drag and rearrange your blocks.
+  - Find the `⬦` to the left of your blocks and interact with it!
+- Block Hub
+  - A convenient home for all blocks that can empower your doc.
+  - Find it in the lower right, look for the `□+`.
+- Slash Menu
+  - Want a convenient way to edit and empower your doc without the mouse?
+  - Try activating this feature with just the `/` key.
+- Workspaces
+  - Further improved, with cloud support, collaboration and publishing.
+  - Explore more features from the `Settings` in the sidebar.
 
 Let's explore how to collaborate with an image:
 
@@ -36,6 +36,6 @@ let scrambled = "V2VsY29tZSB0byBBRkZpTkU="
 
 And for some future features and updates, let's make a to-do list:
 
-*   [ ] Database Block
-*   [ ] Desktop and mobile clients
-*   [ ] Edgeless update (whiteboard mode)
+- [ ] Database Block
+- [ ] Desktop and mobile clients
+- [ ] Edgeless update (whiteboard mode)

packages/component/src/ui/mui.ts

@@ -3,6 +3,15 @@ import MuiCollapse from '@mui/material/Collapse';
 import MuiSlide from '@mui/material/Slide';
 import MuiAvatar from '@mui/material/Avatar';
 import MuiGrow from '@mui/material/Grow';
+import MuiClickAwayListener from '@mui/base/ClickAwayListener';
 import MuiFade from '@mui/material/Fade';
 
-export { MuiBreadcrumbs, MuiCollapse, MuiSlide, MuiAvatar, MuiGrow, MuiFade };
+export {
+  MuiBreadcrumbs,
+  MuiCollapse,
+  MuiSlide,
+  MuiAvatar,
+  MuiGrow,
+  MuiFade,
+  MuiClickAwayListener,
+};

tests/contact-us.spec.ts

@@ -6,13 +6,7 @@ loadPage();
 
 test.describe('Open contact us', () => {
   test('Click right-bottom corner contact icon', async ({ page }) => {
-    const faqIcon = page.locator('[data-testid=faq-icon]');
-    const box = await faqIcon.boundingBox();
-    expect(box?.x).not.toBeUndefined();
-    await faqIcon.click();
-
-    await page.mouse.move((box?.x ?? 0) + 10, (box?.y ?? 0) + 10);
-    await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
+    await page.locator('[data-testid=help-island]').click();
     const rightBottomContactUs = page.locator(
       '[data-testid=right-bottom-contact-us-icon]'
     );

tests/shortcuts.spec.ts

@@ -6,11 +6,7 @@ loadPage();
 
 test.describe('Shortcuts Modal', () => {
   test('Open shortcuts modal', async ({ page }) => {
-    const faqIcon = page.locator('[data-testid=faq-icon]');
-    const box = await faqIcon.boundingBox();
-    expect(box?.x).not.toBeUndefined();
-    await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
-    await faqIcon.click();
+    await page.locator('[data-testid=help-island]').click();
 
     const shortcutsIcon = page.locator('[data-testid=shortcuts-icon]');
     expect(await shortcutsIcon.isVisible()).toEqual(true);