feat(core): adjust notification style (#11455)

packages/frontend/core/src/components/notification/list.style.css.ts

@@ -3,7 +3,7 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { keyframes, style } from '@vanilla-extract/css';
 
 export const containerScrollViewport = style({
-  maxHeight: '272px',
+  maxHeight: '448px',
   width: '360px',
 });
 

packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.css.ts

@@ -1,6 +1,8 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 export const sidebarSwitchClip = style({
+  position: 'relative',
   flexShrink: 0,
   overflow: 'hidden',
   transition:
@@ -14,5 +16,34 @@ export const sidebarSwitchClip = style({
       opacity: 0,
       maxWidth: 0,
     },
+    '&[data-notification=true]:after': {
+      transform: 'scale(1)',
+    },
+  },
+  ':after': {
+    content: '""',
+    position: 'absolute',
+    left: '19.75px',
+    top: '6.25px',
+    zIndex: 2,
+    width: '6px',
+    height: '6px',
+    borderRadius: '50%',
+    transform: 'scale(0)',
+    transition: 'transform 0.3s ease',
+    backgroundColor: cssVarV2('button/primary'),
+  },
+});
+
+export const switchIcon = style({
+  transition: 'clip-path 0.3s ease',
+  clipPath:
+    'path(evenodd, "M 0 0 L 24 0 L 24 24 L 0 24 L 0 0 M19 4.25C19 4.38807 19.1119 4.5 19.25 4.5C19.3881 4.5 19.5 4.38807 19.5 4.25C19.5 4.11193 19.3881 4 19.25 4C19.1119 4 19 4.11193 19 4.25Z")',
+
+  selectors: {
+    '&[data-notification=true]': {
+      clipPath:
+        'path(evenodd, "M 0 0 L 24 0 L 24 24 L 0 24 L 0 0 M23 5.25C23 7.59721 21.0972 9.5 18.75 9.5C16.4028 9.5 14.5 7.59721 14.5 5.25C14.5 2.90279 16.4028 1 18.75 1C21.0972 1 23 2.90279 23 5.25Z")',
+    },
   },
 });

packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx

@@ -1,7 +1,9 @@
 import { IconButton } from '@affine/component';
+import { NotificationCountService } from '@affine/core/modules/notification';
 import { track } from '@affine/track';
 import { SidebarIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
+import clsx from 'clsx';
 import { useCallback, useRef } from 'react';
 
 import { AppSidebarService } from '../../services/app-sidebar';
@@ -14,6 +16,11 @@ export const SidebarSwitch = ({
   show: boolean;
   className?: string;
 }) => {
+  const notificationCountService = useService(NotificationCountService);
+  const hasNotification = useLiveData(
+    notificationCountService.count$.selector(count => count > 0)
+  );
+
   const appSidebarService = useService(AppSidebarService).sidebar;
   const open = useLiveData(appSidebarService.open$);
   const preventHovering = useLiveData(appSidebarService.preventHovering$);
@@ -44,6 +51,8 @@ export const SidebarSwitch = ({
     appSidebarService.toggleSidebar();
   }, [appSidebarService, open]);
 
+  const showNotificationDot = hasNotification && !open;
+
   return (
     <div
       ref={switchRef}
@@ -51,6 +60,7 @@ export const SidebarSwitch = ({
       className={styles.sidebarSwitchClip}
       data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
       onMouseEnter={handleMouseEnter}
+      data-notification={showNotificationDot}
     >
       <IconButton
         className={className}
@@ -60,7 +70,10 @@ export const SidebarSwitch = ({
         }}
         onClick={handleClickSwitch}
       >
-        <SidebarIcon />
+        <SidebarIcon
+          className={clsx(styles.switchIcon)}
+          data-notification={showNotificationDot}
+        />
       </IconButton>
     </div>
   );