-
+
-
-
+
{children}
diff --git a/packages/frontend/mobile/src/provider/model-provider.tsx b/packages/frontend/mobile/src/provider/model-provider.tsx
index 51247ce438..ad247186be 100644
--- a/packages/frontend/mobile/src/provider/model-provider.tsx
+++ b/packages/frontend/mobile/src/provider/model-provider.tsx
@@ -1,3 +1,4 @@
+import { NotificationCenter } from '@affine/component';
import { AiLoginRequiredModal } from '@affine/core/components/affine/auth/ai-login-required';
import { HistoryTipsModal } from '@affine/core/components/affine/history-tips-modal';
import { IssueFeedbackModal } from '@affine/core/components/affine/issue-feedback-modal';
@@ -8,12 +9,15 @@ import {
import { StarAFFiNEModal } from '@affine/core/components/affine/star-affine-modal';
import { MoveToTrash } from '@affine/core/components/page-list';
import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-helper';
+import { CreateWorkspaceDialogProvider } from '@affine/core/modules/create-workspace';
import { PeekViewManagerModal } from '@affine/core/modules/peek-view';
+import { SignOutConfirmModal } from '@affine/core/providers/modal-provider';
import { WorkspaceFlavour } from '@affine/env/workspace';
import { useService, WorkspaceService } from '@toeverything/infra';
import { useCallback } from 'react';
import { MobileSettingModal } from '../views';
+import { MobileSignInModal } from '../views/sign-in/modal';
export function MobileCurrentWorkspaceModals() {
const currentWorkspace = useService(WorkspaceService).workspace;
@@ -58,3 +62,15 @@ export function MobileCurrentWorkspaceModals() {
);
}
+
+// I don't like the name, but let's keep it for now
+export const AllWorkspaceModals = () => {
+ return (
+ <>
+
+
+ )
+ );
+}
export const topLevelRoutes = [
{
diff --git a/packages/frontend/mobile/src/views/sign-in/art-dark.inline.svg b/packages/frontend/mobile/src/views/sign-in/art-dark.inline.svg
new file mode 100644
index 0000000000..e800c4d9f5
--- /dev/null
+++ b/packages/frontend/mobile/src/views/sign-in/art-dark.inline.svg
@@ -0,0 +1,114 @@
+
\ No newline at end of file
diff --git a/packages/frontend/mobile/src/views/sign-in/art-light.inline.svg b/packages/frontend/mobile/src/views/sign-in/art-light.inline.svg
new file mode 100644
index 0000000000..dfc195af14
--- /dev/null
+++ b/packages/frontend/mobile/src/views/sign-in/art-light.inline.svg
@@ -0,0 +1,114 @@
+
\ No newline at end of file
diff --git a/packages/frontend/mobile/src/views/sign-in/background.css.ts b/packages/frontend/mobile/src/views/sign-in/background.css.ts
new file mode 100644
index 0000000000..2e27e811ab
--- /dev/null
+++ b/packages/frontend/mobile/src/views/sign-in/background.css.ts
@@ -0,0 +1,48 @@
+import { createVar, globalStyle, style } from '@vanilla-extract/css';
+
+const bgColor = createVar();
+const dotColor = createVar();
+
+export const root = style({
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ pointerEvents: 'none',
+ zIndex: -1,
+});
+
+export const dotBg = style({
+ height: '100%',
+ width: '100%',
+ position: 'absolute',
+ zIndex: -1,
+ top: 0,
+ left: 0,
+ backgroundImage: `linear-gradient(to bottom, transparent 0%, ${bgColor} 90%),
+ radial-gradient(${dotColor} 2px, transparent 2px),
+ radial-gradient(${dotColor} 2px, transparent 2px)`,
+ backgroundSize: '100% 100%, 20px 20px, 20px 20px',
+});
+
+export const arts = style({
+ paddingTop: 60,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+});
+
+globalStyle(`[data-theme="light"] ${root}`, {
+ vars: {
+ [bgColor]: '#fff',
+ [dotColor]: '#d9d9d9',
+ },
+});
+
+globalStyle(`[data-theme="dark"] ${root}`, {
+ vars: {
+ [bgColor]: '#141414',
+ [dotColor]: '#393939',
+ },
+});
diff --git a/packages/frontend/mobile/src/views/sign-in/background.tsx b/packages/frontend/mobile/src/views/sign-in/background.tsx
new file mode 100644
index 0000000000..913661f53f
--- /dev/null
+++ b/packages/frontend/mobile/src/views/sign-in/background.tsx
@@ -0,0 +1,19 @@
+import { useTheme } from 'next-themes';
+
+import artsDark from './art-dark.inline.svg';
+import artsLight from './art-light.inline.svg';
+import * as styles from './background.css';
+
+export const SignInBackground = () => {
+ const { resolvedTheme } = useTheme();
+
+ return (
+
+
+ );
+};
diff --git a/packages/frontend/mobile/src/views/sign-in/modal.tsx b/packages/frontend/mobile/src/views/sign-in/modal.tsx
new file mode 100644
index 0000000000..fde00eda18
--- /dev/null
+++ b/packages/frontend/mobile/src/views/sign-in/modal.tsx
@@ -0,0 +1,40 @@
+import { Modal } from '@affine/component';
+import { authAtom } from '@affine/core/atoms';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { useAtom } from 'jotai';
+import { useCallback } from 'react';
+
+import { MobileSignIn } from './mobile-sign-in';
+
+export const MobileSignInModal = () => {
+ const [authAtomValue, setAuthAtom] = useAtom(authAtom);
+ const setOpen = useCallback(
+ (open: boolean) => {
+ setAuthAtom(prev => ({ ...prev, openModal: open }));
+ },
+ [setAuthAtom]
+ );
+
+ const closeModal = useCallback(() => {
+ setOpen(false);
+ }, [setOpen]);
+
+ return (
+
+
+ );
+};
diff --git a/tools/cli/src/webpack/config.ts b/tools/cli/src/webpack/config.ts
index 6b69c67e6a..a3674855c0 100644
--- a/tools/cli/src/webpack/config.ts
+++ b/tools/cli/src/webpack/config.ts
@@ -293,7 +293,11 @@ export const createConfiguration: (
},
{
test: /\.txt$/,
- loader: 'raw-loader',
+ type: 'asset/source',
+ },
+ {
+ test: /\.inline\.svg$/,
+ type: 'asset/inline',
},
{
test: /\.css$/,
+
+ 
+
+ );
+};
diff --git a/packages/frontend/mobile/src/views/sign-in/layout.css.ts b/packages/frontend/mobile/src/views/sign-in/layout.css.ts
new file mode 100644
index 0000000000..f9cedccf00
--- /dev/null
+++ b/packages/frontend/mobile/src/views/sign-in/layout.css.ts
@@ -0,0 +1,61 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+ padding: '40px',
+ justifyContent: 'flex-end',
+ minHeight: '100dvh',
+ display: 'flex',
+ flexDirection: 'column',
+ position: 'relative',
+ zIndex: 0,
+});
+
+export const content = style({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ gap: 24,
+});
+
+export const skipDivider = style({
+ display: 'flex',
+ gap: 12,
+ alignItems: 'center',
+ height: 20,
+ marginTop: 12,
+ marginBottom: 12,
+});
+
+export const skipDividerLine = style({
+ flex: 1,
+ height: 0,
+ borderBottom: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
+});
+
+export const skipDividerText = style({
+ color: cssVarV2('text/secondary'),
+ fontSize: cssVar('fontXs'),
+});
+
+export const skipText = style({
+ color: cssVarV2('text/primary'),
+ fontSize: cssVar('fontXs'),
+ fontWeight: 500,
+});
+
+export const skipLink = style({
+ color: cssVarV2('text/link'),
+ fontSize: cssVar('fontXs'),
+});
+
+export const skipLinkIcon = style({
+ color: cssVarV2('text/link'),
+});
+
+export const skipSection = style({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+});
diff --git a/packages/frontend/mobile/src/views/sign-in/layout.tsx b/packages/frontend/mobile/src/views/sign-in/layout.tsx
new file mode 100644
index 0000000000..91a3810a36
--- /dev/null
+++ b/packages/frontend/mobile/src/views/sign-in/layout.tsx
@@ -0,0 +1,40 @@
+import { Button } from '@affine/component';
+import { useI18n } from '@affine/i18n';
+import { ArrowRightBigIcon } from '@blocksuite/icons/rc';
+import type { PropsWithChildren } from 'react';
+
+import { SignInBackground } from './background';
+import * as styles from './layout.css';
+
+export const MobileSignInLayout = ({
+ children,
+ onSkip,
+}: PropsWithChildren<{
+ onSkip: () => void;
+}>) => {
+ const t = useI18n();
+ return (
+
+
+ );
+};
diff --git a/packages/frontend/mobile/src/views/sign-in/mobile-sign-in.tsx b/packages/frontend/mobile/src/views/sign-in/mobile-sign-in.tsx
new file mode 100644
index 0000000000..0a35891bb3
--- /dev/null
+++ b/packages/frontend/mobile/src/views/sign-in/mobile-sign-in.tsx
@@ -0,0 +1,11 @@
+import { AuthPanel } from '@affine/core/components/affine/auth';
+
+import { MobileSignInLayout } from './layout';
+
+export const MobileSignIn = ({ onSkip }: { onSkip: () => void }) => {
+ return (
+ {children}
+
+
+ or
+
+
+
+
+
+ {t['com.affine.mobile.sign-in.skip.hint']()}
+
+ }
+ >
+ {t['com.affine.mobile.sign-in.skip.link']()}
+
+