refactor(core): move mobile components to core (#8258)

packages/frontend/apps/electron/renderer/app.tsx

@@ -6,6 +6,7 @@ import { GlobalLoading } from '@affine/component/global-loading';
 import { AppFallback } from '@affine/core/components/affine/app-container';
 import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
 import { Telemetry } from '@affine/core/components/telemetry';
+import { router } from '@affine/core/desktop/router';
 import { configureCommonModules } from '@affine/core/modules';
 import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
 import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
@@ -16,7 +17,6 @@ import {
   configureBrowserWorkspaceFlavours,
   configureSqliteWorkspaceEngineStorageProvider,
 } from '@affine/core/modules/workspace-engine';
-import { router } from '@affine/core/router';
 import createEmotionCache from '@affine/core/utils/create-emotion-cache';
 import { createI18n, setUpLanguage } from '@affine/i18n';
 import { CacheProvider } from '@emotion/react';

packages/frontend/apps/mobile/package.json

@@ -22,7 +22,6 @@
     "@sentry/react": "^8.0.0",
     "@toeverything/theme": "^1.0.9",
     "clsx": "^2.1.1",
-    "figma-squircle": "^1.0.0",
     "jotai": "^2.9.3",
     "jotai-effect": "^1.0.2",
     "jotai-scope": "^0.7.2",

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

@@ -1,12 +1,15 @@
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
-import './styles/mobile.css';
+import '@affine/core/mobile/styles/mobile.css';
 
 import { AffineContext } from '@affine/component/context';
 import { AppFallback } from '@affine/core/components/affine/app-container';
 import { Telemetry } from '@affine/core/components/telemetry';
+import { configureMobileModules } from '@affine/core/mobile/modules';
+import { router } from '@affine/core/mobile/router';
 import { configureCommonModules } from '@affine/core/modules';
 import { configureLocalStorageStateStorageImpls } from '@affine/core/modules/storage';
+import { configureIndexedDBUserspaceStorageProvider } from '@affine/core/modules/userspace';
 import { configureBrowserWorkbenchModule } from '@affine/core/modules/workbench';
 import {
   configureBrowserWorkspaceFlavours,
@@ -22,9 +25,6 @@ import {
 import { Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
-import { configureMobileModules } from './modules';
-import { router } from './router';
-
 const future = {
   v7_startTransition: true,
 } as const;
@@ -44,6 +44,7 @@ configureBrowserWorkbenchModule(framework);
 configureLocalStorageStateStorageImpls(framework);
 configureBrowserWorkspaceFlavours(framework);
 configureIndexedDBWorkspaceEngineStorageProvider(framework);
+configureIndexedDBUserspaceStorageProvider(framework);
 configureMobileModules(framework);
 const frameworkProvider = framework.provider();
 

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

@@ -5,6 +5,7 @@ import { AffineContext } from '@affine/component/context';
 import { GlobalLoading } from '@affine/component/global-loading';
 import { AppFallback } from '@affine/core/components/affine/app-container';
 import { Telemetry } from '@affine/core/components/telemetry';
+import { router } from '@affine/core/desktop/router';
 import { configureCommonModules } from '@affine/core/modules';
 import { configureLocalStorageStateStorageImpls } from '@affine/core/modules/storage';
 import { CustomThemeModifier } from '@affine/core/modules/theme-editor';
@@ -14,7 +15,6 @@ import {
   configureBrowserWorkspaceFlavours,
   configureIndexedDBWorkspaceEngineStorageProvider,
 } from '@affine/core/modules/workspace-engine';
-import { router } from '@affine/core/router';
 import createEmotionCache from '@affine/core/utils/create-emotion-cache';
 import { createI18n, setUpLanguage } from '@affine/i18n';
 import { CacheProvider } from '@emotion/react';

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

@@ -11,7 +11,7 @@ import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons/rc';
 import { useCallback } from 'react';
 
 import { useAppSettingHelper } from '../../../../../components/hooks/affine/use-app-setting-helper';
-import { appIconMap, appNames } from '../../../../../pages/open-app';
+import { appIconMap, appNames } from '../../../../../desktop/pages/open-app';
 import { popupWindow } from '../../../../../utils';
 import { relatedLinks } from './config';
 import * as styles from './style.css';

packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx

@@ -19,10 +19,10 @@ import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hoo
 import { useDocMetaHelper } from '@affine/core/components/hooks/use-block-suite-page-meta';
 import { Export, MoveToTrash } from '@affine/core/components/page-list';
 import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
+import { useDetailPageHeaderResponsive } from '@affine/core/desktop/pages/workspace/detail-page/use-header-responsive';
 import { EditorService } from '@affine/core/modules/editor';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
-import { useDetailPageHeaderResponsive } from '@affine/core/pages/workspace/detail-page/use-header-responsive';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';

packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx

@@ -18,10 +18,8 @@ import {
 } from '@blocksuite/icons/rc';
 import {
   useLiveData,
-  useService,
   type WorkspaceMetadata,
   type WorkspaceProfileInfo,
-  WorkspaceService,
 } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import clsx from 'clsx';
@@ -173,8 +171,7 @@ const WorkspaceSyncInfo = ({
   workspaceProfile: WorkspaceProfileInfo;
 }) => {
   const syncStatus = useSyncEngineSyncProgress(workspaceMetadata);
-  const currentWorkspace = useService(WorkspaceService).workspace;
-  const isCloud = currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD;
+  const isCloud = workspaceMetadata.flavour === WorkspaceFlavour.AFFINE_CLOUD;
   const { paused, pause } = usePauseAnimation();
 
   // to make sure that animation will play first time

packages/frontend/core/src/desktop/pages/404.tsx

@@ -8,12 +8,12 @@ import { useLiveData, useService } from '@toeverything/infra';
 import type { ReactElement } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
-import { SignOutModal } from '../components/affine/sign-out-modal';
+import { SignOutModal } from '../../components/affine/sign-out-modal';
 import {
   RouteLogic,
   useNavigateHelper,
-} from '../components/hooks/use-navigate-helper';
-import { AuthService } from '../modules/cloud';
+} from '../../components/hooks/use-navigate-helper';
+import { AuthService } from '../../modules/cloud';
 import { SignIn } from './auth/sign-in';
 
 export const PageNotFound = ({

packages/frontend/core/src/desktop/pages/ai-upgrade-success.tsx

@@ -0,0 +1,5 @@
+import { AIUpgradeSuccess } from '../../components/affine/subscription-landing';
+
+export const Component = () => {
+  return <AIUpgradeSuccess />;
+};

packages/frontend/core/src/desktop/pages/auth/auth.tsx

@@ -23,12 +23,12 @@ import type { LoaderFunction } from 'react-router-dom';
 import { redirect, useParams, useSearchParams } from 'react-router-dom';
 import { z } from 'zod';
 
-import { useMutation } from '../../components/hooks/use-mutation';
+import { useMutation } from '../../../components/hooks/use-mutation';
 import {
   RouteLogic,
   useNavigateHelper,
-} from '../../components/hooks/use-navigate-helper';
-import { AuthService, ServerConfigService } from '../../modules/cloud';
+} from '../../../components/hooks/use-navigate-helper';
+import { AuthService, ServerConfigService } from '../../../modules/cloud';
 
 const authTypeSchema = z.enum([
   'onboarding',

packages/frontend/core/src/desktop/pages/auth/magic-link.tsx

@@ -8,7 +8,7 @@ import {
   useNavigate,
 } from 'react-router-dom';
 
-import { AuthService } from '../../modules/cloud';
+import { AuthService } from '../../../modules/cloud';
 import { supportedClient } from './common';
 
 interface LoaderData {

packages/frontend/core/src/desktop/pages/auth/oauth-callback.tsx

@@ -8,7 +8,7 @@ import {
   useNavigate,
 } from 'react-router-dom';
 
-import { AuthService } from '../../modules/cloud';
+import { AuthService } from '../../../modules/cloud';
 import { supportedClient } from './common';
 
 interface LoaderData {

packages/frontend/core/src/desktop/pages/auth/sign-in.tsx

@@ -6,11 +6,11 @@ import { useEffect } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
-import { AuthPanel } from '../../components/affine/auth';
+import { AuthPanel } from '../../../components/affine/auth';
 import {
   RouteLogic,
   useNavigateHelper,
-} from '../../components/hooks/use-navigate-helper';
+} from '../../../components/hooks/use-navigate-helper';
 
 export const SignIn = () => {
   const session = useService(AuthService).session;

packages/frontend/core/src/desktop/pages/expired.tsx

@@ -6,7 +6,7 @@ import { useCallback } from 'react';
 import {
   RouteLogic,
   useNavigateHelper,
-} from '../components/hooks/use-navigate-helper';
+} from '../../components/hooks/use-navigate-helper';
 
 export const Component = () => {
   const t = useI18n();

packages/frontend/core/src/desktop/pages/import-template.tsx

@@ -3,8 +3,8 @@ import { useService } from '@toeverything/infra';
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { useNavigateHelper } from '../components/hooks/use-navigate-helper';
-import { ImportTemplateDialogService } from '../modules/import-template';
+import { useNavigateHelper } from '../../components/hooks/use-navigate-helper';
+import { ImportTemplateDialogService } from '../../modules/import-template';
 
 export const Component = () => {
   const importTemplateDialogService = useService(ImportTemplateDialogService);

packages/frontend/core/src/desktop/pages/index.tsx

@@ -17,11 +17,11 @@ import { type LoaderFunction, useSearchParams } from 'react-router-dom';
 import {
   buildShowcaseWorkspace,
   createFirstAppData,
-} from '../bootstrap/first-app-data';
-import { AppFallback } from '../components/affine/app-container';
-import { useNavigateHelper } from '../components/hooks/use-navigate-helper';
-import { WorkspaceNavigator } from '../components/workspace-selector';
-import { AuthService } from '../modules/cloud';
+} from '../../bootstrap/first-app-data';
+import { AppFallback } from '../../components/affine/app-container';
+import { useNavigateHelper } from '../../components/hooks/use-navigate-helper';
+import { WorkspaceNavigator } from '../../components/workspace-selector';
+import { AuthService } from '../../modules/cloud';
 
 export const loader: LoaderFunction = async () => {
   return null;

packages/frontend/core/src/desktop/pages/invite.tsx

@@ -11,12 +11,12 @@ import { useCallback, useEffect } from 'react';
 import type { LoaderFunction } from 'react-router-dom';
 import { redirect, useLoaderData } from 'react-router-dom';
 
-import { authAtom } from '../components/atoms';
+import { authAtom } from '../../components/atoms';
 import {
   RouteLogic,
   useNavigateHelper,
-} from '../components/hooks/use-navigate-helper';
-import { AuthService } from '../modules/cloud';
+} from '../../components/hooks/use-navigate-helper';
+import { AuthService } from '../../modules/cloud';
 
 export const loader: LoaderFunction = async args => {
   const inviteId = args.params.inviteId || '';

packages/frontend/core/src/desktop/pages/onboarding.tsx

@@ -3,15 +3,15 @@ import { assertExists } from '@blocksuite/global/utils';
 import { useCallback } from 'react';
 import { redirect } from 'react-router-dom';
 
-import { Onboarding } from '../components/affine/onboarding/onboarding';
+import { Onboarding } from '../../components/affine/onboarding/onboarding';
 import {
   appConfigStorage,
   useAppConfigStorage,
-} from '../components/hooks/use-app-config-storage';
+} from '../../components/hooks/use-app-config-storage';
 import {
   RouteLogic,
   useNavigateHelper,
-} from '../components/hooks/use-navigate-helper';
+} from '../../components/hooks/use-navigate-helper';
 
 export const loader = () => {
   if (!BUILD_CONFIG.isElectron && !appConfigStorage.get('onBoarding')) {

packages/frontend/core/src/desktop/pages/root.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router-dom';
 
-import { AllWorkspaceModals } from '../components/providers/modal-provider';
+import { AllWorkspaceModals } from '../../components/providers/modal-provider';
 
 export const RootWrapper = () => {
   return (

packages/frontend/core/src/desktop/pages/subscribe.tsx

@@ -7,12 +7,12 @@ import { useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { EMPTY, mergeMap, switchMap } from 'rxjs';
 
-import { generateSubscriptionCallbackLink } from '../components/hooks/affine/use-subscription-notify';
+import { generateSubscriptionCallbackLink } from '../../components/hooks/affine/use-subscription-notify';
 import {
   RouteLogic,
   useNavigateHelper,
-} from '../components/hooks/use-navigate-helper';
-import { AuthService, SubscriptionService } from '../modules/cloud';
+} from '../../components/hooks/use-navigate-helper';
+import { AuthService, SubscriptionService } from '../../modules/cloud';
 import { container } from './subscribe.css';
 
 export const Component = () => {

packages/frontend/core/src/desktop/pages/theme-editor.tsx

@@ -1,4 +1,4 @@
-import { ThemeEditor } from '../modules/theme-editor';
+import { ThemeEditor } from '../../modules/theme-editor';
 
 export const Component = () => {
   return <ThemeEditor />;

packages/frontend/core/src/desktop/pages/upgrade-success.tsx

@@ -0,0 +1,5 @@
+import { CloudUpgradeSuccess } from '../../components/affine/subscription-landing';
+
+export const Component = () => {
+  return <CloudUpgradeSuccess />;
+};

packages/frontend/core/src/desktop/pages/workspace/all-collection/index.tsx

@@ -15,8 +15,8 @@ import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { nanoid } from 'nanoid';
 import { useCallback, useMemo, useState } from 'react';
 
-import { CollectionService } from '../../../modules/collection';
-import { ViewBody, ViewHeader } from '../../../modules/workbench';
+import { CollectionService } from '../../../../modules/collection';
+import { ViewBody, ViewHeader } from '../../../../modules/workbench';
 import { EmptyCollectionList } from '../page-list-empty';
 import { AllCollectionHeader } from './header';
 import * as styles from './index.css';

packages/frontend/core/src/desktop/pages/workspace/all-page/all-page-filter.tsx

@@ -3,12 +3,12 @@ import type { Collection, Filter } from '@affine/env/filter';
 import { useService, WorkspaceService } from '@toeverything/infra';
 import { useCallback } from 'react';
 
-import { filterContainerStyle } from '../../../components/filter-container.css';
-import { useNavigateHelper } from '../../../components/hooks/use-navigate-helper';
+import { filterContainerStyle } from '../../../../components/filter-container.css';
+import { useNavigateHelper } from '../../../../components/hooks/use-navigate-helper';
 import {
   FilterList,
   SaveAsCollectionButton,
-} from '../../../components/page-list';
+} from '../../../../components/page-list';
 
 export const FilterContainer = ({
   filters,

packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.tsx

@@ -19,7 +19,7 @@ import {
   ViewHeader,
   ViewIcon,
   ViewTitle,
-} from '../../../modules/workbench';
+} from '../../../../modules/workbench';
 import { EmptyPageList } from '../page-list-empty';
 import * as styles from './all-page.css';
 import { FilterContainer } from './all-page-filter';

packages/frontend/core/src/desktop/pages/workspace/all-tag/index.tsx

@@ -14,7 +14,7 @@ import {
   ViewHeader,
   ViewIcon,
   ViewTitle,
-} from '../../../modules/workbench';
+} from '../../../../modules/workbench';
 import { EmptyTagList } from '../page-list-empty';
 import * as styles from './all-tag.css';
 import { AllTagHeader } from './header';

packages/frontend/core/src/desktop/pages/workspace/collection/index.tsx

@@ -19,14 +19,14 @@ import {
 import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { useNavigateHelper } from '../../../components/hooks/use-navigate-helper';
+import { useNavigateHelper } from '../../../../components/hooks/use-navigate-helper';
 import {
   useIsActiveView,
   ViewBody,
   ViewHeader,
   ViewIcon,
   ViewTitle,
-} from '../../../modules/workbench';
+} from '../../../../modules/workbench';
 import { CollectionDetailHeader } from './header';
 
 export const CollectionDetail = ({

packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx

@@ -22,10 +22,10 @@ import { useLiveData, useService, type Workspace } from '@toeverything/infra';
 import { useAtom, useAtomValue } from 'jotai';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
-import { SharePageButton } from '../../../components/affine/share-page-modal';
-import { appSidebarFloatingAtom } from '../../../components/app-sidebar';
-import { BlocksuiteHeaderTitle } from '../../../components/blocksuite/block-suite-header/title/index';
-import { HeaderDivider } from '../../../components/pure/header';
+import { SharePageButton } from '../../../../components/affine/share-page-modal';
+import { appSidebarFloatingAtom } from '../../../../components/app-sidebar';
+import { BlocksuiteHeaderTitle } from '../../../../components/blocksuite/block-suite-header/title/index';
+import { HeaderDivider } from '../../../../components/pure/header';
 import * as styles from './detail-page-header.css';
 import { useDetailPageHeaderResponsive } from './use-header-responsive';
 

packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx

@@ -27,22 +27,22 @@ import clsx from 'clsx';
 import { memo, useCallback, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { AffineErrorBoundary } from '../../../components/affine/affine-error-boundary';
-import { GlobalPageHistoryModal } from '../../../components/affine/page-history-modal';
-import { useRegisterBlocksuiteEditorCommands } from '../../../components/hooks/affine/use-register-blocksuite-editor-commands';
-import { useActiveBlocksuiteEditor } from '../../../components/hooks/use-block-suite-editor';
-import { usePageDocumentTitle } from '../../../components/hooks/use-global-state';
-import { useNavigateHelper } from '../../../components/hooks/use-navigate-helper';
-import { PageDetailEditor } from '../../../components/page-detail-editor';
-import { TrashPageFooter } from '../../../components/pure/trash-page-footer';
-import { TopTip } from '../../../components/top-tip';
+import { AffineErrorBoundary } from '../../../../components/affine/affine-error-boundary';
+import { GlobalPageHistoryModal } from '../../../../components/affine/page-history-modal';
+import { useRegisterBlocksuiteEditorCommands } from '../../../../components/hooks/affine/use-register-blocksuite-editor-commands';
+import { useActiveBlocksuiteEditor } from '../../../../components/hooks/use-block-suite-editor';
+import { usePageDocumentTitle } from '../../../../components/hooks/use-global-state';
+import { useNavigateHelper } from '../../../../components/hooks/use-navigate-helper';
+import { PageDetailEditor } from '../../../../components/page-detail-editor';
+import { TrashPageFooter } from '../../../../components/pure/trash-page-footer';
+import { TopTip } from '../../../../components/top-tip';
 import {
   useIsActiveView,
   ViewBody,
   ViewHeader,
   ViewSidebarTab,
   WorkbenchService,
-} from '../../../modules/workbench';
+} from '../../../../modules/workbench';
 import { PageNotFound } from '../../404';
 import * as styles from './detail-page.css';
 import { DetailPageHeader } from './detail-page-header';

packages/frontend/core/src/desktop/pages/workspace/index.tsx

@@ -1,6 +1,6 @@
 import { AffineOtherPageLayout } from '@affine/component/affine-other-page-layout';
 import { AppFallback } from '@affine/core/components/affine/app-container';
-import { workspaceRoutes } from '@affine/core/workspace-router';
+import { workbenchRoutes } from '@affine/core/desktop/workbench-router';
 import { ZipTransformer } from '@blocksuite/blocks';
 import type { Workspace, WorkspaceMetadata } from '@toeverything/infra';
 import {
@@ -14,9 +14,9 @@ import type { ReactElement } from 'react';
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { matchPath, useLocation, useParams } from 'react-router-dom';
 
-import { AffineErrorBoundary } from '../../components/affine/affine-error-boundary';
-import { WorkspaceLayout } from '../../components/layouts/workspace-layout';
-import { WorkbenchRoot } from '../../modules/workbench';
+import { AffineErrorBoundary } from '../../../components/affine/affine-error-boundary';
+import { WorkspaceLayout } from '../../../components/layouts/workspace-layout';
+import { WorkbenchRoot } from '../../../modules/workbench';
 import { PageNotFound } from '../404';
 import { SharePage } from './share/share-page';
 
@@ -54,7 +54,7 @@ export const Component = (): ReactElement => {
       match.params.docId &&
       match.params.workspaceId &&
       // // TODO(eyhn): need a better way to check if it's a docId
-      workspaceRoutes.find(route =>
+      workbenchRoutes.find(route =>
         matchPath(route.path, '/' + match.params.docId)
       )?.path === '/:pageId'
     ) {

packages/frontend/core/src/desktop/pages/workspace/trash-page.tsx

@@ -20,7 +20,7 @@ import {
   ViewHeader,
   ViewIcon,
   ViewTitle,
-} from '../../modules/workbench';
+} from '../../../modules/workbench';
 import { EmptyPageList } from './page-list-empty';
 import * as styles from './trash-page.css';
 

packages/frontend/core/src/desktop/router.tsx

@@ -8,7 +8,7 @@ import {
   useNavigate,
 } from 'react-router-dom';
 
-import { NavigateContext } from './components/hooks/use-navigate-helper';
+import { NavigateContext } from '../components/hooks/use-navigate-helper';
 import { RootWrapper } from './pages/root';
 
 export function RootRouter() {

packages/frontend/core/src/desktop/workbench-router.ts

@@ -1,6 +1,6 @@
 import type { RouteObject } from 'react-router-dom';
 
-export const workspaceRoutes = [
+export const workbenchRoutes = [
   {
     path: '/all',
     lazy: () => import('./pages/workspace/all-page/all-page'),

packages/frontend/core/src/mobile/components/search-input/index.tsx

@@ -1,7 +1,7 @@
 import { useAutoFocus } from '@affine/component';
+import { getSvgPath } from '@blocksuite/global/utils';
 import { SearchIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
-import { getSvgPath } from 'figma-squircle';
 import { debounce } from 'lodash-es';
 import {
   type FormEventHandler,