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)
2026-02-12 04:18:54 +00:00 · 2024-03-26 06:10:38 +00:00
parent d8a3cd5ce2
commit 0731872347
20 changed files with 528 additions and 372 deletions
--- a/packages/frontend/component/src/components/card/workspace-card/index.tsx
+++ b/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 { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { WorkspaceFlavour } from '@affine/env/workspace';
 import { CollaborationIcon, SettingsIcon } from '@blocksuite/icons';
 import type { WorkspaceMetadata } from '@toeverything/infra';
 import { useCallback } from 'react';

-import { Avatar } from '../../../ui/avatar';
-import { Divider } from '../../../ui/divider';
+import { Avatar, type AvatarProps } from '../../../ui/avatar';
 import { Skeleton } from '../../../ui/skeleton';
-import { Tooltip } from '../../../ui/tooltip';
-import {
-  StyledCard,
-  StyledIconContainer,
-  StyledSettingLink,
-  StyledWorkspaceInfo,
-  StyledWorkspaceTitle,
-  StyledWorkspaceTitleArea,
-  StyledWorkspaceType,
-  StyledWorkspaceTypeEllipse,
-  StyledWorkspaceTypeText,
-} from './styles';
+import * as styles from './styles.css';

 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 />
-      <StyledWorkspaceInfo>
-        <StyledWorkspaceTitleArea style={{ display: 'flex' }}>
-          <StyledWorkspaceTitle>{displayName}</StyledWorkspaceTitle>
+      <Avatar
+        imageProps={avatarImageProps}
+        fallbackProps={avatarImageProps}
+        size={28}
+        url={avatar}
+        name={name}
+        colorfulFallback
+      />
+      <div className={styles.workspaceInfo}>
+        <div className={styles.workspaceTitle}>{displayName}</div>

-          <StyledSettingLink
-            size="small"
-            className="setting-entry"
+        <div className={styles.actionButtons}>
+          {isOwner ? null : <CollaborationIcon />}
+          <div
+            className={styles.settingButton}
            onClick={e => {
              e.stopPropagation();
              onSettingClick(meta);
            }}
-            withoutHoverStyle={true}
          >
-            <SettingsIcon />
-          </StyledSettingLink>
-        </StyledWorkspaceTitleArea>
-        <WorkspaceType isOwner={isOwner} flavour={meta.flavour} />
-      </StyledWorkspaceInfo>
-    </StyledCard>
+            <SettingsIcon width={16} height={16} />
+          </div>
+        </div>
+      </div>
+    </div>
  );
 };
--- a/packages/frontend/component/src/components/card/workspace-card/styles.css.ts
+++ b/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'),
+    // },
+  },
+});
--- a/packages/frontend/component/src/components/card/workspace-card/styles.ts
+++ b/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)',
-  };
-});
--- a/packages/frontend/component/src/ui/avatar/style.css.ts
+++ b/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',
--- a/packages/frontend/core/public/imgs/unknown-user.svg
+++ b/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>
+  
--- a/packages/frontend/core/src/components/app-sidebar/fallback.css.ts
+++ b/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',
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx
+++ b/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);
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.tsx
+++ b/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
-        items={<AccountMenu onEventEnd={onEventEnd} />}
-        contentOptions={{
-          side: 'right',
-          sideOffset: 12,
-        }}
-      >
-        <IconButton
-          data-testid="workspace-modal-account-option"
-          icon={<MoreHorizontalIcon />}
-          type="plain"
-        />
-      </Menu>
+      <UserPlanButton />
    </div>
  );
 };
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.css.ts
+++ b/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',
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx
+++ b/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
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
+++ b/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 {
-  StyledSelectorContainer,
-  StyledSelectorWrapper,
-  StyledWorkspaceName,
-  StyledWorkspaceStatus,
-} from './styles';
+import * as styles from './styles.css';

 // 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 { message, icon } = useSyncEngineSyncProgress();
+const WorkspaceInfo = ({ name }: { name: string }) => {
+  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' }}>
-      <Tooltip content={message}>
-        <StyledWorkspaceStatus>{icon}</StyledWorkspaceStatus>
-      </Tooltip>
+    <div className={styles.workspaceInfoSlider} data-active={delayActive}>
+      <div className={styles.workspaceInfoSlide}>
+        <div className={styles.workspaceInfo} data-type="normal">
+          <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>
-        <StyledWorkspaceName data-testid="workspace-name">
-          {name}
-        </StyledWorkspaceName>
-        <WorkspaceStatus />
-      </StyledSelectorWrapper>
-    </StyledSelectorContainer>
+      <WorkspaceInfo name={name} />
+    </div>
  );
 });

--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/styles.css.ts
+++ b/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,
+});
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/styles.ts
+++ b/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%',
-  color: 'var(--affine-text-primary-color)',
+  width: 'fit-content',
+  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',
-    fontWeight: 600,
+    fontSize: cssVar('fontSm'),
+    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)',
-    color: 'var(--affine-text-secondary-color)',
+    fontSize: cssVar('fontXs'),
+    color: cssVar('black50'),
    userSelect: 'none',
    padding: '0 4px',
    gap: '4px',
    zIndex: '1',
    svg: {
-      color: 'var(--affine-icon-color)',
-      fontSize: 'var(--affine-font-base)',
+      color: cssVar('iconSecondary'),
      '&[data-warning-color="true"]': {
-        color: 'var(--affine-error-color)',
+        color: cssVar('errorColor'),
      },
    },
  };
--- a/packages/frontend/core/src/components/root-app-sidebar/index.css.ts
+++ b/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,
+});
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/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}
--- a/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx
+++ b/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 />
+    </>
+  );
+};
--- a/packages/frontend/core/src/modules/navigation/view/navigation-buttons.css.ts
+++ b/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({