refactor: header options menu (#3615)

2024-09-20 07:57:29 +03:00 · 2023-08-09 01:14:24 +08:00 · 2023-08-09 01:14:24 +08:00 · 4e84b9a121
commit 4e84b9a121
parent 7d16a8348c
21 changed files with 183 additions and 128 deletions
--- a/apps/core/package.json
+++ b/apps/core/package.json
@ -22,7 +22,7 @@
    "@blocksuite/blocks": "0.0.0-20230807164933-9f6fb698-nightly",
    "@blocksuite/editor": "0.0.0-20230807164933-9f6fb698-nightly",
    "@blocksuite/global": "0.0.0-20230807164933-9f6fb698-nightly",
-    "@blocksuite/icons": "^2.1.29",
+    "@blocksuite/icons": "^2.1.30",
    "@blocksuite/lit": "0.0.0-20230807164933-9f6fb698-nightly",
    "@blocksuite/store": "0.0.0-20230807164933-9f6fb698-nightly",
    "@dnd-kit/core": "^6.0.8",
@ -33,7 +33,7 @@
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.2",
    "@react-hookz/web": "^23.1.0",
-    "@toeverything/components": "^0.0.8",
+    "@toeverything/components": "^0.0.10",
    "async-call-rpc": "^6.3.1",
    "cmdk": "^0.2.0",
    "css-spring": "^4.1.0",
--- a/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx
@ -5,12 +5,15 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/global/utils';
 import {
  EdgelessIcon,
+  EditIcon,
  FavoritedIcon,
  FavoriteIcon,
+  ImportIcon,
  MoreVerticalIcon,
  PageIcon,
 } from '@blocksuite/icons';
 import { IconButton } from '@toeverything/components/button';
+import { Divider } from '@toeverything/components/divider';
 import {
  useBlockSuitePageMeta,
  usePageMetaHelper,
@ -24,6 +27,8 @@ import { pageSettingFamily } from '../../../../atoms';
 import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import { toast } from '../../../../utils';
+import { HeaderDropDownButton } from '../../../pure/header-drop-down-button';
+import { usePageHelper } from '../../block-suite-page-list/utils';
 import { LanguageMenu } from './language-menu';
 import { MenuThemeModeSwitch } from './theme-mode-switch';
 const CommonMenu = () => {
@ -52,7 +57,12 @@ const CommonMenu = () => {
    </FlexWrapper>
  );
 };
-const PageMenu = () => {
+
+type PageMenuProps = {
+  rename?: () => void;
+};
+
+export const PageMenu = ({ rename }: PageMenuProps) => {
  const t = useAFFiNEI18N();
  // fixme(himself65): remove these hooks ASAP
  const [workspace] = useCurrentWorkspace();
@ -71,6 +81,7 @@ const PageMenu = () => {
  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
  const [openConfirm, setOpenConfirm] = useState(false);
  const { removeToTrash } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
+  const { importFile } = usePageHelper(blockSuiteWorkspace);
  const handleFavorite = useCallback(() => {
    setPageMeta(pageId, { favorite: !favorite });
    toast(favorite ? t['Removed from Favorites']() : t['Added to Favorites']());
@ -90,12 +101,32 @@ const PageMenu = () => {
    toast(t['Moved to Trash']());
    setOpenConfirm(false);
  }, [pageMeta.id, removeToTrash, t]);
-
+  const menuItemStyle = {
+    padding: '4px 12px',
+  };
  const EditMenu = (
    <>
+      <MenuItem
+        icon={<EditIcon />}
+        data-testid="editor-option-menu-rename"
+        onClick={rename}
+        style={menuItemStyle}
+      >
+        {t['Rename']()}
+      </MenuItem>
+      <MenuItem
+        icon={mode === 'page' ? <EdgelessIcon /> : <PageIcon />}
+        data-testid="editor-option-menu-edgeless"
+        onClick={handleSwitchMode}
+        style={menuItemStyle}
+      >
+        {t['Convert to ']()}
+        {mode === 'page' ? t['Edgeless']() : t['Page']()}
+      </MenuItem>
      <MenuItem
        data-testid="editor-option-menu-favorite"
        onClick={handleFavorite}
+        style={menuItemStyle}
        icon={
          favorite ? (
            <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
@ -106,15 +137,34 @@ const PageMenu = () => {
      >
        {favorite ? t['Remove from favorites']() : t['Add to Favorites']()}
      </MenuItem>
-      <MenuItem
-        icon={mode === 'page' ? <EdgelessIcon /> : <PageIcon />}
-        data-testid="editor-option-menu-edgeless"
-        onClick={handleSwitchMode}
+      {/* {TODO: add tag and duplicate function support} */}
+      {/* <MenuItem
+        icon={<TagsIcon />}
+        data-testid="editor-option-menu-add-tag"
+        onClick={() => {}}
+        style={menuItemStyle}
      >
-        {t['Convert to ']()}
-        {mode === 'page' ? t['Edgeless']() : t['Page']()}
+        {t['com.affine.header.option.add-tag']()}
+      </MenuItem> */}
+      <Divider />
+      {/* <MenuItem
+        icon={<DuplicateIcon />}
+        data-testid="editor-option-menu-duplicate"
+        onClick={() => {}}
+        style={menuItemStyle}
+      >
+        {t['com.affine.header.option.duplicate']()}
+      </MenuItem> */}
+      <MenuItem
+        icon={<ImportIcon />}
+        data-testid="editor-option-menu-import"
+        onClick={importFile}
+        style={menuItemStyle}
+      >
+        {t['Import']()}
      </MenuItem>
      <Export />
+      <Divider />
      <MoveToTrash
        data-testid="editor-option-menu-delete"
        onItemClick={() => {
@ -132,10 +182,15 @@ const PageMenu = () => {
          placement="bottom-end"
          disablePortal={true}
          trigger="click"
+          menuStyles={{
+            borderRadius: '8px',
+            padding: '8px',
+            background: 'var(--affine-background-overlay-panel-color)',
+          }}
        >
-          <IconButton data-testid="editor-option-menu">
-            <MoreVerticalIcon />
-          </IconButton>
+          <div>
+            <HeaderDropDownButton />
+          </div>
        </Menu>
        <MoveToTrash.ConfirmModal
          open={openConfirm}
--- a/apps/core/src/components/blocksuite/workspace-header/header.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/header.tsx
@ -60,10 +60,8 @@ interface HeaderItem {
 const HeaderRightItems: Record<HeaderRightItemName, HeaderItem> = {
  [HeaderRightItemName.EditorOptionMenu]: {
    Component: EditorOptionMenu,
-    availableWhen: (_, currentPage, { isPublic }) => {
-      return (
-        !isPublic && currentPage?.meta.trash !== true && currentPage !== null
-      );
+    availableWhen: () => {
+      return false;
    },
  },
 };
--- a/apps/core/src/components/blocksuite/workspace-header/index.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/index.tsx
@ -1,18 +1,15 @@
 import { assertExists } from '@blocksuite/global/utils';
-import { Button } from '@toeverything/components/button';
 import {
  useBlockSuitePageMeta,
  usePageMetaHelper,
 } from '@toeverything/hooks/use-block-suite-page-meta';
-import { useSetAtom } from 'jotai';
 import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import { useCallback, useRef, useState } from 'react';

-import { openQuickSearchModalAtom } from '../../../atoms';
-import { QuickSearchButton } from '../../pure/quick-search-button';
 import { EditorModeSwitch } from './editor-mode-switch';
 import type { BaseHeaderProps } from './header';
 import { Header } from './header';
+import { PageMenu } from './header-right-items/editor-option-menu';
 import * as styles from './styles.css';

 export interface WorkspaceHeaderProps
@ -26,14 +23,12 @@ export const BlockSuiteEditorHeader = (
 ): ReactElement => {
  const { workspace, currentPage, children, isPublic } = props;
  // fixme(himself65): remove this atom and move it to props
-  const setOpenQuickSearch = useSetAtom(openQuickSearchModalAtom);
  const pageMeta = useBlockSuitePageMeta(workspace.blockSuiteWorkspace).find(
    meta => meta.id === currentPage?.id
  );
  const pageTitleMeta = usePageMetaHelper(workspace.blockSuiteWorkspace);
  const [isEditable, setIsEditable] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
-
  const handleClick = useCallback(() => {
    if (isEditable) {
      setIsEditable(!isEditable);
@ -45,7 +40,14 @@ export const BlockSuiteEditorHeader = (
      setIsEditable(!isEditable);
    }
  }, [currentPage, isEditable, pageMeta?.title, pageTitleMeta]);
-
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' || e.key === 'Escape') {
+        handleClick();
+      }
+    },
+    [handleClick]
+  );
  const headerRef = useRef<HTMLDivElement>(null);
  assertExists(pageMeta);
  const title = pageMeta?.title;
@ -76,16 +78,8 @@ export const BlockSuiteEditorHeader = (
                    defaultValue={pageMeta?.title}
                    onBlur={handleClick}
                    ref={inputRef}
+                    onKeyDown={handleKeyDown}
                  />
-                  <Button
-                    onClick={handleClick}
-                    data-testid="save-edit-button"
-                    style={{
-                      marginLeft: '12px',
-                    }}
-                  >
-                    Save
-                  </Button>
                </div>
              ) : (
                <span data-testid="title-edit-button" onClick={handleClick}>
@ -94,11 +88,7 @@ export const BlockSuiteEditorHeader = (
              )}
            </div>
            <div className={styles.searchArrowWrapper}>
-              <QuickSearchButton
-                onClick={() => {
-                  setOpenQuickSearch(true);
-                }}
-              />
+              <PageMenu rename={handleClick} />
            </div>
          </div>
        </div>
--- a/apps/core/src/components/blocksuite/workspace-header/styles.css.ts
+++ b/apps/core/src/components/blocksuite/workspace-header/styles.css.ts
@ -205,6 +205,7 @@ export const searchArrowWrapper = style({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
+  marginLeft: '4px',
 });

 export const pageListTitleWrapper = style({
--- a/apps/core/src/components/pure/header-drop-down-button/index.tsx
+++ b/apps/core/src/components/pure/header-drop-down-button/index.tsx
@ -14,21 +14,19 @@ const StyledIconButtonWithAnimate = styled(IconButton)(() => {
      svg: {
        transform: 'translateY(3px)',
      },
-      '::after': {
-        background: 'var(--affine-background-primary-color)',
-      },
+      backgroundColor: 'transparent !important',
    },
  };
 });

 // fixme(himself65): need to refactor
-export const QuickSearchButton = ({
+export const HeaderDropDownButton = ({
  onClick,
  ...props
 }: Omit<IconButtonProps, 'children'>) => {
  return (
    <StyledIconButtonWithAnimate
-      data-testid="header-quickSearchButton"
+      data-testid="header-dropDownButton"
      {...props}
      onClick={e => {
        onClick?.(e);
--- a/apps/core/src/components/pure/workspace-title/index.tsx
+++ b/apps/core/src/components/pure/workspace-title/index.tsx
@ -1,45 +1,19 @@
 import { RadioButton, RadioButtonGroup } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useSetAtom } from 'jotai';
 import { useAtom } from 'jotai';
 import type { ReactNode } from 'react';
 import type React from 'react';

-import {
-  allPageModeSelectAtom,
-  openQuickSearchModalAtom,
-} from '../../../atoms';
+import { allPageModeSelectAtom } from '../../../atoms';
 import type { HeaderProps } from '../../blocksuite/workspace-header/header';
 import { Header } from '../../blocksuite/workspace-header/header';
 import * as styles from '../../blocksuite/workspace-header/styles.css';
-import { QuickSearchButton } from '../quick-search-button';

 export interface WorkspaceTitleProps
  extends React.PropsWithChildren<HeaderProps> {
  icon?: ReactNode;
 }

-export const WorkspaceTitle = ({
-  icon,
-  children,
-  ...props
-}: WorkspaceTitleProps) => {
-  const setOpenQuickSearch = useSetAtom(openQuickSearchModalAtom);
-  return (
-    <Header {...props}>
-      <div className={styles.pageListTitleWrapper}>
-        <div className={styles.pageListTitleIcon}>{icon}</div>
-        {children}
-        <QuickSearchButton
-          onClick={() => {
-            setOpenQuickSearch(true);
-          }}
-        />
-      </div>
-    </Header>
-  );
-};
-
 export const WorkspaceModeFilterTab = ({ ...props }: WorkspaceTitleProps) => {
  const t = useAFFiNEI18N();
  const [value, setMode] = useAtom(allPageModeSelectAtom);
--- a/apps/core/src/components/workspace-header.tsx
+++ b/apps/core/src/components/workspace-header.tsx
@ -7,8 +7,6 @@ import {
 import type { Collection } from '@affine/env/filter';
 import type { WorkspaceHeaderProps } from '@affine/env/workspace';
 import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { SettingsIcon } from '@blocksuite/icons';
 import type { ReactElement } from 'react';
 import { useCallback } from 'react';

@ -16,14 +14,13 @@ import { useGetPageInfoById } from '../hooks/use-get-page-info';
 import { useWorkspace } from '../hooks/use-workspace';
 import { BlockSuiteEditorHeader } from './blocksuite/workspace-header';
 import { filterContainerStyle } from './filter-container.css';
-import { WorkspaceModeFilterTab, WorkspaceTitle } from './pure/workspace-title';
+import { WorkspaceModeFilterTab } from './pure/workspace-title';

 export function WorkspaceHeader({
  currentWorkspaceId,
  currentEntry,
 }: WorkspaceHeaderProps<WorkspaceFlavour>): ReactElement {
  const setting = useCollectionManager(currentWorkspaceId);
-  const t = useAFFiNEI18N();
  const saveToCollection = useCallback(
    async (collection: Collection) => {
      await setting.saveCollection(collection);
@ -89,17 +86,6 @@ export function WorkspaceHeader({
          {filterContainer}
        </>
      );
-    } else if (currentEntry.subPath === WorkspaceSubPath.SETTING) {
-      return (
-        <WorkspaceTitle
-          workspace={currentWorkspace}
-          currentPage={null}
-          isPublic={false}
-          icon={<SettingsIcon />}
-        >
-          {t['Workspace Settings']()}
-        </WorkspaceTitle>
-      );
    } else if (
      currentEntry.subPath === WorkspaceSubPath.SHARED ||
      currentEntry.subPath === WorkspaceSubPath.TRASH
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@ -34,7 +34,7 @@
    "@blocksuite/blocks": "0.0.0-20230807164933-9f6fb698-nightly",
    "@blocksuite/editor": "0.0.0-20230807164933-9f6fb698-nightly",
    "@blocksuite/global": "0.0.0-20230807164933-9f6fb698-nightly",
-    "@blocksuite/icons": "^2.1.29",
+    "@blocksuite/icons": "^2.1.30",
    "@blocksuite/lit": "0.0.0-20230807164933-9f6fb698-nightly",
    "@blocksuite/store": "0.0.0-20230807164933-9f6fb698-nightly",
    "react": "18.2.0",
--- a/packages/component/package.json
+++ b/packages/component/package.json
@ -36,7 +36,7 @@
    "@radix-ui/react-scroll-area": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.4",
    "@toeverything/hooks": "workspace:*",
-    "@toeverything/theme": "^0.7.9",
+    "@toeverything/theme": "^0.7.11",
    "@vanilla-extract/dynamic": "^2.0.3",
    "clsx": "^2.0.0",
    "dayjs": "^1.11.9",
@ -54,7 +54,7 @@
    "@blocksuite/blocks": "0.0.0-20230807164933-9f6fb698-nightly",
    "@blocksuite/editor": "0.0.0-20230807164933-9f6fb698-nightly",
    "@blocksuite/global": "0.0.0-20230807164933-9f6fb698-nightly",
-    "@blocksuite/icons": "^2.1.29",
+    "@blocksuite/icons": "^2.1.30",
    "@blocksuite/lit": "0.0.0-20230807164933-9f6fb698-nightly",
    "@blocksuite/store": "0.0.0-20230807164933-9f6fb698-nightly",
    "@types/react": "^18.2.17",
--- a/packages/component/src/components/page-list/operation-menu-items/export.tsx
+++ b/packages/component/src/components/page-list/operation-menu-items/export.tsx
@ -17,6 +17,10 @@ import { Menu, MenuItem } from '../../..';
 import { getContentParser } from './get-content-parser';
 import type { CommonMenuItemProps } from './types';

+const MenuItemStyle = {
+  padding: '4px 12px',
+};
+
 export const ExportToPdfMenuItem = ({
  onSelect,
 }: CommonMenuItemProps<{ type: 'pdf' }>) => {
@ -83,6 +87,7 @@ export const ExportToPdfMenuItem = ({
      data-testid="export-to-pdf"
      onClick={onClickDownloadPDF}
      icon={<ExportToPdfIcon />}
+      style={MenuItemStyle}
    >
      {t['Export to PDF']()}
    </MenuItem>
@ -128,6 +133,7 @@ export const ExportToHtmlMenuItem = ({
        data-testid="export-to-html"
        onClick={onClickExportHtml}
        icon={<ExportToHtmlIcon />}
+        style={MenuItemStyle}
      >
        {t['Export to HTML']()}
      </MenuItem>
@ -176,6 +182,7 @@ export const ExportToPngMenuItem = ({
        data-testid="export-to-png"
        onClick={onClickDownloadPNG}
        icon={<ExportToPngIcon />}
+        style={MenuItemStyle}
      >
        {t['Export to PNG']()}
      </MenuItem>
@ -222,6 +229,7 @@ export const ExportToMarkdownMenuItem = ({
        data-testid="export-to-markdown"
        onClick={onClickExportMarkdown}
        icon={<ExportToMarkdownIcon />}
+        style={MenuItemStyle}
      >
        {t['Export to Markdown']()}
      </MenuItem>
@ -236,8 +244,8 @@ export const Export = ({
  return (
    <Menu
      width={248}
-      placement="left"
      trigger="click"
+      placement="right-start"
      content={
        <>
          <ExportToPdfMenuItem></ExportToPdfMenuItem>
@ -246,11 +254,17 @@ export const Export = ({
          <ExportToMarkdownMenuItem></ExportToMarkdownMenuItem>
        </>
      }
+      menuStyles={{
+        borderRadius: '8px',
+        padding: '8px',
+        background: 'var(--affine-background-overlay-panel-color)',
+      }}
    >
      <MenuItem
        data-testid="export-menu"
        icon={<ExportIcon />}
        endIcon={<ArrowRightSmallIcon />}
+        style={{ padding: '4px 12px' }}
        onClick={e => {
          e.stopPropagation();
          onItemClick?.();
--- a/packages/component/src/components/page-list/operation-menu-items/index.css.ts
+++ b/packages/component/src/components/page-list/operation-menu-items/index.css.ts
@ -1,6 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css';

 export const moveToTrashStyle = style({
+  padding: '4px 12px',
  ':hover': {
    backgroundColor: 'var(--affine-background-error-color)',
    color: 'var(--affine-error-color)',
--- a/packages/i18n/src/resources/en.json
+++ b/packages/i18n/src/resources/en.json
@ -428,5 +428,7 @@
  "Choose your font style": "Choose your font style",
  "Switch": "Switch",
  "com.affine.settings.workspace.publish.local-tooltip": "Enable AFFiNE Cloud to publish this Workspace",
-  "com.affine.settings.workspace.member.local-tooltip": "Enable AFFiNE Cloud to collaborate with others"
+  "com.affine.settings.workspace.member.local-tooltip": "Enable AFFiNE Cloud to collaborate with others",
+  "com.affine.header.option.add-tag": "Add Tag",
+  "com.affine.header.option.duplicate": "Duplicate"
 }
--- a/plugins/bookmark/package.json
+++ b/plugins/bookmark/package.json
@ -20,7 +20,7 @@
  "dependencies": {
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
-    "@blocksuite/icons": "^2.1.29",
+    "@blocksuite/icons": "^2.1.30",
    "foxact": "^0.2.17",
    "link-preview-js": "^3.0.4"
  },
--- a/plugins/copilot/package.json
+++ b/plugins/copilot/package.json
@ -16,7 +16,7 @@
  "dependencies": {
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
-    "@toeverything/components": "^0.0.8",
+    "@toeverything/components": "^0.0.10",
    "idb": "^7.1.1",
    "langchain": "^0.0.118",
    "marked": "^7.0.1",
--- a/plugins/hello-world/package.json
+++ b/plugins/hello-world/package.json
@ -17,8 +17,8 @@
  "dependencies": {
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
-    "@blocksuite/icons": "^2.1.29",
-    "@toeverything/components": "^0.0.8"
+    "@blocksuite/icons": "^2.1.30",
+    "@toeverything/components": "^0.0.10"
  },
  "devDependencies": {
    "@affine/plugin-cli": "workspace:*"
--- a/plugins/image-preview/package.json
+++ b/plugins/image-preview/package.json
@ -16,9 +16,9 @@
  "dependencies": {
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
-    "@blocksuite/icons": "^2.1.29",
-    "@toeverything/components": "^0.0.8",
-    "@toeverything/theme": "^0.7.9",
+    "@blocksuite/icons": "^2.1.30",
+    "@toeverything/components": "^0.0.10",
+    "@toeverything/theme": "^0.7.11",
    "clsx": "^2.0.0",
    "foxact": "^0.2.17",
    "react-error-boundary": "^4.0.10",
--- a/tests/affine-local/e2e/change-page-mode.spec.ts
+++ b/tests/affine-local/e2e/change-page-mode.spec.ts
@ -70,7 +70,7 @@ test('Able to insert the title of an untitled page', async ({ page }) => {
  await titleBarTextContent.click({ delay: 100 });
  const titleContent = await page.getByTestId('title-content');
  await titleContent.fill('test');
-  await page.getByTestId('save-edit-button').click({ delay: 100 });
+  await titleContent.blur();
  expect(await titleBarTextContent.textContent()).toBe('test');
 });

@ -81,11 +81,11 @@ test('Able to edit the title of an existing page', async ({ page }) => {
  await titleBarTextContent.click({ delay: 100 });
  const titleContent = await page.getByTestId('title-content');
  await titleContent.fill('test');
-  await page.getByTestId('save-edit-button').click({ delay: 100 });
+  await titleContent.blur();
  expect(await titleBarTextContent.textContent()).toBe('test');
  await titleBarTextContent.click({ delay: 100 });
  await titleContent.fill('Sample text 2');
-  await page.getByTestId('save-edit-button').click({ delay: 100 });
+  await titleContent.blur();
  expect(await titleBarTextContent.textContent()).toBe('Sample text 2');
 });

@ -98,10 +98,28 @@ test('Clearing out the title bar will remove the page title', async ({
  await titleBarTextContent.click({ delay: 100 });
  const titleContent = await page.getByTestId('title-content');
  await titleContent.fill('test');
-  await page.getByTestId('save-edit-button').click({ delay: 100 });
+  await titleContent.blur();
  expect(await titleBarTextContent.textContent()).toBe('test');
  await titleBarTextContent.click({ delay: 100 });
  await titleContent.fill('');
-  await page.getByTestId('save-edit-button').click({ delay: 100 });
+  await titleContent.blur();
+  expect(await titleBarTextContent.textContent()).toBe('Untitled');
+});
+
+test('Rename by editor header items, save with shortcut', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await clickPageMoreActions(page);
+  const menusRenameItem = page.getByTestId('editor-option-menu-rename');
+  await menusRenameItem.click({ delay: 100 });
+  const titleBarTextContent = page.getByTestId('title-edit-button');
+  const titleContent = page.getByTestId('title-content');
+  await titleContent.fill('test');
+  await page.keyboard.press('Enter');
+  expect(await titleBarTextContent.textContent()).toBe('test');
+  await clickPageMoreActions(page);
+  await menusRenameItem.click({ delay: 100 });
+  await titleContent.fill('');
+  await page.keyboard.press('Escape');
  expect(await titleBarTextContent.textContent()).toBe('Untitled');
 });
--- a/tests/affine-local/e2e/local-first-import-page.spec.ts
+++ b/tests/affine-local/e2e/local-first-import-page.spec.ts
@ -0,0 +1,18 @@
+import { test } from '@affine-test/kit/playwright';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickPageMoreActions,
+  waitEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test('Click import page item', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await clickPageMoreActions(page);
+  const importItem = page.getByTestId('editor-option-menu-import');
+  await importItem.click();
+  const importModal = page.locator('import-page');
+
+  expect(await importModal.isVisible()).toBe(true);
+});
--- a/tests/kit/utils/page-logic.ts
+++ b/tests/kit/utils/page-logic.ts
@ -46,6 +46,6 @@ export const createLinkedPage = async (page: Page, pageName?: string) => {
 export async function clickPageMoreActions(page: Page) {
  return page
    .getByTestId('editor-header-items')
-    .getByTestId('editor-option-menu')
+    .getByTestId('header-dropDownButton')
    .click();
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -96,7 +96,7 @@ __metadata:
    "@affine/component": "workspace:*"
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
-    "@blocksuite/icons": ^2.1.29
+    "@blocksuite/icons": ^2.1.30
    foxact: ^0.2.17
    link-preview-js: ^3.0.4
  languageName: unknown
@ -129,7 +129,7 @@ __metadata:
    "@blocksuite/blocks": 0.0.0-20230807164933-9f6fb698-nightly
    "@blocksuite/editor": 0.0.0-20230807164933-9f6fb698-nightly
    "@blocksuite/global": 0.0.0-20230807164933-9f6fb698-nightly
-    "@blocksuite/icons": ^2.1.29
+    "@blocksuite/icons": ^2.1.30
    "@blocksuite/lit": 0.0.0-20230807164933-9f6fb698-nightly
    "@blocksuite/store": 0.0.0-20230807164933-9f6fb698-nightly
    "@dnd-kit/core": ^6.0.8
@ -148,7 +148,7 @@ __metadata:
    "@radix-ui/react-scroll-area": ^1.0.4
    "@radix-ui/react-toast": ^1.1.4
    "@toeverything/hooks": "workspace:*"
-    "@toeverything/theme": ^0.7.9
+    "@toeverything/theme": ^0.7.11
    "@types/react": ^18.2.17
    "@types/react-datepicker": ^4.15.0
    "@types/react-dnd": ^3.0.2
@ -186,7 +186,7 @@ __metadata:
    "@affine/component": "workspace:*"
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
-    "@toeverything/components": ^0.0.8
+    "@toeverything/components": ^0.0.10
    "@types/marked": ^5.0.1
    idb: ^7.1.1
    jotai: ^2.2.2
@ -220,7 +220,7 @@ __metadata:
    "@blocksuite/blocks": 0.0.0-20230807164933-9f6fb698-nightly
    "@blocksuite/editor": 0.0.0-20230807164933-9f6fb698-nightly
    "@blocksuite/global": 0.0.0-20230807164933-9f6fb698-nightly
-    "@blocksuite/icons": ^2.1.29
+    "@blocksuite/icons": ^2.1.30
    "@blocksuite/lit": 0.0.0-20230807164933-9f6fb698-nightly
    "@blocksuite/store": 0.0.0-20230807164933-9f6fb698-nightly
    "@dnd-kit/core": ^6.0.8
@ -236,7 +236,7 @@ __metadata:
    "@sentry/webpack-plugin": ^2.5.0
    "@svgr/webpack": ^8.0.1
    "@swc/core": ^1.3.74
-    "@toeverything/components": ^0.0.8
+    "@toeverything/components": ^0.0.10
    "@types/webpack-env": ^1.18.1
    async-call-rpc: ^6.3.1
    cmdk: ^0.2.0
@ -403,8 +403,8 @@ __metadata:
    "@affine/component": "workspace:*"
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
-    "@blocksuite/icons": ^2.1.29
-    "@toeverything/components": ^0.0.8
+    "@blocksuite/icons": ^2.1.30
+    "@toeverything/components": ^0.0.10
  languageName: unknown
  linkType: soft

@ -429,9 +429,9 @@ __metadata:
    "@affine/component": "workspace:*"
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
-    "@blocksuite/icons": ^2.1.29
-    "@toeverything/components": ^0.0.8
-    "@toeverything/theme": ^0.7.9
+    "@blocksuite/icons": ^2.1.30
+    "@toeverything/components": ^0.0.10
+    "@toeverything/theme": ^0.7.11
    clsx: ^2.0.0
    foxact: ^0.2.17
    react-error-boundary: ^4.0.10
@ -641,7 +641,7 @@ __metadata:
    "@blocksuite/blocks": 0.0.0-20230807164933-9f6fb698-nightly
    "@blocksuite/editor": 0.0.0-20230807164933-9f6fb698-nightly
    "@blocksuite/global": 0.0.0-20230807164933-9f6fb698-nightly
-    "@blocksuite/icons": ^2.1.29
+    "@blocksuite/icons": ^2.1.30
    "@blocksuite/lit": 0.0.0-20230807164933-9f6fb698-nightly
    "@blocksuite/store": 0.0.0-20230807164933-9f6fb698-nightly
    "@storybook/addon-actions": ^7.1.1
@ -3421,13 +3421,13 @@ __metadata:
  languageName: node
  linkType: hard

-"@blocksuite/icons@npm:^2.1.26, @blocksuite/icons@npm:^2.1.29":
-  version: 2.1.29
-  resolution: "@blocksuite/icons@npm:2.1.29"
+"@blocksuite/icons@npm:^2.1.30":
+  version: 2.1.30
+  resolution: "@blocksuite/icons@npm:2.1.30"
  peerDependencies:
    "@types/react": ^18.0.25
    react: ^18.2.0
-  checksum: f853a709fc74aa79c4deb8d19d5554f0c18f5cafdef617338fdbc85fcc9b45e7adfa79ec27cf01e2dc6af6cb278efececfbac5da1cbc6cfe031d8f1abe73607b
+  checksum: 4c1aaf56304f5dfa3f330a6f8c6cc2526393dd5aae06940c7291755515e7051054357943426af519d6144a99e283170fe9f20f575ebd9344c480b4343a690648
  languageName: node
  linkType: hard

@ -11250,17 +11250,17 @@ __metadata:
  languageName: node
  linkType: hard

-"@toeverything/components@npm:^0.0.8":
-  version: 0.0.8
-  resolution: "@toeverything/components@npm:0.0.8"
+"@toeverything/components@npm:^0.0.10":
+  version: 0.0.10
+  resolution: "@toeverything/components@npm:0.0.10"
  dependencies:
-    "@blocksuite/icons": ^2.1.26
+    "@blocksuite/icons": ^2.1.30
  peerDependencies:
    "@radix-ui/react-avatar": ^1
    clsx: ^2
    react: ^18
    react-dom: ^18
-  checksum: 9c955d3c46729397e92031cc6a5ba0f15eb8a67893862b4c6c017c87fff2ab8e9ee8505695b0da571f2af35ad6545f643fc34f657f1c9d1913648796971540d9
+  checksum: b1e15d5a03e6e83ca6dfa4794b23047ea7dba66cb333246be01ac96b5871ed16c20c455931ebe9dd38d1fb98793acee9510e6e2ad8d5ffba7956d2df24d887dd
  languageName: node
  linkType: hard

@ -11321,10 +11321,10 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@toeverything/theme@npm:^0.7.9":
-  version: 0.7.9
-  resolution: "@toeverything/theme@npm:0.7.9"
-  checksum: ac7eeea49f9099e34e8aacbd327ef5e48cc9fc02c32a20309da3dbcb4363c8dda3d2c887cf0e8eb8bb0fa2c50e73f123332f7009d2926961ef7ecbbb921a856d
+"@toeverything/theme@npm:^0.7.11":
+  version: 0.7.11
+  resolution: "@toeverything/theme@npm:0.7.11"
+  checksum: 4676ff7714248aa5e5224a7ee96d40ec30e05f4a8c91a31b36ec4efd244c23ffd7953768d15d0f5b7d560579db9e98f629cebb85afcb92f0db654f99c2edc908
  languageName: node
  linkType: hard