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-13 12:55:00 +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/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({