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 ? (
-          <WorkspaceAvatar
-            meta={workspaceMetadata}
-            rounded={3}
-            data-testid="workspace-avatar"
-            size={avatarSize}
-            name={name}
-            colorfulFallback
-          />
-        ) : (
-          <Skeleton width={avatarSize} height={avatarSize} />
-        )}
-        <div className={styles.workspaceTitleContainer}>
+        <div className={styles.infoContainer}>
           {information ? (
-            showSyncStatus ? (
-              <WorkspaceSyncInfo
-                workspaceProfile={information}
-                workspaceMetadata={workspaceMetadata}
-              />
-            ) : (
-              <span className={styles.workspaceName}>{information.name}</span>
-            )
+            <WorkspaceAvatar
+              meta={workspaceMetadata}
+              rounded={3}
+              data-testid="workspace-avatar"
+              size={avatarSize}
+              name={name}
+              colorfulFallback
+            />
           ) : (
-            <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 />
-          )}
-          {onClickOpenSettings && (
-            <div className={styles.settingButton} onClick={onOpenSettings}>
-              <SettingsIcon width={16} height={16} />
-            </div>
+            <Skeleton width={avatarSize} height={avatarSize} />
           )}
+          <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('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'),
+});