fix(mobile): use mobile app-fallback in app-container (#8804)

close AF-1633

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

@@ -22,6 +22,7 @@ import {
   type ReactElement,
 } from 'react';
 
+import { AppFallback } from './mobile';
 import * as styles from './styles.css';
 
 export const AppContainer = ({
@@ -102,7 +103,23 @@ const BrowserLayout = ({
   );
 };
 
-const LayoutComponent = BUILD_CONFIG.isElectron ? DesktopLayout : BrowserLayout;
+const MobileLayout = ({
+  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/desktop/components/app-container/mobile.tsx

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

packages/frontend/core/src/mobile/components/index.ts

@@ -3,6 +3,5 @@ export * from './doc-card';
 export * from './rename';
 export * from './search-input';
 export * from './search-result';
-export * from './skeletons';
 export * from './user-plan-tag';
 export * from './workspace-selector';

packages/frontend/core/src/mobile/components/skeletons/index.tsx

@@ -1 +0,0 @@
-export * from './app-fallback';

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

@@ -6,6 +6,7 @@ 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';
@@ -23,7 +24,6 @@ import {
   useState,
 } from 'react';
 
-import { AppFallback } from '../../components';
 import { WorkspaceDialogs } from '../../dialogs';
 
 // TODO(@forehalo): reuse the global context with [core/electron]
@@ -91,7 +91,7 @@ export const WorkspaceLayout = ({
   }
 
   if (!isRootDocReady) {
-    return <AppFallback />;
+    return <AppContainer fallback />;
   }
 
   return (