From 0472ffe569c717ab7e09722ce801e7a75f02cba9 Mon Sep 17 00:00:00 2001
From: EYHN <cneyhn@gmail.com>
Date: Mon, 29 Jul 2024 09:57:33 +0000
Subject: [PATCH] feat(core): support sidebar collapse (#7630)

---
 .../app-sidebar/category-divider/index.css.ts | 15 ++++-
 .../app-sidebar/category-divider/index.tsx    | 31 +++++++++-
 .../src/components/root-app-sidebar/index.tsx |  8 ++-
 .../views/sections/collections/index.tsx      | 55 ++++++++++------
 .../views/sections/collections/styles.css.ts  |  2 +-
 .../views/sections/favorites/index.tsx        | 62 ++++++++++++-------
 .../views/sections/favorites/styles.css.ts    |  2 +-
 .../sections/migration-favorites/index.tsx    | 39 ++++++++----
 .../migration-favorites/styles.css.ts         |  2 +-
 .../views/sections/old-favorites/index.tsx    | 56 ++++++++++-------
 .../sections/old-favorites/styles.css.ts      |  2 +-
 .../views/sections/organize/index.tsx         | 53 +++++++++-------
 .../views/sections/organize/styles.css.ts     |  2 +-
 .../explorer/views/sections/tags/index.tsx    | 47 ++++++++------
 .../views/sections/tags/styles.css.ts         |  2 +-
 tests/affine-cloud/e2e/collaboration.spec.ts  |  1 +
 .../e2e/local-first-collections-items.spec.ts |  7 +++
 17 files changed, 257 insertions(+), 129 deletions(-)

diff --git 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
index 1894851362..f56fb678e9 100644
--- 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)',
+    },
+  },
 });
diff --git a/packages/frontend/core/src/components/app-sidebar/category-divider/index.tsx b/packages/frontend/core/src/components/app-sidebar/category-divider/index.tsx
index 13a06697af..dfc85bf149 100644
--- 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>
     );
diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
index fa0b501bc7..4a2dcf6a1a 100644
--- 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' }} />
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/collections/index.tsx b/packages/frontend/core/src/modules/explorer/views/sections/collections/index.tsx
index c4da803f9c..68360a4219 100644
--- 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}
     </>
   );
diff --git 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
index c69d8ce569..702eb729e8 100644
--- 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',
 });
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx b/packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx
index c2184b210c..faa4395e97 100644
--- 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>
   );
 };
 
diff --git 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
index f7fa0fe231..00458330b3 100644
--- 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({
diff --git 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
index 048021d2c1..c94604aeb5 100644
--- 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>
   );
 };
 
diff --git 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
index 3da2d9e8e7..86a60389c6 100644
--- 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': {
diff --git 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
index 4f8d60b96b..621bda2fe8 100644
--- 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>
   );
 };
 
diff --git 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
index 574b2653a0..994b712e90 100644
--- 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({
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx b/packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx
index 4db8782187..43c0151fd0 100644
--- 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>
   );
 };
diff --git 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
index 574b2653a0..994b712e90 100644
--- 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({
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx b/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
index f8379daa45..fa6b1c6da1 100644
--- 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>
   );
 };
diff --git 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
index 574b2653a0..994b712e90 100644
--- 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({
diff --git a/tests/affine-cloud/e2e/collaboration.spec.ts b/tests/affine-cloud/e2e/collaboration.spec.ts
index 3451a0607d..9230747393 100644
--- 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();
   }
 });
diff --git a/tests/affine-local/e2e/local-first-collections-items.spec.ts b/tests/affine-local/e2e/local-first-collections-items.spec.ts
index 2d4abaaeb8..b7bbd4e227 100644
--- 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'
   );