feat(core): expose skip login button to web (#8115)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/634cce16-bba2-480f-9126-94b22a782a9a.png)

Allow user skip login page on client

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

@@ -31,6 +31,7 @@ export type AuthPanelProps<State extends AuthAtomData['state']> = {
   setAuthData: <T extends AuthAtomData['state']>(
     updates: { state: T } & Difference<AuthAtomType<State>, AuthAtomType<T>>
   ) => void;
+  onSkip?: () => void;
 } & Extract<AuthAtomData, { state: State }>;
 
 const config: {
@@ -100,7 +101,7 @@ export function AuthModal() {
   );
 }
 
-export function AuthPanel() {
+export function AuthPanel({ onSkip }: { onSkip?: () => void }) {
   const t = useI18n();
   const [authAtomValue, setAuthAtom] = useAtom(authAtom);
   const authService = useService(AuthService);
@@ -137,6 +138,12 @@ export function AuthPanel() {
 
   const CurrentPanel = config[authAtomValue.state];
 
+  const props = {
+    ...authAtomValue,
+    onSkip,
+    setAuthData,
+  };
+
   // @ts-expect-error checked in impls
-  return <CurrentPanel {...authAtomValue} setAuthData={setAuthData} />;
+  return <CurrentPanel {...props} />;
 }

packages/frontend/core/src/components/affine/auth/sign-in.tsx

@@ -24,6 +24,7 @@ function validateEmail(email: string) {
 
 export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
   setAuthData: setAuthState,
+  onSkip,
 }) => {
   const t = useI18n();
   const authService = useService(AuthService);
@@ -134,6 +135,29 @@ export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
           </Trans>
         </div>
       </div>
+
+      {onSkip ? (
+        <>
+          <div className={style.skipDivider}>
+            <div className={style.skipDividerLine} />
+            <span className={style.skipDividerText}>or</span>
+            <div className={style.skipDividerLine} />
+          </div>
+          <div className={style.skipSection}>
+            <div className={style.skipText}>
+              {t['com.affine.mobile.sign-in.skip.hint']()}
+            </div>
+            <Button
+              variant="plain"
+              onClick={onSkip}
+              className={style.skipLink}
+              suffix={<ArrowRightBigIcon className={style.skipLinkIcon} />}
+            >
+              {t['com.affine.mobile.sign-in.skip.link']()}
+            </Button>
+          </div>
+        </>
+      ) : null}
     </>
   );
 };

packages/frontend/core/src/components/affine/auth/style.css.ts

@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { globalStyle, style } from '@vanilla-extract/css';
 export const authModalContent = style({
   marginTop: '30px',
@@ -113,3 +114,44 @@ export const userPlanButton = style({
     },
   },
 });
+
+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',
+});

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

@@ -41,7 +41,7 @@ export const SignIn = () => {
   return (
     <SignInPageContainer>
       <div style={{ maxWidth: '400px', width: '100%' }}>
-        <AuthPanel />
+        <AuthPanel onSkip={jumpToIndex} />
       </div>
     </SignInPageContainer>
   );