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,6 +287,7 @@ export const WorkspaceCard = forwardRef<
         ref={ref}
         {...props}
       >
+        <div className={styles.infoContainer}>
           {information ? (
             <WorkspaceAvatar
               meta={workspaceMetadata}
@@ -321,7 +325,7 @@ export const WorkspaceCard = forwardRef<
               </Button>
             ) : null}
             {hideCollaborationIcon || information?.isOwner ? null : (
-            <CollaborationIcon />
+              <CollaborationIcon className={styles.collaborationIcon} />
             )}
             {onClickOpenSettings && (
               <div className={styles.settingButton} onClick={onOpenSettings}>
@@ -329,9 +333,15 @@ export const WorkspaceCard = forwardRef<
               </div>
             )}
           </div>
-
           {showArrowDownIcon && <ArrowDownSmallIcon />}
         </div>
+
+        {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('shadow1'),
-      background: cssVar('white80'),
+      boxShadow: cssVar('buttonShadow'),
+      background: cssVarV2('button/secondary'),
     },
   },
 });
@@ -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":
-  version: 1.0.9
-  resolution: "@toeverything/theme@npm:1.0.9"
-  checksum: 10/4eb8e9e9ad899cca53ed957cd8f6508bb3a0bc0d9698c11c203bea6f3dcbfbbf18370c69a690612e3b16ac1753c5282349ba218d65215372776dc7d93cee6ce4
+"@toeverything/theme@npm:^1.0.10, @toeverything/theme@npm:^1.0.8":
+  version: 1.0.10
+  resolution: "@toeverything/theme@npm:1.0.10"
+  checksum: 10/9d83bb4199a50a9079f7c0ca0efe5afbe92b405fa7ed95a9b1631d0657f36a1e2b6b64511ea7b1cced7ce0c78ae01d8aba7a328cf69da55176aea9c25d6d61ab
   languageName: node
   linkType: hard