feat(core): bump theme, update workspace card color variables, add active status (#8467)

close AF-1468

packages/frontend/component/package.json

@@ -38,7 +38,7 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-visually-hidden": "^1.1.0",
-    "@toeverything/theme": "^1.0.9",
+    "@toeverything/theme": "^1.0.10",
     "@vanilla-extract/dynamic": "^2.1.0",
     "check-password-strength": "^2.0.10",
     "clsx": "^2.1.0",

packages/frontend/core/package.json

@@ -33,7 +33,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@sentry/react": "^8.0.0",
-    "@toeverything/theme": "^1.0.9",
+    "@toeverything/theme": "^1.0.10",
     "@vanilla-extract/dynamic": "^2.1.0",
     "animejs": "^3.2.2",
     "bytes": "^3.1.2",

packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.tsx

@@ -10,6 +10,8 @@ import type { WorkspaceMetadata } from '@toeverything/infra';
 import {
   useLiveData,
   useService,
+  useServiceOptional,
+  WorkspaceService,
   WorkspacesService,
 } from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
@@ -210,12 +212,15 @@ const SortableWorkspaceItem = ({
     onClick(workspaceMetadata);
   }, [onClick, workspaceMetadata]);
 
+  const currentWorkspace = useServiceOptional(WorkspaceService)?.workspace;
+
   return (
     <WorkspaceCard
       className={styles.workspaceCard}
       workspaceMetadata={workspaceMetadata}
       onClick={handleClick}
       avatarSize={28}
+      active={currentWorkspace?.id === workspaceMetadata.id}
       onClickOpenSettings={onSettingClick}
       onClickEnableCloud={onEnableCloudClick}
     />

packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx

@@ -10,6 +10,7 @@ import {
   ArrowDownSmallIcon,
   CloudWorkspaceIcon,
   CollaborationIcon,
+  DoneIcon,
   InformationFillDuotoneIcon,
   LocalWorkspaceIcon,
   NoNetworkIcon,
@@ -240,6 +241,7 @@ export const WorkspaceCard = forwardRef<
     avatarSize?: number;
     disable?: boolean;
     hideCollaborationIcon?: boolean;
+    active?: boolean;
     onClickOpenSettings?: (workspaceMetadata: WorkspaceMetadata) => void;
     onClickEnableCloud?: (workspaceMetadata: WorkspaceMetadata) => void;
   }
@@ -255,6 +257,7 @@ export const WorkspaceCard = forwardRef<
       className,
       disable,
       hideCollaborationIcon,
+      active,
       ...props
     },
     ref
@@ -284,53 +287,60 @@ export const WorkspaceCard = forwardRef<
         ref={ref}
         {...props}
       >
-        {information ? (
+        <div className={styles.infoContainer}>
-          <WorkspaceAvatar
-            meta={workspaceMetadata}
-            rounded={3}
-            data-testid="workspace-avatar"
-            size={avatarSize}
-            name={name}
-            colorfulFallback
-          />
-        ) : (
-          <Skeleton width={avatarSize} height={avatarSize} />
-        )}
-        <div className={styles.workspaceTitleContainer}>
           {information ? (
-            showSyncStatus ? (
+            <WorkspaceAvatar
-              <WorkspaceSyncInfo
+              meta={workspaceMetadata}
-                workspaceProfile={information}
+              rounded={3}
-                workspaceMetadata={workspaceMetadata}
+              data-testid="workspace-avatar"
-              />
+              size={avatarSize}
-            ) : (
+              name={name}
-              <span className={styles.workspaceName}>{information.name}</span>
+              colorfulFallback
-            )
+            />
           ) : (
-            <Skeleton width={100} />
+            <Skeleton width={avatarSize} height={avatarSize} />
-          )}
-        </div>
-        <div className={styles.showOnCardHover}>
-          {onClickEnableCloud &&
-          workspaceMetadata.flavour === WorkspaceFlavour.LOCAL ? (
-            <Button
-              className={styles.enableCloudButton}
-              onClick={onEnableCloud}
-            >
-              Enable Cloud
-            </Button>
-          ) : null}
-          {hideCollaborationIcon || information?.isOwner ? null : (
-            <CollaborationIcon />
-          )}
-          {onClickOpenSettings && (
-            <div className={styles.settingButton} onClick={onOpenSettings}>
-              <SettingsIcon width={16} height={16} />
-            </div>
           )}
+          <div className={styles.workspaceTitleContainer}>
+            {information ? (
+              showSyncStatus ? (
+                <WorkspaceSyncInfo
+                  workspaceProfile={information}
+                  workspaceMetadata={workspaceMetadata}
+                />
+              ) : (
+                <span className={styles.workspaceName}>{information.name}</span>
+              )
+            ) : (
+              <Skeleton width={100} />
+            )}
+          </div>
+          <div className={styles.showOnCardHover}>
+            {onClickEnableCloud &&
+            workspaceMetadata.flavour === WorkspaceFlavour.LOCAL ? (
+              <Button
+                className={styles.enableCloudButton}
+                onClick={onEnableCloud}
+              >
+                Enable Cloud
+              </Button>
+            ) : null}
+            {hideCollaborationIcon || information?.isOwner ? null : (
+              <CollaborationIcon className={styles.collaborationIcon} />
+            )}
+            {onClickOpenSettings && (
+              <div className={styles.settingButton} onClick={onOpenSettings}>
+                <SettingsIcon width={16} height={16} />
+              </div>
+            )}
+          </div>
+          {showArrowDownIcon && <ArrowDownSmallIcon />}
         </div>
 
-        {showArrowDownIcon && <ArrowDownSmallIcon />}
+        {active && (
+          <div className={styles.activeContainer}>
+            <DoneIcon className={styles.activeIcon} />{' '}
+          </div>
+        )}
       </div>
     );
   }

packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts

@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { globalStyle, style } from '@vanilla-extract/css';
 
 const wsSlideAnim = {
@@ -17,12 +18,23 @@ export const container = style({
   outline: 'none',
   width: '100%',
   maxWidth: 500,
-  color: cssVar('textPrimaryColor'),
+  color: cssVarV2('text/primary'),
   ':hover': {
     cursor: 'pointer',
     background: cssVar('hoverColor'),
   },
 });
+export const infoContainer = style({
+  width: 0,
+  flex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  position: 'relative',
+});
+export const activeContainer = style({
+  flexShrink: 0,
+});
 
 export const disable = style({
   pointerEvents: 'none',
@@ -134,6 +146,11 @@ export const enableCloudButton = style({
   },
 });
 
+export const collaborationIcon = style({
+  color: cssVarV2('icon/secondary'),
+  fontSize: 14,
+});
+
 export const settingButton = style({
   transition: 'all 0.13s ease',
   width: 0,
@@ -144,6 +161,7 @@ export const settingButton = style({
   alignItems: 'center',
   justifyContent: 'center',
   placeItems: 'center',
+  color: cssVarV2('icon/primary'),
 
   borderRadius: 4,
   boxShadow: 'none',
@@ -153,9 +171,8 @@ export const settingButton = style({
   selectors: {
     [`.${container}:hover &`]: {
       width: 20,
-      marginLeft: 8,
+      boxShadow: cssVar('buttonShadow'),
-      boxShadow: cssVar('shadow1'),
+      background: cssVarV2('button/secondary'),
-      background: cssVar('white80'),
     },
   },
 });
@@ -172,3 +189,8 @@ export const showOnCardHover = style({
     },
   },
 });
+
+export const activeIcon = style({
+  fontSize: 14,
+  color: cssVarV2('icon/activated'),
+});

tests/affine-local/e2e/local-first-avatar.spec.ts

@@ -21,7 +21,10 @@ test('should create a page with a local first avatar and remove it', async ({
   await page.getByTestId('create-workspace-create-button').click();
   await page.waitForTimeout(1000);
   await page.getByTestId('workspace-name').click();
-  await page.getByTestId('workspace-card').nth(1).click();
+  await page
+    .getByTestId('workspace-card')
+    .nth(1)
+    .click({ position: { x: 10, y: 10 } });
   await page.getByTestId('settings-modal-trigger').click();
   await page.getByTestId('current-workspace-label').click();
   await page

yarn.lock

@@ -318,7 +318,7 @@ __metadata:
     "@storybook/react": "npm:^8.2.9"
     "@storybook/react-vite": "npm:^8.2.9"
     "@testing-library/react": "npm:^16.0.0"
-    "@toeverything/theme": "npm:^1.0.9"
+    "@toeverything/theme": "npm:^1.0.10"
     "@types/react": "npm:^18.2.75"
     "@types/react-dom": "npm:^18.2.24"
     "@vanilla-extract/css": "npm:^1.14.2"
@@ -382,7 +382,7 @@ __metadata:
     "@radix-ui/react-toolbar": "npm:^1.0.4"
     "@sentry/react": "npm:^8.0.0"
     "@testing-library/react": "npm:^16.0.0"
-    "@toeverything/theme": "npm:^1.0.9"
+    "@toeverything/theme": "npm:^1.0.10"
     "@types/animejs": "npm:^3.1.12"
     "@types/bytes": "npm:^3.1.4"
     "@types/image-blob-reduce": "npm:^4.1.4"
@@ -12876,10 +12876,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@toeverything/theme@npm:^1.0.8, @toeverything/theme@npm:^1.0.9":
+"@toeverything/theme@npm:^1.0.10, @toeverything/theme@npm:^1.0.8":
-  version: 1.0.9
+  version: 1.0.10
-  resolution: "@toeverything/theme@npm:1.0.9"
+  resolution: "@toeverything/theme@npm:1.0.10"
-  checksum: 10/4eb8e9e9ad899cca53ed957cd8f6508bb3a0bc0d9698c11c203bea6f3dcbfbbf18370c69a690612e3b16ac1753c5282349ba218d65215372776dc7d93cee6ce4
+  checksum: 10/9d83bb4199a50a9079f7c0ca0efe5afbe92b405fa7ed95a9b1631d0657f36a1e2b6b64511ea7b1cced7ce0c78ae01d8aba7a328cf69da55176aea9c25d6d61ab
   languageName: node
   linkType: hard