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 />}
+          {runtimeConfig.enableOldFavorite && (
-          <ExplorerCollections />
+            <ExplorerOldFavorites defaultCollapsed />
-          <ExplorerTags />
+          )}
+          <ExplorerCollections defaultCollapsed />
+          <ExplorerTags defaultCollapsed />
           <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
           {/* fixme: remove the following spacer */}
           <div style={{ height: '4px' }} />

packages/frontend/core/src/modules/explorer/views/sections/collections/index.tsx

@@ -7,20 +7,26 @@ import { ExplorerTreeRoot } from '@affine/core/modules/explorer/views/tree';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { useLiveData, useServices } from '@toeverything/infra';
 import { nanoid } from 'nanoid';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { ExplorerCollectionNode } from '../../nodes/collection';
 import { RootEmpty } from './empty';
 import * as styles from './styles.css';
 
-export const ExplorerCollections = () => {
+export const ExplorerCollections = ({
+  defaultCollapsed = false,
+}: {
+  defaultCollapsed?: boolean;
+}) => {
   const t = useI18n();
   const { collectionService, workbenchService } = useServices({
     CollectionService,
     WorkbenchService,
   });
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
   const collections = useLiveData(collectionService.collections$);
   const { node, open: openCreateCollectionModel } = useEditCollectionName({
     title: t['com.affine.editCollection.createCollection'](),
@@ -33,6 +39,7 @@ export const ExplorerCollections = () => {
         const id = nanoid();
         collectionService.addCollection(createEmptyCollection(id, { name }));
         workbenchService.workbench.openCollection(id);
+        setCollapsed(false);
       })
       .catch(err => {
         console.error(err);
@@ -41,8 +48,16 @@ export const ExplorerCollections = () => {
 
   return (
     <>
-      <div className={styles.container} data-testid="explorer-collections">
+      <Collapsible.Root
-        <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
+        className={styles.container}
+        data-testid="explorer-collections"
+        open={!collapsed}
+      >
+        <CategoryDivider
+          label={t['com.affine.rootAppSidebar.collections']()}
+          setCollapsed={setCollapsed}
+          collapsed={collapsed}
+        >
           <IconButton
             data-testid="explorer-bar-add-collection-button"
             onClick={handleCreateCollection}
@@ -51,6 +66,7 @@ export const ExplorerCollections = () => {
             <PlusIcon />
           </IconButton>
         </CategoryDivider>
+        <Collapsible.Content>
           <ExplorerTreeRoot
             placeholder={<RootEmpty onClickCreate={handleCreateCollection} />}
           >
@@ -65,7 +81,8 @@ export const ExplorerCollections = () => {
               />
             ))}
           </ExplorerTreeRoot>
-      </div>
+        </Collapsible.Content>
+      </Collapsible.Root>
       {node}
     </>
   );

packages/frontend/core/src/modules/explorer/views/sections/collections/styles.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
 
 export const container = style({
-  marginTop: '16px',
+  marginTop: '8px',
 });

packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx

@@ -19,8 +19,9 @@ import { WorkbenchService } from '@affine/core/modules/workbench';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { DocsService, useLiveData, useServices } from '@toeverything/infra';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { ExplorerCollectionNode } from '../../nodes/collection';
 import { ExplorerDocNode } from '../../nodes/doc';
@@ -29,12 +30,17 @@ import { ExplorerTagNode } from '../../nodes/tag';
 import { RootEmpty } from './empty';
 import * as styles from './styles.css';
 
-export const ExplorerFavorites = () => {
+export const ExplorerFavorites = ({
+  defaultCollapsed = false,
+}: {
+  defaultCollapsed?: boolean;
+}) => {
   const { favoriteService, docsService, workbenchService } = useServices({
     FavoriteService,
     DocsService,
     WorkbenchService,
   });
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
 
   const favorites = useLiveData(favoriteService.favoriteList.sortedList$);
 
@@ -51,6 +57,7 @@ export const ExplorerFavorites = () => {
           data.source.data.entity.id,
           favoriteService.favoriteList.indexAt('before')
         );
+        setCollapsed(false);
       }
     },
     [favoriteService]
@@ -83,6 +90,7 @@ export const ExplorerFavorites = () => {
       favoriteService.favoriteList.indexAt('before')
     );
     workbenchService.workbench.openDoc(newDoc.id);
+    setCollapsed(false);
   }, [docsService, favoriteService, workbenchService]);
 
   const handleOnChildrenDrop = useCallback(
@@ -179,12 +187,18 @@ export const ExplorerFavorites = () => {
     );
 
   return (
-    <div className={styles.container} data-testid="explorer-favorites">
+    <Collapsible.Root
+      className={styles.container}
+      data-testid="explorer-favorites"
+      open={!collapsed}
+    >
       <CategoryDivider
         className={styles.draggedOverHighlight}
         label={t['com.affine.rootAppSidebar.favorites']()}
         ref={dropTargetRef}
         data-testid="explorer-favorite-category-divider"
+        setCollapsed={setCollapsed}
+        collapsed={collapsed}
       >
         <IconButton
           data-testid="explorer-bar-add-favorite-button"
@@ -206,6 +220,7 @@ export const ExplorerFavorites = () => {
           />
         )}
       </CategoryDivider>
+      <Collapsible.Content>
         <ExplorerTreeRoot
           placeholder={
             <RootEmpty
@@ -225,7 +240,8 @@ export const ExplorerFavorites = () => {
             />
           ))}
         </ExplorerTreeRoot>
-    </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
   );
 };
 

packages/frontend/core/src/modules/explorer/views/sections/favorites/styles.css.ts

@@ -2,7 +2,7 @@ import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
 export const container = style({
-  marginTop: '16px',
+  marginTop: '8px',
 });
 
 export const draggedOverHighlight = style({

packages/frontend/core/src/modules/explorer/views/sections/migration-favorites/index.tsx

@@ -4,14 +4,21 @@ import { ExplorerTreeRoot } from '@affine/core/modules/explorer/views/tree';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { Trans, useI18n } from '@affine/i18n';
 import { BroomIcon, HelpIcon } from '@blocksuite/icons/rc';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { DocsService, useLiveData, useServices } from '@toeverything/infra';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { ExplorerCollectionNode } from '../../nodes/collection';
 import { ExplorerDocNode } from '../../nodes/doc';
 import * as styles from './styles.css';
 
-export const ExplorerMigrationFavorites = () => {
+export const ExplorerMigrationFavorites = ({
+  defaultCollapsed = false,
+}: {
+  defaultCollapsed?: boolean;
+}) => {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+
   const t = useI18n();
 
   const { favoriteItemsAdapter, docsService } = useServices({
@@ -89,8 +96,12 @@ export const ExplorerMigrationFavorites = () => {
   }
 
   return (
-    <div className={styles.container}>
+    <Collapsible.Root className={styles.container} open={!collapsed}>
-      <CategoryDivider label={t['com.affine.rootAppSidebar.migration-data']()}>
+      <CategoryDivider
+        label={t['com.affine.rootAppSidebar.migration-data']()}
+        setCollapsed={setCollapsed}
+        collapsed={collapsed}
+      >
         <IconButton
           data-testid="explorer-bar-favorite-migration-clear-button"
           onClick={handleClickClear}
@@ -106,6 +117,7 @@ export const ExplorerMigrationFavorites = () => {
           <HelpIcon />
         </IconButton>
       </CategoryDivider>
+      <Collapsible.Content>
         <ExplorerTreeRoot>
           {favorites.map((favorite, i) => (
             <ExplorerMigrationFavoriteNode
@@ -114,7 +126,8 @@ export const ExplorerMigrationFavorites = () => {
             />
           ))}
         </ExplorerTreeRoot>
-    </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
   );
 };
 

packages/frontend/core/src/modules/explorer/views/sections/migration-favorites/styles.css.ts

@@ -2,7 +2,7 @@ import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
 export const container = style({
-  marginTop: '16px',
+  marginTop: '8px',
   position: 'relative',
   selectors: {
     '&:after': {

packages/frontend/core/src/modules/explorer/views/sections/old-favorites/index.tsx

@@ -13,8 +13,9 @@ import { WorkbenchService } from '@affine/core/modules/workbench';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { DocsService, useLiveData, useServices } from '@toeverything/infra';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { ExplorerCollectionNode } from '../../nodes/collection';
 import { ExplorerDocNode } from '../../nodes/doc';
@@ -24,12 +25,17 @@ import * as styles from './styles.css';
 /**
  * @deprecated remove this after 0.17 released
  */
-export const ExplorerOldFavorites = () => {
+export const ExplorerOldFavorites = ({
+  defaultCollapsed = false,
+}: {
+  defaultCollapsed?: boolean;
+}) => {
   const { favoriteItemsAdapter, docsService, workbenchService } = useServices({
     FavoriteItemsAdapter,
     DocsService,
     WorkbenchService,
   });
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
 
   const docs = useLiveData(docsService.list.docs$);
   const trashDocs = useLiveData(docsService.list.trashDocs$);
@@ -174,7 +180,7 @@ export const ExplorerOldFavorites = () => {
   );
 
   return (
-    <div className={styles.container}>
+    <Collapsible.Root className={styles.container} open={!collapsed}>
       <CategoryDivider
         className={styles.draggedOverHighlight}
         label={
@@ -182,6 +188,8 @@ export const ExplorerOldFavorites = () => {
             ? `${t['com.affine.rootAppSidebar.favorites']()} (OLD)`
             : t['com.affine.rootAppSidebar.favorites']()
         }
+        setCollapsed={setCollapsed}
+        collapsed={collapsed}
       >
         <IconButton
           data-testid="explorer-bar-add-old-favorite-button"
@@ -191,6 +199,7 @@ export const ExplorerOldFavorites = () => {
           <PlusIcon />
         </IconButton>
       </CategoryDivider>
+      <Collapsible.Content>
         <ExplorerTreeRoot
           placeholder={
             <RootEmpty
@@ -210,7 +219,8 @@ export const ExplorerOldFavorites = () => {
             />
           ))}
         </ExplorerTreeRoot>
-    </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
   );
 };
 

packages/frontend/core/src/modules/explorer/views/sections/old-favorites/styles.css.ts

@@ -2,7 +2,7 @@ import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
 export const container = style({
-  marginTop: '16px',
+  marginTop: '8px',
 });
 
 export const draggedOverHighlight = style({

packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx

@@ -16,6 +16,7 @@ import {
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { useLiveData, useServices } from '@toeverything/infra';
 import { useCallback, useMemo, useState } from 'react';
 
@@ -23,9 +24,14 @@ import { ExplorerFolderNode } from '../../nodes/folder';
 import { RootEmpty } from './empty';
 import * as styles from './styles.css';
 
-export const ExplorerOrganize = () => {
+export const ExplorerOrganize = ({
+  defaultCollapsed = false,
+}: {
+  defaultCollapsed?: boolean;
+}) => {
   const { organizeService } = useServices({ OrganizeService });
   const [newFolderId, setNewFolderId] = useState<string | null>(null);
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
 
   const t = useI18n();
 
@@ -39,6 +45,7 @@ export const ExplorerOrganize = () => {
       rootFolder.indexAt('before')
     );
     setNewFolderId(newFolderId);
+    setCollapsed(false);
   }, [rootFolder]);
 
   const handleOnChildrenDrop = useCallback(
@@ -89,10 +96,12 @@ export const ExplorerOrganize = () => {
   >(() => args => args.source.data.entity?.type === 'folder', []);
 
   return (
-    <div className={styles.container}>
+    <Collapsible.Root className={styles.container} open={!collapsed}>
       <CategoryDivider
         className={styles.draggedOverHighlight}
         label={t['com.affine.rootAppSidebar.organize']()}
+        setCollapsed={setCollapsed}
+        collapsed={collapsed}
       >
         <IconButton
           data-testid="explorer-bar-add-organize-button"
@@ -102,6 +111,7 @@ export const ExplorerOrganize = () => {
           <PlusIcon />
         </IconButton>
       </CategoryDivider>
+      <Collapsible.Content>
         <ExplorerTreeRoot
           placeholder={<RootEmpty onClickCreate={handleCreateFolder} />}
         >
@@ -120,6 +130,7 @@ export const ExplorerOrganize = () => {
             />
           ))}
         </ExplorerTreeRoot>
-    </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
   );
 };

packages/frontend/core/src/modules/explorer/views/sections/organize/styles.css.ts

@@ -2,7 +2,7 @@ import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
 export const container = style({
-  marginTop: '16px',
+  marginTop: '8px',
 });
 
 export const draggedOverHighlight = style({

packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx

@@ -5,6 +5,7 @@ import type { Tag } from '@affine/core/modules/tag';
 import { TagService } from '@affine/core/modules/tag';
 import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { useLiveData, useServices } from '@toeverything/infra';
 import { useCallback, useState } from 'react';
 
@@ -12,12 +13,17 @@ import { ExplorerTagNode } from '../../nodes/tag';
 import { RootEmpty } from './empty';
 import * as styles from './styles.css';
 
-export const ExplorerTags = () => {
+export const ExplorerTags = ({
+  defaultCollapsed = false,
+}: {
+  defaultCollapsed?: boolean;
+}) => {
   const { tagService } = useServices({
     TagService,
   });
   const [createdTag, setCreatedTag] = useState<Tag | null>(null);
 
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
   const tags = useLiveData(tagService.tagList.tags$);
 
   const t = useI18n();
@@ -28,13 +34,16 @@ export const ExplorerTags = () => {
       tagService.randomTagColor()
     );
     setCreatedTag(newTags);
+    setCollapsed(false);
   }, [t, tagService]);
 
   return (
-    <div className={styles.container}>
+    <Collapsible.Root className={styles.container} open={!collapsed}>
       <CategoryDivider
         className={styles.draggedOverHighlight}
         label={t['com.affine.rootAppSidebar.tags']()}
+        setCollapsed={setCollapsed}
+        collapsed={collapsed}
       >
         <IconButton
           data-testid="explorer-bar-add-favorite-button"
@@ -44,6 +53,7 @@ export const ExplorerTags = () => {
           <PlusIcon />
         </IconButton>
       </CategoryDivider>
+      <Collapsible.Content>
         <ExplorerTreeRoot
           placeholder={<RootEmpty onClickCreate={handleCreateNewFavoriteDoc} />}
         >
@@ -59,6 +69,7 @@ export const ExplorerTags = () => {
             />
           ))}
         </ExplorerTreeRoot>
-    </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
   );
 };

packages/frontend/core/src/modules/explorer/views/sections/tags/styles.css.ts

@@ -2,7 +2,7 @@ import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
 export const container = style({
-  marginTop: '16px',
+  marginTop: '8px',
 });
 
 export const draggedOverHighlight = style({

tests/affine-cloud/e2e/collaboration.spec.ts

@@ -131,6 +131,7 @@ test('can sync collections between different browser', async ({
     await loginUser(page2, user.email);
     await page2.goto(page.url());
     const collections = page2.getByTestId('explorer-collections');
+    await collections.getByTestId('category-divider-collapse-button').click();
     await expect(collections.getByText('test collection')).toBeVisible();
   }
 });

tests/affine-local/e2e/local-first-collections-items.spec.ts

@@ -65,6 +65,7 @@ test('Show collections items in sidebar', async ({ page }) => {
   await removeOnboardingPages(page);
   await createAndPinCollection(page);
   const collections = page.getByTestId('explorer-collections');
+  await collections.getByTestId('category-divider-collapse-button').click();
   const items = collections.locator('[data-testid^="explorer-collection-"]');
   expect(await items.count()).toBe(1);
   const first = items.first();
@@ -105,6 +106,7 @@ test('edit collection', async ({ page }) => {
   await removeOnboardingPages(page);
   await createAndPinCollection(page);
   const collections = page.getByTestId('explorer-collections');
+  await collections.getByTestId('category-divider-collapse-button').click();
   const items = collections.locator('[data-testid^="explorer-collection-"]');
   expect(await items.count()).toBe(1);
   const first = items.first();
@@ -122,6 +124,7 @@ test('edit collection and change filter date', async ({ page }) => {
   await removeOnboardingPages(page);
   await createAndPinCollection(page);
   const collections = page.getByTestId('explorer-collections');
+  await collections.getByTestId('category-divider-collapse-button').click();
   const items = collections.locator('[data-testid^="explorer-collection-"]');
   expect(await items.count()).toBe(1);
   const first = items.first();
@@ -143,6 +146,10 @@ test('add collection from sidebar', async ({ page }) => {
   await page.getByTestId('all-pages').click();
   const cell = page.getByTestId('page-list-item-title').getByText('test page');
   await expect(cell).toBeVisible();
+  await page
+    .getByTestId('explorer-collections')
+    .getByTestId('category-divider-collapse-button')
+    .click();
   const nullCollection = page.getByTestId(
     'slider-bar-collection-empty-message'
   );