feat(core): optimize team workspace member management (#9737)

close AF-2106 AF-2077 AF-2089

feat(core): handle need more seat status

feat(core): prevent invite members when team plan is canceled

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

@@ -11,6 +11,7 @@ import illustrationLight from '../affine-other-page-layout/assets/other-page.lig
 import type { User } from '../auth-components';
 import {
   illustration,
+  info,
   largeButtonEffect,
   notFoundPageContainer,
   wrapper,
@@ -35,6 +36,30 @@ export const NoPermissionOrNotFound = ({
       <div className={notFoundPageContainer} data-testid="not-found">
         {user ? (
           <>
+            <div className={info}>
+              <p className={wrapper}>{t['404.hint']()}</p>
+              <div className={wrapper}>
+                <Button
+                  variant="primary"
+                  size="extraLarge"
+                  onClick={onBack}
+                  className={largeButtonEffect}
+                >
+                  {t['404.back']()}
+                </Button>
+              </div>
+              <div className={wrapper}>
+                <Avatar url={user.avatar ?? user.image} name={user.label} />
+                <span style={{ margin: '0 12px' }}>{user.email}</span>
+                <IconButton
+                  onClick={onSignOut}
+                  size="20"
+                  tooltip={t['404.signOut']()}
+                >
+                  <SignOutIcon />
+                </IconButton>
+              </div>
+            </div>
             <div className={wrapper}>
               <ThemedImg
                 draggable={false}
@@ -43,28 +68,6 @@ export const NoPermissionOrNotFound = ({
                 darkSrc={illustrationDark}
               />
             </div>
-            <p className={wrapper}>{t['404.hint']()}</p>
-            <div className={wrapper}>
-              <Button
-                variant="primary"
-                size="extraLarge"
-                onClick={onBack}
-                className={largeButtonEffect}
-              >
-                {t['404.back']()}
-              </Button>
-            </div>
-            <div className={wrapper}>
-              <Avatar url={user.avatar ?? user.image} name={user.label} />
-              <span style={{ margin: '0 12px' }}>{user.email}</span>
-              <IconButton
-                onClick={onSignOut}
-                size="20"
-                tooltip={t['404.signOut']()}
-              >
-                <SignOutIcon />
-              </IconButton>
-            </div>
           </>
         ) : (
           signInComponent
@@ -84,6 +87,32 @@ export const NotFoundPage = ({
   return (
     <AffineOtherPageLayout>
       <div className={notFoundPageContainer} data-testid="not-found">
+        <div className={info}>
+          <p className={wrapper}>{t['404.hint']()}</p>
+          <div className={wrapper}>
+            <Button
+              variant="primary"
+              size="extraLarge"
+              onClick={onBack}
+              className={largeButtonEffect}
+            >
+              {t['404.back']()}
+            </Button>
+          </div>
+          {user ? (
+            <div className={wrapper}>
+              <Avatar url={user.avatar ?? user.image} name={user.label} />
+              <span style={{ margin: '0 12px' }}>{user.email}</span>
+              <IconButton
+                onClick={onSignOut}
+                size="20"
+                tooltip={t['404.signOut']()}
+              >
+                <SignOutIcon />
+              </IconButton>
+            </div>
+          ) : null}
+        </div>
         <div className={wrapper}>
           <ThemedImg
             draggable={false}
@@ -92,31 +121,6 @@ export const NotFoundPage = ({
             darkSrc={illustrationDark}
           />
         </div>
-        <p className={wrapper}>{t['404.hint']()}</p>
-        <div className={wrapper}>
-          <Button
-            variant="primary"
-            size="extraLarge"
-            onClick={onBack}
-            className={largeButtonEffect}
-          >
-            {t['404.back']()}
-          </Button>
-        </div>
-
-        {user ? (
-          <div className={wrapper}>
-            <Avatar url={user.avatar ?? user.image} name={user.label} />
-            <span style={{ margin: '0 12px' }}>{user.email}</span>
-            <IconButton
-              onClick={onSignOut}
-              size="20"
-              tooltip={t['404.signOut']()}
-            >
-              <SignOutIcon />
-            </IconButton>
-          </div>
-        ) : null}
       </div>
     </AffineOtherPageLayout>
   );

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

@@ -3,11 +3,10 @@ import { style } from '@vanilla-extract/css';
 export const notFoundPageContainer = style({
   fontSize: cssVar('fontBase'),
   color: cssVar('textPrimaryColor'),
-  height: '100vh',
+  height: '100%',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  justifyContent: 'center',
   width: '100%',
   padding: '0 20px',
 });
@@ -15,7 +14,18 @@ export const wrapper = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  margin: '24px auto 0',
+  margin: '0 auto',
+});
+export const info = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '24px',
+  textAlign: 'center',
+  marginTop: 'auto',
+  paddingTop: '120px',
+  marginBottom: 'auto',
 });
 export const largeButtonEffect = style({
   boxShadow: `${cssVar('largeButtonEffect')} !important`,