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 {
-import { FlexWrapper } from '@affine/component';
+  Menu,
-import { IconButton } from '@affine/component';
+  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,17 +87,22 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { t } = useTranslation();
   return (
     <FlexWrapper>
+      <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' }));
+            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={() => {
@@ -108,6 +119,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
         >
           <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 {
-import { ModalCloseButton } from '@affine/component';
+  MuiSlide,
+  MuiClickAwayListener,
+  ModalCloseButton,
+} from '@affine/component';
 import { getUaHelper } from '@/utils';
 import { useTranslation } from '@affine/i18n';
 type ModalProps = {
@@ -42,7 +45,12 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
   return createPortal(
     <MuiSlide direction="left" in={open} mountOnEnter unmountOnExit>
       <StyledShortcutsModal data-testid="shortcuts-modal">
-        <>
+        <MuiClickAwayListener
+          onClickAway={() => {
+            onClose();
+          }}
+        >
+          <div>
             <StyledModalHeader>
               <StyledTitle>
                 <KeyboardIcon />
@@ -79,7 +87,8 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
                 </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
+- Drag Handle
-    *   Easily select, drag and rearrange your blocks.
+  - Easily select, drag and rearrange your blocks.
-    *   Find the `⬦` to the left of your blocks and interact with it!
+  - Find the `⬦` to the left of your blocks and interact with it!
-*   Block Hub
+- Block Hub
-    *   A convenient home for all blocks that can empower your doc.
+  - A convenient home for all blocks that can empower your doc.
-    *   Find it in the lower right, look for the `□+`.
+  - Find it in the lower right, look for the `□+`.
-*   Slash Menu
+- Slash Menu
-    *   Want a convenient way to edit and empower your doc without the mouse?
+  - Want a convenient way to edit and empower your doc without the mouse?
-    *   Try activating this feature with just the `/` key.
+  - Try activating this feature with just the `/` key.
-*   Workspaces
+- Workspaces
-    *   Further improved, with cloud support, collaboration and publishing.
+  - Further improved, with cloud support, collaboration and publishing.
-    *   Explore more features from the `Settings` in the sidebar.
+  - 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
+- [ ] Database Block
-*   [ ] Desktop and mobile clients
+- [ ] Desktop and mobile clients
-*   [ ] Edgeless update (whiteboard mode)
+- [ ] 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]');
+    await page.locator('[data-testid=help-island]').click();
-    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);
     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]');
+    await page.locator('[data-testid=help-island]').click();
-    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();
 
     const shortcutsIcon = page.locator('[data-testid=shortcuts-icon]');
     expect(await shortcutsIcon.isVisible()).toEqual(true);