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

close AF-1124,AF-1129,AF-1134,AF-1144
2024-12-02 14:33:54 +03:00 · 2024-08-01 09:41:09 +00:00 · 2024-08-01 09:41:09 +00:00 · 8816d2a639
commit 8816d2a639
parent 553fbed60f
24 changed files with 479 additions and 355 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
@ -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)',
+    },
+  },
+});
--- 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,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>
    );
  }
--- a/packages/frontend/core/src/components/app-sidebar/sidebar-containers/index.css.ts
+++ b/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({
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/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} />
--- a/packages/frontend/core/src/modules/explorer/entities/explore-section.ts
+++ b/packages/frontend/core/src/modules/explorer/entities/explore-section.ts
@ -0,0 +1,35 @@
+import type { GlobalCache } from '@toeverything/infra';
+import { Entity, LiveData } from '@toeverything/infra';
+import { map } from 'rxjs';
+
+import type { CollapsibleSectionName } from '../types';
+
+const DEFAULT_COLLAPSABLE_STATE: Record<CollapsibleSectionName, boolean> = {
+  favorites: false,
+  organize: false,
+  collections: true,
+  tags: true,
+  favoritesOld: true,
+  migrationFavorites: true,
+};
+
+export class ExplorerSection extends Entity<{ name: CollapsibleSectionName }> {
+  name: CollapsibleSectionName = this.props.name;
+  key = `explorer.section.${this.name}`;
+  defaultValue = DEFAULT_COLLAPSABLE_STATE[this.name];
+
+  constructor(private readonly globalCache: GlobalCache) {
+    super();
+  }
+
+  collapsed$ = LiveData.from(
+    this.globalCache
+      .watch<boolean>(this.key)
+      .pipe(map(v => v ?? this.defaultValue)),
+    this.defaultValue
+  );
+
+  setCollapsed(collapsed: boolean) {
+    this.globalCache.set(this.key, collapsed);
+  }
+}
--- a/packages/frontend/core/src/modules/explorer/index.ts
+++ b/packages/frontend/core/src/modules/explorer/index.ts
@ -1,5 +1,22 @@
+import {
+  type Framework,
+  GlobalCache,
+  WorkspaceScope,
+} from '@toeverything/infra';
+
+import { ExplorerSection } from './entities/explore-section';
+import { ExplorerService } from './services/explorer';
+export { ExplorerService } from './services/explorer';
+export type { CollapsibleSectionName } from './types';
 export { ExplorerCollections } from './views/sections/collections';
 export { ExplorerFavorites } from './views/sections/favorites';
 export { ExplorerMigrationFavorites } from './views/sections/migration-favorites';
 export { ExplorerOldFavorites } from './views/sections/old-favorites';
 export { ExplorerOrganize } from './views/sections/organize';
+
+export function configureExplorerModule(framework: Framework) {
+  framework
+    .scope(WorkspaceScope)
+    .service(ExplorerService)
+    .entity(ExplorerSection, [GlobalCache]);
+}
--- a/packages/frontend/core/src/modules/explorer/services/explorer.ts
+++ b/packages/frontend/core/src/modules/explorer/services/explorer.ts
@ -0,0 +1,23 @@
+import { Service } from '@toeverything/infra';
+
+import { ExplorerSection } from '../entities/explore-section';
+import type { CollapsibleSectionName } from '../types';
+
+const allSectionName: Array<CollapsibleSectionName> = [
+  'favorites',
+  'organize',
+  'collections',
+  'tags',
+  'favoritesOld',
+  'migrationFavorites',
+];
+
+export class ExplorerService extends Service {
+  readonly sections = allSectionName.reduce(
+    (prev, name) =>
+      Object.assign(prev, {
+        [name]: this.framework.createEntity(ExplorerSection, { name }),
+      }),
+    {} as Record<CollapsibleSectionName, ExplorerSection>
+  );
+}
--- a/packages/frontend/core/src/modules/explorer/types.ts
+++ b/packages/frontend/core/src/modules/explorer/types.ts
@ -0,0 +1,7 @@
+export type CollapsibleSectionName =
+  | 'collections'
+  | 'favorites'
+  | 'tags'
+  | 'organize'
+  | 'favoritesOld'
+  | 'migrationFavorites';
--- a/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.css.ts
@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const root = style({});
+export const content = style({
+  paddingTop: 6,
+});
--- a/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.tsx
@ -0,0 +1,79 @@
+import { CategoryDivider } from '@affine/core/components/app-sidebar';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { useLiveData, useService } from '@toeverything/infra';
+import clsx from 'clsx';
+import {
+  type PropsWithChildren,
+  type ReactNode,
+  type RefObject,
+  useCallback,
+} from 'react';
+
+import { ExplorerService } from '../../services/explorer';
+import type { CollapsibleSectionName } from '../../types';
+import { content, root } from './collapsible-section.css';
+
+interface CollapsibleSectionProps extends PropsWithChildren {
+  name: CollapsibleSectionName;
+  title: string;
+  actions?: ReactNode;
+
+  className?: string;
+  testId?: string;
+
+  headerRef?: RefObject<HTMLDivElement>;
+  headerTestId?: string;
+  headerClassName?: string;
+
+  contentClassName?: string;
+}
+
+export const CollapsibleSection = ({
+  name,
+  title,
+  actions,
+  children,
+
+  className,
+  testId,
+
+  headerRef,
+  headerTestId,
+  headerClassName,
+
+  contentClassName,
+}: CollapsibleSectionProps) => {
+  const section = useService(ExplorerService).sections[name];
+
+  const collapsed = useLiveData(section.collapsed$);
+
+  const setCollapsed = useCallback(
+    (v: boolean) => {
+      section.setCollapsed(v);
+    },
+    [section]
+  );
+
+  return (
+    <Collapsible.Root
+      data-collapsed={collapsed}
+      className={clsx(root, className)}
+      open={!collapsed}
+      data-testid={testId}
+    >
+      <CategoryDivider
+        data-testid={headerTestId}
+        label={title}
+        setCollapsed={setCollapsed}
+        collapsed={collapsed}
+        ref={headerRef}
+        className={headerClassName}
+      >
+        {actions}
+      </CategoryDivider>
+      <Collapsible.Content className={clsx(content, contentClassName)}>
+        {children}
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/sections/collections/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/collections/index.tsx
@ -1,5 +1,4 @@
 import { IconButton } from '@affine/component';
-import { CategoryDivider } from '@affine/core/components/app-sidebar';
 import { useEditCollectionName } from '@affine/core/components/page-list';
 import { createEmptyCollection } from '@affine/core/components/page-list/use-collection-manager';
 import { mixpanel } from '@affine/core/mixpanel';
@ -8,26 +7,23 @@ 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, useState } from 'react';
+import { useCallback } from 'react';

+import { ExplorerService } from '../../../services/explorer';
+import { CollapsibleSection } from '../../layouts/collapsible-section';
 import { ExplorerCollectionNode } from '../../nodes/collection';
 import { RootEmpty } from './empty';
-import * as styles from './styles.css';

-export const ExplorerCollections = ({
-  defaultCollapsed = false,
-}: {
-  defaultCollapsed?: boolean;
-}) => {
+export const ExplorerCollections = () => {
  const t = useI18n();
-  const { collectionService, workbenchService } = useServices({
+  const { collectionService, workbenchService, explorerService } = useServices({
    CollectionService,
    WorkbenchService,
+    ExplorerService,
  });
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const explorerSection = explorerService.sections.collections;
  const collections = useLiveData(collectionService.collections$);
  const { node, open: openCreateCollectionModel } = useEditCollectionName({
    title: t['com.affine.editCollection.createCollection'](),
@ -45,25 +41,25 @@ export const ExplorerCollections = ({
          control: 'new collection button',
        });
        workbenchService.workbench.openCollection(id);
-        setCollapsed(false);
+        explorerSection.setCollapsed(false);
      })
      .catch(err => {
        console.error(err);
      });
-  }, [collectionService, openCreateCollectionModel, workbenchService]);
+  }, [
+    collectionService,
+    explorerSection,
+    openCreateCollectionModel,
+    workbenchService.workbench,
+  ]);

  return (
    <>
-      <Collapsible.Root
-        className={styles.container}
-        data-testid="explorer-collections"
-        open={!collapsed}
-      >
-        <CategoryDivider
-          label={t['com.affine.rootAppSidebar.collections']()}
-          setCollapsed={setCollapsed}
-          collapsed={collapsed}
-        >
+      <CollapsibleSection
+        name="collections"
+        testId="explorer-collections"
+        title={t['com.affine.rootAppSidebar.collections']()}
+        actions={
          <IconButton
            data-testid="explorer-bar-add-collection-button"
            onClick={handleCreateCollection}
@ -71,24 +67,23 @@ export const ExplorerCollections = ({
          >
            <PlusIcon />
          </IconButton>
-        </CategoryDivider>
-        <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>
+        }
+      >
+        <ExplorerTreeRoot
+          placeholder={<RootEmpty onClickCreate={handleCreateCollection} />}
+        >
+          {collections.map(collection => (
+            <ExplorerCollectionNode
+              key={collection.id}
+              collectionId={collection.id}
+              reorderable={false}
+              location={{
+                at: 'explorer:collection:list',
+              }}
+            />
+          ))}
+        </ExplorerTreeRoot>
+      </CollapsibleSection>
      {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 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const container = style({
-  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
@ -4,7 +4,6 @@ import {
  IconButton,
  useDropTarget,
 } from '@affine/component';
-import { CategoryDivider } from '@affine/core/components/app-sidebar';
 import { mixpanel } from '@affine/core/mixpanel';
 import {
  DropEffect,
@ -20,10 +19,11 @@ 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, useState } from 'react';
+import { useCallback, useMemo } from 'react';

+import { ExplorerService } from '../../../services/explorer';
+import { CollapsibleSection } from '../../layouts/collapsible-section';
 import { ExplorerCollectionNode } from '../../nodes/collection';
 import { ExplorerDocNode } from '../../nodes/doc';
 import { ExplorerFolderNode } from '../../nodes/folder';
@ -31,17 +31,16 @@ import { ExplorerTagNode } from '../../nodes/tag';
 import { RootEmpty } from './empty';
 import * as styles from './styles.css';

-export const ExplorerFavorites = ({
-  defaultCollapsed = false,
-}: {
-  defaultCollapsed?: boolean;
-}) => {
-  const { favoriteService, docsService, workbenchService } = useServices({
-    FavoriteService,
-    DocsService,
-    WorkbenchService,
-  });
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+export const ExplorerFavorites = () => {
+  const { favoriteService, docsService, workbenchService, explorerService } =
+    useServices({
+      FavoriteService,
+      DocsService,
+      WorkbenchService,
+      ExplorerService,
+    });
+
+  const explorerSection = explorerService.sections.favorites;

  const favorites = useLiveData(favoriteService.favoriteList.sortedList$);

@ -65,10 +64,10 @@ export const ExplorerFavorites = ({
          type: data.source.data.entity.type,
          id: data.source.data.entity.id,
        });
-        setCollapsed(false);
+        explorerSection.setCollapsed(false);
      }
    },
-    [favoriteService]
+    [explorerSection, favoriteService.favoriteList]
  );

  const handleDropEffect = useCallback<ExplorerTreeNodeDropEffect>(data => {
@ -110,8 +109,13 @@ export const ExplorerFavorites = ({
      id: newDoc.id,
    });
    workbenchService.workbench.openDoc(newDoc.id);
-    setCollapsed(false);
-  }, [docsService, favoriteService, workbenchService]);
+    explorerSection.setCollapsed(false);
+  }, [
+    docsService,
+    explorerSection,
+    favoriteService.favoriteList,
+    workbenchService.workbench,
+  ]);

  const handleOnChildrenDrop = useCallback(
    (
@ -221,61 +225,57 @@ export const ExplorerFavorites = ({
    );

  return (
-    <Collapsible.Root
-      className={styles.container}
-      data-testid="explorer-favorites"
-      open={!collapsed}
+    <CollapsibleSection
+      name="favorites"
+      title={t['com.affine.rootAppSidebar.favorites']()}
+      headerRef={dropTargetRef}
+      testId="explorer-favorites"
+      headerTestId="explorer-favorite-category-divider"
+      headerClassName={styles.draggedOverHighlight}
+      actions={
+        <>
+          <IconButton
+            data-testid="explorer-bar-add-favorite-button"
+            onClick={handleCreateNewFavoriteDoc}
+            size="small"
+          >
+            <PlusIcon />
+          </IconButton>
+          {draggedOverDraggable && (
+            <DropEffect
+              position={{
+                x: draggedOverPosition.relativeX,
+                y: draggedOverPosition.relativeY,
+              }}
+              dropEffect={handleDropEffect({
+                source: draggedOverDraggable,
+                treeInstruction: null,
+              })}
+            />
+          )}
+        </>
+      }
    >
-      <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"
-          onClick={handleCreateNewFavoriteDoc}
-          size="small"
-        >
-          <PlusIcon />
-        </IconButton>
-        {draggedOverDraggable && (
-          <DropEffect
-            position={{
-              x: draggedOverPosition.relativeX,
-              y: draggedOverPosition.relativeY,
-            }}
-            dropEffect={handleDropEffect({
-              source: draggedOverDraggable,
-              treeInstruction: null,
-            })}
+      <ExplorerTreeRoot
+        placeholder={
+          <RootEmpty
+            onDrop={handleDrop}
+            canDrop={handleCanDrop}
+            dropEffect={handleDropEffect}
          />
-        )}
-      </CategoryDivider>
-      <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>
+        }
+      >
+        {favorites.map(favorite => (
+          <ExplorerFavoriteNode
+            key={favorite.id}
+            favorite={favorite}
+            onDrop={handleOnChildrenDrop}
+            dropEffect={handleChildrenDropEffect}
+            canDrop={handleChildrenCanDrop}
+          />
+        ))}
+      </ExplorerTreeRoot>
+    </CollapsibleSection>
  );
 };

--- 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
@ -1,10 +1,6 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';

-export const container = style({
-  marginTop: '8px',
-});
-
 export const draggedOverHighlight = style({
  position: 'relative',
  selectors: {
--- 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
@ -1,25 +1,18 @@
 import { IconButton, useConfirmModal } from '@affine/component';
-import { CategoryDivider } from '@affine/core/components/app-sidebar';
 import { mixpanel } from '@affine/core/mixpanel';
 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, useState } from 'react';
+import { useCallback } from 'react';

+import { CollapsibleSection } from '../../layouts/collapsible-section';
 import { ExplorerCollectionNode } from '../../nodes/collection';
 import { ExplorerDocNode } from '../../nodes/doc';
 import * as styles from './styles.css';

-export const ExplorerMigrationFavorites = ({
-  defaultCollapsed = false,
-}: {
-  defaultCollapsed?: boolean;
-}) => {
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
-
+export const ExplorerMigrationFavorites = () => {
  const t = useI18n();

  const { favoriteItemsAdapter, docsService } = useServices({
@ -112,38 +105,38 @@ export const ExplorerMigrationFavorites = ({
  }

  return (
-    <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}
-          size="small"
-        >
-          <BroomIcon />
-        </IconButton>
-        <IconButton
-          data-testid="explorer-bar-favorite-migration-help-button"
-          size="small"
-          onClick={handleClickHelp}
-        >
-          <HelpIcon />
-        </IconButton>
-      </CategoryDivider>
-      <Collapsible.Content>
-        <ExplorerTreeRoot>
-          {favorites.map((favorite, i) => (
-            <ExplorerMigrationFavoriteNode
-              key={favorite.id + ':' + i}
-              favorite={favorite}
-            />
-          ))}
-        </ExplorerTreeRoot>
-      </Collapsible.Content>
-    </Collapsible.Root>
+    <CollapsibleSection
+      name="migrationFavorites"
+      className={styles.container}
+      title={t['com.affine.rootAppSidebar.migration-data']()}
+      actions={
+        <>
+          <IconButton
+            data-testid="explorer-bar-favorite-migration-clear-button"
+            onClick={handleClickClear}
+            size="small"
+          >
+            <BroomIcon />
+          </IconButton>
+          <IconButton
+            data-testid="explorer-bar-favorite-migration-help-button"
+            size="small"
+            onClick={handleClickHelp}
+          >
+            <HelpIcon />
+          </IconButton>
+        </>
+      }
+    >
+      <ExplorerTreeRoot>
+        {favorites.map((favorite, i) => (
+          <ExplorerMigrationFavoriteNode
+            key={favorite.id + ':' + i}
+            favorite={favorite}
+          />
+        ))}
+      </ExplorerTreeRoot>
+    </CollapsibleSection>
  );
 };

--- 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,10 +2,9 @@ import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';

 export const container = style({
-  marginTop: '8px',
  position: 'relative',
  selectors: {
-    '&:after': {
+    '&[data-collapsed="false"]:after': {
      display: 'block',
      content: '""',
      position: 'absolute',
--- 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
@ -3,7 +3,6 @@ import {
  type DropTargetOptions,
  IconButton,
 } from '@affine/component';
-import { CategoryDivider } from '@affine/core/components/app-sidebar';
 import {
  type ExplorerTreeNodeDropEffect,
  ExplorerTreeRoot,
@ -13,29 +12,23 @@ 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, useState } from 'react';
+import { useCallback, useMemo } from 'react';

+import { CollapsibleSection } from '../../layouts/collapsible-section';
 import { ExplorerCollectionNode } from '../../nodes/collection';
 import { ExplorerDocNode } from '../../nodes/doc';
 import { RootEmpty } from './empty';
-import * as styles from './styles.css';

 /**
 * @deprecated remove this after 0.17 released
 */
-export const ExplorerOldFavorites = ({
-  defaultCollapsed = false,
-}: {
-  defaultCollapsed?: boolean;
-}) => {
+export const ExplorerOldFavorites = () => {
  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$);
@ -180,17 +173,14 @@ export const ExplorerOldFavorites = ({
  );

  return (
-    <Collapsible.Root className={styles.container} open={!collapsed}>
-      <CategoryDivider
-        className={styles.draggedOverHighlight}
-        label={
-          runtimeConfig.enableNewFavorite
-            ? `${t['com.affine.rootAppSidebar.favorites']()} (OLD)`
-            : t['com.affine.rootAppSidebar.favorites']()
-        }
-        setCollapsed={setCollapsed}
-        collapsed={collapsed}
-      >
+    <CollapsibleSection
+      name="favoritesOld"
+      title={
+        runtimeConfig.enableNewFavorite
+          ? `${t['com.affine.rootAppSidebar.favorites']()} (OLD)`
+          : t['com.affine.rootAppSidebar.favorites']()
+      }
+      actions={
        <IconButton
          data-testid="explorer-bar-add-old-favorite-button"
          onClick={handleCreateNewFavoriteDoc}
@ -198,29 +188,28 @@ export const ExplorerOldFavorites = ({
        >
          <PlusIcon />
        </IconButton>
-      </CategoryDivider>
-      <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>
+      }
+    >
+      <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>
+    </CollapsibleSection>
  );
 };

--- 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
@ -1,15 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
-
-export const container = style({
-  marginTop: '8px',
-});
-
-export const draggedOverHighlight = style({
-  selectors: {
-    '&[data-dragged-over="true"]': {
-      background: cssVar('--affine-hover-color'),
-      borderRadius: '4px',
-    },
-  },
-});
--- a/packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx
@ -4,7 +4,6 @@ import {
  IconButton,
  toast,
 } from '@affine/component';
-import { CategoryDivider } from '@affine/core/components/app-sidebar';
 import { mixpanel } from '@affine/core/mixpanel';
 import {
  type ExplorerTreeNodeDropEffect,
@ -17,22 +16,23 @@ 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';
+import { useCallback, useEffect, useMemo, useState } from 'react';

+import { ExplorerService } from '../../../services/explorer';
+import { CollapsibleSection } from '../../layouts/collapsible-section';
 import { ExplorerFolderNode } from '../../nodes/folder';
 import { RootEmpty } from './empty';
 import * as styles from './styles.css';

-export const ExplorerOrganize = ({
-  defaultCollapsed = false,
-}: {
-  defaultCollapsed?: boolean;
-}) => {
-  const { organizeService } = useServices({ OrganizeService });
+export const ExplorerOrganize = () => {
+  const { organizeService, explorerService } = useServices({
+    OrganizeService,
+    ExplorerService,
+  });
+  const explorerSection = explorerService.sections.organize;
+  const collapsed = useLiveData(explorerSection.collapsed$);
  const [newFolderId, setNewFolderId] = useState<string | null>(null);
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);

  const t = useI18n();

@ -51,8 +51,8 @@ export const ExplorerOrganize = ({
      control: 'new folder',
    });
    setNewFolderId(newFolderId);
-    setCollapsed(false);
-  }, [rootFolder]);
+    explorerSection.setCollapsed(false);
+  }, [explorerSection, rootFolder]);

  const handleOnChildrenDrop = useCallback(
    (data: DropTargetDropEvent<AffineDNDData>, node?: FolderNode) => {
@ -108,23 +108,16 @@ export const ExplorerOrganize = ({
    DropTargetOptions<AffineDNDData>['canDrop']
  >(() => args => args.source.data.entity?.type === 'folder', []);

-  const handleCollapsedChange = useCallback((collapsed: boolean) => {
-    if (collapsed) {
-      setNewFolderId(null); // reset new folder id to clear the renaming state
-      setCollapsed(true);
-    } else {
-      setCollapsed(false);
-    }
-  }, []);
+  useEffect(() => {
+    if (collapsed) setNewFolderId(null); // reset new folder id to clear the renaming state
+  }, [collapsed]);

  return (
-    <Collapsible.Root className={styles.container} open={!collapsed}>
-      <CategoryDivider
-        className={styles.draggedOverHighlight}
-        label={t['com.affine.rootAppSidebar.organize']()}
-        setCollapsed={handleCollapsedChange}
-        collapsed={collapsed}
-      >
+    <CollapsibleSection
+      name="organize"
+      headerClassName={styles.draggedOverHighlight}
+      title={t['com.affine.rootAppSidebar.organize']()}
+      actions={
        <IconButton
          data-testid="explorer-bar-add-organize-button"
          onClick={handleCreateFolder}
@ -132,27 +125,26 @@ export const ExplorerOrganize = ({
        >
          <PlusIcon />
        </IconButton>
-      </CategoryDivider>
-      <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>
+      }
+    >
+      <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>
+    </CollapsibleSection>
  );
 };
--- 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
@ -1,10 +1,6 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';

-export const container = style({
-  marginTop: '8px',
-});
-
 export const draggedOverHighlight = style({
  selectors: {
    '&[data-dragged-over="true"]': {
--- a/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
@ -1,30 +1,27 @@
 import { IconButton } from '@affine/component';
-import { CategoryDivider } from '@affine/core/components/app-sidebar';
 import { mixpanel } from '@affine/core/mixpanel';
 import { ExplorerTreeRoot } from '@affine/core/modules/explorer/views/tree';
 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';
+import { useCallback, useEffect, useState } from 'react';

+import { ExplorerService } from '../../../services/explorer';
+import { CollapsibleSection } from '../../layouts/collapsible-section';
 import { ExplorerTagNode } from '../../nodes/tag';
 import { RootEmpty } from './empty';
 import * as styles from './styles.css';

-export const ExplorerTags = ({
-  defaultCollapsed = false,
-}: {
-  defaultCollapsed?: boolean;
-}) => {
-  const { tagService } = useServices({
+export const ExplorerTags = () => {
+  const { tagService, explorerService } = useServices({
    TagService,
+    ExplorerService,
  });
+  const explorerSection = explorerService.sections.tags;
+  const collapsed = useLiveData(explorerSection.collapsed$);
  const [createdTag, setCreatedTag] = useState<Tag | null>(null);
-
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
  const tags = useLiveData(tagService.tagList.tags$);

  const t = useI18n();
@ -40,26 +37,19 @@ export const ExplorerTags = ({
      module: 'tags',
      control: 'new tag button',
    });
-    setCollapsed(false);
-  }, [t, tagService]);
+    explorerSection.setCollapsed(false);
+  }, [explorerSection, t, tagService]);

-  const handleCollapsedChange = useCallback((collapsed: boolean) => {
-    if (collapsed) {
-      setCreatedTag(null); // reset created tag to clear the renaming state
-      setCollapsed(true);
-    } else {
-      setCollapsed(false);
-    }
-  }, []);
+  useEffect(() => {
+    if (collapsed) setCreatedTag(null); // reset created tag to clear the renaming state
+  }, [collapsed]);

  return (
-    <Collapsible.Root className={styles.container} open={!collapsed}>
-      <CategoryDivider
-        className={styles.draggedOverHighlight}
-        label={t['com.affine.rootAppSidebar.tags']()}
-        setCollapsed={handleCollapsedChange}
-        collapsed={collapsed}
-      >
+    <CollapsibleSection
+      name="tags"
+      headerClassName={styles.draggedOverHighlight}
+      title={t['com.affine.rootAppSidebar.tags']()}
+      actions={
        <IconButton
          data-testid="explorer-bar-add-favorite-button"
          onClick={handleCreateNewFavoriteDoc}
@ -67,22 +57,21 @@ export const ExplorerTags = ({
        >
          <PlusIcon />
        </IconButton>
-      </CategoryDivider>
-      <Collapsible.Content>
-        <ExplorerTreeRoot placeholder={<RootEmpty />}>
-          {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>
+      }
+    >
+      <ExplorerTreeRoot placeholder={<RootEmpty />}>
+        {tags.map(tag => (
+          <ExplorerTagNode
+            key={tag.id}
+            tagId={tag.id}
+            reorderable={false}
+            location={{
+              at: 'explorer:tags:list',
+            }}
+            defaultRenaming={createdTag?.id === tag.id}
+          />
+        ))}
+      </ExplorerTreeRoot>
+    </CollapsibleSection>
  );
 };
--- 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
@ -1,10 +1,6 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';

-export const container = style({
-  marginTop: '8px',
-});
-
 export const draggedOverHighlight = style({
  selectors: {
    '&[data-dragged-over="true"]': {
--- a/packages/frontend/core/src/modules/explorer/views/tree/node.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/tree/node.css.ts
@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { createVar, keyframes, style } from '@vanilla-extract/css';
 export const levelIndent = createVar();
 export const linkItemRoot = style({
@ -41,6 +42,7 @@ export const itemContent = style({
  whiteSpace: 'nowrap',
  alignItems: 'center',
  flex: 1,
+  color: cssVarV2('text/primary'),
 });
 export const postfix = style({
  display: 'flex',
@ -59,7 +61,7 @@ export const postfix = style({
  },
 });
 export const icon = style({
-  color: cssVar('iconColor'),
+  color: cssVarV2('icon/primary'),
  fontSize: '20px',
 });
 export const collapsedIconContainer = style({
@ -70,7 +72,7 @@ export const collapsedIconContainer = style({
  justifyContent: 'center',
  borderRadius: '2px',
  transition: 'transform 0.2s',
-  color: 'inherit',
+  color: cssVarV2('icon/primary'),
  selectors: {
    '&[data-collapsed="true"]': {
      transform: 'rotate(-90deg)',
@ -131,6 +133,7 @@ const draggedOverAnimation = keyframes({
 });

 export const contentContainer = style({
+  marginTop: 2,
  paddingLeft: levelIndent,
  position: 'relative',
 });
--- a/packages/frontend/core/src/modules/index.ts
+++ b/packages/frontend/core/src/modules/index.ts
@ -5,6 +5,7 @@ import { configureCloudModule } from './cloud';
 import { configureCollectionModule } from './collection';
 import { configureDocLinksModule } from './doc-link';
 import { configureDocsSearchModule } from './docs-search';
+import { configureExplorerModule } from './explorer';
 import { configureFavoriteModule } from './favorite';
 import { configureFindInPageModule } from './find-in-page';
 import { configureNavigationModule } from './navigation';
@ -35,4 +36,5 @@ export function configureCommonModules(framework: Framework) {
  configureDocLinksModule(framework);
  configureOrganizeModule(framework);
  configureFavoriteModule(framework);
+  configureExplorerModule(framework);
 }