chore: adjustment options menu (#3455)

apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx

@@ -16,7 +16,7 @@ import {
 } from '@toeverything/hooks/use-block-suite-page-meta';
 import { currentPageIdAtom } from '@toeverything/plugin-infra/atom';
 import { useAtom, useAtomValue } from 'jotai';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { pageSettingFamily } from '../../../../atoms';
@@ -24,7 +24,6 @@ import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suit
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import { toast } from '../../../../utils';
 import { MenuThemeModeSwitch } from '../header-right-items/theme-mode-switch';
-import * as styles from '../styles.css';
 import { LanguageMenu } from './language-menu';
 const CommonMenu = () => {
   const content = (
@@ -71,61 +70,56 @@ const PageMenu = () => {
   const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
   const [openConfirm, setOpenConfirm] = useState(false);
   const { removeToTrash } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
+  const handleFavorite = useCallback(() => {
+    setPageMeta(pageId, { favorite: !favorite });
+    toast(favorite ? t['Removed from Favorites']() : t['Added to Favorites']());
+  }, [favorite, pageId, setPageMeta, t]);
+  const handleSwitchMode = useCallback(() => {
+    setSetting(setting => ({
+      mode: setting?.mode === 'page' ? 'edgeless' : 'page',
+    }));
+    toast(
+      mode === 'page'
+        ? t['com.affine.edgelessMode']()
+        : t['com.affine.pageMode']()
+    );
+  }, [mode, setSetting, t]);
+  const handleOnConfirm = useCallback(() => {
+    removeToTrash(pageMeta.id);
+    toast(t['Moved to Trash']());
+    setOpenConfirm(false);
+  }, [pageMeta.id, removeToTrash, t]);
+
   const EditMenu = (
     <>
-      <>
-        <MenuItem
-          data-testid="editor-option-menu-favorite"
-          onClick={() => {
-            setPageMeta(pageId, { favorite: !favorite });
-            toast(
-              favorite
-                ? t['Removed from Favorites']()
-                : t['Added to Favorites']()
-            );
-          }}
-          icon={
-            favorite ? (
-              <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
-            ) : (
-              <FavoriteIcon />
-            )
-          }
-        >
-          {favorite ? t['Remove from favorites']() : t['Add to Favorites']()}
-        </MenuItem>
-        <MenuItem
-          icon={mode === 'page' ? <EdgelessIcon /> : <PageIcon />}
-          data-testid="editor-option-menu-edgeless"
-          onClick={() => {
-            setSetting(setting => ({
-              mode: setting?.mode === 'page' ? 'edgeless' : 'page',
-            }));
-          }}
-        >
-          {t['Convert to ']()}
-          {mode === 'page' ? t['Edgeless']() : t['Page']()}
-        </MenuItem>
-        <Export />
-        <MoveToTrash
-          data-testid="editor-option-menu-delete"
-          onItemClick={() => {
-            setOpenConfirm(true);
-          }}
-        />
-        <div className={styles.horizontalDividerContainer}>
-          <div className={styles.horizontalDivider} />
-        </div>
-      </>
-
-      <div
-        onClick={e => {
-          e.stopPropagation();
-        }}
+      <MenuItem
+        data-testid="editor-option-menu-favorite"
+        onClick={handleFavorite}
+        icon={
+          favorite ? (
+            <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
+          ) : (
+            <FavoriteIcon />
+          )
+        }
       >
-        <MenuThemeModeSwitch />
-        <LanguageMenu />
-      </div>
+        {favorite ? t['Remove from favorites']() : t['Add to Favorites']()}
+      </MenuItem>
+      <MenuItem
+        icon={mode === 'page' ? <EdgelessIcon /> : <PageIcon />}
+        data-testid="editor-option-menu-edgeless"
+        onClick={handleSwitchMode}
+      >
+        {t['Convert to ']()}
+        {mode === 'page' ? t['Edgeless']() : t['Page']()}
+      </MenuItem>
+      <Export />
+      <MoveToTrash
+        data-testid="editor-option-menu-delete"
+        onItemClick={() => {
+          setOpenConfirm(true);
+        }}
+      />
     </>
   );
 
@@ -145,11 +139,7 @@ const PageMenu = () => {
         <MoveToTrash.ConfirmModal
           open={openConfirm}
           title={pageMeta.title}
-          onConfirm={() => {
-            removeToTrash(pageMeta.id);
-            toast(t['Moved to Trash']());
-            setOpenConfirm(false);
-          }}
+          onConfirm={handleOnConfirm}
           onCancel={() => {
             setOpenConfirm(false);
           }}

apps/core/src/components/blocksuite/workspace-header/header.tsx

@@ -57,7 +57,9 @@ const HeaderRightItems: Record<HeaderRightItemName, HeaderItem> = {
   [HeaderRightItemName.EditorOptionMenu]: {
     Component: EditorOptionMenu,
     availableWhen: (_, currentPage, { isPublic }) => {
-      return !isPublic && currentPage?.meta.trash !== true;
+      return (
+        !isPublic && currentPage?.meta.trash !== true && currentPage !== null
+      );
     },
   },
   [HeaderRightItemName.WindowsAppControls]: {

apps/electron/e2e/basic.spec.ts

@@ -96,9 +96,10 @@ test('app theme', async ({ page, electronApp }) => {
   }
 
   {
-    await page.getByTestId('editor-option-menu').click();
-    await page.getByTestId('change-theme-dark').click();
+    await page.getByTestId('settings-modal-trigger').click();
+    await page.getByTestId('appearance-panel-trigger').click();
     await page.waitForTimeout(50);
+    await page.getByTestId('dark-theme-trigger').click();
     const themeMode = await root.evaluate(element =>
       element.getAttribute('data-theme')
     );

tests/affine-local/e2e/local-first-workspace.spec.ts

@@ -13,18 +13,3 @@ test('preset workspace name', async ({ page, workspace }) => {
 
   expect(currentWorkspace.flavour).toContain('local');
 });
-
-test('Open language switch menu', async ({ page, workspace }) => {
-  await openHomePage(page);
-  await waitEditorLoad(page);
-  const editorOptionMenuButton = page.getByTestId('editor-option-menu');
-  await expect(editorOptionMenuButton).toBeVisible();
-  await editorOptionMenuButton.click();
-  const languageMenuButton = page.getByTestId('language-menu-button');
-  await expect(languageMenuButton).toBeVisible();
-  const actual = await languageMenuButton.innerText();
-  expect(actual).toEqual('English');
-  const currentWorkspace = await workspace.current();
-
-  expect(currentWorkspace.flavour).toContain('local');
-});

tests/affine-local/e2e/theme.spec.ts

@@ -21,9 +21,14 @@ test('default white', async ({ browser }) => {
   await page.screenshot({
     path: resolve(testResultDir, 'affine-light-theme.png'),
   });
-  await page.getByTestId('editor-option-menu').click();
-  await page.getByTestId('change-theme-dark').click();
+  await page.getByTestId('settings-modal-trigger').click();
+  await page.getByTestId('appearance-panel-trigger').click();
   await page.waitForTimeout(50);
+  await page.getByTestId('dark-theme-trigger').click();
+  const darkMode = await root.evaluate(element =>
+    element.getAttribute('data-theme')
+  );
+  expect(darkMode).toBe('dark');
   await page.screenshot({
     path: resolve(testResultDir, 'affine-dark-theme.png'),
   });