feat(mobile): sign in page (#8039)

fix AF-1237

packages/frontend/core/src/bootstrap/preload.ts

@@ -7,3 +7,5 @@ import './edgeless-template';
 import { setupGlobal } from '@affine/env/global';
 
 setupGlobal();
+
+import '../types/types.d.ts';

packages/frontend/core/src/components/affine/auth/oauth.tsx

@@ -40,12 +40,7 @@ export function OAuth() {
   );
 
   if (!oauth) {
-    return (
-      <>
-        <br />
-        <Skeleton height={50} />
-      </>
-    );
+    return <Skeleton height={50} />;
   }
 
   return oauthProviders?.map(provider => (

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

@@ -1,4 +1,3 @@
-import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import type { Editor } from '@affine/core/modules/editor';
 import { EditorsService } from '@affine/core/modules/editor';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
@@ -13,13 +12,12 @@ import {
 } from '@toeverything/infra';
 import {
   type PropsWithChildren,
+  type ReactNode,
   useEffect,
   useLayoutEffect,
   useState,
 } from 'react';
 
-import { PageNotFound } from '../../404';
-
 const useLoadDoc = (pageId: string) => {
   const currentWorkspace = useService(WorkspaceService).workspace;
   const docsService = useService(DocsService);
@@ -136,15 +134,21 @@ const useLoadDoc = (pageId: string) => {
 export const DetailPageWrapper = ({
   pageId,
   children,
-}: PropsWithChildren<{ pageId: string }>) => {
+  skeleton,
+  notFound,
+}: PropsWithChildren<{
+  pageId: string;
+  skeleton: ReactNode;
+  notFound: ReactNode;
+}>) => {
   const { doc, editor, docListReady } = useLoadDoc(pageId);
   // if sync engine has been synced and the page is null, show 404 page.
   if (docListReady && !doc) {
-    return <PageNotFound noPermission />;
+    return notFound;
   }
 
   if (!doc || !editor) {
-    return <PageDetailSkeleton key="current-page-is-null" />;
+    return skeleton;
   }
 
   return (

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

@@ -1,4 +1,5 @@
 import { Scrollable, useHasScrollTop } from '@affine/component';
+import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import type { ChatPanel } from '@affine/core/blocksuite/presets/ai';
 import { AIProvider } from '@affine/core/blocksuite/presets/ai';
 import { PageAIOnboarding } from '@affine/core/components/affine/ai-onboarding';
@@ -53,6 +54,7 @@ import {
   WorkbenchService,
 } from '../../../modules/workbench';
 import { performanceRenderLogger } from '../../../shared';
+import { PageNotFound } from '../../404';
 import * as styles from './detail-page.css';
 import { DetailPageHeader } from './detail-page-header';
 import { DetailPageWrapper } from './detail-page-wrapper';
@@ -347,7 +349,11 @@ export const Component = () => {
   const pageId = params.pageId;
 
   return pageId ? (
-    <DetailPageWrapper pageId={pageId}>
+    <DetailPageWrapper
+      pageId={pageId}
+      skeleton={<PageDetailSkeleton />}
+      notFound={<PageNotFound noPermission />}
+    >
       <DetailPageImpl />
     </DetailPageWrapper>
   ) : null;

packages/frontend/core/src/types/types.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="@webpack/env"" />
 
-// not using import because it will break the declare module line below
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path='../../../electron/src/preload/preload.d.ts' />
-
 declare module '*.md' {
   const text: string;
   export default text;
@@ -28,3 +24,8 @@ declare module '*.jpg' {
   const url: string;
   export default url;
 }
+
+declare module '*.inline.svg' {
+  const src: string;
+  export default src;
+}