feat(mobile): editor mode switch (#8896)

packages/frontend/core/src/mobile/pages/workspace/detail/menu/mode-switch.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const radioWrapper = style({
+  padding: '6px 10px',
+  width: '100%',
+});

packages/frontend/core/src/mobile/pages/workspace/detail/menu/mode-switch.tsx

@@ -0,0 +1,61 @@
+import {
+  RadioGroup,
+  type RadioItem,
+  useMobileMenuController,
+} from '@affine/component';
+import { EditorService } from '@affine/core/modules/editor';
+import track from '@affine/track';
+import type { DocMode } from '@blocksuite/affine/blocks';
+import { useLiveData, useService } from '@toeverything/infra';
+import { useCallback } from 'react';
+
+import * as styles from './mode-switch.css';
+
+const EdgelessRadioItem: RadioItem = {
+  value: 'edgeless',
+  label: 'Edgeless',
+  testId: 'switch-edgeless-mode-button',
+};
+const PageRadioItem: RadioItem = {
+  value: 'page',
+  label: 'Page',
+  testId: 'switch-page-mode-button',
+};
+const items = [PageRadioItem, EdgelessRadioItem];
+
+export const EditorModeSwitch = () => {
+  const { close } = useMobileMenuController();
+  const editor = useService(EditorService).editor;
+  const trash = useLiveData(editor.doc.trash$);
+  const isSharedMode = editor.isSharedMode;
+  const currentMode = useLiveData(editor.mode$);
+
+  const onToggle = useCallback(
+    (mode: DocMode) => {
+      editor.setMode(mode);
+      editor.setSelector(undefined);
+      track.$.header.actions.switchPageMode({ mode });
+      close();
+    },
+    [close, editor]
+  );
+
+  if (trash || isSharedMode) {
+    return null;
+  }
+
+  return (
+    <div className={styles.radioWrapper}>
+      <RadioGroup
+        itemHeight={28}
+        width="100%"
+        borderRadius={8}
+        padding={2}
+        gap={4}
+        value={currentMode}
+        items={items}
+        onChange={onToggle}
+      />
+    </div>
+  );
+};

packages/frontend/core/src/mobile/pages/workspace/detail/page-header-more-button.tsx

@@ -25,6 +25,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { JournalConflictsMenuItem } from './menu/journal-conflicts';
 import { JournalTodayActivityMenuItem } from './menu/journal-today-activity';
+import { EditorModeSwitch } from './menu/mode-switch';
 import * as styles from './page-header-more-button.css';
 import { DocInfoSheet } from './sheets/doc-info';
 
@@ -86,6 +87,7 @@ export const PageHeaderMenuButton = () => {
 
   const EditMenu = (
     <>
+      <EditorModeSwitch />
       <JournalTodayActivityMenuItem suffix={<MenuSeparator />} />
       <MobileMenuItem
         prefixIcon={primaryMode === 'page' ? <EdgelessIcon /> : <PageIcon />}