feat(core): add sync paused dialog (#9135)

close AF-1932 AF-1954 AF-1953 AF-1955

Add a pop-up reminder when the workspace capacity exceeds the limit or the number of members exceeds the limit.

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/billing/index.tsx

@@ -122,6 +122,7 @@ const TeamCard = () => {
   const expiration = teamSubscription?.canceledAt;
   const nextBillingDate = teamSubscription?.nextBillAt;
   const recurring = teamSubscription?.recurring;
+  const endDate = teamSubscription?.end;
 
   const description = useMemo(() => {
     if (recurring === SubscriptionRecurring.Yearly) {
@@ -138,22 +139,22 @@ const TeamCard = () => {
   }, [recurring, t]);
 
   const expirationDate = useMemo(() => {
-    if (expiration) {
+    if (expiration && endDate) {
       return t[
         'com.affine.settings.workspace.billing.team-workspace.not-renewed'
       ]({
-        date: new Date(expiration).toLocaleDateString(),
+        date: new Date(endDate).toLocaleDateString(),
       });
     }
-    if (nextBillingDate) {
+    if (nextBillingDate && endDate) {
       return t[
         'com.affine.settings.workspace.billing.team-workspace.next-billing-date'
       ]({
-        date: new Date(nextBillingDate).toLocaleDateString(),
+        date: new Date(endDate).toLocaleDateString(),
       });
     }
     return '';
-  }, [expiration, nextBillingDate, t]);
+  }, [endDate, expiration, nextBillingDate, t]);
 
   const amount = teamSubscription
     ? teamPrices && workspaceMemberCount

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/cloud-members-panel.tsx

@@ -66,6 +66,10 @@ export const CloudWorkspaceMembersPanel = ({
     permissionService.permission.revalidate();
   }, [permissionService]);
 
+  useEffect(() => {
+    membersService.members.revalidate();
+  }, [membersService]);
+
   const workspaceQuotaService = useService(WorkspaceQuotaService);
   useEffect(() => {
     workspaceQuotaService.quota.revalidate();

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/member-list.tsx

@@ -125,6 +125,7 @@ const MemberItem = ({
   const show = isOwner && currentAccount.id !== member.id;
 
   const handleOpenAssignModal = useCallback(() => {
+    setInputValue('');
     setOpen(true);
   }, []);
 

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/member-option.tsx

@@ -174,7 +174,8 @@ export const MemberOptions = ({
         onClick: handleDecline,
         show:
           (isAdmin || isOwner) &&
-          member.status === WorkspaceMemberStatus.UnderReview,
+          (member.status === WorkspaceMemberStatus.UnderReview ||
+            member.status === WorkspaceMemberStatus.NeedMoreSeatAndReview),
       },
       {
         label: t['com.affine.payment.member.team.revoke'](),
@@ -207,7 +208,8 @@ export const MemberOptions = ({
         onClick: handleChangeToAdmin,
         show:
           isOwner &&
-          member.permission === Permission.Write &&
+          member.permission !== Permission.Owner &&
+          member.permission !== Permission.Admin &&
           member.status === WorkspaceMemberStatus.Accepted,
       },
       {

packages/frontend/core/src/desktop/pages/upgrade-to-team/index.tsx

@@ -100,7 +100,11 @@ export const UpgradeToTeam = ({ recurring }: { recurring: string | null }) => {
             },
           }}
         >
-          <MenuTrigger className={styles.menuTrigger} tooltip={menuTriggerText}>
+          <MenuTrigger
+            className={styles.menuTrigger}
+            tooltip={menuTriggerText}
+            data-selected={!!selectedWorkspace}
+          >
             {menuTriggerText}
           </MenuTrigger>
         </Menu>

packages/frontend/core/src/desktop/pages/upgrade-to-team/styles.css.ts

@@ -18,6 +18,11 @@ export const menuTrigger = style({
   fontSize: cssVar('fontBase'),
   fontWeight: 500,
   color: cssVarV2('text/placeholder'),
+  selectors: {
+    '&[data-selected="true"]': {
+      color: cssVarV2('text/primary'),
+    },
+  },
 });
 
 export const upgradeButton = style({

packages/frontend/core/src/desktop/pages/workspace/layouts/workspace-layout.tsx

@@ -10,6 +10,7 @@ import { AIIsland } from '@affine/core/desktop/components/ai-island';
 import { AppContainer } from '@affine/core/desktop/components/app-container';
 import { WorkspaceDialogs } from '@affine/core/desktop/dialogs';
 import { PeekViewManagerModal } from '@affine/core/modules/peek-view';
+import { QuotaCheck } from '@affine/core/modules/quota';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import {
   LiveData,
@@ -31,7 +32,10 @@ export const WorkspaceLayout = function WorkspaceLayout({
       {currentWorkspace?.flavour === 'local' ? (
         <LocalQuotaModal />
       ) : (
-        <CloudQuotaModal />
+        <>
+          <CloudQuotaModal />
+          <QuotaCheck workspaceMeta={currentWorkspace.meta} />
+        </>
       )}
       <AiLoginRequiredModal />
       <WorkspaceSideEffects />