chore(core): set read-only mode on mobile device (#7651)

Close [BS-795](https://linear.app/affine-design/issue/BS-795/affine-mobile-设置只读模式)

- Set read-only mode on mobile device
- Add mobile only support read-only warning toast
- remove `user-select: none` so that user can select text in read-only mode

packages/frontend/component/src/components/affine-banner/index.css.ts

@@ -3,8 +3,8 @@ import { style } from '@vanilla-extract/css';
 export const browserWarningStyle = style({
   backgroundColor: cssVar('backgroundWarningColor'),
   color: cssVar('warningColor'),
-  height: '36px',
   width: '100%',
+  padding: '8px 16px',
   fontSize: cssVar('fontSm'),
   display: 'flex',
   justifyContent: 'center',

packages/frontend/core/src/components/top-tip.tsx

@@ -21,11 +21,13 @@ const shouldShowWarning = (() => {
     // disable in SSR
     return false;
   }
+  if (environment.isMobile) {
+    return true;
+  }
   if (environment.isChrome) {
     return environment.chromeVersion < minimumChromeVersion;
-  } else {
-    return !environment.isMobile;
   }
+  return false;
 })();
 
 const OSWarningMessage = () => {
@@ -36,6 +38,11 @@ const OSWarningMessage = () => {
     environment.isChrome &&
     environment.chromeVersion < minimumChromeVersion;
 
+  // TODO(@L-Sun): remove this message when mobile version is able to edit.
+  if ('isMobile' in environment && environment.isMobile) {
+    return <span>{t['com.affine.top-tip.mobile']()}</span>;
+  }
+
   if (notChrome) {
     return (
       <span>
@@ -48,6 +55,7 @@ const OSWarningMessage = () => {
   } else if (notGoodVersion) {
     return <span>{t['upgradeBrowser']()}</span>;
   }
+
   return null;
 };
 

packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts

@@ -29,7 +29,6 @@ export const editorContainer = style({
 export const affineDocViewport = style({
   display: 'flex',
   flexDirection: 'column',
-  userSelect: 'none',
   containerName: 'viewport',
   containerType: 'inline-size',
   background: cssVar('backgroundPrimaryColor'),

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -4,6 +4,7 @@ import type { ChatPanel } from '@affine/core/blocksuite/presets/ai';
 import { AIProvider } from '@affine/core/blocksuite/presets/ai';
 import { PageAIOnboarding } from '@affine/core/components/affine/ai-onboarding';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
+import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { RecentDocsService } from '@affine/core/modules/quicksearch';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
 import type { PageRootService } from '@blocksuite/blocks';
@@ -83,6 +84,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
   const mode = useLiveData(doc.mode$);
   const { appSettings } = useAppSettingHelper();
   const chatPanelRef = useRef<ChatPanel | null>(null);
+  const { setDocReadonly } = useDocMetaHelper(workspace.docCollection);
 
   const isActiveView = useIsActiveView();
   // TODO(@eyhn): remove jotai here
@@ -131,6 +133,12 @@ const DetailPageImpl = memo(function DetailPageImpl() {
     return;
   }, [doc, globalContext, isActiveView, mode]);
 
+  useEffect(() => {
+    if ('isMobile' in environment && environment.isMobile) {
+      setDocReadonly(doc.id, true);
+    }
+  }, [doc.id, setDocReadonly]);
+
   const isInTrash = useLiveData(doc.meta$.map(meta => meta.trash));
   useRegisterBlocksuiteEditorCommands();
   const title = useLiveData(doc.title$);

packages/frontend/i18n/src/resources/en.json

@@ -1325,6 +1325,7 @@
   "com.affine.toastMessage.successfullyDeleted": "Successfully deleted",
   "com.affine.today": "Today",
   "com.affine.tomorrow": "Tomorrow",
+  "com.affine.top-tip.mobile": "Limited to view-only on mobile.",
   "com.affine.trashOperation.delete": "Delete",
   "com.affine.trashOperation.delete.description": "Once deleted, you can't undo this action. Do you confirm?",
   "com.affine.trashOperation.delete.title": "Permanently delete",

packages/frontend/i18n/src/resources/zh-Hans.json

@@ -1254,6 +1254,7 @@
   "com.affine.toastMessage.successfullyDeleted": "删除成功",
   "com.affine.today": "今天",
   "com.affine.tomorrow": "明日",
+  "com.affine.top-tip.mobile": "在移动设备上仅限于查看。",
   "com.affine.trashOperation.delete": "删除",
   "com.affine.trashOperation.delete.description": "一旦删除，您将无法撤销此操作。您确定吗？",
   "com.affine.trashOperation.delete.title": "永久删除",