fix: optimize app updater (#2452)

apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx

@@ -1,6 +1,7 @@
 import { MenuLinkItem } from '@affine/component/app-sidebar';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import type { PageMeta, Workspace } from '@blocksuite/store';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useBlockSuitePageReferences } from '@toeverything/hooks/use-block-suite-page-references';
 import { useAtomValue } from 'jotai';
@@ -35,11 +36,14 @@ function FavoriteMenuItem({
   }, [references, parentIds]);
   const [collapsed, setCollapsed] = useState(true);
   const collapsible = referencesToShow.length > 0;
-  const showReferences = collapsible ? !collapsed : referencesToShow.length > 0;
   const nestedItem = parentIds.size > 0;
   const untitled = !metaMapping[pageId]?.title;
   return (
-    <div className={styles.favItemWrapper} data-nested={nestedItem}>
+    <Collapsible.Root
+      className={styles.favItemWrapper}
+      data-nested={nestedItem}
+      open={!collapsed}
+    >
       <MenuLinkItem
         data-type="favorite-list-item"
         data-testid={`favorite-list-item-${pageId}`}
@@ -53,19 +57,22 @@ function FavoriteMenuItem({
           {metaMapping[pageId]?.title || 'Untitled'}
         </span>
       </MenuLinkItem>
-      {showReferences &&
-        referencesToShow.map(ref => {
-          return (
-            <FavoriteMenuItem
-              key={ref}
-              workspace={workspace}
-              pageId={ref}
-              metaMapping={metaMapping}
-              parentIds={new Set([...parentIds, pageId])}
-            />
-          );
-        })}
-    </div>
+      {collapsible && (
+        <Collapsible.Content className={styles.collapsibleContent}>
+          {referencesToShow.map(ref => {
+            return (
+              <FavoriteMenuItem
+                key={ref}
+                workspace={workspace}
+                pageId={ref}
+                metaMapping={metaMapping}
+                parentIds={new Set([...parentIds, pageId])}
+              />
+            );
+          })}
+        </Collapsible.Content>
+      )}
+    </Collapsible.Root>
   );
 }
 

apps/web/src/components/pure/workspace-slider-bar/favorite/styles.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 
 export const label = style({
   selectors: {
@@ -19,3 +19,33 @@ export const favItemWrapper = style({
     },
   },
 });
+
+const slideDown = keyframes({
+  '0%': {
+    height: '0px',
+  },
+  '100%': {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+});
+
+const slideUp = keyframes({
+  '0%': {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+  '100%': {
+    height: '0px',
+  },
+});
+
+export const collapsibleContent = style({
+  overflow: 'hidden',
+  selectors: {
+    '&[data-state="open"]': {
+      animation: `${slideDown} 0.2s ease-out`,
+    },
+    '&[data-state="closed"]': {
+      animation: `${slideUp} 0.2s ease-out`,
+    },
+  },
+});

packages/component/package.json

@@ -36,6 +36,7 @@
     "@mui/material": "^5.13.1",
     "@popperjs/core": "^2.11.7",
     "@radix-ui/react-avatar": "^1.0.2",
+    "@radix-ui/react-collapsible": "^1.0.2",
     "@toeverything/hooks": "workspace:*",
     "@toeverything/theme": "^0.5.8",
     "@vanilla-extract/dynamic": "^2.0.3",

packages/component/src/components/app-sidebar/app-updater-button/index.css.ts

@@ -159,28 +159,32 @@ export const particles = style({
   backgroundRepeat: 'no-repeat, repeat',
   backgroundPosition: 'center, center top 100%',
   backgroundSize: '100%, 130%',
-  WebkitMaskImage:
-    'linear-gradient(to top, transparent, black, black, transparent)',
+  maskImage: 'linear-gradient(to top, transparent, black, black, transparent)',
   width: '100%',
   height: '100%',
   position: 'absolute',
   left: 0,
   pointerEvents: 'none',
-});
-
-export const particlesBefore = style({
-  content: '""',
-  display: 'block',
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  background: `var(--svg-dot-animation), var(--svg-dot-animation), var(--svg-dot-animation)`,
-  backgroundRepeat: 'no-repeat, repeat, repeat',
-  backgroundPosition: 'center, center top 100%, center center',
-  backgroundSize: '100% 120%, 150%, 120%',
-  filter: 'blur(1px)',
-  willChange: 'filter',
-  pointerEvents: 'none',
+  display: 'none',
+  selectors: {
+    [`${root}:hover &`]: {
+      display: 'block',
+    },
+    '&:before': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      background: `var(--svg-dot-animation), var(--svg-dot-animation), var(--svg-dot-animation)`,
+      backgroundRepeat: 'no-repeat, repeat, repeat',
+      backgroundPosition: 'center, center top 100%, center center',
+      backgroundSize: '100% 120%, 150%, 120%',
+      filter: 'blur(1px)',
+      willChange: 'filter',
+      pointerEvents: 'none',
+    },
+  },
 });
 
 export const halo = style({

packages/component/src/components/app-sidebar/app-updater-button/index.tsx

@@ -85,6 +85,7 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
           }
         } else if (currentChangelogUnread) {
           window.open(config.changelogUrl, '_blank');
+          onDismissCurrentChangelog();
         } else {
           throw new Unreachable();
         }

yarn.lock

@@ -67,6 +67,7 @@ __metadata:
     "@mui/material": ^5.13.1
     "@popperjs/core": ^2.11.7
     "@radix-ui/react-avatar": ^1.0.2
+    "@radix-ui/react-collapsible": ^1.0.2
     "@storybook/addon-actions": ^7.0.12
     "@storybook/addon-coverage": ^0.0.8
     "@storybook/addon-essentials": ^7.0.12
@@ -6417,6 +6418,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-collapsible@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-collapsible@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.0
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-context": 1.0.0
+    "@radix-ui/react-id": 1.0.0
+    "@radix-ui/react-presence": 1.0.0
+    "@radix-ui/react-primitive": 1.0.2
+    "@radix-ui/react-use-controllable-state": 1.0.0
+    "@radix-ui/react-use-layout-effect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: a0fcfd3aad5159e1fb6fc54fd09210d7de9c1ee1e19739a5a82af81d3f2233e4e5eb204da326f32e2f2a4740aa4c3b42530b61e36b7ced9f857801809d1d3527
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-compose-refs@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-compose-refs@npm:1.0.0"