feat(core): adjust explorer section style, persist collapsable state (#7679)

close AF-1124,AF-1129,AF-1134,AF-1144

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

@@ -1,25 +1,37 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
+export const actions = style({
+  display: 'flex',
+  gap: 8,
+});
 export const root = style({
   fontSize: cssVar('fontXs'),
-  minHeight: '16px',
-  width: 'calc(100% + 6px)',
+  height: 20,
+  width: 'calc(100%)',
   userSelect: 'none',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  marginBottom: '4px',
   padding: '0 8px',
-  gap: '8px',
+  borderRadius: 4,
   selectors: {
-    '&:not(:first-of-type)': {
-      marginTop: '16px',
+    [`&[data-collapsible="true"]`]: {
+      cursor: 'pointer',
+    },
+    [`&[data-collapsible="true"]:hover`]: {
+      backgroundColor: cssVarV2('layer/background/hoverOverlay'),
+    },
+    [`&[data-collapsible="true"]:hover:has(${actions}:hover)`]: {
+      backgroundColor: 'transparent',
     },
   },
 });
 export const label = style({
-  color: cssVar('black30'),
+  color: cssVarV2('text/tertiary'),
+  fontWeight: 500,
+  lineHeight: '20px',
   flexGrow: '0',
   display: 'flex',
   alignItems: 'center',
@@ -30,8 +42,17 @@ export const label = style({
 export const collapseButton = style({
   selectors: {
     [`${label} > &`]: {
-      color: cssVar('black30'),
+      color: cssVarV2('icon/tertiary'),
       transform: 'translateY(1px)',
     },
   },
 });
+export const collapseIcon = style({
+  transform: 'rotate(90deg)',
+  transition: 'transform 0.2s',
+  selectors: {
+    [`${root}[data-collapsed="true"] &`]: {
+      transform: 'rotate(0deg)',
+    },
+  },
+});

packages/frontend/core/src/components/app-sidebar/category-divider/index.tsx

@@ -1,5 +1,5 @@
 import { IconButton } from '@affine/component';
-import { ToggleCollapseIcon, ToggleExpandIcon } from '@blocksuite/icons/rc';
+import { ToggleCollapseIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import { type ForwardedRef, forwardRef, type PropsWithChildren } from 'react';
 
@@ -28,26 +28,33 @@ export const CategoryDivider = forwardRef(
     }: CategoryDividerProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
+    const collapsible = collapsed !== undefined;
+
     return (
-      <div className={clsx([styles.root, className])} ref={ref} {...otherProps}>
-        <div
-          className={styles.label}
-          onClick={() => setCollapsed?.(!collapsed)}
-        >
+      <div
+        className={clsx([styles.root, className])}
+        ref={ref}
+        onClick={() => setCollapsed?.(!collapsed)}
+        data-collapsed={collapsed}
+        data-collapsible={collapsible}
+        {...otherProps}
+      >
+        <div className={styles.label}>
           {label}
-          {collapsed !== undefined && (
+          {collapsible ? (
             <IconButton
               withoutHoverStyle
               className={styles.collapseButton}
               size="small"
               data-testid="category-divider-collapse-button"
             >
-              {collapsed ? <ToggleCollapseIcon /> : <ToggleExpandIcon />}
+              <ToggleCollapseIcon className={styles.collapseIcon} />
             </IconButton>
-          )}
+          ) : null}
+        </div>
+        <div className={styles.actions} onClick={e => e.stopPropagation()}>
+          {children}
         </div>
-        <div style={{ flex: 1 }}></div>
-        {children}
       </div>
     );
   }

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

@@ -39,7 +39,10 @@ export const scrollableContainer = style([
   baseContainer,
   {
     height: '100%',
-    padding: '4px 8px',
+    padding: '0px 8px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
   },
 ]);
 export const scrollbar = style({

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

@@ -188,14 +188,10 @@ export const RootAppSidebar = (): ReactElement => {
         {runtimeConfig.enableNewFavorite && <ExplorerFavorites />}
         {runtimeConfig.enableOrganize && <ExplorerOrganize />}
         {runtimeConfig.enableNewFavorite && <ExplorerMigrationFavorites />}
-        {runtimeConfig.enableOldFavorite && (
-          <ExplorerOldFavorites defaultCollapsed />
-        )}
-        <ExplorerCollections defaultCollapsed />
-        <ExplorerTags defaultCollapsed />
+        {runtimeConfig.enableOldFavorite && <ExplorerOldFavorites />}
+        <ExplorerCollections />
+        <ExplorerTags />
         <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
-        {/* fixme: remove the following spacer */}
-        <div style={{ height: '4px' }} />
         <div style={{ padding: '0 8px' }}>
           <TrashButton />
           <ImportPage docCollection={docCollection} />