fix(core): do not show open-in-app in mobile web browser (#8694)

packages/frontend/apps/web/src/app.tsx

@@ -5,8 +5,10 @@ import { Telemetry } from '@affine/core/components/telemetry';
 import { router } from '@affine/core/desktop/router';
 import { configureCommonModules } from '@affine/core/modules';
 import { I18nProvider } from '@affine/core/modules/i18n';
-import { configureOpenInApp } from '@affine/core/modules/open-in-app';
+import {
-import { WebOpenInAppGuard } from '@affine/core/modules/open-in-app/views/open-in-app-guard';
+  configureOpenInApp,
+  OpenInAppGuard,
+} from '@affine/core/modules/open-in-app';
 import { configureLocalStorageStateStorageImpls } from '@affine/core/modules/storage';
 import { CustomThemeModifier } from '@affine/core/modules/theme-editor';
 import { PopupWindowProvider } from '@affine/core/modules/url';
@@ -78,13 +80,13 @@ export function App() {
               <Telemetry />
               <CustomThemeModifier />
               <GlobalLoading />
-              <WebOpenInAppGuard>
+              <OpenInAppGuard>
                 <RouterProvider
                   fallbackElement={<AppFallback key="RouterFallback" />}
                   router={router}
                   future={future}
                 />
-              </WebOpenInAppGuard>
+              </OpenInAppGuard>
             </AffineContext>
           </I18nProvider>
         </CacheProvider>

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -107,7 +107,7 @@ export const AppearanceSettings = () => {
         {enableThemeEditor ? <ThemeEditorSetting /> : null}
       </SettingWrapper>
 
-      {BUILD_CONFIG.isWeb ? (
+      {BUILD_CONFIG.isWeb && !environment.isMobile ? (
         <SettingWrapper title={t['com.affine.setting.appearance.links']()}>
           <SettingRow
             name={t['com.affine.setting.appearance.open-in-app']()}

packages/frontend/core/src/modules/open-in-app/index.ts

@@ -8,6 +8,7 @@ import { OpenInAppService } from './services';
 
 export * from './services';
 export * from './utils';
+export * from './views/open-in-app-guard';
 
 export const configureOpenInApp = (framework: Framework) => {
   framework.service(OpenInAppService, [GlobalState, WorkspacesService]);

packages/frontend/core/src/modules/open-in-app/views/open-in-app-guard.tsx

@@ -1,6 +1,6 @@
 import { assertExists } from '@blocksuite/affine/global/utils';
 import { useLiveData, useService } from '@toeverything/infra';
-import { useCallback, useEffect } from 'react';
+import { Fragment, useCallback, useEffect } from 'react';
 
 import { OpenInAppService } from '../services';
 import { OpenInAppPage } from './open-in-app-page';
@@ -8,11 +8,7 @@ import { OpenInAppPage } from './open-in-app-page';
 /**
  * Web only guard to open the URL in desktop app for different conditions
  */
-export const WebOpenInAppGuard = ({
+const WebOpenInAppGuard = ({ children }: { children: React.ReactNode }) => {
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
   assertExists(
     BUILD_CONFIG.isWeb,
     'WebOpenInAppGuard should only be used in web'
@@ -36,9 +32,13 @@ export const WebOpenInAppGuard = ({
     return null;
   }
 
-  return shouldOpenInApp ? (
+  return shouldOpenInApp && !environment.isMobile ? (
     <OpenInAppPage openHereClicked={onOpenHere} />
   ) : (
     children
   );
 };
+
+export const OpenInAppGuard = environment.isMobile
+  ? Fragment
+  : WebOpenInAppGuard;