feat(core): refactor sidebar header (#6251)

- Add user avatar
- Move sign-out/user settings link from workspace-modal to user avatar modal
- Modify the style of workspace list items
- Modify gap of navigation buttons
- Animate Syncing/Offline/...

![CleanShot 2024-03-22 at 10.22.38.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/7305f561-a85b-4ec6-89c2-27e2f1b63c85.gif)

packages/frontend/component/src/components/card/workspace-card/index.tsx

@@ -1,69 +1,18 @@
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
-import { WorkspaceFlavour } from '@affine/env/workspace';
+import type { WorkspaceFlavour } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CollaborationIcon, SettingsIcon } from '@blocksuite/icons';
 import type { WorkspaceMetadata } from '@toeverything/infra';
 import { useCallback } from 'react';
 
-import { Avatar } from '../../../ui/avatar';
+import { Avatar, type AvatarProps } from '../../../ui/avatar';
-import { Divider } from '../../../ui/divider';
 import { Skeleton } from '../../../ui/skeleton';
-import { Tooltip } from '../../../ui/tooltip';
+import * as styles from './styles.css';
-import {
-  StyledCard,
-  StyledIconContainer,
-  StyledSettingLink,
-  StyledWorkspaceInfo,
-  StyledWorkspaceTitle,
-  StyledWorkspaceTitleArea,
-  StyledWorkspaceType,
-  StyledWorkspaceTypeEllipse,
-  StyledWorkspaceTypeText,
-} from './styles';
 
 export interface WorkspaceTypeProps {
   flavour: WorkspaceFlavour;
   isOwner: boolean;
 }
 
-const WorkspaceType = ({ flavour, isOwner }: WorkspaceTypeProps) => {
-  const t = useAFFiNEI18N();
-  if (flavour === WorkspaceFlavour.LOCAL) {
-    return (
-      <StyledWorkspaceType>
-        <StyledWorkspaceTypeEllipse />
-        <StyledWorkspaceTypeText>{t['Local']()}</StyledWorkspaceTypeText>
-      </StyledWorkspaceType>
-    );
-  }
-
-  return isOwner ? (
-    <StyledWorkspaceType>
-      <StyledWorkspaceTypeEllipse cloud={true} />
-      <StyledWorkspaceTypeText>
-        {t['com.affine.brand.affineCloud']()}
-      </StyledWorkspaceTypeText>
-    </StyledWorkspaceType>
-  ) : (
-    <StyledWorkspaceType>
-      <StyledWorkspaceTypeEllipse cloud={true} />
-      <StyledWorkspaceTypeText>
-        {t['com.affine.brand.affineCloud']()}
-      </StyledWorkspaceTypeText>
-      <Divider
-        orientation="vertical"
-        size="thinner"
-        style={{ margin: '0px 8px', height: '7px' }}
-      />
-      <Tooltip content={t['com.affine.workspaceType.joined']()}>
-        <StyledIconContainer>
-          <CollaborationIcon />
-        </StyledIconContainer>
-      </Tooltip>
-    </StyledWorkspaceType>
-  );
-};
-
 export interface WorkspaceCardProps {
   currentWorkspaceId?: string | null;
   meta: WorkspaceMetadata;
@@ -77,7 +26,7 @@ export interface WorkspaceCardProps {
 export const WorkspaceCardSkeleton = () => {
   return (
     <div>
-      <StyledCard data-testid="workspace-card">
+      <div className={styles.card} data-testid="workspace-card">
         <Skeleton variant="circular" width={28} height={28} />
         <Skeleton
           variant="rectangular"
@@ -85,11 +34,14 @@ export const WorkspaceCardSkeleton = () => {
           width={220}
           style={{ marginLeft: '12px' }}
         />
-      </StyledCard>
+      </div>
     </div>
   );
 };
 
+const avatarImageProps = {
+  style: { borderRadius: 3, overflow: 'hidden' },
+} satisfies AvatarProps['imageProps'];
 export const WorkspaceCard = ({
   onClick,
   onSettingClick,
@@ -101,32 +53,38 @@ export const WorkspaceCard = ({
 }: WorkspaceCardProps) => {
   const displayName = name ?? UNTITLED_WORKSPACE_NAME;
   return (
-    <StyledCard
+    <div
+      className={styles.card}
+      data-active={meta.id === currentWorkspaceId}
       data-testid="workspace-card"
       onClick={useCallback(() => {
         onClick(meta);
       }, [onClick, meta])}
-      active={meta.id === currentWorkspaceId}
     >
-      <Avatar size={28} url={avatar} name={name} colorfulFallback />
+      <Avatar
-      <StyledWorkspaceInfo>
+        imageProps={avatarImageProps}
-        <StyledWorkspaceTitleArea style={{ display: 'flex' }}>
+        fallbackProps={avatarImageProps}
-          <StyledWorkspaceTitle>{displayName}</StyledWorkspaceTitle>
+        size={28}
+        url={avatar}
+        name={name}
+        colorfulFallback
+      />
+      <div className={styles.workspaceInfo}>
+        <div className={styles.workspaceTitle}>{displayName}</div>
 
-          <StyledSettingLink
+        <div className={styles.actionButtons}>
-            size="small"
+          {isOwner ? null : <CollaborationIcon />}
-            className="setting-entry"
+          <div
+            className={styles.settingButton}
             onClick={e => {
               e.stopPropagation();
               onSettingClick(meta);
             }}
-            withoutHoverStyle={true}
           >
-            <SettingsIcon />
+            <SettingsIcon width={16} height={16} />
-          </StyledSettingLink>
+          </div>
-        </StyledWorkspaceTitleArea>
+        </div>
-        <WorkspaceType isOwner={isOwner} flavour={meta.flavour} />
+      </div>
-      </StyledWorkspaceInfo>
+    </div>
-    </StyledCard>
   );
 };

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

@@ -0,0 +1,86 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+import { displayFlex, textEllipsis } from '../../../styles';
+
+export const card = style({
+  width: '100%',
+  cursor: 'pointer',
+  padding: '8px 12px',
+  borderRadius: 4,
+  // border: `1px solid ${borderColor}`,
+  boxShadow: 'inset 0 0 0 1px transparent',
+  ...displayFlex('flex-start', 'flex-start'),
+  transition: 'background .2s',
+  position: 'relative',
+  color: cssVar('textSecondaryColor'),
+  background: 'transparent',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12,
+
+  selectors: {
+    '&:hover': {
+      background: cssVar('hoverColor'),
+    },
+    '&[data-active="true"]': {
+      boxShadow: 'inset 0 0 0 1px ' + cssVar('brandColor'),
+    },
+  },
+});
+
+export const workspaceInfo = style({
+  width: 0,
+  flex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 2,
+});
+
+export const workspaceTitle = style({
+  width: 0,
+  flex: 1,
+  fontSize: cssVar('fontSm'),
+  fontWeight: 500,
+  lineHeight: '22px',
+  maxWidth: '190px',
+  color: cssVar('textPrimaryColor'),
+  ...textEllipsis(1),
+});
+
+export const actionButtons = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const settingButtonWrapper = style({});
+
+export const settingButton = style({
+  transition: 'all 0.13s ease',
+  width: 0,
+  height: 20,
+  overflow: 'hidden',
+  marginLeft: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  placeItems: 'center',
+
+  borderRadius: 4,
+  boxShadow: 'none',
+  background: 'transparent',
+  cursor: 'pointer',
+
+  selectors: {
+    [`.${card}:hover &`]: {
+      width: 20,
+      marginLeft: 8,
+      boxShadow: cssVar('shadow1'),
+      background: cssVar('white80'),
+    },
+    // [`.${card}:hover &:hover`]: {
+    //   background: cssVar('hoverColor'),
+    // },
+  },
+});

packages/frontend/component/src/components/card/workspace-card/styles.ts

@@ -1,136 +0,0 @@
-import { displayFlex, styled, textEllipsis } from '../../../styles';
-import { IconButton } from '../../../ui/button';
-
-export const StyledWorkspaceInfo = styled('div')(() => {
-  return {
-    marginLeft: '12px',
-    width: '100%',
-  };
-});
-
-export const StyledWorkspaceTitle = styled('div')(() => {
-  return {
-    fontSize: 'var(--affine-font-sm)',
-    fontWeight: 700,
-    lineHeight: '22px',
-    maxWidth: '190px',
-    color: 'var(--affine-text-primary-color)',
-    ...textEllipsis(1),
-  };
-});
-
-export const StyledCard = styled('div')<{
-  active?: boolean;
-}>(({ active }) => {
-  const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
-  const backgroundColor = active ? 'var(--affine-white-30)' : 'transparent';
-  return {
-    width: '100%',
-    cursor: 'pointer',
-    padding: '12px',
-    borderRadius: '8px',
-    border: `1px solid ${borderColor}`,
-    ...displayFlex('flex-start', 'flex-start'),
-    transition: 'background .2s',
-    alignItems: 'center',
-    position: 'relative',
-    color: 'var(--affine-text-secondary-color)',
-    background: backgroundColor,
-    ':hover': {
-      background: 'var(--affine-hover-color)',
-      '.add-icon': {
-        borderColor: 'var(--affine-primary-color)',
-        color: 'var(--affine-primary-color)',
-      },
-      '.setting-entry': {
-        opacity: 1,
-        pointerEvents: 'auto',
-        backgroundColor: 'var(--affine-white-30)',
-        boxShadow: 'var(--affine-shadow-1)',
-        ':hover': {
-          background:
-            'linear-gradient(0deg, var(--affine-hover-color) 0%, var(--affine-hover-color) 100%), var(--affine-white-30)',
-        },
-      },
-    },
-    '@media (max-width: 720px)': {
-      width: '100%',
-    },
-  };
-});
-
-export const StyledModalHeader = styled('div')(() => {
-  return {
-    width: '100%',
-    height: '72px',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    borderRadius: '24px 24px 0 0',
-    padding: '0 40px',
-    ...displayFlex('space-between', 'center'),
-  };
-});
-
-export const StyledSettingLink = styled(IconButton)(() => {
-  return {
-    position: 'absolute',
-    right: '10px',
-    top: '10px',
-    opacity: 0,
-    borderRadius: '4px',
-    color: 'var(--affine-primary-color)',
-    pointerEvents: 'none',
-    transition: 'all .15s',
-    ':hover': {
-      background: 'var(--affine-hover-color)',
-    },
-  };
-});
-
-export const StyledWorkspaceType = styled('div')(() => {
-  return {
-    ...displayFlex('flex-start', 'center'),
-    width: '100%',
-    height: '20px',
-  };
-});
-
-export const StyledWorkspaceTitleArea = styled('div')(() => {
-  return {
-    display: 'flex',
-    justifyContent: 'space-between',
-  };
-});
-
-export const StyledWorkspaceTypeEllipse = styled('div')<{
-  cloud?: boolean;
-}>(({ cloud }) => {
-  return {
-    width: '5px',
-    height: '5px',
-    borderRadius: '50%',
-    background: cloud
-      ? 'var(--affine-palette-shape-blue)'
-      : 'var(--affine-palette-shape-green)',
-  };
-});
-
-export const StyledWorkspaceTypeText = styled('div')(() => {
-  return {
-    fontSize: '12px',
-    fontWeight: 500,
-    lineHeight: '20px',
-    marginLeft: '4px',
-    color: 'var(--affine-text-secondary-color)',
-  };
-});
-
-export const StyledIconContainer = styled('div')(() => {
-  return {
-    ...displayFlex('flex-start', 'center'),
-    fontSize: '14px',
-    gap: '8px',
-    color: 'var(--affine-icon-secondary)',
-  };
-});

packages/frontend/component/src/ui/avatar/style.css.ts

@@ -79,7 +79,6 @@ export const DefaultAvatarContainerStyle = style({
   width: '100%',
   height: '100%',
   position: 'relative',
-  borderRadius: '50%',
   overflow: 'hidden',
 });
 export const DefaultAvatarMiddleItemStyle = style({
@@ -155,6 +154,7 @@ export const avatarFallback = style({
   width: '100%',
   height: '100%',
   borderRadius: '50%',
+  overflow: 'hidden',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',

packages/frontend/core/public/imgs/unknown-user.svg

@@ -0,0 +1,17 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_19485_742)">
+    <rect width="20" height="20" rx="10" fill="currentColor" fill-opacity="0.1" />
+    <path
+      d="M10 10.9999C12.0829 10.9999 13.7714 9.29858 13.7714 7.1999C13.7714 5.10122 12.0829 3.3999 10 3.3999C7.91709 3.3999 6.22857 5.10122 6.22857 7.1999C6.22857 9.29858 7.91709 10.9999 10 10.9999Z"
+      fill="currentColor" fill-opacity="0.3" />
+    <path
+      d="M1.5 22.3999C1.33431 22.3999 1.19948 22.2649 1.20496 22.0993C1.36224 17.3416 5.23972 13.5332 10 13.5332C14.7603 13.5332 18.6378 17.3416 18.795 22.0993C18.8005 22.2649 18.6657 22.3999 18.5 22.3999H1.5Z"
+      fill="currentColor" fill-opacity="0.3" />
+  </g>
+  <defs>
+    <clipPath id="clip0_19485_742">
+      <rect width="20" height="20" rx="10" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
+  

packages/frontend/core/src/components/app-sidebar/fallback.css.ts

@@ -1,10 +1,9 @@
 import { style } from '@vanilla-extract/css';
 export const fallbackStyle = style({
-  margin: '5px 16px',
+  margin: '4px 16px',
   height: '100%',
 });
 export const fallbackHeaderStyle = style({
-  height: '56px',
   width: '100%',
   display: 'flex',
   alignItems: 'center',

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx

@@ -19,7 +19,7 @@ import * as styles from './index.css';
 import { UserAccountItem } from './user-account';
 import { AFFiNEWorkspaceList } from './workspace-list';
 
-const SignInItem = () => {
+export const SignInItem = () => {
   const setDisableCloudOpen = useSetAtom(openDisableCloudAlertModalAtom);
 
   const setOpen = useSetAtom(authAtom);

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.tsx

@@ -1,73 +1,8 @@
-import { IconButton } from '@affine/component/ui/button';
-import { Divider } from '@affine/component/ui/divider';
-import { Menu, MenuIcon, MenuItem } from '@affine/component/ui/menu';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import {
-  AccountIcon,
-  MoreHorizontalIcon,
-  SignOutIcon,
-} from '@blocksuite/icons';
-import { useSetAtom } from 'jotai';
-import { useCallback } from 'react';
-
-import {
-  openSettingModalAtom,
-  openSignOutModalAtom,
-} from '../../../../../atoms';
 import { UserPlanButton } from '../../../../affine/auth/user-plan-button';
 import * as styles from './index.css';
 
-const AccountMenu = ({ onEventEnd }: { onEventEnd?: () => void }) => {
-  const setSettingModalAtom = useSetAtom(openSettingModalAtom);
-  const setOpenSignOutModalAtom = useSetAtom(openSignOutModalAtom);
-
-  const onOpenAccountSetting = useCallback(() => {
-    setSettingModalAtom(prev => ({
-      ...prev,
-      open: true,
-      activeTab: 'account',
-    }));
-  }, [setSettingModalAtom]);
-
-  const onOpenSignOutModal = useCallback(() => {
-    onEventEnd?.();
-    setOpenSignOutModalAtom(true);
-  }, [onEventEnd, setOpenSignOutModalAtom]);
-
-  const t = useAFFiNEI18N();
-
-  return (
-    <div>
-      <MenuItem
-        preFix={
-          <MenuIcon>
-            <AccountIcon />
-          </MenuIcon>
-        }
-        data-testid="workspace-modal-account-settings-option"
-        onClick={onOpenAccountSetting}
-      >
-        {t['com.affine.workspace.cloud.account.settings']()}
-      </MenuItem>
-      <Divider />
-      <MenuItem
-        preFix={
-          <MenuIcon>
-            <SignOutIcon />
-          </MenuIcon>
-        }
-        data-testid="workspace-modal-sign-out-option"
-        onClick={onOpenSignOutModal}
-      >
-        {t['com.affine.workspace.cloud.account.logout']()}
-      </MenuItem>
-    </div>
-  );
-};
-
 export const UserAccountItem = ({
   email,
-  onEventEnd,
 }: {
   email: string;
   onEventEnd?: () => void;
@@ -76,21 +11,8 @@ export const UserAccountItem = ({
     <div className={styles.userAccountContainer}>
       <div className={styles.leftContainer}>
         <div className={styles.userEmail}>{email}</div>
-        <UserPlanButton />
       </div>
-      <Menu
+      <UserPlanButton />
-        items={<AccountMenu onEventEnd={onEventEnd} />}
-        contentOptions={{
-          side: 'right',
-          sideOffset: 12,
-        }}
-      >
-        <IconButton
-          data-testid="workspace-modal-account-option"
-          icon={<MoreHorizontalIcon />}
-          type="plain"
-        />
-      </Menu>
     </div>
   );
 };

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.css.ts

@@ -10,17 +10,21 @@ export const workspaceListWrapper = style({
   display: 'flex',
   width: '100%',
   flexDirection: 'column',
-  gap: '4px',
+  gap: 2,
 });
 export const workspaceType = style({
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'space-between',
+  gap: 4,
   padding: '0px 12px',
+  fontWeight: 500,
   fontSize: cssVar('fontXs'),
   lineHeight: '20px',
   color: cssVar('textSecondaryColor'),
 });
+export const workspaceTypeIcon = style({
+  color: cssVar('iconSecondary'),
+});
 export const scrollbar = style({
   transform: 'translateX(8px)',
   width: '4px',

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx

@@ -8,6 +8,7 @@ import {
 } from '@affine/core/hooks/use-workspace-info';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { CloudWorkspaceIcon, LocalWorkspaceIcon } from '@blocksuite/icons';
 import type { DragEndEvent } from '@dnd-kit/core';
 import type { WorkspaceMetadata } from '@toeverything/infra';
 import { useLiveData, useService, WorkspaceManager } from '@toeverything/infra';
@@ -49,6 +50,11 @@ const CloudWorkSpaceList = ({
   return (
     <div className={styles.workspaceListWrapper}>
       <div className={styles.workspaceType}>
+        <CloudWorkspaceIcon
+          width={14}
+          height={14}
+          className={styles.workspaceTypeIcon}
+        />
         {t['com.affine.workspaceList.workspaceListType.cloud']()}
       </div>
       <WorkspaceList
@@ -81,6 +87,11 @@ const LocalWorkspaces = ({
   return (
     <div className={styles.workspaceListWrapper}>
       <div className={styles.workspaceType}>
+        <LocalWorkspaceIcon
+          width={14}
+          height={14}
+          className={styles.workspaceTypeIcon}
+        />
         {t['com.affine.workspaceList.workspaceListType.local']()}
       </div>
       <WorkspaceList

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx

@@ -1,7 +1,7 @@
+import { Tooltip } from '@affine/component';
 import { pushNotificationAtom } from '@affine/component/notification-center';
-import { Avatar } from '@affine/component/ui/avatar';
+import { Avatar, type AvatarProps } from '@affine/component/ui/avatar';
 import { Loading } from '@affine/component/ui/loading';
-import { Tooltip } from '@affine/component/ui/tooltip';
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { useDocEngineStatus } from '@affine/core/hooks/affine/use-doc-engine-status';
 import { useIsWorkspaceOwner } from '@affine/core/hooks/affine/use-is-workspace-owner';
@@ -24,21 +24,15 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useSystemOnline } from '../../../../hooks/use-system-online';
-import {
+import * as styles from './styles.css';
-  StyledSelectorContainer,
-  StyledSelectorWrapper,
-  StyledWorkspaceName,
-  StyledWorkspaceStatus,
-} from './styles';
 
 // FIXME:
-// 1. Remove mui style
 // 2. Refactor the code to improve readability
 const CloudWorkspaceStatus = () => {
   return (
     <>
       <CloudWorkspaceIcon />
-      AFFiNE Cloud
+      Cloud
     </>
   );
 };
@@ -196,21 +190,49 @@ const useSyncEngineSyncProgress = () => {
       ) : (
         <LocalWorkspaceStatus />
       ),
+    active:
+      currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD &&
+      (syncing || retrying || isOverCapacity),
   };
 };
 
-const WorkspaceStatus = () => {
+const WorkspaceInfo = ({ name }: { name: string }) => {
-  const { message, icon } = useSyncEngineSyncProgress();
+  const { message, icon, active } = useSyncEngineSyncProgress();
+  const currentWorkspace = useService(Workspace);
+  const isCloud = currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD;
+
+  // to make sure that animation will play first time
+  const [delayActive, setDelayActive] = useState(false);
+  useEffect(() => {
+    setDelayActive(active);
+  }, [active]);
 
   return (
-    <div style={{ display: 'flex' }}>
+    <div className={styles.workspaceInfoSlider} data-active={delayActive}>
-      <Tooltip content={message}>
+      <div className={styles.workspaceInfoSlide}>
-        <StyledWorkspaceStatus>{icon}</StyledWorkspaceStatus>
+        <div className={styles.workspaceInfo} data-type="normal">
-      </Tooltip>
+          <div className={styles.workspaceName} data-testid="workspace-name">
+            {name}
+          </div>
+          <div className={styles.workspaceStatus}>
+            {isCloud ? <CloudWorkspaceStatus /> : <LocalWorkspaceStatus />}
+          </div>
+        </div>
+
+        {/* when syncing/offline/... */}
+        <div className={styles.workspaceInfo} data-type="events">
+          <div className={styles.workspaceActiveStatus}>
+            <Tooltip content={message}>{icon}</Tooltip>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
 
+const avatarImageProps = {
+  style: { borderRadius: 3 },
+} satisfies AvatarProps['imageProps'];
 export const WorkspaceCard = forwardRef<
   HTMLDivElement,
   HTMLAttributes<HTMLDivElement>
@@ -227,7 +249,8 @@ export const WorkspaceCard = forwardRef<
   const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
 
   return (
-    <StyledSelectorContainer
+    <div
+      className={styles.container}
       role="button"
       tabIndex={0}
       data-testid="current-workspace"
@@ -236,19 +259,16 @@ export const WorkspaceCard = forwardRef<
       {...props}
     >
       <Avatar
+        imageProps={avatarImageProps}
+        fallbackProps={avatarImageProps}
         data-testid="workspace-avatar"
-        size={40}
+        size={32}
         url={avatarUrl}
         name={name}
         colorfulFallback
       />
-      <StyledSelectorWrapper>
+      <WorkspaceInfo name={name} />
-        <StyledWorkspaceName data-testid="workspace-name">
+    </div>
-          {name}
-        </StyledWorkspaceName>
-        <WorkspaceStatus />
-      </StyledSelectorWrapper>
-    </StyledSelectorContainer>
   );
 });
 

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/styles.css.ts

@@ -0,0 +1,99 @@
+import { cssVar } from '@toeverything/theme';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+const wsSlideAnim = {
+  ease: 'cubic-bezier(.45,.21,0,1)',
+  duration: '0.5s',
+  delay: '0.23s',
+};
+
+export const container = style({
+  height: '50px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  padding: '0 6px',
+  borderRadius: 4,
+  outline: 'none',
+  width: '100%',
+  maxWidth: 500,
+  color: cssVar('textPrimaryColor'),
+  ':hover': {
+    cursor: 'pointer',
+    background: cssVar('hoverColor'),
+  },
+});
+
+export const workspaceInfoSlider = style({
+  height: 42,
+  overflow: 'hidden',
+});
+export const workspaceInfoSlide = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  transform: 'translateY(0)',
+  transition: `transform ${wsSlideAnim.duration} ${wsSlideAnim.ease} ${wsSlideAnim.delay}`,
+  selectors: {
+    [`.${workspaceInfoSlider}[data-active="true"] &`]: {
+      transform: 'translateY(-42px)',
+    },
+  },
+});
+export const workspaceInfo = style({
+  width: '100%',
+  flexGrow: 1,
+  overflow: 'hidden',
+  height: 42,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  transition: `opacity ${wsSlideAnim.duration} ${wsSlideAnim.ease} ${wsSlideAnim.delay}`,
+
+  selectors: {
+    [`.${workspaceInfoSlider}[data-active="true"] &[data-type="normal"]`]: {
+      opacity: 0,
+    },
+    [`.${workspaceInfoSlider}[data-active="false"] &[data-type="events"]`]: {
+      opacity: 0,
+    },
+  },
+});
+
+export const workspaceName = style({
+  fontSize: cssVar('fontSm'),
+  lineHeight: '22px',
+  fontWeight: 500,
+  userSelect: 'none',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const workspaceStatus = style({
+  display: 'flex',
+  gap: 2,
+  alignItems: 'center',
+  fontSize: cssVar('fontXs'),
+  lineHeight: '20px',
+  fontWeight: 400,
+  color: cssVar('black50'),
+});
+globalStyle(`.${workspaceStatus} svg`, {
+  width: 16,
+  height: 16,
+  color: cssVar('iconSecondary'),
+});
+
+export const workspaceActiveStatus = style({
+  display: 'flex',
+  gap: 2,
+  alignItems: 'center',
+  fontSize: cssVar('fontSm'),
+  lineHeight: '22px',
+  color: cssVar('textSecondaryColor'),
+});
+globalStyle(`.${workspaceActiveStatus} svg`, {
+  width: 16,
+  height: 16,
+});

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/styles.ts

@@ -1,16 +1,18 @@
 import { displayFlex, styled, textEllipsis } from '@affine/component';
+import { cssVar } from '@toeverything/theme';
 export const StyledSelectorContainer = styled('div')({
-  height: '58px',
+  height: '50px',
   display: 'flex',
   alignItems: 'center',
   padding: '0 6px',
   borderRadius: '8px',
   outline: 'none',
-  width: '100%',
+  width: 'fit-content',
-  color: 'var(--affine-text-primary-color)',
+  maxWidth: '100%',
+  color: cssVar('textPrimaryColor'),
   ':hover': {
     cursor: 'pointer',
-    background: 'var(--affine-hover-color)',
+    background: cssVar('hoverColor'),
   },
 });
 
@@ -23,8 +25,9 @@ export const StyledSelectorWrapper = styled('div')(() => {
 });
 export const StyledWorkspaceName = styled('div')(() => {
   return {
-    lineHeight: '24px',
+    fontSize: cssVar('fontSm'),
-    fontWeight: 600,
+    lineHeight: '22px',
+    fontWeight: 500,
     userSelect: 'none',
     ...textEllipsis(1),
     marginLeft: '4px',
@@ -35,17 +38,16 @@ export const StyledWorkspaceStatus = styled('div')(() => {
   return {
     height: '22px',
     ...displayFlex('flex-start', 'center'),
-    fontSize: 'var(--affine-font-sm)',
+    fontSize: cssVar('fontXs'),
-    color: 'var(--affine-text-secondary-color)',
+    color: cssVar('black50'),
     userSelect: 'none',
     padding: '0 4px',
     gap: '4px',
     zIndex: '1',
     svg: {
-      color: 'var(--affine-icon-color)',
+      color: cssVar('iconSecondary'),
-      fontSize: 'var(--affine-font-base)',
       '&[data-warning-color="true"]': {
-        color: 'var(--affine-error-color)',
+        color: cssVar('errorColor'),
       },
     },
   };

packages/frontend/core/src/components/root-app-sidebar/index.css.ts

@@ -0,0 +1,19 @@
+import { style } from '@vanilla-extract/css';
+
+export const workspaceAndUserWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 8,
+});
+
+export const workspaceWrapper = style({
+  width: 0,
+  flex: 1,
+});
+
+export const userInfoWrapper = style({
+  flexShrink: 0,
+  width: 28,
+  height: 28,
+});

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -42,8 +42,10 @@ import { AddFavouriteButton } from '../pure/workspace-slider-bar/favorite/add-fa
 import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
 import { WorkspaceSelector } from '../workspace-selector';
 import ImportPage from './import-page';
+import { workspaceAndUserWrapper, workspaceWrapper } from './index.css';
 import { AppSidebarJournalButton } from './journal-button';
 import { UpdaterButton } from './updater-button';
+import { UserInfo } from './user-info';
 
 export type RootAppSidebarProps = {
   isPublicWorkspace: boolean;
@@ -179,7 +181,12 @@ export const RootAppSidebar = ({
         titles={deletePageTitles}
       />
       <SidebarContainer>
-        <WorkspaceSelector />
+        <div className={workspaceAndUserWrapper}>
+          <div className={workspaceWrapper}>
+            <WorkspaceSelector />
+          </div>
+          <UserInfo />
+        </div>
         <QuickSearchInput
           data-testid="slider-bar-quick-search-button"
           onClick={onOpenQuickSearchModal}

packages/frontend/core/src/components/root-app-sidebar/user-info.tsx

@@ -0,0 +1,130 @@
+import {
+  Avatar,
+  Button,
+  Divider,
+  Menu,
+  MenuIcon,
+  MenuItem,
+} from '@affine/component';
+import {
+  authAtom,
+  openDisableCloudAlertModalAtom,
+  openSettingModalAtom,
+  openSignOutModalAtom,
+} from '@affine/core/atoms';
+import {
+  useCurrentUser,
+  useSession,
+} from '@affine/core/hooks/affine/use-current-user';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { AccountIcon, SignOutIcon } from '@blocksuite/icons';
+import { cssVar } from '@toeverything/theme';
+import { useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+
+import * as styles from './index.css';
+
+export const UserInfo = () => {
+  const { status } = useSession();
+  const isAuthenticated = status === 'authenticated';
+  return isAuthenticated ? <AuthorizedUserInfo /> : <UnauthorizedUserInfo />;
+};
+
+const AuthorizedUserInfo = () => {
+  const user = useCurrentUser();
+  return (
+    <Menu items={<OperationMenu />}>
+      <Button
+        data-testid="sidebar-user-avatar"
+        type="plain"
+        className={styles.userInfoWrapper}
+      >
+        <Avatar size={20} name={user.name} url={user.avatarUrl} />
+      </Button>
+    </Menu>
+  );
+};
+
+const UnauthorizedUserInfo = () => {
+  const setDisableCloudOpen = useSetAtom(openDisableCloudAlertModalAtom);
+  const setOpen = useSetAtom(authAtom);
+
+  const openSignInModal = useCallback(() => {
+    if (!runtimeConfig.enableCloud) setDisableCloudOpen(true);
+    else setOpen(state => ({ ...state, openModal: true }));
+  }, [setDisableCloudOpen, setOpen]);
+
+  return (
+    <Button
+      onClick={openSignInModal}
+      data-testid="sidebar-user-avatar"
+      type="plain"
+      className={styles.userInfoWrapper}
+    >
+      <Avatar
+        style={{ color: cssVar('black') }}
+        size={20}
+        url={'/imgs/unknown-user.svg'}
+      />
+    </Button>
+  );
+};
+
+const AccountMenu = () => {
+  const setSettingModalAtom = useSetAtom(openSettingModalAtom);
+  const setOpenSignOutModalAtom = useSetAtom(openSignOutModalAtom);
+
+  const onOpenAccountSetting = useCallback(() => {
+    setSettingModalAtom(prev => ({
+      ...prev,
+      open: true,
+      activeTab: 'account',
+    }));
+  }, [setSettingModalAtom]);
+
+  const onOpenSignOutModal = useCallback(() => {
+    setOpenSignOutModalAtom(true);
+  }, [setOpenSignOutModalAtom]);
+
+  const t = useAFFiNEI18N();
+
+  return (
+    <>
+      <MenuItem
+        preFix={
+          <MenuIcon>
+            <AccountIcon />
+          </MenuIcon>
+        }
+        data-testid="workspace-modal-account-settings-option"
+        onClick={onOpenAccountSetting}
+      >
+        {t['com.affine.workspace.cloud.account.settings']()}
+      </MenuItem>
+      <Divider />
+      <MenuItem
+        preFix={
+          <MenuIcon>
+            <SignOutIcon />
+          </MenuIcon>
+        }
+        data-testid="workspace-modal-sign-out-option"
+        onClick={onOpenSignOutModal}
+      >
+        {t['com.affine.workspace.cloud.account.logout']()}
+      </MenuItem>
+    </>
+  );
+};
+
+const OperationMenu = () => {
+  // TODO: display usage progress bar
+  const StorageUsage = null;
+
+  return (
+    <>
+      {StorageUsage}
+      <AccountMenu />
+    </>
+  );
+};

packages/frontend/core/src/modules/navigation/view/navigation-buttons.css.ts

@@ -3,7 +3,7 @@ import { style } from '@vanilla-extract/css';
 export const container = style({
   display: 'flex',
   alignItems: 'center',
-  columnGap: '32px',
+  columnGap: '8px',
 });
 
 export const button = style({

tests/affine-cloud/e2e/login.spec.ts

@@ -11,6 +11,7 @@ import {
   clickSideBarAllPageButton,
   clickSideBarCurrentWorkspaceBanner,
   clickSideBarSettingButton,
+  clickSideBarUseAvatar,
 } from '@affine-test/kit/utils/sidebar';
 import { createLocalWorkspace } from '@affine-test/kit/utils/workspace';
 import { expect } from '@playwright/test';
@@ -69,14 +70,13 @@ test.describe('login first', () => {
     );
     await clickSideBarAllPageButton(page);
     const currentUrl = page.url();
-    await clickSideBarCurrentWorkspaceBanner(page);
+    await clickSideBarUseAvatar(page);
-    await page.getByTestId('workspace-modal-account-option').click();
     await page.getByTestId('workspace-modal-sign-out-option').click();
     await page.getByTestId('confirm-sign-out-button').click();
     await page.reload();
-    await clickSideBarCurrentWorkspaceBanner(page);
+    await clickSideBarUseAvatar(page);
-    const signInButton = page.getByTestId('cloud-signin-button');
+    const authModal = page.getByTestId('auth-modal');
-    await expect(signInButton).toBeVisible();
+    await expect(authModal).toBeVisible();
     expect(page.url()).toBe(currentUrl);
   });
 

tests/affine-local/e2e/image-preview.spec.ts

@@ -33,7 +33,8 @@ async function importImage(page: Page, url: string) {
     },
     [url]
   );
-  await page.waitForTimeout(500);
+  // TODO: wait for image to be loaded more reliably
+  await page.waitForTimeout(1000);
 }
 
 async function closeImagePreviewModal(page: Page) {
@@ -53,7 +54,7 @@ test('image preview should be shown', async ({ page }) => {
   await title.click();
   await page.keyboard.press('Enter');
   await importImage(page, 'http://localhost:8081/large-image.png');
-  await page.locator('img').first().dblclick();
+  await page.locator('affine-page-image').first().dblclick();
   const locator = page.getByTestId('image-preview-modal');
   await expect(locator).toBeVisible();
   await closeImagePreviewModal(page);
@@ -70,11 +71,12 @@ test('image go left and right', async ({ page }) => {
     await title.click();
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/large-image.png');
-    await page.locator('img').first().dblclick();
+    await page.locator('affine-page-image').first().dblclick();
     await page.waitForTimeout(500);
     blobId = (await page
+      .getByTestId('image-preview-modal')
       .locator('img')
-      .nth(1)
+      .first()
       .getAttribute('data-blob-id')) as string;
     expect(blobId).toBeTruthy();
     await closeImagePreviewModal(page);
@@ -87,11 +89,12 @@ test('image go left and right', async ({ page }) => {
   }
   const locator = page.getByTestId('image-preview-modal');
   await expect(locator).toBeHidden();
-  await page.locator('img').first().dblclick();
+  await page.locator('affine-page-image').first().dblclick();
   await page.waitForTimeout(1000);
   {
-    const newBlobId = (await locator
+    const newBlobId = (await page
-      .locator('img[data-blob-id]')
+      .getByTestId('image-preview-modal')
+      .locator('img')
       .first()
       .getAttribute('data-blob-id')) as string;
     expect(newBlobId).not.toBe(blobId);
@@ -99,8 +102,9 @@ test('image go left and right', async ({ page }) => {
   await page.keyboard.press('ArrowRight');
   await page.waitForTimeout(1000);
   {
-    const newBlobId = (await locator
+    const newBlobId = (await page
-      .locator('img[data-blob-id]')
+      .getByTestId('image-preview-modal')
+      .locator('img')
       .first()
       .getAttribute('data-blob-id')) as string;
     expect(newBlobId).toBe(blobId);
@@ -117,11 +121,12 @@ test('image able to zoom in and out with mouse scroll', async ({ page }) => {
     await title.click();
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/large-image.png');
-    await page.locator('img').first().dblclick();
+    await page.locator('affine-page-image').first().dblclick();
     await page.waitForTimeout(500);
     blobId = (await page
+      .getByTestId('image-preview-modal')
       .locator('img')
-      .nth(1)
+      .first()
       .getAttribute('data-blob-id')) as string;
     expect(blobId).toBeTruthy();
   }
@@ -170,11 +175,12 @@ test('image able to zoom in and out with button click', async ({ page }) => {
     await title.click();
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/large-image.png');
-    await page.locator('img').first().dblclick();
+    await page.locator('affine-page-image').first().dblclick();
     await page.waitForTimeout(500);
     blobId = (await page
+      .getByTestId('image-preview-modal')
       .locator('img')
-      .nth(1)
+      .first()
       .getAttribute('data-blob-id')) as string;
     expect(blobId).toBeTruthy();
   }
@@ -216,11 +222,12 @@ test('image should able to go left and right by buttons', async ({ page }) => {
     await title.click();
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/large-image.png');
-    await page.locator('img').first().dblclick();
+    await page.locator('affine-page-image').first().dblclick();
     await page.waitForTimeout(500);
     blobId = (await page
+      .getByTestId('image-preview-modal')
       .locator('img')
-      .nth(1)
+      .first()
       .getAttribute('data-blob-id')) as string;
     expect(blobId).toBeTruthy();
     await closeImagePreviewModal(page);
@@ -232,7 +239,7 @@ test('image should able to go left and right by buttons', async ({ page }) => {
     await importImage(page, 'http://localhost:8081/affine-preview.png');
   }
   const locator = page.getByTestId('image-preview-modal');
-  await page.locator('img').first().dblclick();
+  await page.locator('affine-page-image').first().dblclick();
   await expect(locator).toBeVisible();
   {
     const newBlobId = (await locator
@@ -268,11 +275,12 @@ test('image able to fit to screen by button', async ({ page }) => {
     await title.click();
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/large-image.png');
-    await page.locator('img').first().dblclick();
+    await page.locator('affine-page-image').first().dblclick();
     await page.waitForTimeout(500);
     blobId = (await page
+      .getByTestId('image-preview-modal')
       .locator('img')
-      .nth(1)
+      .first()
       .getAttribute('data-blob-id')) as string;
     expect(blobId).toBeTruthy();
   }
@@ -325,11 +333,12 @@ test('image able to reset zoom to 100%', async ({ page }) => {
     await title.click();
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/large-image.png');
-    await page.locator('img').first().dblclick();
+    await page.locator('affine-page-image').first().dblclick();
     await page.waitForTimeout(500);
     blobId = (await page
+      .getByTestId('image-preview-modal')
       .locator('img')
-      .nth(1)
+      .first()
       .getAttribute('data-blob-id')) as string;
     expect(blobId).toBeTruthy();
   }
@@ -378,11 +387,12 @@ test('image able to copy to clipboard', async ({ page }) => {
     await title.click();
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/large-image.png');
-    await page.locator('img').first().dblclick();
+    await page.locator('affine-page-image').first().dblclick();
     await page.waitForTimeout(500);
     blobId = (await page
+      .getByTestId('image-preview-modal')
       .locator('img')
-      .nth(1)
+      .first()
       .getAttribute('data-blob-id')) as string;
     expect(blobId).toBeTruthy();
   }
@@ -407,11 +417,12 @@ test('image able to download', async ({ page }) => {
     await title.click();
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/large-image.png');
-    await page.locator('img').first().dblclick();
+    await page.locator('affine-page-image').first().dblclick();
     await page.waitForTimeout(500);
     blobId = (await page
+      .getByTestId('image-preview-modal')
       .locator('img')
-      .nth(1)
+      .first()
       .getAttribute('data-blob-id')) as string;
     expect(blobId).toBeTruthy();
   }
@@ -437,11 +448,12 @@ test('image should only able to move when image is larger than viewport', async
     await title.click();
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/large-image.png');
-    await page.locator('img').first().dblclick();
+    await page.locator('affine-page-image').first().dblclick();
     await page.waitForTimeout(500);
     blobId = (await page
+      .getByTestId('image-preview-modal')
       .locator('img')
-      .nth(1)
+      .first()
       .getAttribute('data-blob-id')) as string;
     expect(blobId).toBeTruthy();
   }
@@ -494,11 +506,12 @@ test('image should able to delete and when delete, it will move to previous/next
     await title.click();
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/large-image.png');
-    await page.locator('img').first().dblclick();
+    await page.locator('affine-page-image').first().dblclick();
     await page.waitForTimeout(500);
     blobId = (await page
+      .getByTestId('image-preview-modal')
       .locator('img')
-      .nth(1)
+      .first()
       .getAttribute('data-blob-id')) as string;
     expect(blobId).toBeTruthy();
     await closeImagePreviewModal(page);
@@ -510,7 +523,7 @@ test('image should able to delete and when delete, it will move to previous/next
     await importImage(page, 'http://localhost:8081/affine-preview.png');
   }
   const locator = page.getByTestId('image-preview-modal');
-  await page.locator('img').first().dblclick();
+  await page.locator('affine-page-image').first().dblclick();
   await expect(locator).toBeVisible();
   // ensure the new image was imported
   await page.waitForTimeout(1000);
@@ -533,7 +546,7 @@ test('image should able to delete and when delete, it will move to previous/next
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/affine-preview.png');
   }
-  await page.locator('img').first().dblclick();
+  await page.locator('affine-page-image').first().dblclick();
   await locator.getByTestId('next-image-button').click();
   await page.waitForTimeout(1000);
   {
@@ -569,11 +582,12 @@ test('tooltips for all buttons should be visible when hovering', async ({
     await title.click();
     await page.keyboard.press('Enter');
     await importImage(page, 'http://localhost:8081/large-image.png');
-    await page.locator('img').first().dblclick();
+    await page.locator('affine-page-image').first().dblclick();
     await page.waitForTimeout(500);
     blobId = (await page
+      .getByTestId('image-preview-modal')
       .locator('img')
-      .nth(1)
+      .first()
       .getAttribute('data-blob-id')) as string;
     expect(blobId).toBeTruthy();
   }
@@ -662,7 +676,7 @@ test('keypress esc should close the modal', async ({ page }) => {
   await title.click();
   await page.keyboard.press('Enter');
   await importImage(page, 'http://localhost:8081/large-image.png');
-  await page.locator('img').first().dblclick();
+  await page.locator('affine-page-image').first().dblclick();
   const locator = page.getByTestId('image-preview-modal');
   await expect(locator).toBeVisible();
   await page.keyboard.press('Escape');
@@ -680,7 +694,7 @@ test('when mouse moves outside, the modal should be closed', async ({
   await title.click();
   await page.keyboard.press('Enter');
   await importImage(page, 'http://localhost:8081/large-image.png');
-  await page.locator('img').first().dblclick();
+  await page.locator('affine-page-image').first().dblclick();
   const locator = page.getByTestId('image-preview-modal');
   await expect(locator).toBeVisible();
   // animation delay
@@ -701,14 +715,14 @@ test('caption should be visible and different styles were applied if image zoome
   await title.click();
   await page.keyboard.press('Enter');
   await importImage(page, 'http://localhost:8081/large-image.png');
-  await page.locator('img').first().hover();
+  await page.locator('affine-page-image').first().hover();
   await page
     .locator('.embed-editing-state')
     .locator('icon-button')
     .nth(1)
     .click();
   await page.getByPlaceholder('Write a caption').fill(sampleCaption);
-  await page.locator('img').first().dblclick();
+  await page.locator('affine-page-image').first().dblclick();
   const locator = page.getByTestId('image-preview-modal');
   await expect(locator).toBeVisible();
   await page.waitForTimeout(1000);

tests/kit/utils/sidebar.ts

@@ -12,6 +12,10 @@ export async function clickSideBarCurrentWorkspaceBanner(page: Page) {
   return page.getByTestId('current-workspace').click();
 }
 
+export async function clickSideBarUseAvatar(page: Page) {
+  return page.getByTestId('sidebar-user-avatar').click();
+}
+
 export async function clickNewPageButton(page: Page) {
   return page.getByTestId('sidebar-new-page-button').click();
 }