refactor(core): independent app fallback for mobile (#8884)

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

@@ -1,5 +1,5 @@
 import { AffineContext } from '@affine/core/components/context';
-import { AppContainer } from '@affine/core/desktop/components/app-container';
+import { AppFallback } from '@affine/core/mobile/components/app-fallback';
 import { configureMobileModules } from '@affine/core/mobile/modules';
 import { router } from '@affine/core/mobile/router';
 import { configureCommonModules } from '@affine/core/modules';
@@ -47,7 +47,7 @@ export function App() {
         <I18nProvider>
           <AffineContext store={getCurrentStore()}>
             <RouterProvider
-              fallbackElement={<AppContainer fallback />}
+              fallbackElement={<AppFallback />}
               router={router}
               future={future}
             />

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

@@ -1,5 +1,5 @@
 import { AffineContext } from '@affine/core/components/context';
-import { AppContainer } from '@affine/core/desktop/components/app-container';
+import { AppFallback } from '@affine/core/mobile/components/app-fallback';
 import { configureMobileModules } from '@affine/core/mobile/modules';
 import { VirtualKeyboardProvider } from '@affine/core/mobile/modules/virtual-keyboard';
 import { router } from '@affine/core/mobile/router';
@@ -133,7 +133,7 @@ export function App() {
         <I18nProvider>
           <AffineContext store={getCurrentStore()}>
             <RouterProvider
-              fallbackElement={<AppContainer fallback />}
+              fallbackElement={<AppFallback />}
               router={router}
               future={future}
             />

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

@@ -1,5 +1,5 @@
 import { AffineContext } from '@affine/core/components/context';
-import { AppContainer } from '@affine/core/desktop/components/app-container';
+import { AppFallback } from '@affine/core/mobile/components/app-fallback';
 import { configureMobileModules } from '@affine/core/mobile/modules';
 import { router } from '@affine/core/mobile/router';
 import { configureCommonModules } from '@affine/core/modules';
@@ -67,7 +67,7 @@ export function App() {
         <I18nProvider>
           <AffineContext store={getCurrentStore()}>
             <RouterProvider
-              fallbackElement={<AppContainer fallback />}
+              fallbackElement={<AppFallback />}
               router={router}
               future={future}
             />

packages/frontend/core/src/desktop/components/app-container/index.tsx

@@ -22,7 +22,6 @@ import {
   type ReactElement,
 } from 'react';
 
-import { AppFallback } from './mobile';
 import * as styles from './styles.css';
 
 export const AppContainer = ({
@@ -103,23 +102,7 @@ const BrowserLayout = ({
   );
 };
 
-const MobileLayout = ({
+const LayoutComponent = BUILD_CONFIG.isElectron ? DesktopLayout : BrowserLayout;
-  children,
-  fallback = false,
-}: PropsWithChildren<{ fallback?: boolean }>) => {
-  return (
-    <div className={styles.browserAppViewContainer}>
-      {fallback ? <AppFallback /> : null}
-      <MainContainer>{children}</MainContainer>
-    </div>
-  );
-};
-
-const LayoutComponent = BUILD_CONFIG.isElectron
-  ? DesktopLayout
-  : BUILD_CONFIG.isMobileEdition
-    ? MobileLayout
-    : BrowserLayout;
 
 const MainContainer = forwardRef<
   HTMLDivElement,

packages/frontend/core/src/mobile/components/app-fallback/index.tsx

@@ -1,5 +1,6 @@
 import { SafeArea, Skeleton } from '@affine/component';
-import { WorkspaceSelector } from '@affine/core/mobile/components';
+
+import { WorkspaceSelector } from '../workspace-selector';
 
 const SectionTitleFallback = () => {
   return (

packages/frontend/core/src/mobile/pages/workspace/layout.tsx

@@ -6,7 +6,6 @@ import {
 } from '@affine/core/components/affine/quota-reached-modal';
 import { SWRConfigProvider } from '@affine/core/components/providers/swr-config-provider';
 import { WorkspaceSideEffects } from '@affine/core/components/providers/workspace-side-effects';
-import { AppContainer } from '@affine/core/desktop/components/app-container';
 import { PeekViewManagerModal } from '@affine/core/modules/peek-view';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import type { Workspace, WorkspaceMetadata } from '@toeverything/infra';
@@ -24,6 +23,7 @@ import {
   useState,
 } from 'react';
 
+import { AppFallback } from '../../components/app-fallback';
 import { WorkspaceDialogs } from '../../dialogs';
 
 // TODO(@forehalo): reuse the global context with [core/electron]
@@ -91,7 +91,7 @@ export const WorkspaceLayout = ({
   }
 
   if (!isRootDocReady) {
-    return <AppContainer fallback />;
+    return <AppFallback />;
   }
 
   return (