feat(core): support sidebar collapse (#7630)

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

@@ -20,5 +20,18 @@ export const root = style({
 });
 export const label = style({
   color: cssVar('black30'),
-  flex: '1',
+  flexGrow: '0',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'start',
+  cursor: 'pointer',
+});
+
+export const collapseButton = style({
+  selectors: {
+    [`${label} > &`]: {
+      color: cssVar('black30'),
+      transform: 'translateY(1px)',
+    },
+  },
 });

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

@@ -1,3 +1,5 @@
+import { IconButton } from '@affine/component';
+import { ToggleCollapseIcon, ToggleExpandIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import { type ForwardedRef, forwardRef, type PropsWithChildren } from 'react';
 
@@ -7,6 +9,8 @@ export type CategoryDividerProps = PropsWithChildren<
   {
     label: string;
     className?: string;
+    collapsed?: boolean;
+    setCollapsed?: (collapsed: boolean) => void;
   } & {
     [key: `data-${string}`]: unknown;
   }
@@ -14,12 +18,35 @@ export type CategoryDividerProps = PropsWithChildren<
 
 export const CategoryDivider = forwardRef(
   (
-    { label, children, className, ...otherProps }: CategoryDividerProps,
+    {
+      label,
+      children,
+      className,
+      collapsed,
+      setCollapsed,
+      ...otherProps
+    }: CategoryDividerProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
     return (
       <div className={clsx([styles.root, className])} ref={ref} {...otherProps}>
-        <div className={styles.label}>{label}</div>
+        <div
+          className={styles.label}
+          onClick={() => setCollapsed?.(!collapsed)}
+        >
+          {label}
+          {collapsed !== undefined && (
+            <IconButton
+              withoutHoverStyle
+              className={styles.collapseButton}
+              size="small"
+              data-testid="category-divider-collapse-button"
+            >
+              {collapsed ? <ToggleCollapseIcon /> : <ToggleExpandIcon />}
+            </IconButton>
+          )}
+        </div>
+        <div style={{ flex: 1 }}></div>
         {children}
       </div>
     );

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

@@ -166,9 +166,11 @@ export const RootAppSidebar = memo(
           {runtimeConfig.enableNewFavorite && <ExplorerFavorites />}
           {runtimeConfig.enableOrganize && <ExplorerOrganize />}
           {runtimeConfig.enableNewFavorite && <ExplorerMigrationFavorites />}
-          {runtimeConfig.enableOldFavorite && <ExplorerOldFavorites />}
-          <ExplorerCollections />
-          <ExplorerTags />
+          {runtimeConfig.enableOldFavorite && (
+            <ExplorerOldFavorites defaultCollapsed />
+          )}
+          <ExplorerCollections defaultCollapsed />
+          <ExplorerTags defaultCollapsed />
           <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
           {/* fixme: remove the following spacer */}
           <div style={{ height: '4px' }} />