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

fix AF-1237

packages/frontend/mobile/src/pages/sign-in.tsx

@@ -1,7 +1,37 @@
-// Default route fallback for mobile
-import { SignIn } from '@affine/core/pages/auth/sign-in';
+import {
+  RouteLogic,
+  useNavigateHelper,
+} from '@affine/core/hooks/use-navigate-helper';
+import { AuthService } from '@affine/core/modules/cloud';
+import { useLiveData, useService } from '@toeverything/infra';
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+import { MobileSignIn } from '../views/sign-in/mobile-sign-in';
 
 export const Component = () => {
-  // placeholder impl
-  return <SignIn />;
+  const session = useService(AuthService).session;
+  const status = useLiveData(session.status$);
+  const isRevalidating = useLiveData(session.isRevalidating$);
+  const navigate = useNavigate();
+  const { jumpToIndex } = useNavigateHelper();
+  const [searchParams] = useSearchParams();
+  const isLoggedIn = status === 'authenticated' && !isRevalidating;
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      const redirectUri = searchParams.get('redirect_uri');
+      if (redirectUri) {
+        navigate(redirectUri, {
+          replace: true,
+        });
+      } else {
+        jumpToIndex(RouteLogic.REPLACE, {
+          search: searchParams.toString(),
+        });
+      }
+    }
+  }, [jumpToIndex, navigate, isLoggedIn, searchParams]);
+
+  return <MobileSignIn onSkip={() => navigate('/')} />;
 };

packages/frontend/mobile/src/pages/workspace/detail/mobile-detail-page.css.ts

@@ -4,7 +4,7 @@ import { globalStyle, style } from '@vanilla-extract/css';
 
 export const root = style({
   background: cssVarV2('layer/background/primary'),
-  minHeight: '100vh',
+  minHeight: '100dvh',
   display: 'flex',
   flexDirection: 'column',
 });

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

@@ -1,4 +1,5 @@
 import { IconButton } from '@affine/component';
+import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary';
 import { PageDetailEditor } from '@affine/core/components/page-detail-editor';
 import { useRegisterBlocksuiteEditorCommands } from '@affine/core/hooks/affine/use-register-blocksuite-editor-commands';
@@ -10,6 +11,7 @@ import { EditorService } from '@affine/core/modules/editor';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
 import { DetailPageWrapper } from '@affine/core/pages/workspace/detail-page/detail-page-wrapper';
+import { WorkspaceFlavour } from '@affine/env/workspace';
 import type { PageRootService } from '@blocksuite/blocks';
 import {
   BookmarkBlockService,
@@ -20,7 +22,7 @@ import {
   ImageBlockService,
 } from '@blocksuite/blocks';
 import { DisposableGroup } from '@blocksuite/global/utils';
-import { ShareIcon } from '@blocksuite/icons/rc';
+import { ShareiOsIcon } from '@blocksuite/icons/rc';
 import { type AffineEditorContainer } from '@blocksuite/presets';
 import type { Doc as BlockSuiteDoc } from '@blocksuite/store';
 import {
@@ -28,6 +30,7 @@ import {
   FrameworkScope,
   GlobalContextService,
   useLiveData,
+  useService,
   useServices,
   WorkspaceService,
 } from '@toeverything/infra';
@@ -201,9 +204,24 @@ const DetailPageImpl = () => {
   );
 };
 
+const skeleton = (
+  <>
+    <PageHeader back className={styles.header} />
+    <PageDetailSkeleton />
+  </>
+);
+
+const notFound = (
+  <>
+    <PageHeader back className={styles.header} />
+    Page Not Found (TODO)
+  </>
+);
+
 export const Component = () => {
   const params = useParams();
   const pageId = params.pageId;
+  const workspace = useService(WorkspaceService).workspace;
 
   if (!pageId) {
     return null;
@@ -211,18 +229,23 @@ export const Component = () => {
 
   return (
     <div className={styles.root}>
-      <DetailPageWrapper pageId={pageId}>
+      <DetailPageWrapper
+        skeleton={skeleton}
+        notFound={notFound}
+        pageId={pageId}
+      >
         <PageHeader
           back
           className={styles.header}
           suffix={
             <>
-              <IconButton
-                size={24}
-                style={{ padding: 10 }}
-                onClick={console.log}
-                icon={<ShareIcon />}
-              />
+              {workspace.meta.flavour !== WorkspaceFlavour.LOCAL && (
+                <IconButton
+                  size={24}
+                  style={{ padding: 10 }}
+                  icon={<ShareiOsIcon />}
+                />
+              )}
               <PageHeaderMenuButton docId={pageId} />
             </>
           }

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

@@ -77,7 +77,7 @@ export const WorkspaceLayout = ({
 
   return (
     <FrameworkScope scope={workspace.scope}>
-      <AffineErrorBoundary height="100vh">
+      <AffineErrorBoundary height="100dvh">
         <SWRConfigProvider>
           <MobileCurrentWorkspaceModals />
           <WorkspaceLayoutProviders>{children}</WorkspaceLayoutProviders>