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

2024-12-02 14:22:55 +03:00 · 2024-07-29 09:57:33 +00:00 · 2024-07-29 09:57:33 +00:00 · 0472ffe569
commit 0472ffe569
parent c5cf8480fc
17 changed files with 257 additions and 129 deletions
--- a/packages/frontend/core/src/components/app-sidebar/category-divider/index.css.ts
+++ b/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)',
+    },
+  },
 });
--- a/packages/frontend/core/src/components/app-sidebar/category-divider/index.tsx
+++ b/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>
    );
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/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' }} />
--- a/packages/frontend/core/src/modules/explorer/views/sections/collections/index.tsx
+++ b/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">
-        <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
+      <Collapsible.Root
+        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,21 +66,23 @@ export const ExplorerCollections = () => {
            <PlusIcon />
          </IconButton>
        </CategoryDivider>
-        <ExplorerTreeRoot
-          placeholder={<RootEmpty onClickCreate={handleCreateCollection} />}
-        >
-          {collections.map(collection => (
-            <ExplorerCollectionNode
-              key={collection.id}
-              collectionId={collection.id}
-              reorderable={false}
-              location={{
-                at: 'explorer:collection:list',
-              }}
-            />
-          ))}
-        </ExplorerTreeRoot>
-      </div>
+        <Collapsible.Content>
+          <ExplorerTreeRoot
+            placeholder={<RootEmpty onClickCreate={handleCreateCollection} />}
+          >
+            {collections.map(collection => (
+              <ExplorerCollectionNode
+                key={collection.id}
+                collectionId={collection.id}
+                reorderable={false}
+                location={{
+                  at: 'explorer:collection:list',
+                }}
+              />
+            ))}
+          </ExplorerTreeRoot>
+        </Collapsible.Content>
+      </Collapsible.Root>
      {node}
    </>
  );
--- a/packages/frontend/core/src/modules/explorer/views/sections/collections/styles.css.ts
+++ b/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',
 });
--- a/packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx
+++ b/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,26 +220,28 @@ export const ExplorerFavorites = () => {
          />
        )}
      </CategoryDivider>
-      <ExplorerTreeRoot
-        placeholder={
-          <RootEmpty
-            onDrop={handleDrop}
-            canDrop={handleCanDrop}
-            dropEffect={handleDropEffect}
-          />
-        }
-      >
-        {favorites.map(favorite => (
-          <ExplorerFavoriteNode
-            key={favorite.id}
-            favorite={favorite}
-            onDrop={handleOnChildrenDrop}
-            dropEffect={handleChildrenDropEffect}
-            canDrop={handleChildrenCanDrop}
-          />
-        ))}
-      </ExplorerTreeRoot>
-    </div>
+      <Collapsible.Content>
+        <ExplorerTreeRoot
+          placeholder={
+            <RootEmpty
+              onDrop={handleDrop}
+              canDrop={handleCanDrop}
+              dropEffect={handleDropEffect}
+            />
+          }
+        >
+          {favorites.map(favorite => (
+            <ExplorerFavoriteNode
+              key={favorite.id}
+              favorite={favorite}
+              onDrop={handleOnChildrenDrop}
+              dropEffect={handleChildrenDropEffect}
+              canDrop={handleChildrenCanDrop}
+            />
+          ))}
+        </ExplorerTreeRoot>
+      </Collapsible.Content>
+    </Collapsible.Root>
  );
 };

--- a/packages/frontend/core/src/modules/explorer/views/sections/favorites/styles.css.ts
+++ b/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({
--- a/packages/frontend/core/src/modules/explorer/views/sections/migration-favorites/index.tsx
+++ b/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}>
-      <CategoryDivider label={t['com.affine.rootAppSidebar.migration-data']()}>
+    <Collapsible.Root className={styles.container} open={!collapsed}>
+      <CategoryDivider
+        label={t['com.affine.rootAppSidebar.migration-data']()}
+        setCollapsed={setCollapsed}
+        collapsed={collapsed}
+      >
        <IconButton
          data-testid="explorer-bar-favorite-migration-clear-button"
          onClick={handleClickClear}
@ -106,15 +117,17 @@ export const ExplorerMigrationFavorites = () => {
          <HelpIcon />
        </IconButton>
      </CategoryDivider>
-      <ExplorerTreeRoot>
-        {favorites.map((favorite, i) => (
-          <ExplorerMigrationFavoriteNode
-            key={favorite.id + ':' + i}
-            favorite={favorite}
-          />
-        ))}
-      </ExplorerTreeRoot>
-    </div>
+      <Collapsible.Content>
+        <ExplorerTreeRoot>
+          {favorites.map((favorite, i) => (
+            <ExplorerMigrationFavoriteNode
+              key={favorite.id + ':' + i}
+              favorite={favorite}
+            />
+          ))}
+        </ExplorerTreeRoot>
+      </Collapsible.Content>
+    </Collapsible.Root>
  );
 };

--- a/packages/frontend/core/src/modules/explorer/views/sections/migration-favorites/styles.css.ts
+++ b/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': {
--- a/packages/frontend/core/src/modules/explorer/views/sections/old-favorites/index.tsx
+++ b/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,26 +199,28 @@ export const ExplorerOldFavorites = () => {
          <PlusIcon />
        </IconButton>
      </CategoryDivider>
-      <ExplorerTreeRoot
-        placeholder={
-          <RootEmpty
-            onDrop={handleDrop}
-            canDrop={handleCanDrop}
-            dropEffect={handleDropEffect}
-          />
-        }
-      >
-        {favorites.map((favorite, i) => (
-          <ExplorerFavoriteNode
-            key={favorite.id + ':' + i}
-            favorite={favorite}
-            onDrop={handleOnChildrenDrop}
-            dropEffect={handleChildrenDropEffect}
-            canDrop={handleChildrenCanDrop}
-          />
-        ))}
-      </ExplorerTreeRoot>
-    </div>
+      <Collapsible.Content>
+        <ExplorerTreeRoot
+          placeholder={
+            <RootEmpty
+              onDrop={handleDrop}
+              canDrop={handleCanDrop}
+              dropEffect={handleDropEffect}
+            />
+          }
+        >
+          {favorites.map((favorite, i) => (
+            <ExplorerFavoriteNode
+              key={favorite.id + ':' + i}
+              favorite={favorite}
+              onDrop={handleOnChildrenDrop}
+              dropEffect={handleChildrenDropEffect}
+              canDrop={handleChildrenCanDrop}
+            />
+          ))}
+        </ExplorerTreeRoot>
+      </Collapsible.Content>
+    </Collapsible.Root>
  );
 };

--- a/packages/frontend/core/src/modules/explorer/views/sections/old-favorites/styles.css.ts
+++ b/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({
--- a/packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx
+++ b/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,24 +111,26 @@ export const ExplorerOrganize = () => {
          <PlusIcon />
        </IconButton>
      </CategoryDivider>
-      <ExplorerTreeRoot
-        placeholder={<RootEmpty onClickCreate={handleCreateFolder} />}
-      >
-        {folders.map(child => (
-          <ExplorerFolderNode
-            key={child.id}
-            nodeId={child.id as string}
-            defaultRenaming={child.id === newFolderId}
-            onDrop={handleOnChildrenDrop}
-            dropEffect={handleChildrenDropEffect}
-            canDrop={handleChildrenCanDrop}
-            location={{
-              at: 'explorer:organize:folder-node',
-              nodeId: child.id as string,
-            }}
-          />
-        ))}
-      </ExplorerTreeRoot>
-    </div>
+      <Collapsible.Content>
+        <ExplorerTreeRoot
+          placeholder={<RootEmpty onClickCreate={handleCreateFolder} />}
+        >
+          {folders.map(child => (
+            <ExplorerFolderNode
+              key={child.id}
+              nodeId={child.id as string}
+              defaultRenaming={child.id === newFolderId}
+              onDrop={handleOnChildrenDrop}
+              dropEffect={handleChildrenDropEffect}
+              canDrop={handleChildrenCanDrop}
+              location={{
+                at: 'explorer:organize:folder-node',
+                nodeId: child.id as string,
+              }}
+            />
+          ))}
+        </ExplorerTreeRoot>
+      </Collapsible.Content>
+    </Collapsible.Root>
  );
 };
--- a/packages/frontend/core/src/modules/explorer/views/sections/organize/styles.css.ts
+++ b/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({
--- a/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
+++ b/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,21 +53,23 @@ export const ExplorerTags = () => {
          <PlusIcon />
        </IconButton>
      </CategoryDivider>
-      <ExplorerTreeRoot
-        placeholder={<RootEmpty onClickCreate={handleCreateNewFavoriteDoc} />}
-      >
-        {tags.map(tag => (
-          <ExplorerTagNode
-            key={tag.id}
-            tagId={tag.id}
-            reorderable={false}
-            location={{
-              at: 'explorer:tags:list',
-            }}
-            defaultRenaming={createdTag?.id === tag.id}
-          />
-        ))}
-      </ExplorerTreeRoot>
-    </div>
+      <Collapsible.Content>
+        <ExplorerTreeRoot
+          placeholder={<RootEmpty onClickCreate={handleCreateNewFavoriteDoc} />}
+        >
+          {tags.map(tag => (
+            <ExplorerTagNode
+              key={tag.id}
+              tagId={tag.id}
+              reorderable={false}
+              location={{
+                at: 'explorer:tags:list',
+              }}
+              defaultRenaming={createdTag?.id === tag.id}
+            />
+          ))}
+        </ExplorerTreeRoot>
+      </Collapsible.Content>
+    </Collapsible.Root>
  );
 };
--- a/packages/frontend/core/src/modules/explorer/views/sections/tags/styles.css.ts
+++ b/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({
--- a/tests/affine-cloud/e2e/collaboration.spec.ts
+++ b/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();
  }
 });
--- a/tests/affine-local/e2e/local-first-collections-items.spec.ts
+++ b/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'
  );