feat(core): add sign in to not found page (#6496)

close AFF-211

packages/frontend/component/src/components/affine-other-page-layout/index.css.ts

@@ -17,11 +17,12 @@ export const topNav = style({
   left: 0,
   right: 0,
   display: 'flex',
+  position: 'fixed',
   alignItems: 'center',
   justifyContent: 'space-between',
   padding: '16px 120px',
-  selectors: {
+  '@media': {
-    '&.mobile': {
+    'screen and (max-width: 1024px)': {
       padding: '16px 20px',
     },
   },
@@ -29,6 +30,11 @@ export const topNav = style({
 export const topNavLinks = style({
   display: 'flex',
   columnGap: 4,
+  '@media': {
+    'screen and (max-width: 1024px)': {
+      display: 'none',
+    },
+  },
 });
 export const topNavLink = style({
   color: cssVar('textPrimaryColor'),
@@ -46,6 +52,21 @@ export const iconButton = style({
     },
   },
 });
+export const hideInWideScreen = style({
+  '@media': {
+    'screen and (min-width: 1024px)': {
+      display: 'none',
+      position: 'absolute',
+    },
+  },
+});
+export const hideInSmallScreen = style({
+  '@media': {
+    'screen and (max-width: 1024px)': {
+      display: 'none',
+    },
+  },
+});
 export const menu = style({
   width: '100vw',
   height: '100vh',

packages/frontend/component/src/components/affine-other-page-layout/layout.tsx

@@ -1,7 +1,6 @@
 import { Button } from '@affine/component/ui/button';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Logo1Icon } from '@blocksuite/icons';
-import clsx from 'clsx';
 import { useCallback } from 'react';
 
 import { DesktopNavbar } from './desktop-navbar';
@@ -9,10 +8,8 @@ import * as styles from './index.css';
 import { MobileNavbar } from './mobile-navbar';
 
 export const AffineOtherPageLayout = ({
-  isSmallScreen,
   children,
 }: {
-  isSmallScreen: boolean;
   children: React.ReactNode;
 }) => {
   const t = useAFFiNEI18N();
@@ -23,25 +20,22 @@ export const AffineOtherPageLayout = ({
 
   return (
     <div className={styles.root}>
-      <div
+      {environment.isDesktop ? null : (
-        className={clsx(styles.topNav, {
+        <div className={styles.topNav}>
-          mobile: isSmallScreen,
+          <a href="/" rel="noreferrer" className={styles.affineLogo}>
-        })}
+            <Logo1Icon width={24} height={24} />
-      >
+          </a>
-        <a href="/" rel="noreferrer" className={styles.affineLogo}>
+
-          <Logo1Icon width={24} height={24} />
+          <DesktopNavbar />
-        </a>
+          <Button
-        {isSmallScreen ? (
+            onClick={openDownloadLink}
+            className={styles.hideInSmallScreen}
+          >
+            {t['com.affine.auth.open.affine.download-app']()}
+          </Button>
           <MobileNavbar />
-        ) : (
+        </div>
-          <>
+      )}
-            <DesktopNavbar />
-            <Button onClick={openDownloadLink}>
-              {t['com.affine.auth.open.affine.download-app']()}
-            </Button>
-          </>
-        )}
-      </div>
 
       {children}
     </div>

packages/frontend/component/src/components/affine-other-page-layout/mobile-navbar.tsx

@@ -29,7 +29,7 @@ export const MobileNavbar = () => {
   );
 
   return (
-    <div>
+    <div className={styles.hideInWideScreen}>
       <Menu
         items={menuItems}
         contentOptions={{

packages/frontend/component/src/components/auth-components/auth-page-container.tsx

@@ -1,26 +1,14 @@
 import type { FC, PropsWithChildren, ReactNode } from 'react';
-import { useEffect, useState } from 'react';
 
 import { Empty } from '../../ui/empty';
 import { AffineOtherPageLayout } from '../affine-other-page-layout';
-import { authPageContainer } from './share.css';
+import { authPageContainer, hideInSmallScreen } from './share.css';
 
 export const AuthPageContainer: FC<
   PropsWithChildren<{ title?: ReactNode; subtitle?: ReactNode }>
 > = ({ children, title, subtitle }) => {
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
-
-  useEffect(() => {
-    const checkScreenSize = () => {
-      setIsSmallScreen(window.innerWidth <= 1024);
-    };
-    checkScreenSize();
-    window.addEventListener('resize', checkScreenSize);
-    return () => window.removeEventListener('resize', checkScreenSize);
-  }, []);
-
   return (
-    <AffineOtherPageLayout isSmallScreen={isSmallScreen}>
+    <AffineOtherPageLayout>
       <div className={authPageContainer}>
         <div className="wrapper">
           <div className="content">
@@ -28,7 +16,9 @@ export const AuthPageContainer: FC<
             <p className="subtitle">{subtitle}</p>
             {children}
           </div>
-          {isSmallScreen ? null : <Empty />}
+          <div className={hideInSmallScreen}>
+            <Empty />
+          </div>
         </div>
       </div>
     </AffineOtherPageLayout>

packages/frontend/component/src/components/auth-components/share.css.ts

@@ -179,8 +179,12 @@ globalStyle(`${authPageContainer} a`, {
   color: cssVar('linkColor'),
 });
 export const signInPageContainer = style({
-  width: '400px',
+  height: '100vh',
-  margin: '205px auto 0',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
 });
 export const input = style({
   width: '330px',
@@ -190,3 +194,11 @@ export const input = style({
     },
   },
 });
+
+export const hideInSmallScreen = style({
+  '@media': {
+    'screen and (max-width: 1024px)': {
+      display: 'none',
+    },
+  },
+});

packages/frontend/component/src/components/not-found-page/not-found-page.tsx

@@ -4,6 +4,7 @@ import { SignOutIcon } from '@blocksuite/icons';
 import { Avatar } from '../../ui/avatar';
 import { Button, IconButton } from '../../ui/button';
 import { Tooltip } from '../../ui/tooltip';
+import { AffineOtherPageLayout } from '../affine-other-page-layout';
 import type { User } from '../auth-components';
 import { NotFoundPattern } from './not-found-pattern';
 import {
@@ -14,9 +15,57 @@ import {
 
 export interface NotFoundPageProps {
   user?: User | null;
+  signInComponent?: JSX.Element;
   onBack: () => void;
   onSignOut: () => void;
 }
+export const NoPermissionOrNotFound = ({
+  user,
+  onBack,
+  onSignOut,
+  signInComponent,
+}: NotFoundPageProps) => {
+  const t = useAFFiNEI18N();
+
+  return (
+    <AffineOtherPageLayout>
+      <div className={notFoundPageContainer} data-testid="not-found">
+        <div>
+          {user ? (
+            <>
+              <div className={wrapper}>
+                <NotFoundPattern />
+              </div>
+              <p className={wrapper}>{t['404.hint']()}</p>
+              <div className={wrapper}>
+                <Button
+                  type="primary"
+                  size="extraLarge"
+                  onClick={onBack}
+                  className={largeButtonEffect}
+                >
+                  {t['404.back']()}
+                </Button>
+              </div>
+              <div className={wrapper}>
+                <Avatar url={user.avatarUrl ?? user.image} name={user.name} />
+                <span style={{ margin: '0 12px' }}>{user.email}</span>
+                <Tooltip content={t['404.signOut']()}>
+                  <IconButton onClick={onSignOut}>
+                    <SignOutIcon />
+                  </IconButton>
+                </Tooltip>
+              </div>
+            </>
+          ) : (
+            signInComponent
+          )}
+        </div>
+      </div>
+    </AffineOtherPageLayout>
+  );
+};
+
 export const NotFoundPage = ({
   user,
   onBack,
@@ -25,35 +74,37 @@ export const NotFoundPage = ({
   const t = useAFFiNEI18N();
 
   return (
-    <div className={notFoundPageContainer} data-testid="not-found">
+    <AffineOtherPageLayout>
-      <div>
+      <div className={notFoundPageContainer} data-testid="not-found">
-        <div className={wrapper}>
+        <div>
-          <NotFoundPattern />
-        </div>
-        <p className={wrapper}>{t['404.hint']()}</p>
-        <div className={wrapper}>
-          <Button
-            type="primary"
-            size="extraLarge"
-            onClick={onBack}
-            className={largeButtonEffect}
-          >
-            {t['404.back']()}
-          </Button>
-        </div>
-
-        {user ? (
           <div className={wrapper}>
-            <Avatar url={user.avatarUrl ?? user.image} name={user.name} />
+            <NotFoundPattern />
-            <span style={{ margin: '0 12px' }}>{user.email}</span>
-            <Tooltip content={t['404.signOut']()}>
-              <IconButton onClick={onSignOut}>
-                <SignOutIcon />
-              </IconButton>
-            </Tooltip>
           </div>
-        ) : null}
+          <p className={wrapper}>{t['404.hint']()}</p>
+          <div className={wrapper}>
+            <Button
+              type="primary"
+              size="extraLarge"
+              onClick={onBack}
+              className={largeButtonEffect}
+            >
+              {t['404.back']()}
+            </Button>
+          </div>
+
+          {user ? (
+            <div className={wrapper}>
+              <Avatar url={user.avatarUrl ?? user.image} name={user.name} />
+              <span style={{ margin: '0 12px' }}>{user.email}</span>
+              <Tooltip content={t['404.signOut']()}>
+                <IconButton onClick={onSignOut}>
+                  <SignOutIcon />
+                </IconButton>
+              </Tooltip>
+            </div>
+          ) : null}
+        </div>
       </div>
-    </div>
+    </AffineOtherPageLayout>
   );
 };

packages/frontend/component/src/components/not-found-page/styles.css.ts

@@ -3,7 +3,7 @@ import { style } from '@vanilla-extract/css';
 export const notFoundPageContainer = style({
   fontSize: cssVar('fontBase'),
   color: cssVar('textPrimaryColor'),
-  height: '100%',
+  height: '100vh',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',

packages/frontend/component/src/ui/empty/empty-svg.tsx

@@ -1,8 +1,16 @@
 import { memo } from 'react';
 
-export const EmptySvg = memo(function EmptySvg() {
+export const EmptySvg = memo(function EmptySvg({
+  style,
+  className,
+}: {
+  style?: React.CSSProperties;
+  className?: string;
+}) {
   return (
     <svg
+      className={className}
+      style={style}
       width="248"
       height="216"
       viewBox="0 0 248 216"

packages/frontend/component/src/ui/empty/empty.tsx

@@ -1,9 +1,16 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import type { CSSProperties, ReactNode } from 'react';
 
 import { EmptySvg } from './empty-svg';
-import { StyledEmptyContainer } from './style';
+import * as styles from './index.css';
+
+type ContainerStyleProps = {
+  width?: string;
+  height?: string;
+  fontSize?: string;
+};
 export type EmptyContentProps = {
-  containerStyle?: CSSProperties;
+  containerStyle?: ContainerStyleProps;
   title?: ReactNode;
   description?: ReactNode;
   descriptionStyle?: CSSProperties;
@@ -15,10 +22,15 @@ export const Empty = ({
   description,
   descriptionStyle,
 }: EmptyContentProps) => {
+  const cssVar = assignInlineVars({
+    [styles.svgWidth]: containerStyle?.width,
+    [styles.svgHeight]: containerStyle?.height,
+    [styles.svgFontSize]: containerStyle?.fontSize,
+  });
   return (
-    <StyledEmptyContainer style={containerStyle}>
+    <div className={styles.emptyContainer}>
       <div style={{ color: 'var(--affine-black)' }}>
-        <EmptySvg />
+        <EmptySvg className={styles.emptySvg} style={cssVar} />
       </div>
       {title && (
         <p
@@ -36,7 +48,7 @@ export const Empty = ({
           {description}
         </p>
       )}
-    </StyledEmptyContainer>
+    </div>
   );
 };
 

packages/frontend/component/src/ui/empty/index.css.ts

@@ -0,0 +1,24 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+import { displayFlex } from '../../styles';
+
+export const svgWidth = createVar();
+export const svgHeight = createVar();
+export const svgFontSize = createVar();
+
+export const emptyContainer = style({
+  height: '100%',
+  ...displayFlex('center', 'center'),
+  flexDirection: 'column',
+  color: 'var(--affine-text-secondary-color)',
+});
+export const emptySvg = style({
+  vars: {
+    [svgWidth]: '248px',
+    [svgHeight]: '216px',
+    [svgFontSize]: 'inherit',
+  },
+  width: svgWidth,
+  height: svgHeight,
+  fontSize: svgFontSize,
+});

packages/frontend/component/src/ui/empty/style.ts

@@ -1,19 +0,0 @@
-import type { CSSProperties } from 'react';
-
-import { displayFlex, styled } from '../../styles';
-
-export const StyledEmptyContainer = styled('div')<{ style?: CSSProperties }>(({
-  style,
-}) => {
-  return {
-    height: '100%',
-    ...displayFlex('center', 'center'),
-    flexDirection: 'column',
-    color: 'var(--affine-text-secondary-color)',
-    svg: {
-      width: style?.width ?? '248px',
-      height: style?.height ?? '216px',
-      fontSize: style?.fontSize ?? 'inherit',
-    },
-  };
-});

packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx

@@ -1,13 +1,11 @@
 import { Button } from '@affine/component/ui/button';
 import { AffineShapeIcon } from '@affine/core/components/page-list'; // TODO: import from page-list temporarily, need to defined common svg icon/images management.
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { useWorkspaceStatus } from '@affine/core/hooks/use-workspace-status';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useService, Workspace, WorkspaceManager } from '@toeverything/infra';
 import { useState } from 'react';
 
-import { WorkspaceSubPath } from '../../shared';
 import { mixpanel } from '../../utils';
 import * as styles from './upgrade.css';
 import { ArrowCircleIcon, HeartBreakIcon } from './upgrade-icon';
@@ -20,7 +18,6 @@ export const WorkspaceUpgrade = function WorkspaceUpgrade() {
   const currentWorkspace = useService(Workspace);
   const workspaceManager = useService(WorkspaceManager);
   const upgradeStatus = useWorkspaceStatus(currentWorkspace, s => s.upgrade);
-  const { openPage } = useNavigateHelper();
   const t = useAFFiNEI18N();
 
   const onButtonClick = useAsyncCallback(async () => {
@@ -36,7 +33,10 @@ export const WorkspaceUpgrade = function WorkspaceUpgrade() {
       const newWorkspace =
         await currentWorkspace.upgrade.upgrade(workspaceManager);
       if (newWorkspace) {
-        openPage(newWorkspace.id, WorkspaceSubPath.ALL);
+        location.pathname = `/workspace/${newWorkspace.id}/all`;
+        //FIXME: use openPage will cause a bug, which will cause the 'v1 to v4' test fail.
+        // params.workspaceId will not be updated, so the page will not be re-rendered and still show the 404 page.
+        // openPage(newWorkspace.id, WorkspaceSubPath.ALL);
       } else {
         // blocksuite may enter an incorrect state, reload to reset it.
         location.reload();
@@ -44,12 +44,7 @@ export const WorkspaceUpgrade = function WorkspaceUpgrade() {
     } catch (error) {
       setError(error instanceof Error ? error.message : '' + error);
     }
-  }, [
+  }, [upgradeStatus?.upgrading, currentWorkspace.upgrade, workspaceManager]);
-    upgradeStatus?.upgrading,
-    currentWorkspace.upgrade,
-    workspaceManager,
-    openPage,
-  ]);
 
   return (
     <div className={styles.layout}>

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

@@ -1,4 +1,7 @@
-import { NotFoundPage } from '@affine/component/not-found-page';
+import {
+  NoPermissionOrNotFound,
+  NotFoundPage,
+} from '@affine/component/not-found-page';
 import { useSession } from '@affine/core/hooks/affine/use-current-user';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import type { ReactElement } from 'react';
@@ -7,10 +10,16 @@ import { useCallback, useState } from 'react';
 import { SignOutModal } from '../components/affine/sign-out-modal';
 import { RouteLogic, useNavigateHelper } from '../hooks/use-navigate-helper';
 import { signOutCloud } from '../utils/cloud-utils';
+import { SignIn } from './sign-in';
 
-export const PageNotFound = (): ReactElement => {
+export const PageNotFound = ({
+  noPermission,
+}: {
+  noPermission?: boolean;
+}): ReactElement => {
   const { user } = useSession();
   const { jumpToIndex } = useNavigateHelper();
+  const { reload } = useSession();
   const [open, setOpen] = useState(false);
 
   const handleBackButtonClick = useCallback(
@@ -24,15 +33,26 @@ export const PageNotFound = (): ReactElement => {
 
   const onConfirmSignOut = useAsyncCallback(async () => {
     setOpen(false);
-    await signOutCloud('/signIn');
+    await signOutCloud();
-  }, [setOpen]);
+    await reload();
+  }, [reload]);
   return (
     <>
-      <NotFoundPage
+      {noPermission ? (
-        user={user}
+        <NoPermissionOrNotFound
-        onBack={handleBackButtonClick}
+          user={user}
-        onSignOut={handleOpenSignOutModal}
+          onBack={handleBackButtonClick}
-      />
+          onSignOut={handleOpenSignOutModal}
+          signInComponent={<SignIn />}
+        />
+      ) : (
+        <NotFoundPage
+          user={user}
+          onBack={handleBackButtonClick}
+          onSignOut={handleOpenSignOutModal}
+        />
+      )}
+
       <SignOutModal
         open={open}
         onOpenChange={setOpen}

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

@@ -1,3 +1,4 @@
+import { AffineOtherPageLayout } from '@affine/component/affine-other-page-layout';
 import { SignInPageContainer } from '@affine/component/auth-components';
 import { useAtom } from 'jotai';
 import { useCallback, useEffect, useRef } from 'react';
@@ -17,7 +18,7 @@ interface LocationState {
     callbackURL?: string;
   };
 }
-export const Component = () => {
+export const SignIn = () => {
   const paymentRedirectRef = useRef<'redirect' | 'ignore' | null>(null);
   const [{ state, email = '', emailType = 'changePassword' }, setAuthAtom] =
     useAtom(authAtom);
@@ -87,14 +88,26 @@ export const Component = () => {
 
   return (
     <SignInPageContainer>
-      <AuthPanel
+      <div style={{ maxWidth: '400px' }}>
-        state={state}
+        <AuthPanel
-        email={email}
+          state={state}
-        emailType={emailType}
+          email={email}
-        setEmailType={onSetEmailType}
+          emailType={emailType}
-        setAuthState={onSetAuthState}
+          setEmailType={onSetEmailType}
-        setAuthEmail={onSetAuthEmail}
+          setAuthState={onSetAuthState}
-      />
+          setAuthEmail={onSetAuthEmail}
+        />
+      </div>
     </SignInPageContainer>
   );
 };
+
+export const Component = () => {
+  return (
+    <AffineOtherPageLayout>
+      <div style={{ padding: '0 20px' }}>
+        <SignIn />
+      </div>
+    </AffineOtherPageLayout>
+  );
+};

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

@@ -331,7 +331,7 @@ export const DetailPage = ({ pageId }: { pageId: string }): ReactElement => {
 
   // if sync engine has been synced and the page is null, show 404 page.
   if (pageListReady && !page) {
-    return <PageNotFound />;
+    return <PageNotFound noPermission />;
   }
 
   if (!page) {

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

@@ -77,9 +77,8 @@ export const Component = (): ReactElement => {
 
   // if listLoading is false, we can show 404 page, otherwise we should show loading page.
   if (listLoading === false && meta === undefined) {
-    return <PageNotFound />;
+    return <PageNotFound noPermission />;
   }
-
   if (!workspace) {
     return <WorkspaceFallback key="workspaceLoading" />;
   }