Merge branch 'canary' into 10-15-feat_mobile_ios_app_testflight

toeverything · Oct 18, 2024 · 422bc1c · 422bc1c
2 parents cf34dfb + 4122cec
commit 422bc1c
Show file tree

Hide file tree

Showing 25 changed files with 249 additions and 149 deletions.
diff --git a/packages/backend/server/package.json b/packages/backend/server/package.json
@@ -66,7 +66,7 @@
     "graphql-upload": "^17.0.0",
     "html-validate": "^8.20.1",
     "ioredis": "^5.3.2",
-    "is-mobile": "^4.0.0",
+    "is-mobile": "^5.0.0",
     "keyv": "^5.0.0",
     "lodash-es": "^4.17.21",
     "mixpanel": "^0.18.0",

diff --git a/packages/common/infra/src/modules/doc/constants.ts b/packages/common/infra/src/modules/doc/constants.ts
@@ -11,4 +11,9 @@ export const BUILT_IN_CUSTOM_PROPERTY_TYPE = [
     type: 'tags',
     index: 'a0000001',
   },
+  {
+    id: 'docPrimaryMode',
+    type: 'docPrimaryMode',
+    show: 'always-hide',
+  },
 ] as DocCustomPropertyInfo[];
diff --git a/packages/frontend/component/src/ui/property/property.css.ts b/packages/frontend/component/src/ui/property/property.css.ts
@@ -65,6 +65,7 @@ export const hide = style({
 export const propertyNameContainer = style({
   display: 'flex',
   flexDirection: 'column',
+  justifyContent: 'center',
   position: 'relative',
   borderRadius: 4,
   fontSize: cssVar('fontSm'),

diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
@@ -51,7 +51,6 @@
     "idb": "^8.0.0",
     "idb-keyval": "^6.2.1",
     "image-blob-reduce": "^4.1.0",
-    "intl-segmenter-polyfill-rs": "^0.1.7",
     "is-svg": "^5.0.0",
     "jotai": "^2.8.0",
     "jotai-scope": "^0.7.0",

diff --git a/packages/frontend/core/src/bootstrap/polyfill/index.ts b/packages/frontend/core/src/bootstrap/polyfill/index.ts
@@ -1,5 +1,4 @@
 import { polyfillDispose } from './dispose';
-import { polyfillI18n } from './intl-segmenter';
 import { polyfillPromise } from './promise-with-resolvers';
 import { polyfillEventLoop } from './request-idle-callback';
 import { polyfillResizeObserver } from './resize-observer';
@@ -11,7 +10,6 @@ export function polyfillElectron() {
 export async function polyfillBrowser() {
   polyfillResizeObserver();
   polyfillEventLoop();
-  await polyfillI18n();
   await polyfillPromise();
   await polyfillDispose();
 }
diff --git a/packages/frontend/core/src/bootstrap/polyfill/intl-segmenter.ts b/packages/frontend/core/src/bootstrap/polyfill/intl-segmenter.ts
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
@@ -1,4 +1,4 @@
-import { toast } from '@affine/component';
+import { notify } from '@affine/component';
 import {
   Menu,
   MenuItem,
@@ -74,6 +74,7 @@ export const PageHeaderMenuButton = ({
     editorService.editor.doc.meta$.map(meta => meta.trash)
   );
   const currentMode = useLiveData(editorService.editor.mode$);
+  const primaryMode = useLiveData(editorService.editor.doc.primaryMode$);
 
   const workbench = useService(WorkbenchService).workbench;
 
@@ -148,16 +149,22 @@ export const PageHeaderMenuButton = ({
   }, [rename]);
 
   const handleSwitchMode = useCallback(() => {
-    editorService.editor.toggleMode();
+    const mode = primaryMode === 'page' ? 'edgeless' : 'page';
+    editorService.editor.doc.setPrimaryMode(mode);
     track.$.header.docOptions.switchPageMode({
-      mode: currentMode === 'page' ? 'edgeless' : 'page',
+      mode,
     });
-    toast(
-      currentMode === 'page'
-        ? t['com.affine.toastMessage.edgelessMode']()
-        : t['com.affine.toastMessage.pageMode']()
-    );
-  }, [currentMode, editorService, t]);
+    notify.success({
+      title:
+        primaryMode === 'page'
+          ? t['com.affine.toastMessage.defaultMode.edgeless.title']()
+          : t['com.affine.toastMessage.defaultMode.page.title'](),
+      message:
+        primaryMode === 'page'
+          ? t['com.affine.toastMessage.defaultMode.edgeless.message']()
+          : t['com.affine.toastMessage.defaultMode.page.message'](),
+    });
+  }, [primaryMode, editorService, t]);
 
   const handleMenuOpenChange = useCallback((open: boolean) => {
     if (open) {
@@ -264,14 +271,13 @@ export const PageHeaderMenuButton = ({
         </MenuItem>
       )}
       <MenuItem
-        prefixIcon={currentMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
+        prefixIcon={primaryMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
         data-testid="editor-option-menu-edgeless"
         onSelect={handleSwitchMode}
       >
-        {t['Convert to ']()}
-        {currentMode === 'page'
-          ? t['com.affine.pageMode.edgeless']()
-          : t['com.affine.pageMode.page']()}
+        {primaryMode === 'page'
+          ? t['com.affine.editorDefaultMode.edgeless']()
+          : t['com.affine.editorDefaultMode.page']()}
       </MenuItem>
       <MenuItem
         data-testid="editor-option-menu-favorite"

diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
@@ -1,4 +1,4 @@
-import { RadioGroup, type RadioItem, toast, Tooltip } from '@affine/component';
+import { RadioGroup, type RadioItem, Tooltip } from '@affine/component';
 import { registerAffineCommand } from '@affine/core/commands';
 import { EditorService } from '@affine/core/modules/editor';
 import { useI18n } from '@affine/i18n';
@@ -41,19 +41,15 @@ export const EditorModeSwitch = () => {
     if (currentMode === 'page' || isSharedMode || trash) return;
     editor.setMode('page');
     editor.setSelector(undefined);
-    editor.doc.setPrimaryMode('page');
-    toast(t['com.affine.toastMessage.pageMode']());
     track.$.header.actions.switchPageMode({ mode: 'page' });
-  }, [currentMode, editor, isSharedMode, t, trash]);
+  }, [currentMode, editor, isSharedMode, trash]);
 
   const toggleEdgeless = useCallback(() => {
     if (currentMode === 'edgeless' || isSharedMode || trash) return;
     editor.setMode('edgeless');
     editor.setSelector(undefined);
-    editor.doc.setPrimaryMode('edgeless');
-    toast(t['com.affine.toastMessage.edgelessMode']());
     track.$.header.actions.switchPageMode({ mode: 'edgeless' });
-  }, [currentMode, editor, isSharedMode, t, trash]);
+  }, [currentMode, editor, isSharedMode, trash]);
 
   const onModeChange = useCallback(
     (mode: DocMode) => {

diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx
@@ -1,4 +1,5 @@
 import { toast } from '@affine/component';
+import { AppSidebarService } from '@affine/core/modules/app-sidebar';
 import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import type { DocMode } from '@blocksuite/affine/blocks';
@@ -7,16 +8,24 @@ import { type DocProps, DocsService, useServices } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
 export const usePageHelper = (docCollection: DocCollection) => {
-  const { docsService, workbenchService, editorSettingService } = useServices({
+  const {
+    docsService,
+    workbenchService,
+    editorSettingService,
+    appSidebarService,
+  } = useServices({
     DocsService,
     WorkbenchService,
     EditorSettingService,
+    AppSidebarService,
   });
   const workbench = workbenchService.workbench;
   const docRecordList = docsService.list;
+  const appSidebar = appSidebarService.sidebar;
 
   const createPageAndOpen = useCallback(
     (mode?: DocMode, open?: boolean | 'new-tab') => {
+      appSidebar.setHovering(false);
       const docProps: DocProps = {
         note: editorSettingService.editorSetting.get('affine:note'),
       };
@@ -31,7 +40,13 @@ export const usePageHelper = (docCollection: DocCollection) => {
         });
       return page;
     },
-    [docRecordList, docsService, editorSettingService, workbench]
+    [
+      appSidebar,
+      docRecordList,
+      docsService,
+      editorSettingService.editorSetting,
+      workbench,
+    ]
   );
 
   const createEdgelessAndOpen = useCallback(

diff --git a/packages/frontend/core/src/components/doc-properties/types/constant.tsx b/packages/frontend/core/src/components/doc-properties/types/constant.tsx
@@ -3,6 +3,7 @@ import {
   CheckBoxCheckLinearIcon,
   CreatedEditedIcon,
   DateTimeIcon,
+  FileIcon,
   NumberIcon,
   TagIcon,
   TextIcon,
@@ -11,6 +12,7 @@ import {
 import { CheckboxValue } from './checkbox';
 import { CreatedByValue, UpdatedByValue } from './created-updated-by';
 import { DateValue } from './date';
+import { DocPrimaryModeValue } from './doc-primary-mode';
 import { NumberValue } from './number';
 import { TagsValue } from './tags';
 import { TextValue } from './text';
@@ -54,6 +56,11 @@ export const DocPropertyTypes = {
     uniqueId: 'tags',
     renameable: false,
   },
+  docPrimaryMode: {
+    icon: FileIcon,
+    value: DocPrimaryModeValue,
+    name: 'com.affine.page-properties.property.docPrimaryMode',
+  },
 } as Record<
   string,
   {

diff --git a/packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.tsx b/packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.tsx
@@ -0,0 +1,58 @@
+import {
+  notify,
+  PropertyValue,
+  RadioGroup,
+  type RadioItem,
+} from '@affine/component';
+import { useI18n } from '@affine/i18n';
+import type { DocMode } from '@blocksuite/affine/blocks';
+import { DocService, useLiveData, useService } from '@toeverything/infra';
+import { useCallback, useMemo } from 'react';
+
+export const DocPrimaryModeValue = () => {
+  const t = useI18n();
+  const doc = useService(DocService).doc;
+
+  const primaryMode = useLiveData(doc.primaryMode$);
+
+  const DocModeItems = useMemo<RadioItem[]>(
+    () => [
+      {
+        value: 'page' as DocMode,
+        label: t['Page'](),
+      },
+      {
+        value: 'edgeless' as DocMode,
+        label: t['Edgeless'](),
+      },
+    ],
+    [t]
+  );
+
+  const handleChange = useCallback(
+    (mode: DocMode) => {
+      doc.setPrimaryMode(mode);
+      notify.success({
+        title:
+          mode === 'page'
+            ? t['com.affine.toastMessage.defaultMode.page.title']()
+            : t['com.affine.toastMessage.defaultMode.edgeless.title'](),
+        message:
+          mode === 'page'
+            ? t['com.affine.toastMessage.defaultMode.page.message']()
+            : t['com.affine.toastMessage.defaultMode.edgeless.message'](),
+      });
+    },
+    [doc, t]
+  );
+  return (
+    <PropertyValue>
+      <RadioGroup
+        width={194}
+        value={primaryMode}
+        onChange={handleChange}
+        items={DocModeItems}
+      />
+    </PropertyValue>
+  );
+};
diff --git a/packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx b/packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx
@@ -213,6 +213,7 @@ const CollectionListItemWrapper = forwardRef(
 
     const commonProps = useMemo(
       () => ({
+        role: 'list-item',
         'data-testid': 'collection-list-item',
         'data-collection-id': collectionId,
         'data-draggable': draggable,

diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx b/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
@@ -345,6 +345,7 @@ const PageListItemWrapper = forwardRef(
 
     const commonProps = useMemo(
       () => ({
+        role: 'list-item',
         'data-testid': 'page-list-item',
         'data-page-id': pageId,
         'data-draggable': draggable,

diff --git a/packages/frontend/core/src/components/page-list/list.tsx b/packages/frontend/core/src/components/page-list/list.tsx
@@ -61,7 +61,9 @@ const useItemSelectionStateEffect = () => {
         if (
           target.tagName === 'BUTTON' ||
           target.tagName === 'INPUT' ||
-          (e.target as HTMLElement).closest('button, input, [role="toolbar"]')
+          (e.target as HTMLElement).closest(
+            'button, input, [role="toolbar"], [role="list-item"]'
+          )
         ) {
           return;
         }

diff --git a/packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx b/packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx
@@ -198,6 +198,7 @@ const TagListItemWrapper = forwardRef(
 
     const commonProps = useMemo(
       () => ({
+        role: 'list-item',
         'data-testid': 'tag-list-item',
         'data-tag-id': tagId,
         'data-draggable': draggable,

diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/page-header-more-button.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/page-header-more-button.tsx
@@ -1,4 +1,4 @@
-import { IconButton, toast } from '@affine/component';
+import { IconButton, notify } from '@affine/component';
 import {
   MenuSeparator,
   MobileMenu,
@@ -39,21 +39,29 @@ export const PageHeaderMenuButton = () => {
   const isInTrash = useLiveData(
     editorService.editor.doc.meta$.map(meta => meta.trash)
   );
-  const currentMode = useLiveData(editorService.editor.mode$);
+  const primaryMode = useLiveData(editorService.editor.doc.primaryMode$);
 
   const { favorite, toggleFavorite } = useFavorite(docId);
 
   const handleSwitchMode = useCallback(() => {
-    editorService.editor.toggleMode();
+    const mode = primaryMode === 'page' ? 'edgeless' : 'page';
+    // TODO(@JimmFly): remove setMode when there has view mode switch
+    editorService.editor.setMode(mode);
+    editorService.editor.doc.setPrimaryMode(mode);
     track.$.header.docOptions.switchPageMode({
-      mode: currentMode === 'page' ? 'edgeless' : 'page',
+      mode,
     });
-    toast(
-      currentMode === 'page'
-        ? t['com.affine.toastMessage.edgelessMode']()
-        : t['com.affine.toastMessage.pageMode']()
-    );
-  }, [currentMode, editorService, t]);
+    notify.success({
+      title:
+        primaryMode === 'page'
+          ? t['com.affine.toastMessage.defaultMode.edgeless.title']()
+          : t['com.affine.toastMessage.defaultMode.page.title'](),
+      message:
+        primaryMode === 'page'
+          ? t['com.affine.toastMessage.defaultMode.edgeless.message']()
+          : t['com.affine.toastMessage.defaultMode.page.message'](),
+    });
+  }, [primaryMode, editorService, t]);
 
   const handleMenuOpenChange = useCallback((open: boolean) => {
     if (open) {
@@ -75,14 +83,13 @@ export const PageHeaderMenuButton = () => {
   const EditMenu = (
     <>
       <MobileMenuItem
-        prefixIcon={currentMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
+        prefixIcon={primaryMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
         data-testid="editor-option-menu-mode-switch"
         onSelect={handleSwitchMode}
       >
-        {t['Convert to ']()}
-        {currentMode === 'page'
-          ? t['com.affine.pageMode.edgeless']()
-          : t['com.affine.pageMode.page']()}
+        {primaryMode === 'page'
+          ? t['com.affine.editorDefaultMode.edgeless']()
+          : t['com.affine.editorDefaultMode.page']()}
       </MobileMenuItem>
       <MobileMenuItem
         data-testid="editor-option-menu-favorite"