feat(mobile): mobile index page UI (#7959)

packages/frontend/mobile/src/pages/index.tsx

@@ -1,8 +1,9 @@
 import { Component as IndexComponent } from '@affine/core/pages/index';
+import { WorkspaceSubPath } from '@affine/core/shared';
 
 // Default route fallback for mobile
 
 export const Component = () => {
   // TODO: replace with a mobile version
-  return <IndexComponent />;
+  return <IndexComponent defaultIndexRoute={WorkspaceSubPath.HOME} />;
 };

packages/frontend/mobile/src/pages/workspace/all.tsx

@@ -1,3 +1,10 @@
+import { AppTabs } from '../../components';
+
 export const Component = () => {
-  return <div>/workspace/:workspaceId/all</div>;
+  return (
+    <>
+      `workspace/all.tsx`;
+      <AppTabs />
+    </>
+  );
 };

packages/frontend/mobile/src/pages/workspace/detail.tsx

@@ -1,3 +1,10 @@
+import { PageHeader } from '../../components/page-header';
+
 export const Component = () => {
-  return <div>/workspace/:workspaceId/:pageId</div>;
+  return (
+    <>
+      <PageHeader back />
+      <div>/workspace/:workspaceId/:pageId</div>;
+    </>
+  );
 };

packages/frontend/mobile/src/pages/workspace/home.tsx

@@ -0,0 +1,35 @@
+import {
+  ExplorerCollections,
+  ExplorerFavorites,
+  ExplorerMigrationFavorites,
+  ExplorerMobileContext,
+  ExplorerOrganize,
+} from '@affine/core/modules/explorer';
+import { ExplorerTags } from '@affine/core/modules/explorer/views/sections/tags';
+
+import { AppTabs } from '../../components';
+import { HomeHeader, RecentDocs } from '../../views';
+
+export const Component = () => {
+  return (
+    <ExplorerMobileContext.Provider value={true}>
+      <HomeHeader />
+      <RecentDocs />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 32,
+          padding: '0 8px 32px 8px',
+        }}
+      >
+        <ExplorerFavorites />
+        {runtimeConfig.enableOrganize && <ExplorerOrganize />}
+        <ExplorerMigrationFavorites />
+        <ExplorerCollections />
+        <ExplorerTags />
+      </div>
+      <AppTabs />
+    </ExplorerMobileContext.Provider>
+  );
+};

packages/frontend/mobile/src/pages/workspace/index.tsx

@@ -1,5 +1,5 @@
+import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary';
 import { AppFallback } from '@affine/core/components/affine/app-container';
-import { RouteContainer } from '@affine/core/modules/workbench/view/route-container';
 import { PageNotFound } from '@affine/core/pages/404';
 import { MobileWorkbenchRoot } from '@affine/core/pages/workspace/workbench-root';
 import {
@@ -7,13 +7,44 @@ import {
   useServices,
   WorkspacesService,
 } from '@toeverything/infra';
-import { lazy as reactLazy, useEffect, useMemo, useState } from 'react';
-import { matchPath, useLocation, useParams } from 'react-router-dom';
+import {
+  lazy as reactLazy,
+  Suspense,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  matchPath,
+  type RouteObject,
+  useLocation,
+  useParams,
+} from 'react-router-dom';
 
 import { viewRoutes } from '../../router';
 import { WorkspaceLayout } from './layout';
 
-const warpedRoutes = viewRoutes.map(({ path, lazy }) => {
+type Route = { Component: React.ComponentType };
+/**
+ * Source: core/src/modules/workbench/view/route-container.tsx
+ **/
+const MobileRouteContainer = ({ route }: { route: Route }) => {
+  return (
+    <AffineErrorBoundary>
+      <Suspense>
+        <route.Component />
+      </Suspense>
+    </AffineErrorBoundary>
+  );
+};
+
+const warpedRoutes = viewRoutes.map((originalRoute: RouteObject) => {
+  if (originalRoute.Component || !originalRoute.lazy) {
+    return originalRoute;
+  }
+
+  const { path, lazy } = originalRoute;
+
   const Component = reactLazy(() =>
     lazy().then(m => ({
       default: m.Component as React.ComponentType,
@@ -26,7 +57,7 @@ const warpedRoutes = viewRoutes.map(({ path, lazy }) => {
   return {
     path,
     Component: () => {
-      return <RouteContainer route={route} />;
+      return <MobileRouteContainer route={route} />;
     },
   };
 });

packages/frontend/mobile/src/pages/workspace/search.tsx

@@ -0,0 +1,10 @@
+import { AppTabs } from '../../components';
+
+export const Component = () => {
+  return (
+    <>
+      Search
+      <AppTabs />
+    </>
+  );
+};