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 12:28:42 +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',