fix(core): optimize sidebar workspace card and avatar (#6324)

- adjust avatar size
- unlogged avatar dark-mode
- fix Tooltip console error
- optimize syncing status animation

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

@@ -192,19 +192,32 @@ const useSyncEngineSyncProgress = () => {
       ),
     active:
       currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD &&
-      (syncing || retrying || isOverCapacity),
+      ((syncing && progress !== undefined) || isOverCapacity || !isOnline),
   };
 };
 
 const WorkspaceInfo = ({ name }: { name: string }) => {
-  const { message, icon, active } = useSyncEngineSyncProgress();
+  const { message, active } = useSyncEngineSyncProgress();
   const currentWorkspace = useService(Workspace);
   const isCloud = currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD;
+  const { progress } = useDocEngineStatus();
 
   // to make sure that animation will play first time
   const [delayActive, setDelayActive] = useState(false);
   useEffect(() => {
-    setDelayActive(active);
+    const delayOpen = 300;
+    const delayClose = 200;
+    let timer: ReturnType<typeof setTimeout>;
+    if (active) {
+      timer = setTimeout(() => {
+        setDelayActive(active);
+      }, delayOpen);
+    } else {
+      timer = setTimeout(() => {
+        setDelayActive(active);
+      }, delayClose);
+    }
+    return () => clearTimeout(timer);
   }, [active]);
 
   return (
@@ -221,9 +234,11 @@ const WorkspaceInfo = ({ name }: { name: string }) => {
 
         {/* when syncing/offline/... */}
         <div className={styles.workspaceInfo} data-type="events">
-          <div className={styles.workspaceActiveStatus}>
-            <Tooltip content={message}>{icon}</Tooltip>
-          </div>
+          <Tooltip content={message}>
+            <div className={styles.workspaceActiveStatus}>
+              <SyncingWorkspaceStatus progress={progress} />
+            </div>
+          </Tooltip>
         </div>
       </div>
     </div>

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

@@ -4,7 +4,7 @@ import { globalStyle, style } from '@vanilla-extract/css';
 const wsSlideAnim = {
   ease: 'cubic-bezier(.45,.21,0,1)',
   duration: '0.5s',
-  delay: '0.23s',
+  delay: '0s',
 };
 
 export const container = style({

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

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const workspaceAndUserWrapper = style({
   display: 'flex',
@@ -14,6 +14,12 @@ export const workspaceWrapper = style({
 
 export const userInfoWrapper = style({
   flexShrink: 0,
-  width: 28,
-  height: 28,
+  width: 'auto',
+  height: 'auto',
+  padding: '4px 0',
+});
+
+// TODO:
+globalStyle(`button.${userInfoWrapper} > span`, {
+  lineHeight: 0,
 });

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

@@ -0,0 +1,25 @@
+import { memo } from 'react';
+
+export const UnknownUserIcon = memo(
+  ({ width = 20, height = 20 }: { width?: number; height?: number }) => {
+    const svgRaw = `<svg width="${width}" height="${height}" 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>`;
+
+    return <div dangerouslySetInnerHTML={{ __html: svgRaw }} />;
+  }
+);
+UnknownUserIcon.displayName = 'UnknownUserIcon';

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

@@ -18,11 +18,11 @@ import {
 } 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';
+import { UnknownUserIcon } from './unknow-user';
 
 export const UserInfo = () => {
   const { status } = useSession();
@@ -39,7 +39,7 @@ const AuthorizedUserInfo = () => {
         type="plain"
         className={styles.userInfoWrapper}
       >
-        <Avatar size={20} name={user.name} url={user.avatarUrl} />
+        <Avatar size={24} name={user.name} url={user.avatarUrl} />
       </Button>
     </Menu>
   );
@@ -61,11 +61,7 @@ const UnauthorizedUserInfo = () => {
       type="plain"
       className={styles.userInfoWrapper}
     >
-      <Avatar
-        style={{ color: cssVar('black') }}
-        size={20}
-        url={'/imgs/unknown-user.svg'}
-      />
+      <UnknownUserIcon width={24} height={24} />
     </Button>
   );
 };