feat: init mobile entry (#7905)

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -73,7 +73,7 @@ export const WorkspaceLayout = function WorkspaceLayout({
   );
 };
 
-const WorkspaceLayoutProviders = ({ children }: PropsWithChildren) => {
+export const WorkspaceLayoutProviders = ({ children }: PropsWithChildren) => {
   const t = useI18n();
   const pushGlobalLoadingEvent = useSetAtom(pushGlobalLoadingEventAtom);
   const resolveGlobalLoadingEvent = useSetAtom(resolveGlobalLoadingEventAtom);

packages/frontend/core/src/modules/workbench/view/view-root.tsx

@@ -1,5 +1,6 @@
 import { FrameworkScope, useLiveData } from '@toeverything/infra';
-import { lazy as reactLazy, useLayoutEffect, useMemo } from 'react';
+import { useLayoutEffect, useMemo } from 'react';
+import type { RouteObject } from 'react-router-dom';
 import {
   createMemoryRouter,
   RouterProvider,
@@ -7,30 +8,16 @@ import {
   UNSAFE_RouteContext,
 } from 'react-router-dom';
 
-import { viewRoutes } from '../../../router';
 import type { View } from '../entities/view';
-import { RouteContainer } from './route-container';
 
-const warpedRoutes = viewRoutes.map(({ path, lazy }) => {
-  const Component = reactLazy(() =>
-    lazy().then(m => ({
-      default: m.Component as React.ComponentType,
-    }))
-  );
-  const route = {
-    Component,
-  };
-
-  return {
-    path,
-    Component: () => {
-      return <RouteContainer route={route} />;
-    },
-  };
-});
-
-export const ViewRoot = ({ view }: { view: View }) => {
-  const viewRouter = useMemo(() => createMemoryRouter(warpedRoutes), []);
+export const ViewRoot = ({
+  view,
+  routes,
+}: {
+  view: View;
+  routes: RouteObject[];
+}) => {
+  const viewRouter = useMemo(() => createMemoryRouter(routes), [routes]);
 
   const location = useLiveData(view.location$);
 

packages/frontend/core/src/modules/workbench/view/workbench-root.tsx

@@ -1,5 +1,6 @@
 import { ResizePanel } from '@affine/component/resize-panel';
 import { rightSidebarWidthAtom } from '@affine/core/atoms';
+import { viewRoutes } from '@affine/core/router';
 import {
   appSettingAtom,
   FrameworkScope,
@@ -7,13 +8,21 @@ import {
   useService,
 } from '@toeverything/infra';
 import { useAtom, useAtomValue } from 'jotai';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  lazy as reactLazy,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useLocation } from 'react-router-dom';
 
 import type { View } from '../entities/view';
 import { WorkbenchService } from '../services/workbench';
 import { useBindWorkbenchToBrowserRouter } from './browser-adapter';
 import { useBindWorkbenchToDesktopRouter } from './desktop-adapter';
+import { RouteContainer } from './route-container';
 import { SidebarContainer } from './sidebar/sidebar-container';
 import { SplitView } from './split-view/split-view';
 import { ViewIslandRegistryProvider } from './view-islands';
@@ -24,6 +33,24 @@ const useAdapter = environment.isDesktop
   ? useBindWorkbenchToDesktopRouter
   : useBindWorkbenchToBrowserRouter;
 
+const warpedRoutes = viewRoutes.map(({ path, lazy }) => {
+  const Component = reactLazy(() =>
+    lazy().then(m => ({
+      default: m.Component as React.ComponentType,
+    }))
+  );
+  const route = {
+    Component,
+  };
+
+  return {
+    path,
+    Component: () => {
+      return <RouteContainer route={route} />;
+    },
+  };
+});
+
 export const WorkbenchRoot = memo(() => {
   const workbench = useService(WorkbenchService).workbench;
 
@@ -93,7 +120,7 @@ const WorkbenchView = ({ view, index }: { view: View; index: number }) => {
 
   return (
     <div className={styles.workbenchViewContainer} ref={containerRef}>
-      <ViewRoot key={view.id} view={view} />
+      <ViewRoot routes={warpedRoutes} key={view.id} view={view} />
     </div>
   );
 };

packages/frontend/core/src/pages/workspace/workbench-root.tsx

@@ -0,0 +1,26 @@
+import { WorkbenchService } from '@affine/core/modules/workbench';
+import { useBindWorkbenchToBrowserRouter } from '@affine/core/modules/workbench/view/browser-adapter';
+import { ViewRoot } from '@affine/core/modules/workbench/view/view-root';
+import { useLiveData, useService } from '@toeverything/infra';
+import { useEffect } from 'react';
+import { type RouteObject, useLocation } from 'react-router-dom';
+
+export const MobileWorkbenchRoot = ({ routes }: { routes: RouteObject[] }) => {
+  const workbench = useService(WorkbenchService).workbench;
+
+  // for debugging
+  (window as any).workbench = workbench;
+
+  const views = useLiveData(workbench.views$);
+
+  const location = useLocation();
+  const basename = location.pathname.match(/\/workspace\/[^/]+/g)?.[0] ?? '/';
+
+  useBindWorkbenchToBrowserRouter(workbench, basename);
+
+  useEffect(() => {
+    workbench.updateBasename(basename);
+  }, [basename, workbench]);
+
+  return <ViewRoot routes={routes} view={views[0]} />;
+};

packages/frontend/core/src/router.tsx

@@ -11,7 +11,7 @@ import {
 
 export const NavigateContext = createContext<NavigateFunction | null>(null);
 
-function RootRouter() {
+export function RootRouter() {
   const navigate = useNavigate();
   const [ready, setReady] = useState(false);
   useEffect(() => {