feat(core): init organize (#7456)

2026-02-13 04:48:53 +00:00 · 2024-07-26 04:35:31 +00:00
parent b26b0c3a22
commit 54da85ec62
140 changed files with 6257 additions and 2804 deletions
--- a/packages/frontend/core/src/modules/collection/services/collection.ts
+++ b/packages/frontend/core/src/modules/collection/services/collection.ts
@@ -50,6 +50,12 @@ export class CollectionService extends Service {
    []
  );

+  collection$(id: string) {
+    return this.collections$.map(collections => {
+      return collections.find(v => v.id === id);
+    });
+  }
+
  readonly collectionsTrash$ = LiveData.from(
    new Observable<DeletedCollection[]>(subscriber => {
      subscriber.next(this.collectionsTrashYArray?.toArray() ?? []);
--- a/packages/frontend/core/src/modules/docs-search/entities/docs-indexer.ts
+++ b/packages/frontend/core/src/modules/docs-search/entities/docs-indexer.ts
@@ -1,6 +1,7 @@
 import { DebugLogger } from '@affine/debug';
 import type { Job, JobQueue, WorkspaceService } from '@toeverything/infra';
 import {
+  DBService,
  Entity,
  IndexedDBIndexStorage,
  IndexedDBJobQueue,
@@ -68,6 +69,10 @@ export class DocsIndexer extends Entity {

  setupListener() {
    this.workspaceEngine.doc.storage.eventBus.on(event => {
+      if (DBService.isDBDocId(event.docId)) {
+        // skip db doc
+        return;
+      }
      if (event.clientId === this.workspaceEngine.doc.clientId) {
        const docId = normalizeDocId(event.docId);

--- a/packages/frontend/core/src/modules/explorer/README.md
+++ b/packages/frontend/core/src/modules/explorer/README.md
@@ -0,0 +1,3 @@
+# explorer
+
+file manager in app left sidebar
--- a/packages/frontend/core/src/modules/explorer/index.ts
+++ b/packages/frontend/core/src/modules/explorer/index.ts
@@ -0,0 +1,3 @@
+export { ExplorerCollections } from './views/sections/collections';
+export { ExplorerFavorites } from './views/sections/favorites';
+export { ExplorerOrganize } from './views/sections/organize';
--- a/packages/frontend/core/src/modules/explorer/views/nodes/collection/empty.css.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/collection/empty.css.tsx
@@ -0,0 +1,19 @@
+import { cssVar } from '@toeverything/theme';
+import { fallbackVar, style } from '@vanilla-extract/css';
+
+import { levelIndent } from '../../tree/node.css';
+
+export const noReferences = style({
+  fontSize: cssVar('fontSm'),
+  textAlign: 'left',
+  padding: '4px 0 4px 32px',
+  color: cssVar('black30'),
+  userSelect: 'none',
+  paddingLeft: `calc(${fallbackVar(levelIndent, '20px')} + 32px)`,
+  selectors: {
+    '&[data-dragged-over="true"]': {
+      background: cssVar('--affine-hover-color'),
+      borderRadius: '4px',
+    },
+  },
+});
--- a/packages/frontend/core/src/modules/explorer/views/nodes/collection/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/collection/empty.tsx
@@ -0,0 +1,24 @@
+import { type DropTargetDropEvent, useDropTarget } from '@affine/component';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import { useI18n } from '@affine/i18n';
+
+import * as styles from './empty.css';
+
+export const Empty = ({
+  onDrop,
+}: {
+  onDrop: (data: DropTargetDropEvent<AffineDNDData>) => void;
+}) => {
+  const { dropTargetRef } = useDropTarget(
+    () => ({
+      onDrop,
+    }),
+    [onDrop]
+  );
+  const t = useI18n();
+  return (
+    <div className={styles.noReferences} ref={dropTargetRef}>
+      {t['com.affine.collection.emptyCollection']()}
+    </div>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/nodes/collection/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/collection/index.tsx
@@ -0,0 +1,317 @@
+import {
+  AnimatedCollectionsIcon,
+  type DropTargetDropEvent,
+  type DropTargetOptions,
+  MenuIcon,
+  MenuItem,
+  toast,
+} from '@affine/component';
+import {
+  filterPage,
+  useEditCollection,
+} from '@affine/core/components/page-list';
+import { CollectionService } from '@affine/core/modules/collection';
+import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
+import { ShareDocsService } from '@affine/core/modules/share-doc';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import type { Collection } from '@affine/env/filter';
+import { PublicPageMode } from '@affine/graphql';
+import { useI18n } from '@affine/i18n';
+import { FilterMinusIcon } from '@blocksuite/icons/rc';
+import type { DocMeta } from '@blocksuite/store';
+import {
+  DocsService,
+  GlobalContextService,
+  LiveData,
+  useLiveData,
+  useService,
+  useServices,
+} from '@toeverything/infra';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { ExplorerTreeNode, type ExplorerTreeNodeDropEffect } from '../../tree';
+import { ExplorerDocNode } from '../doc';
+import type { GenericExplorerNode } from '../types';
+import { Empty } from './empty';
+import { useExplorerCollectionNodeOperations } from './operations';
+
+export const ExplorerCollectionNode = ({
+  collectionId,
+  onDrop,
+  location,
+  reorderable,
+  operations: additionalOperations,
+  canDrop,
+  dropEffect,
+}: {
+  collectionId: string;
+} & GenericExplorerNode) => {
+  const t = useI18n();
+  const { globalContextService } = useServices({
+    GlobalContextService,
+  });
+  const { open: openEditCollectionModal, node: editModal } =
+    useEditCollection();
+  const active =
+    useLiveData(globalContextService.globalContext.collectionId.$) ===
+    collectionId;
+  const [collapsed, setCollapsed] = useState(true);
+
+  const collectionService = useService(CollectionService);
+  const collection = useLiveData(collectionService.collection$(collectionId));
+
+  const dndData = useMemo(() => {
+    return {
+      draggable: {
+        entity: {
+          type: 'collection',
+          id: collectionId,
+        },
+        from: location,
+      },
+      dropTarget: {
+        at: 'explorer:doc',
+      },
+    } satisfies AffineDNDData;
+  }, [collectionId, location]);
+
+  const handleRename = useCallback(
+    (name: string) => {
+      if (collection) {
+        collectionService.updateCollection(collectionId, () => ({
+          ...collection,
+          name,
+        }));
+        toast(t['com.affine.toastMessage.rename']());
+      }
+    },
+    [collection, collectionId, collectionService, t]
+  );
+
+  const handleAddDocToCollection = useCallback(
+    (docId: string) => {
+      if (!collection) {
+        return;
+      }
+      if (collection.allowList.includes(docId)) {
+        toast(t['com.affine.collection.addPage.alreadyExists']());
+      } else {
+        collectionService.addPageToCollection(collection.id, docId);
+      }
+    },
+    [collection, collectionService, t]
+  );
+
+  const handleDropOnCollection = useCallback(
+    (data: DropTargetDropEvent<AffineDNDData>) => {
+      if (collection && data.treeInstruction?.type === 'make-child') {
+        if (data.source.data.entity?.type === 'doc') {
+          handleAddDocToCollection(data.source.data.entity.id);
+        }
+      } else {
+        onDrop?.(data);
+      }
+    },
+    [collection, onDrop, handleAddDocToCollection]
+  );
+
+  const handleDropEffectOnCollection = useCallback<ExplorerTreeNodeDropEffect>(
+    data => {
+      if (collection && data.treeInstruction?.type === 'make-child') {
+        if (data.source.data.entity?.type === 'doc') {
+          return 'link';
+        }
+      } else {
+        return dropEffect?.(data);
+      }
+      return;
+    },
+    [collection, dropEffect]
+  );
+
+  const handleDropOnPlaceholder = useCallback(
+    (data: DropTargetDropEvent<AffineDNDData>) => {
+      if (collection && data.source.data.entity?.type === 'doc') {
+        handleAddDocToCollection(data.source.data.entity.id);
+      }
+    },
+    [collection, handleAddDocToCollection]
+  );
+
+  const handleOpenCollapsed = useCallback(() => {
+    setCollapsed(false);
+  }, []);
+
+  const handleEditCollection = useCallback(() => {
+    if (!collection) {
+      return;
+    }
+    openEditCollectionModal(collection)
+      .then(collection => {
+        return collectionService.updateCollection(
+          collection.id,
+          () => collection
+        );
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }, [collection, collectionService, openEditCollectionModal]);
+
+  const collectionOperations = useExplorerCollectionNodeOperations(
+    collectionId,
+    handleOpenCollapsed,
+    handleEditCollection
+  );
+
+  const finalOperations = useMemo(() => {
+    if (additionalOperations) {
+      return [...additionalOperations, ...collectionOperations];
+    }
+    return collectionOperations;
+  }, [collectionOperations, additionalOperations]);
+
+  const handleCanDrop = useMemo<DropTargetOptions<AffineDNDData>['canDrop']>(
+    () => args => {
+      const entityType = args.source.data.entity?.type;
+      return args.treeInstruction?.type !== 'make-child'
+        ? ((typeof canDrop === 'function' ? canDrop(args) : canDrop) ?? true)
+        : entityType === 'doc';
+    },
+    [canDrop]
+  );
+
+  if (!collection) {
+    return null;
+  }
+
+  return (
+    <>
+      <ExplorerTreeNode
+        icon={({ draggedOver, className, treeInstruction }) => (
+          <AnimatedCollectionsIcon
+            className={className}
+            closed={!!draggedOver && treeInstruction?.type === 'make-child'}
+          />
+        )}
+        name={collection.name || t['Untitled']()}
+        dndData={dndData}
+        onDrop={handleDropOnCollection}
+        renameable
+        collapsed={collapsed}
+        setCollapsed={setCollapsed}
+        to={`/collection/${collection.id}`}
+        active={active}
+        canDrop={handleCanDrop}
+        reorderable={reorderable}
+        onRename={handleRename}
+        childrenPlaceholder={<Empty onDrop={handleDropOnPlaceholder} />}
+        operations={finalOperations}
+        dropEffect={handleDropEffectOnCollection}
+        data-testid={`explorer-collection-${collectionId}`}
+      >
+        <ExplorerCollectionNodeChildren collection={collection} />
+      </ExplorerTreeNode>
+      {editModal}
+    </>
+  );
+};
+
+const ExplorerCollectionNodeChildren = ({
+  collection,
+}: {
+  collection: Collection;
+}) => {
+  const t = useI18n();
+  const {
+    docsService,
+    favoriteItemsAdapter,
+    shareDocsService,
+    collectionService,
+  } = useServices({
+    DocsService,
+    FavoriteItemsAdapter,
+    ShareDocsService,
+    CollectionService,
+  });
+
+  useEffect(() => {
+    // TODO(@eyhn): loading & error UI
+    shareDocsService.shareDocs?.revalidate();
+  }, [shareDocsService]);
+
+  const docMetas = useLiveData(
+    useMemo(
+      () =>
+        LiveData.computed(get => {
+          return get(docsService.list.docs$).map(
+            doc => get(doc.meta$) as DocMeta
+          );
+        }),
+      [docsService]
+    )
+  );
+  const favourites = useLiveData(favoriteItemsAdapter.favorites$);
+  const allowList = useMemo(
+    () => new Set(collection.allowList),
+    [collection.allowList]
+  );
+  const shareDocs = useLiveData(shareDocsService.shareDocs?.list$);
+
+  const handleRemoveFromAllowList = useCallback(
+    (id: string) => {
+      collectionService.deletePageFromCollection(collection.id, id);
+      toast(t['com.affine.collection.removePage.success']());
+    },
+    [collection.id, collectionService, t]
+  );
+
+  const filtered = docMetas.filter(meta => {
+    if (meta.trash) return false;
+    const publicMode = shareDocs?.find(d => d.id === meta.id)?.mode;
+    const pageData = {
+      meta: meta as DocMeta,
+      publicMode:
+        publicMode === PublicPageMode.Edgeless
+          ? ('edgeless' as const)
+          : publicMode === PublicPageMode.Page
+            ? ('page' as const)
+            : undefined,
+      favorite: favourites.some(fav => fav.id === meta.id),
+    };
+    return filterPage(collection, pageData);
+  });
+
+  return filtered.map(doc => (
+    <ExplorerDocNode
+      key={doc.id}
+      docId={doc.id}
+      reorderable={false}
+      location={{
+        at: 'explorer:collection:filtered-docs',
+        collectionId: collection.id,
+      }}
+      operations={
+        allowList
+          ? [
+              {
+                index: 99,
+                view: (
+                  <MenuItem
+                    preFix={
+                      <MenuIcon>
+                        <FilterMinusIcon />
+                      </MenuIcon>
+                    }
+                    onClick={() => handleRemoveFromAllowList(doc.id)}
+                  >
+                    {t['Remove special filter']()}
+                  </MenuItem>
+                ),
+              },
+            ]
+          : []
+      }
+    />
+  ));
+};
--- a/packages/frontend/core/src/modules/explorer/views/nodes/collection/operations.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/collection/operations.tsx
@@ -0,0 +1,216 @@
+import {
+  IconButton,
+  MenuIcon,
+  MenuItem,
+  MenuSeparator,
+  useConfirmModal,
+} from '@affine/component';
+import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
+import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-collection-info';
+import { CollectionService } from '@affine/core/modules/collection';
+import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
+import { WorkbenchService } from '@affine/core/modules/workbench';
+import { useI18n } from '@affine/i18n';
+import {
+  DeleteIcon,
+  FavoritedIcon,
+  FavoriteIcon,
+  FilterIcon,
+  PlusIcon,
+  SplitViewIcon,
+} from '@blocksuite/icons/rc';
+import { DocsService, useLiveData, useServices } from '@toeverything/infra';
+import { useCallback, useMemo } from 'react';
+
+import type { NodeOperation } from '../../tree/types';
+
+export const useExplorerCollectionNodeOperations = (
+  collectionId: string,
+  onOpenCollapsed: () => void,
+  onOpenEdit: () => void
+): NodeOperation[] => {
+  const t = useI18n();
+  const { appSettings } = useAppSettingHelper();
+  const {
+    workbenchService,
+    docsService,
+    collectionService,
+    favoriteItemsAdapter,
+  } = useServices({
+    DocsService,
+    WorkbenchService,
+    CollectionService,
+    FavoriteItemsAdapter,
+  });
+  const deleteInfo = useDeleteCollectionInfo();
+
+  const favorite = useLiveData(
+    useMemo(
+      () => favoriteItemsAdapter.isFavorite$(collectionId, 'collection'),
+      [collectionId, favoriteItemsAdapter]
+    )
+  );
+  const { openConfirmModal } = useConfirmModal();
+
+  const createAndAddDocument = useCallback(() => {
+    const newDoc = docsService.createDoc();
+    collectionService.addPageToCollection(collectionId, newDoc.id);
+    workbenchService.workbench.openDoc(newDoc.id);
+    onOpenCollapsed();
+  }, [
+    collectionId,
+    collectionService,
+    docsService,
+    onOpenCollapsed,
+    workbenchService.workbench,
+  ]);
+
+  const handleToggleFavoritePage = useCallback(() => {
+    favoriteItemsAdapter.toggle(collectionId, 'collection');
+  }, [favoriteItemsAdapter, collectionId]);
+
+  const handleAddDocToCollection = useCallback(() => {
+    openConfirmModal({
+      title: t['com.affine.collection.add-doc.confirm.title'](),
+      description: t['com.affine.collection.add-doc.confirm.description'](),
+      cancelText: t['Cancel'](),
+      confirmText: t['Confirm'](),
+      confirmButtonOptions: {
+        type: 'primary',
+      },
+      onConfirm: createAndAddDocument,
+    });
+  }, [createAndAddDocument, openConfirmModal, t]);
+
+  const handleOpenInSplitView = useCallback(() => {
+    workbenchService.workbench.openCollection(collectionId, { at: 'beside' });
+  }, [collectionId, workbenchService.workbench]);
+
+  const handleDeleteCollection = useCallback(() => {
+    collectionService.deleteCollection(deleteInfo, collectionId);
+  }, [collectionId, collectionService, deleteInfo]);
+
+  const handleShowEdit = useCallback(() => {
+    onOpenEdit();
+  }, [onOpenEdit]);
+
+  return useMemo(
+    () => [
+      {
+        index: 0,
+        inline: true,
+        view: (
+          <IconButton
+            size="small"
+            type="plain"
+            onClick={handleAddDocToCollection}
+          >
+            <PlusIcon />
+          </IconButton>
+        ),
+      },
+      {
+        index: 99,
+        view: (
+          <MenuItem
+            preFix={
+              <MenuIcon>
+                <FilterIcon />
+              </MenuIcon>
+            }
+            onClick={handleShowEdit}
+          >
+            {t['com.affine.collection.menu.edit']()}
+          </MenuItem>
+        ),
+      },
+      {
+        index: 99,
+        view: (
+          <MenuItem
+            preFix={
+              <MenuIcon>
+                <PlusIcon />
+              </MenuIcon>
+            }
+            onClick={handleAddDocToCollection}
+          >
+            {t['New Page']()}
+          </MenuItem>
+        ),
+      },
+      {
+        index: 99,
+        view: (
+          <MenuItem
+            preFix={
+              <MenuIcon>
+                {favorite ? (
+                  <FavoritedIcon
+                    style={{ color: 'var(--affine-primary-color)' }}
+                  />
+                ) : (
+                  <FavoriteIcon />
+                )}
+              </MenuIcon>
+            }
+            onClick={handleToggleFavoritePage}
+          >
+            {favorite
+              ? t['com.affine.favoritePageOperation.remove']()
+              : t['com.affine.favoritePageOperation.add']()}
+          </MenuItem>
+        ),
+      },
+      ...(appSettings.enableMultiView
+        ? [
+            {
+              index: 99,
+              view: (
+                <MenuItem
+                  preFix={
+                    <MenuIcon>
+                      <SplitViewIcon />
+                    </MenuIcon>
+                  }
+                  onClick={handleOpenInSplitView}
+                >
+                  {t['com.affine.workbench.split-view.page-menu-open']()}
+                </MenuItem>
+              ),
+            },
+          ]
+        : []),
+      {
+        index: 9999,
+        view: <MenuSeparator key="menu-separator" />,
+      },
+      {
+        index: 10000,
+        view: (
+          <MenuItem
+            type={'danger'}
+            preFix={
+              <MenuIcon>
+                <DeleteIcon />
+              </MenuIcon>
+            }
+            onClick={handleDeleteCollection}
+          >
+            {t['Delete']()}
+          </MenuItem>
+        ),
+      },
+    ],
+    [
+      appSettings.enableMultiView,
+      favorite,
+      handleAddDocToCollection,
+      handleDeleteCollection,
+      handleOpenInSplitView,
+      handleShowEdit,
+      handleToggleFavoritePage,
+      t,
+    ]
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/nodes/doc/empty.css.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/doc/empty.css.tsx
@@ -0,0 +1,19 @@
+import { cssVar } from '@toeverything/theme';
+import { fallbackVar, style } from '@vanilla-extract/css';
+
+import { levelIndent } from '../../tree/node.css';
+
+export const noReferences = style({
+  fontSize: cssVar('fontSm'),
+  textAlign: 'left',
+  padding: '4px 0 4px 32px',
+  color: cssVar('black30'),
+  userSelect: 'none',
+  paddingLeft: `calc(${fallbackVar(levelIndent, '20px')} + 32px)`,
+  selectors: {
+    '&[data-dragged-over="true"]': {
+      background: cssVar('--affine-hover-color'),
+      borderRadius: '4px',
+    },
+  },
+});
--- a/packages/frontend/core/src/modules/explorer/views/nodes/doc/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/doc/empty.tsx
@@ -0,0 +1,24 @@
+import { type DropTargetDropEvent, useDropTarget } from '@affine/component';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import { useI18n } from '@affine/i18n';
+
+import * as styles from './empty.css';
+
+export const Empty = ({
+  onDrop,
+}: {
+  onDrop: (data: DropTargetDropEvent<AffineDNDData>) => void;
+}) => {
+  const { dropTargetRef } = useDropTarget(
+    () => ({
+      onDrop,
+    }),
+    [onDrop]
+  );
+  const t = useI18n();
+  return (
+    <div className={styles.noReferences} ref={dropTargetRef}>
+      {t['com.affine.rootAppSidebar.docs.no-subdoc']()}
+    </div>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/nodes/doc/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/doc/index.tsx
@@ -0,0 +1,250 @@
+import {
+  type DropTargetDropEvent,
+  type DropTargetOptions,
+  Loading,
+  toast,
+  Tooltip,
+} from '@affine/component';
+import { InfoModal } from '@affine/core/components/affine/page-properties';
+import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { DocsSearchService } from '@affine/core/modules/docs-search';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import { useI18n } from '@affine/i18n';
+import {
+  EdgelessIcon,
+  LinkedEdgelessIcon,
+  LinkedPageIcon,
+  PageIcon,
+} from '@blocksuite/icons/rc';
+import {
+  DocsService,
+  GlobalContextService,
+  LiveData,
+  useLiveData,
+  useServices,
+} from '@toeverything/infra';
+import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
+
+import { ExplorerTreeNode, type ExplorerTreeNodeDropEffect } from '../../tree';
+import type { GenericExplorerNode } from '../types';
+import { Empty } from './empty';
+import { useExplorerDocNodeOperations } from './operations';
+import * as styles from './styles.css';
+
+export const ExplorerDocNode = ({
+  docId,
+  onDrop,
+  location,
+  reorderable,
+  isLinked,
+  canDrop,
+  operations: additionalOperations,
+  dropEffect,
+}: {
+  docId: string;
+  isLinked?: boolean;
+} & GenericExplorerNode) => {
+  const t = useI18n();
+  const { docsSearchService, docsService, globalContextService } = useServices({
+    DocsSearchService,
+    DocsService,
+    GlobalContextService,
+  });
+  const active =
+    useLiveData(globalContextService.globalContext.docId.$) === docId;
+  const [collapsed, setCollapsed] = useState(true);
+
+  const docRecord = useLiveData(docsService.list.doc$(docId));
+  const docMode = useLiveData(docRecord?.mode$);
+  const docTitle = useLiveData(docRecord?.title$);
+  const isInTrash = useLiveData(docRecord?.trash$);
+
+  const Icon = useCallback(
+    ({ className }: { className?: string }) => {
+      return isLinked ? (
+        docMode === 'edgeless' ? (
+          <LinkedEdgelessIcon className={className} />
+        ) : (
+          <LinkedPageIcon className={className} />
+        )
+      ) : docMode === 'edgeless' ? (
+        <EdgelessIcon className={className} />
+      ) : (
+        <PageIcon className={className} />
+      );
+    },
+    [docMode, isLinked]
+  );
+
+  const children = useLiveData(
+    useMemo(
+      () => LiveData.from(docsSearchService.watchRefsFrom(docId), null),
+      [docsSearchService, docId]
+    )
+  );
+
+  const indexerLoading = useLiveData(
+    docsSearchService.indexer.status$.map(
+      v => v.remaining === undefined || v.remaining > 0
+    )
+  );
+  const [referencesLoading, setReferencesLoading] = useState(true);
+  useLayoutEffect(() => {
+    setReferencesLoading(
+      prev =>
+        prev &&
+        indexerLoading /* after loading becomes false, it never becomes true */
+    );
+  }, [indexerLoading]);
+
+  const dndData = useMemo(() => {
+    return {
+      draggable: {
+        entity: {
+          type: 'doc',
+          id: docId,
+        },
+        from: location,
+      },
+      dropTarget: {
+        at: 'explorer:doc',
+      },
+    } satisfies AffineDNDData;
+  }, [docId, location]);
+
+  const handleRename = useAsyncCallback(
+    async (newName: string) => {
+      await docsService.changeDocTitle(docId, newName);
+    },
+    [docId, docsService]
+  );
+
+  const handleDropOnDoc = useAsyncCallback(
+    async (data: DropTargetDropEvent<AffineDNDData>) => {
+      if (data.treeInstruction?.type === 'make-child') {
+        if (data.source.data.entity?.type === 'doc') {
+          await docsService.addLinkedDoc(docId, data.source.data.entity.id);
+        } else {
+          toast(t['com.affine.rootAppSidebar.doc.link-doc-only']());
+        }
+      } else {
+        onDrop?.(data);
+      }
+    },
+    [docId, docsService, onDrop, t]
+  );
+
+  const handleDropEffectOnDoc = useCallback<ExplorerTreeNodeDropEffect>(
+    data => {
+      if (data.treeInstruction?.type === 'make-child') {
+        if (data.source.data.entity?.type === 'doc') {
+          return 'link';
+        }
+      } else {
+        return dropEffect?.(data);
+      }
+      return;
+    },
+    [dropEffect]
+  );
+
+  const handleDropOnPlaceholder = useAsyncCallback(
+    async (data: DropTargetDropEvent<AffineDNDData>) => {
+      if (data.source.data.entity?.type === 'doc') {
+        // TODO(eyhn): timeout&error handling
+        await docsService.addLinkedDoc(docId, data.source.data.entity.id);
+      } else {
+        toast(t['com.affine.rootAppSidebar.doc.link-doc-only']());
+      }
+    },
+    [docId, docsService, t]
+  );
+
+  const handleCanDrop = useMemo<DropTargetOptions<AffineDNDData>['canDrop']>(
+    () => args => {
+      const entityType = args.source.data.entity?.type;
+      return args.treeInstruction?.type !== 'make-child'
+        ? ((typeof canDrop === 'function' ? canDrop(args) : canDrop) ?? true)
+        : entityType === 'doc';
+    },
+    [canDrop]
+  );
+
+  const [enableInfoModal, setEnableInfoModal] = useState(false);
+  const operations = useExplorerDocNodeOperations(
+    docId,
+    useMemo(
+      () => ({
+        openInfoModal: () => setEnableInfoModal(true),
+        openNodeCollapsed: () => setCollapsed(false),
+      }),
+      []
+    )
+  );
+
+  const finalOperations = useMemo(() => {
+    if (additionalOperations) {
+      return [...operations, ...additionalOperations];
+    }
+    return operations;
+  }, [additionalOperations, operations]);
+
+  if (isInTrash || !docRecord) {
+    return null;
+  }
+
+  return (
+    <>
+      <ExplorerTreeNode
+        icon={Icon}
+        name={docTitle || t['Untitled']()}
+        dndData={dndData}
+        onDrop={handleDropOnDoc}
+        renameable
+        collapsed={collapsed}
+        setCollapsed={setCollapsed}
+        canDrop={handleCanDrop}
+        to={`/${docId}`}
+        active={active}
+        postfix={
+          referencesLoading &&
+          !collapsed && (
+            <Tooltip
+              content={t['com.affine.rootAppSidebar.docs.references-loading']()}
+            >
+              <div className={styles.loadingIcon}>
+                <Loading />
+              </div>
+            </Tooltip>
+          )
+        }
+        reorderable={reorderable}
+        onRename={handleRename}
+        childrenPlaceholder={<Empty onDrop={handleDropOnPlaceholder} />}
+        operations={finalOperations}
+        dropEffect={handleDropEffectOnDoc}
+        data-testid={`explorer-doc-${docId}`}
+      >
+        {children?.map(child => (
+          <ExplorerDocNode
+            key={child.docId}
+            docId={child.docId}
+            reorderable={false}
+            location={{
+              at: 'explorer:doc:linked-docs',
+              docId,
+            }}
+            isLinked
+          />
+        ))}
+      </ExplorerTreeNode>
+      {enableInfoModal && (
+        <InfoModal
+          open={enableInfoModal}
+          onOpenChange={setEnableInfoModal}
+          docId={docId}
+        />
+      )}
+    </>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx
@@ -0,0 +1,200 @@
+import {
+  MenuIcon,
+  MenuItem,
+  MenuSeparator,
+  toast,
+  useConfirmModal,
+} from '@affine/component';
+import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
+import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
+import { WorkbenchService } from '@affine/core/modules/workbench';
+import { useI18n } from '@affine/i18n';
+import {
+  DeleteIcon,
+  FavoritedIcon,
+  FavoriteIcon,
+  InformationIcon,
+  LinkedPageIcon,
+  SplitViewIcon,
+} from '@blocksuite/icons/rc';
+import { DocsService, useLiveData, useServices } from '@toeverything/infra';
+import { useCallback, useMemo } from 'react';
+
+import type { NodeOperation } from '../../tree/types';
+
+export const useExplorerDocNodeOperations = (
+  docId: string,
+  options: {
+    openInfoModal: () => void;
+    openNodeCollapsed: () => void;
+  }
+): NodeOperation[] => {
+  const t = useI18n();
+  const { appSettings } = useAppSettingHelper();
+  const { workbenchService, docsService, favoriteItemsAdapter } = useServices({
+    DocsService,
+    WorkbenchService,
+    FavoriteItemsAdapter,
+  });
+  const { openConfirmModal } = useConfirmModal();
+
+  const docRecord = useLiveData(docsService.list.doc$(docId));
+
+  const favorite = useLiveData(
+    useMemo(
+      () => favoriteItemsAdapter.isFavorite$(docId, 'doc'),
+      [docId, favoriteItemsAdapter]
+    )
+  );
+
+  const handleMoveToTrash = useCallback(() => {
+    if (!docRecord) {
+      return;
+    }
+    openConfirmModal({
+      title: t['com.affine.moveToTrash.title'](),
+      description: t['com.affine.moveToTrash.confirmModal.description']({
+        title: docRecord.title$.value,
+      }),
+      confirmText: t['com.affine.moveToTrash.confirmModal.confirm'](),
+      cancelText: t['com.affine.moveToTrash.confirmModal.cancel'](),
+      confirmButtonOptions: {
+        type: 'error',
+      },
+      onConfirm() {
+        docRecord.moveToTrash();
+        toast(t['com.affine.toastMessage.movedTrash']());
+      },
+    });
+  }, [docRecord, openConfirmModal, t]);
+
+  const handleOpenInSplitView = useCallback(() => {
+    workbenchService.workbench.openDoc(docId, {
+      at: 'beside',
+    });
+  }, [docId, workbenchService]);
+
+  const handleAddLinkedPage = useAsyncCallback(async () => {
+    const newDoc = docsService.createDoc();
+    // TODO: handle timeout & error
+    await docsService.addLinkedDoc(docId, newDoc.id);
+    workbenchService.workbench.openDoc(newDoc.id);
+    options.openNodeCollapsed();
+  }, [docId, options, docsService, workbenchService.workbench]);
+
+  const handleToggleFavoriteDoc = useCallback(() => {
+    favoriteItemsAdapter.toggle(docId, 'doc');
+  }, [favoriteItemsAdapter, docId]);
+
+  return useMemo(
+    () => [
+      ...(runtimeConfig.enableInfoModal
+        ? [
+            {
+              index: 50,
+              view: (
+                <MenuItem
+                  preFix={
+                    <MenuIcon>
+                      <InformationIcon />
+                    </MenuIcon>
+                  }
+                  onClick={options.openInfoModal}
+                >
+                  {t['com.affine.page-properties.page-info.view']()}
+                </MenuItem>
+              ),
+            },
+          ]
+        : []),
+      {
+        index: 99,
+        view: (
+          <MenuItem
+            preFix={
+              <MenuIcon>
+                <LinkedPageIcon />
+              </MenuIcon>
+            }
+            onClick={handleAddLinkedPage}
+          >
+            {t['com.affine.page-operation.add-linked-page']()}
+          </MenuItem>
+        ),
+      },
+      ...(appSettings.enableMultiView
+        ? [
+            {
+              index: 100,
+              view: (
+                <MenuItem
+                  preFix={
+                    <MenuIcon>
+                      <SplitViewIcon />
+                    </MenuIcon>
+                  }
+                  onClick={handleOpenInSplitView}
+                >
+                  {t['com.affine.workbench.split-view.page-menu-open']()}
+                </MenuItem>
+              ),
+            },
+          ]
+        : []),
+      {
+        index: 199,
+        view: (
+          <MenuItem
+            preFix={
+              <MenuIcon>
+                {favorite ? (
+                  <FavoritedIcon
+                    style={{ color: 'var(--affine-primary-color)' }}
+                  />
+                ) : (
+                  <FavoriteIcon />
+                )}
+              </MenuIcon>
+            }
+            onClick={handleToggleFavoriteDoc}
+          >
+            {favorite
+              ? t['com.affine.favoritePageOperation.remove']()
+              : t['com.affine.favoritePageOperation.add']()}
+          </MenuItem>
+        ),
+      },
+      {
+        index: 9999,
+        view: <MenuSeparator key="menu-separator" />,
+      },
+      {
+        index: 10000,
+        view: (
+          <MenuItem
+            type={'danger'}
+            preFix={
+              <MenuIcon>
+                <DeleteIcon />
+              </MenuIcon>
+            }
+            onClick={handleMoveToTrash}
+          >
+            {t['com.affine.moveToTrash.title']()}
+          </MenuItem>
+        ),
+      },
+    ],
+    [
+      appSettings.enableMultiView,
+      favorite,
+      handleAddLinkedPage,
+      handleMoveToTrash,
+      handleOpenInSplitView,
+      handleToggleFavoriteDoc,
+      options.openInfoModal,
+      t,
+    ]
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/nodes/doc/styles.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/doc/styles.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const loadingIcon = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
--- a/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.css.ts
@@ -0,0 +1,44 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const content = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 6,
+  padding: '9px 20px 25px 21px',
+});
+export const iconWrapper = style({
+  width: 36,
+  height: 36,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  backgroundColor: cssVar('hoverColor'),
+});
+export const icon = style({
+  fontSize: 20,
+  color: cssVar('iconSecondary'),
+});
+export const message = style({
+  fontSize: cssVar('fontSm'),
+  textAlign: 'center',
+  color: cssVar('black30'),
+  userSelect: 'none',
+});
+
+export const newButton = style({
+  padding: '0 8px',
+  height: '28px',
+  fontSize: cssVar('fontXs'),
+});
+
+export const draggedOverHighlight = style({
+  selectors: {
+    '&[data-dragged-over="true"]': {
+      background: cssVar('--affine-hover-color'),
+      borderRadius: '4px',
+    },
+  },
+});
--- a/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/folder/empty.tsx
@@ -0,0 +1,53 @@
+import {
+  Button,
+  type DropTargetDropEvent,
+  type DropTargetOptions,
+  useDropTarget,
+} from '@affine/component';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import { useI18n } from '@affine/i18n';
+import { FolderIcon } from '@blocksuite/icons/rc';
+import clsx from 'clsx';
+
+import * as styles from './empty.css';
+
+export const FolderEmpty = ({
+  onClickCreate,
+  className,
+  canDrop,
+  onDrop,
+}: {
+  onClickCreate?: () => void;
+  onDrop?: (data: DropTargetDropEvent<AffineDNDData>) => void;
+  canDrop?: DropTargetOptions<AffineDNDData>['canDrop'];
+  className?: string;
+}) => {
+  const { dropTargetRef } = useDropTarget(
+    () => ({
+      onDrop,
+      canDrop,
+    }),
+    [onDrop, canDrop]
+  );
+
+  const t = useI18n();
+  return (
+    <div
+      className={clsx(styles.content, styles.draggedOverHighlight, className)}
+      ref={dropTargetRef}
+    >
+      <div className={styles.iconWrapper}>
+        <FolderIcon className={styles.icon} />
+      </div>
+      <div
+        data-testid="slider-bar-organize-empty-message"
+        className={styles.message}
+      >
+        {t['com.affine.rootAppSidebar.organize.empty-folder']()}
+      </div>
+      <Button className={styles.newButton} onClick={onClickCreate}>
+        {t['com.affine.rootAppSidebar.organize.empty-folder.add-pages']()}
+      </Button>
+    </div>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx
@@ -0,0 +1,612 @@
+import {
+  AnimatedFolderIcon,
+  type DropTargetDropEvent,
+  type DropTargetOptions,
+  IconButton,
+  MenuIcon,
+  MenuItem,
+  MenuSeparator,
+} from '@affine/component';
+import {
+  type FolderNode,
+  OrganizeService,
+} from '@affine/core/modules/organize';
+import { WorkbenchService } from '@affine/core/modules/workbench';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import { Unreachable } from '@affine/env/constant';
+import { useI18n } from '@affine/i18n';
+import {
+  DeleteIcon,
+  FolderIcon,
+  PlusIcon,
+  RemoveFolderIcon,
+} from '@blocksuite/icons/rc';
+import { DocsService, useLiveData, useServices } from '@toeverything/infra';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ExplorerTreeNode, type ExplorerTreeNodeDropEffect } from '../../tree';
+import type { NodeOperation } from '../../tree/types';
+import { ExplorerCollectionNode } from '../collection';
+import { ExplorerDocNode } from '../doc';
+import { ExplorerTagNode } from '../tag';
+import type { GenericExplorerNode } from '../types';
+import { FolderEmpty } from './empty';
+
+export const ExplorerFolderNode = ({
+  nodeId,
+  onDrop,
+  defaultRenaming,
+  operations,
+  location,
+  dropEffect,
+  canDrop,
+  reorderable,
+}: {
+  defaultRenaming?: boolean;
+  nodeId: string;
+  onDrop?: (data: DropTargetDropEvent<AffineDNDData>, node: FolderNode) => void;
+  operations?:
+    | NodeOperation[]
+    | ((type: string, node: FolderNode) => NodeOperation[]);
+} & Omit<GenericExplorerNode, 'operations'>) => {
+  const { organizeService } = useServices({ OrganizeService });
+  const node = useLiveData(organizeService.folderTree.folderNode$(nodeId));
+  const type = useLiveData(node?.type$);
+  const data = useLiveData(node?.data$);
+  const handleDrop = useCallback(
+    (data: DropTargetDropEvent<AffineDNDData>) => {
+      if (!node) {
+        return;
+      }
+      onDrop?.(data, node);
+    },
+    [node, onDrop]
+  );
+  const additionalOperations = useMemo(() => {
+    if (!type || !node) {
+      return;
+    }
+    if (typeof operations === 'function') {
+      return operations(type, node);
+    }
+    return operations;
+  }, [node, operations, type]);
+
+  if (!node) {
+    return;
+  }
+
+  if (type === 'folder') {
+    return (
+      <ExplorerFolderNodeFolder
+        node={node}
+        onDrop={handleDrop}
+        defaultRenaming={defaultRenaming}
+        operations={additionalOperations}
+        dropEffect={dropEffect}
+        reorderable={reorderable}
+        canDrop={canDrop}
+      />
+    );
+  } else if (type === 'doc') {
+    return (
+      data && (
+        <ExplorerDocNode
+          docId={data}
+          location={location}
+          onDrop={handleDrop}
+          reorderable={reorderable}
+          canDrop={canDrop}
+          dropEffect={dropEffect}
+          operations={additionalOperations}
+        />
+      )
+    );
+  } else if (type === 'collection') {
+    return (
+      data && (
+        <ExplorerCollectionNode
+          collectionId={data}
+          location={location}
+          onDrop={handleDrop}
+          canDrop={canDrop}
+          reorderable={reorderable}
+          dropEffect={dropEffect}
+          operations={additionalOperations}
+        />
+      )
+    );
+  } else if (type === 'tag') {
+    return (
+      data && (
+        <ExplorerTagNode
+          tagId={data}
+          location={location}
+          onDrop={handleDrop}
+          canDrop={canDrop}
+          reorderable
+          dropEffect={dropEffect}
+          operations={additionalOperations}
+        />
+      )
+    );
+  }
+
+  return;
+};
+
+export const ExplorerFolderNodeFolder = ({
+  node,
+  onDrop,
+  defaultRenaming,
+  location,
+  operations: additionalOperations,
+  canDrop,
+  dropEffect,
+  reorderable,
+}: {
+  defaultRenaming?: boolean;
+  node: FolderNode;
+} & GenericExplorerNode) => {
+  const t = useI18n();
+  const { docsService, workbenchService } = useServices({
+    DocsService,
+    WorkbenchService,
+  });
+  const name = useLiveData(node.name$);
+  const [collapsed, setCollapsed] = useState(true);
+  const [newFolderId, setNewFolderId] = useState<string | null>(null);
+
+  const handleDelete = useCallback(() => {
+    node.delete();
+  }, [node]);
+
+  const children = useLiveData(node.sortedChildren$);
+
+  const dndData = useMemo(() => {
+    if (!node.id) {
+      throw new Unreachable();
+    }
+    return {
+      draggable: {
+        entity: {
+          type: 'folder',
+          id: node.id,
+        },
+        from: location,
+      },
+      dropTarget: {
+        at: 'explorer:organize:folder',
+      },
+    } satisfies AffineDNDData;
+  }, [location, node.id]);
+
+  const handleRename = useCallback(
+    (newName: string) => {
+      node.rename(newName);
+    },
+    [node]
+  );
+
+  const handleDropOnFolder = useCallback(
+    (data: DropTargetDropEvent<AffineDNDData>) => {
+      if (data.treeInstruction?.type === 'make-child') {
+        if (data.source.data.entity?.type === 'folder') {
+          if (
+            node.id === data.source.data.entity.id ||
+            node.beChildOf(data.source.data.entity.id)
+          ) {
+            return;
+          }
+          node.moveHere(data.source.data.entity.id, node.indexAt('before'));
+        } else if (
+          data.source.data.from?.at === 'explorer:organize:folder-node'
+        ) {
+          node.moveHere(data.source.data.from.nodeId, node.indexAt('before'));
+        } else if (
+          data.source.data.entity?.type === 'collection' ||
+          data.source.data.entity?.type === 'doc' ||
+          data.source.data.entity?.type === 'tag'
+        ) {
+          node.createLink(
+            data.source.data.entity?.type,
+            data.source.data.entity.id,
+            node.indexAt('before')
+          );
+        }
+      } else {
+        onDrop?.(data);
+      }
+    },
+    [node, onDrop]
+  );
+
+  const handleDropEffect = useCallback<ExplorerTreeNodeDropEffect>(
+    data => {
+      if (data.treeInstruction?.type === 'make-child') {
+        if (data.source.data.entity?.type === 'folder') {
+          if (
+            node.id === data.source.data.entity.id ||
+            node.beChildOf(data.source.data.entity.id)
+          ) {
+            return;
+          }
+          return 'move';
+        } else if (
+          data.source.data.from?.at === 'explorer:organize:folder-node'
+        ) {
+          return 'move';
+        } else if (
+          data.source.data.entity?.type === 'collection' ||
+          data.source.data.entity?.type === 'doc' ||
+          data.source.data.entity?.type === 'tag'
+        ) {
+          return 'link';
+        }
+      } else {
+        return dropEffect?.(data);
+      }
+      return;
+    },
+    [dropEffect, node]
+  );
+
+  const handleDropOnPlaceholder = useCallback(
+    (data: DropTargetDropEvent<AffineDNDData>) => {
+      if (data.source.data.entity?.type === 'folder') {
+        if (
+          node.id === data.source.data.entity.id ||
+          node.beChildOf(data.source.data.entity.id)
+        ) {
+          return;
+        }
+        node.moveHere(data.source.data.entity.id, node.indexAt('before'));
+      } else if (
+        data.source.data.from?.at === 'explorer:organize:folder-node'
+      ) {
+        node.moveHere(data.source.data.from.nodeId, node.indexAt('before'));
+      } else if (
+        data.source.data.entity?.type === 'collection' ||
+        data.source.data.entity?.type === 'doc' ||
+        data.source.data.entity?.type === 'tag'
+      ) {
+        node.createLink(
+          data.source.data.entity?.type,
+          data.source.data.entity.id,
+          node.indexAt('before')
+        );
+      }
+    },
+    [node]
+  );
+
+  const handleDropOnChildren = useCallback(
+    (data: DropTargetDropEvent<AffineDNDData>, dropAtNode?: FolderNode) => {
+      if (!dropAtNode || !dropAtNode.id) {
+        return;
+      }
+      if (
+        data.treeInstruction?.type === 'reorder-above' ||
+        data.treeInstruction?.type === 'reorder-below'
+      ) {
+        const at =
+          data.treeInstruction?.type === 'reorder-below' ? 'after' : 'before';
+        if (data.source.data.entity?.type === 'folder') {
+          if (
+            node.id === data.source.data.entity.id ||
+            node.beChildOf(data.source.data.entity.id)
+          ) {
+            return;
+          }
+          node.moveHere(
+            data.source.data.entity.id,
+            node.indexAt(at, dropAtNode.id)
+          );
+        } else if (
+          data.source.data.from?.at === 'explorer:organize:folder-node'
+        ) {
+          node.moveHere(
+            data.source.data.from.nodeId,
+            node.indexAt(at, dropAtNode.id)
+          );
+        } else if (
+          data.source.data.entity?.type === 'collection' ||
+          data.source.data.entity?.type === 'doc' ||
+          data.source.data.entity?.type === 'tag'
+        ) {
+          node.createLink(
+            data.source.data.entity?.type,
+            data.source.data.entity.id,
+            node.indexAt(at, dropAtNode.id)
+          );
+        }
+      } else if (data.treeInstruction?.type === 'reparent') {
+        const currentLevel = data.treeInstruction.currentLevel;
+        const desiredLevel = data.treeInstruction.desiredLevel;
+        if (currentLevel === desiredLevel + 1) {
+          onDrop?.({
+            ...data,
+            treeInstruction: {
+              type: 'reorder-below',
+              currentLevel,
+              indentPerLevel: data.treeInstruction.indentPerLevel,
+            },
+          });
+          return;
+        } else {
+          onDrop?.({
+            ...data,
+            treeInstruction: {
+              ...data.treeInstruction,
+              currentLevel: currentLevel - 1,
+            },
+          });
+        }
+      }
+    },
+    [node, onDrop]
+  );
+
+  const handleDropEffectOnChildren = useCallback<ExplorerTreeNodeDropEffect>(
+    data => {
+      if (
+        data.treeInstruction?.type === 'reorder-above' ||
+        data.treeInstruction?.type === 'reorder-below'
+      ) {
+        if (data.source.data.entity?.type === 'folder') {
+          if (
+            node.id === data.source.data.entity.id ||
+            node.beChildOf(data.source.data.entity.id)
+          ) {
+            return;
+          }
+          return 'move';
+        } else if (
+          data.source.data.from?.at === 'explorer:organize:folder-node'
+        ) {
+          return 'move';
+        } else if (
+          data.source.data.entity?.type === 'collection' ||
+          data.source.data.entity?.type === 'doc' ||
+          data.source.data.entity?.type === 'tag'
+        ) {
+          return 'link';
+        }
+      } else if (data.treeInstruction?.type === 'reparent') {
+        const currentLevel = data.treeInstruction.currentLevel;
+        const desiredLevel = data.treeInstruction.desiredLevel;
+        if (currentLevel === desiredLevel + 1) {
+          dropEffect?.({
+            ...data,
+            treeInstruction: {
+              type: 'reorder-below',
+              currentLevel,
+              indentPerLevel: data.treeInstruction.indentPerLevel,
+            },
+          });
+          return;
+        } else {
+          dropEffect?.({
+            ...data,
+            treeInstruction: {
+              ...data.treeInstruction,
+              currentLevel: currentLevel - 1,
+            },
+          });
+        }
+      }
+      return;
+    },
+    [dropEffect, node]
+  );
+
+  const handleCanDrop = useMemo<DropTargetOptions<AffineDNDData>['canDrop']>(
+    () => args => {
+      const entityType = args.source.data.entity?.type;
+      if (args.treeInstruction && args.treeInstruction?.type !== 'make-child') {
+        return (
+          (typeof canDrop === 'function' ? canDrop(args) : canDrop) ?? true
+        );
+      }
+
+      if (args.source.data.entity?.type === 'folder') {
+        if (
+          node.id === args.source.data.entity.id ||
+          node.beChildOf(args.source.data.entity.id)
+        ) {
+          return false;
+        }
+        return true;
+      } else if (
+        args.source.data.from?.at === 'explorer:organize:folder-node'
+      ) {
+        return true;
+      } else if (
+        entityType === 'collection' ||
+        entityType === 'doc' ||
+        entityType === 'tag'
+      ) {
+        return true;
+      }
+      return false;
+    },
+    [canDrop, node]
+  );
+
+  const handleChildrenCanDrop = useMemo<
+    DropTargetOptions<AffineDNDData>['canDrop']
+  >(
+    () => args => {
+      const entityType = args.source.data.entity?.type;
+
+      if (args.source.data.entity?.type === 'folder') {
+        if (
+          node.id === args.source.data.entity.id ||
+          node.beChildOf(args.source.data.entity.id)
+        ) {
+          return false;
+        }
+        return true;
+      } else if (
+        args.source.data.from?.at === 'explorer:organize:folder-node'
+      ) {
+        return true;
+      } else if (
+        entityType === 'collection' ||
+        entityType === 'doc' ||
+        entityType === 'tag'
+      ) {
+        return true;
+      }
+      return false;
+    },
+    [node]
+  );
+
+  const handleNewDoc = useCallback(() => {
+    const newDoc = docsService.createDoc();
+    node.createLink('doc', newDoc.id, node.indexAt('before'));
+    workbenchService.workbench.openDoc(newDoc.id);
+    setCollapsed(false);
+  }, [docsService, node, workbenchService.workbench]);
+
+  const handleCreateSubfolder = useCallback(() => {
+    const newFolderId = node.createFolder(
+      t['com.affine.rootAppSidebar.organize.new-folders'](),
+      node.indexAt('before')
+    );
+    setCollapsed(false);
+    setNewFolderId(newFolderId);
+  }, [node, t]);
+
+  const folderOperations = useMemo(() => {
+    return [
+      {
+        index: 0,
+        inline: true,
+        view: (
+          <IconButton size="small" type="plain" onClick={handleNewDoc}>
+            <PlusIcon />
+          </IconButton>
+        ),
+      },
+      {
+        index: 100,
+        view: (
+          <MenuItem
+            preFix={
+              <MenuIcon>
+                <FolderIcon />
+              </MenuIcon>
+            }
+            onClick={handleCreateSubfolder}
+          >
+            {t['com.affine.rootAppSidebar.organize.folder.create-subfolder']()}
+          </MenuItem>
+        ),
+      },
+      {
+        index: 9999,
+        view: <MenuSeparator key="menu-separator" />,
+      },
+      {
+        index: 10000,
+        view: (
+          <MenuItem
+            type={'danger'}
+            preFix={
+              <MenuIcon>
+                <DeleteIcon />
+              </MenuIcon>
+            }
+            onClick={handleDelete}
+          >
+            {t['com.affine.rootAppSidebar.organize.delete']()}
+          </MenuItem>
+        ),
+      },
+    ];
+  }, [handleCreateSubfolder, handleDelete, handleNewDoc, t]);
+
+  const finalOperations = useMemo(() => {
+    if (additionalOperations) {
+      return [...additionalOperations, ...folderOperations];
+    }
+    return folderOperations;
+  }, [additionalOperations, folderOperations]);
+
+  const handleDeleteChildren = useCallback((node: FolderNode) => {
+    node.delete();
+  }, []);
+
+  const childrenOperations = useCallback(
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    (type: string, node: FolderNode) => {
+      if (type === 'doc' || type === 'collection' || type === 'tag') {
+        return [
+          {
+            index: 999,
+            view: (
+              <MenuItem
+                type={'danger'}
+                preFix={
+                  <MenuIcon>
+                    <RemoveFolderIcon />
+                  </MenuIcon>
+                }
+                onClick={() => handleDeleteChildren(node)}
+              >
+                {t['com.affine.rootAppSidebar.organize.delete-from-folder']()}
+              </MenuItem>
+            ),
+          },
+        ] satisfies NodeOperation[];
+      }
+      return [];
+    },
+    [handleDeleteChildren, t]
+  );
+
+  return (
+    <ExplorerTreeNode
+      icon={({ draggedOver, className, treeInstruction }) => (
+        <AnimatedFolderIcon
+          className={className}
+          closed={!!draggedOver && treeInstruction?.type === 'make-child'}
+        />
+      )}
+      name={name}
+      dndData={dndData}
+      onDrop={handleDropOnFolder}
+      defaultRenaming={defaultRenaming}
+      renameable
+      reorderable={reorderable}
+      collapsed={collapsed}
+      setCollapsed={setCollapsed}
+      onRename={handleRename}
+      operations={finalOperations}
+      canDrop={handleCanDrop}
+      childrenPlaceholder={
+        <FolderEmpty canDrop={handleCanDrop} onDrop={handleDropOnPlaceholder} />
+      }
+      dropEffect={handleDropEffect}
+      data-testid={`explorer-folder-${node.id}`}
+    >
+      {children.map(child => (
+        <ExplorerFolderNode
+          key={child.id}
+          nodeId={child.id as string}
+          defaultRenaming={child.id === newFolderId}
+          onDrop={handleDropOnChildren}
+          operations={childrenOperations}
+          dropEffect={handleDropEffectOnChildren}
+          canDrop={handleChildrenCanDrop}
+          location={{
+            at: 'explorer:organize:folder-node',
+            nodeId: child.id as string,
+          }}
+        />
+      ))}
+    </ExplorerTreeNode>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/nodes/tag/empty.css.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/tag/empty.css.tsx
@@ -0,0 +1,19 @@
+import { cssVar } from '@toeverything/theme';
+import { fallbackVar, style } from '@vanilla-extract/css';
+
+import { levelIndent } from '../../tree/node.css';
+
+export const noReferences = style({
+  fontSize: cssVar('fontSm'),
+  textAlign: 'left',
+  padding: '4px 0 4px 32px',
+  color: cssVar('black30'),
+  userSelect: 'none',
+  paddingLeft: `calc(${fallbackVar(levelIndent, '20px')} + 32px)`,
+  selectors: {
+    '&[data-dragged-over="true"]': {
+      background: cssVar('--affine-hover-color'),
+      borderRadius: '4px',
+    },
+  },
+});
--- a/packages/frontend/core/src/modules/explorer/views/nodes/tag/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/tag/empty.tsx
@@ -0,0 +1,24 @@
+import { type DropTargetDropEvent, useDropTarget } from '@affine/component';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import { useI18n } from '@affine/i18n';
+
+import * as styles from './empty.css';
+
+export const Empty = ({
+  onDrop,
+}: {
+  onDrop: (data: DropTargetDropEvent<AffineDNDData>) => void;
+}) => {
+  const { dropTargetRef } = useDropTarget(
+    () => ({
+      onDrop,
+    }),
+    [onDrop]
+  );
+  const t = useI18n();
+  return (
+    <div className={styles.noReferences} ref={dropTargetRef}>
+      {t['com.affine.rootAppSidebar.tags.no-doc']()}
+    </div>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/nodes/tag/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/tag/index.tsx
@@ -0,0 +1,196 @@
+import {
+  type DropTargetDropEvent,
+  type DropTargetOptions,
+  toast,
+} from '@affine/component';
+import { TagService } from '@affine/core/modules/tag';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import { useI18n } from '@affine/i18n';
+import {
+  GlobalContextService,
+  useLiveData,
+  useServices,
+} from '@toeverything/infra';
+import clsx from 'clsx';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ExplorerTreeNode, type ExplorerTreeNodeDropEffect } from '../../tree';
+import { ExplorerDocNode } from '../doc';
+import type { GenericExplorerNode } from '../types';
+import { Empty } from './empty';
+import { useExplorerTagNodeOperations } from './operations';
+import * as styles from './styles.css';
+
+export const ExplorerTagNode = ({
+  tagId,
+  onDrop,
+  location,
+  reorderable,
+  operations: additionalOperations,
+  dropEffect,
+  canDrop,
+  defaultRenaming,
+}: {
+  tagId: string;
+  defaultRenaming?: boolean;
+} & GenericExplorerNode) => {
+  const t = useI18n();
+  const { tagService, globalContextService } = useServices({
+    TagService,
+    GlobalContextService,
+  });
+  const active =
+    useLiveData(globalContextService.globalContext.tagId.$) === tagId;
+  const [collapsed, setCollapsed] = useState(true);
+
+  const tagRecord = useLiveData(tagService.tagList.tagByTagId$(tagId));
+  const tagColor = useLiveData(tagRecord?.color$);
+  const tagName = useLiveData(tagRecord?.value$);
+  const tagDocIds = useLiveData(tagRecord?.pageIds$);
+
+  const Icon = useCallback(
+    ({ className }: { className?: string }) => {
+      return (
+        <div className={clsx(styles.tagIconContainer, className)}>
+          <div
+            className={styles.tagIcon}
+            style={{
+              backgroundColor: tagColor,
+            }}
+          ></div>
+        </div>
+      );
+    },
+    [tagColor]
+  );
+
+  const dndData = useMemo(() => {
+    return {
+      draggable: {
+        entity: {
+          type: 'tag',
+          id: tagId,
+        },
+        from: location,
+      },
+      dropTarget: {
+        at: 'explorer:tag',
+      },
+    } satisfies AffineDNDData;
+  }, [location, tagId]);
+
+  const handleRename = useCallback(
+    (newName: string) => {
+      if (tagRecord) {
+        tagRecord.rename(newName);
+      }
+    },
+    [tagRecord]
+  );
+
+  const handleDropOnTag = useCallback(
+    (data: DropTargetDropEvent<AffineDNDData>) => {
+      if (data.treeInstruction?.type === 'make-child' && tagRecord) {
+        if (data.source.data.entity?.type === 'doc') {
+          tagRecord.tag(data.source.data.entity.id);
+        } else {
+          toast(t['com.affine.rootAppSidebar.tag.doc-only']());
+        }
+      } else {
+        onDrop?.(data);
+      }
+    },
+    [onDrop, t, tagRecord]
+  );
+
+  const handleDropEffectOnTag = useCallback<ExplorerTreeNodeDropEffect>(
+    data => {
+      if (data.treeInstruction?.type === 'make-child') {
+        if (data.source.data.entity?.type === 'doc') {
+          return 'link';
+        }
+      } else {
+        return dropEffect?.(data);
+      }
+      return;
+    },
+    [dropEffect]
+  );
+
+  const handleDropOnPlaceholder = useCallback(
+    (data: DropTargetDropEvent<AffineDNDData>) => {
+      if (tagRecord) {
+        if (data.source.data.entity?.type === 'doc') {
+          tagRecord.tag(data.source.data.entity.id);
+        } else {
+          toast(t['com.affine.rootAppSidebar.tag.doc-only']());
+        }
+      }
+    },
+    [t, tagRecord]
+  );
+
+  const handleCanDrop = useMemo<DropTargetOptions<AffineDNDData>['canDrop']>(
+    () => args => {
+      const entityType = args.source.data.entity?.type;
+      return args.treeInstruction?.type !== 'make-child'
+        ? ((typeof canDrop === 'function' ? canDrop(args) : canDrop) ?? true)
+        : entityType === 'doc';
+    },
+    [canDrop]
+  );
+
+  const operations = useExplorerTagNodeOperations(
+    tagId,
+    useMemo(
+      () => ({
+        openNodeCollapsed: () => setCollapsed(false),
+      }),
+      []
+    )
+  );
+
+  const finalOperations = useMemo(() => {
+    if (additionalOperations) {
+      return [...operations, ...additionalOperations];
+    }
+    return operations;
+  }, [additionalOperations, operations]);
+
+  if (!tagRecord) {
+    return null;
+  }
+
+  return (
+    <ExplorerTreeNode
+      icon={Icon}
+      name={tagName || t['Untitled']()}
+      dndData={dndData}
+      onDrop={handleDropOnTag}
+      renameable
+      collapsed={collapsed}
+      setCollapsed={setCollapsed}
+      to={`/tag/${tagId}`}
+      active={active}
+      defaultRenaming={defaultRenaming}
+      reorderable={reorderable}
+      onRename={handleRename}
+      canDrop={handleCanDrop}
+      childrenPlaceholder={<Empty onDrop={handleDropOnPlaceholder} />}
+      operations={finalOperations}
+      dropEffect={handleDropEffectOnTag}
+      data-testid={`explorer-tag-${tagId}`}
+    >
+      {tagDocIds?.map(docId => (
+        <ExplorerDocNode
+          key={docId}
+          docId={docId}
+          reorderable={false}
+          location={{
+            at: 'explorer:tags:docs',
+          }}
+        />
+      ))}
+    </ExplorerTreeNode>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/nodes/tag/operations.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/tag/operations.tsx
@@ -0,0 +1,115 @@
+import {
+  IconButton,
+  MenuIcon,
+  MenuItem,
+  MenuSeparator,
+  toast,
+} from '@affine/component';
+import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
+import { TagService } from '@affine/core/modules/tag';
+import { WorkbenchService } from '@affine/core/modules/workbench';
+import { useI18n } from '@affine/i18n';
+import { DeleteIcon, PlusIcon, SplitViewIcon } from '@blocksuite/icons/rc';
+import { DocsService, useLiveData, useServices } from '@toeverything/infra';
+import { useCallback, useMemo } from 'react';
+
+import type { NodeOperation } from '../../tree/types';
+
+export const useExplorerTagNodeOperations = (
+  tagId: string,
+  {
+    openNodeCollapsed,
+  }: {
+    openNodeCollapsed: () => void;
+  }
+): NodeOperation[] => {
+  const t = useI18n();
+  const { appSettings } = useAppSettingHelper();
+  const { docsService, workbenchService, tagService } = useServices({
+    WorkbenchService,
+    TagService,
+    DocsService,
+  });
+
+  const tagRecord = useLiveData(tagService.tagList.tagByTagId$(tagId));
+
+  const handleNewDoc = useCallback(() => {
+    if (tagRecord) {
+      const newDoc = docsService.createDoc();
+      tagRecord?.tag(newDoc.id);
+      workbenchService.workbench.openDoc(newDoc.id);
+      openNodeCollapsed();
+    }
+  }, [docsService, openNodeCollapsed, tagRecord, workbenchService.workbench]);
+
+  const handleMoveToTrash = useCallback(() => {
+    tagService.tagList.deleteTag(tagId);
+    toast(t['com.affine.tags.delete-tags.toast']());
+  }, [t, tagId, tagService.tagList]);
+
+  const handleOpenInSplitView = useCallback(() => {
+    workbenchService.workbench.openTag(tagId, {
+      at: 'beside',
+    });
+  }, [tagId, workbenchService]);
+
+  return useMemo(
+    () => [
+      {
+        index: 0,
+        inline: true,
+        view: (
+          <IconButton size="small" type="plain" onClick={handleNewDoc}>
+            <PlusIcon />
+          </IconButton>
+        ),
+      },
+      ...(appSettings.enableMultiView
+        ? [
+            {
+              index: 100,
+              view: (
+                <MenuItem
+                  preFix={
+                    <MenuIcon>
+                      <SplitViewIcon />
+                    </MenuIcon>
+                  }
+                  onClick={handleOpenInSplitView}
+                >
+                  {t['com.affine.workbench.split-view.page-menu-open']()}
+                </MenuItem>
+              ),
+            },
+          ]
+        : []),
+      {
+        index: 9999,
+        view: <MenuSeparator key="menu-separator" />,
+      },
+      {
+        index: 10000,
+        view: (
+          <MenuItem
+            type={'danger'}
+            preFix={
+              <MenuIcon>
+                <DeleteIcon />
+              </MenuIcon>
+            }
+            onClick={handleMoveToTrash}
+          >
+            {t['Delete']()}
+          </MenuItem>
+        ),
+      },
+    ],
+    [
+      appSettings.enableMultiView,
+      handleMoveToTrash,
+      handleNewDoc,
+      handleOpenInSplitView,
+      t,
+    ]
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/nodes/tag/styles.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/tag/styles.css.ts
@@ -0,0 +1,15 @@
+import { style } from '@vanilla-extract/css';
+
+export const tagIcon = style({
+  borderRadius: '50%',
+  height: '8px',
+  width: '8px',
+});
+
+export const tagIconContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '1em',
+  height: '1em',
+});
--- a/packages/frontend/core/src/modules/explorer/views/nodes/types.ts
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/types.ts
@@ -0,0 +1,49 @@
+import type { DropTargetDropEvent, DropTargetOptions } from '@affine/component';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+
+import type { ExplorerTreeNodeDropEffect } from '../tree';
+import type { NodeOperation } from '../tree/types';
+
+/**
+ * The interface for a generic explorer node.
+ *
+ * # Drop controlled area
+ *
+ * When an element is dragged over the node, there are two controlled areas depending on the mouse position.
+ *
+ * **Make Child Area**:
+ * When the mouse is in the center area of the node, it is in `Make Child Area`,
+ * `canDrop`, `onDrop`, and `dropEffect` are handled by the node itself.
+ *
+ * **Edge Area**:
+ * When the mouse is at the upper edge, lower edge, or front of a node, it is located in the `Edge Area`,
+ * and all drop events are handled by the node's parent, which callbacks in this interface.
+ *
+ * The controlled area can be distinguished by `data.treeInstruction.type` in the callback parameter.
+ */
+export interface GenericExplorerNode {
+  /**
+   * Tell the node and dropTarget where the node is located in the tree
+   */
+  location?: AffineDNDData['draggable']['from'];
+  /**
+   * Whether the node is allowed to reorder with its sibling nodes
+   */
+  reorderable?: boolean;
+  /**
+   * Additional operations to be displayed in the node
+   */
+  operations?: NodeOperation[];
+  /**
+   * Control whether drop is allowed, the callback will be called when dragging.
+   */
+  canDrop?: DropTargetOptions<AffineDNDData>['canDrop'];
+  /**
+   * Called when an element is dropped over the node.
+   */
+  onDrop?: (data: DropTargetDropEvent<AffineDNDData>) => void;
+  /**
+   * The drop effect to be used when an element is dropped over the node.
+   */
+  dropEffect?: ExplorerTreeNodeDropEffect;
+}
--- a/packages/frontend/core/src/modules/explorer/views/sections/collections/empty.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/sections/collections/empty.css.ts
@@ -0,0 +1,35 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const content = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 6,
+  padding: '9px 20px 25px 21px',
+});
+export const iconWrapper = style({
+  width: 36,
+  height: 36,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  backgroundColor: cssVar('hoverColor'),
+});
+export const icon = style({
+  fontSize: 20,
+  color: cssVar('iconSecondary'),
+});
+export const message = style({
+  fontSize: cssVar('fontSm'),
+  textAlign: 'center',
+  color: cssVar('black30'),
+  userSelect: 'none',
+});
+
+export const newButton = style({
+  padding: '0 8px',
+  height: '28px',
+  fontSize: cssVar('fontXs'),
+});
--- a/packages/frontend/core/src/modules/explorer/views/sections/collections/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/collections/empty.tsx
@@ -0,0 +1,30 @@
+import { Button } from '@affine/component';
+import { useI18n } from '@affine/i18n';
+import { ViewLayersIcon } from '@blocksuite/icons/rc';
+
+import * as styles from './empty.css';
+
+export const RootEmpty = ({
+  onClickCreate,
+}: {
+  onClickCreate?: () => void;
+}) => {
+  const t = useI18n();
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.iconWrapper}>
+        <ViewLayersIcon className={styles.icon} />
+      </div>
+      <div
+        data-testid="slider-bar-collection-empty-message"
+        className={styles.message}
+      >
+        {t['com.affine.collections.empty.message']()}
+      </div>
+      <Button className={styles.newButton} onClick={onClickCreate}>
+        {t['com.affine.collections.empty.new-collection-button']()}
+      </Button>
+    </div>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/sections/collections/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/collections/index.tsx
@@ -0,0 +1,72 @@
+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 { CollectionService } from '@affine/core/modules/collection';
+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 { useLiveData, useServices } from '@toeverything/infra';
+import { nanoid } from 'nanoid';
+import { useCallback } from 'react';
+
+import { ExplorerCollectionNode } from '../../nodes/collection';
+import { RootEmpty } from './empty';
+import * as styles from './styles.css';
+
+export const ExplorerCollections = () => {
+  const t = useI18n();
+  const { collectionService, workbenchService } = useServices({
+    CollectionService,
+    WorkbenchService,
+  });
+  const collections = useLiveData(collectionService.collections$);
+  const { node, open: openCreateCollectionModel } = useEditCollectionName({
+    title: t['com.affine.editCollection.createCollection'](),
+    showTips: true,
+  });
+
+  const handleCreateCollection = useCallback(() => {
+    openCreateCollectionModel('')
+      .then(name => {
+        const id = nanoid();
+        collectionService.addCollection(createEmptyCollection(id, { name }));
+        workbenchService.workbench.openCollection(id);
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }, [collectionService, openCreateCollectionModel, workbenchService]);
+
+  return (
+    <>
+      <div className={styles.container} data-testid="explorer-collections">
+        <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
+          <IconButton
+            data-testid="explorer-bar-add-collection-button"
+            onClick={handleCreateCollection}
+            size="small"
+          >
+            <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>
+      {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
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  marginTop: '16px',
+});
--- a/packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.css.ts
@@ -0,0 +1,36 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const content = style({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 6,
+  padding: '9px 20px 25px 21px',
+});
+export const iconWrapper = style({
+  width: 36,
+  height: 36,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  backgroundColor: cssVar('hoverColor'),
+});
+export const icon = style({
+  fontSize: 20,
+  color: cssVar('iconSecondary'),
+});
+export const message = style({
+  fontSize: cssVar('fontSm'),
+  textAlign: 'center',
+  color: cssVar('black30'),
+  userSelect: 'none',
+});
+
+export const newButton = style({
+  padding: '0 8px',
+  height: '28px',
+  fontSize: cssVar('fontXs'),
+});
--- a/packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.tsx
@@ -0,0 +1,61 @@
+import {
+  type DropTargetDropEvent,
+  type DropTargetOptions,
+  useDropTarget,
+} from '@affine/component';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import { useI18n } from '@affine/i18n';
+import { FolderIcon } from '@blocksuite/icons/rc';
+
+import { DropEffect, type ExplorerTreeNodeDropEffect } from '../../tree';
+import * as styles from './empty.css';
+
+export const RootEmpty = ({
+  onDrop,
+  canDrop,
+  dropEffect,
+}: {
+  onDrop?: (data: DropTargetDropEvent<AffineDNDData>) => void;
+  canDrop?: DropTargetOptions<AffineDNDData>['canDrop'];
+  dropEffect?: ExplorerTreeNodeDropEffect;
+}) => {
+  const t = useI18n();
+
+  const { dropTargetRef, draggedOverDraggable, draggedOverPosition } =
+    useDropTarget<AffineDNDData>(
+      () => ({
+        data: {
+          at: 'explorer:favorite:root',
+        },
+        onDrop: onDrop,
+        canDrop: canDrop,
+      }),
+      [onDrop, canDrop]
+    );
+
+  return (
+    <div className={styles.content} ref={dropTargetRef}>
+      <div className={styles.iconWrapper}>
+        <FolderIcon className={styles.icon} />
+      </div>
+      <div
+        data-testid="slider-bar-organize-empty-message"
+        className={styles.message}
+      >
+        {t['com.affine.rootAppSidebar.organize.empty']()}
+      </div>
+      {dropEffect && draggedOverDraggable && (
+        <DropEffect
+          position={{
+            x: draggedOverPosition.relativeX,
+            y: draggedOverPosition.relativeY,
+          }}
+          dropEffect={dropEffect({
+            source: draggedOverDraggable,
+            treeInstruction: null,
+          })}
+        />
+      )}
+    </div>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx
@@ -0,0 +1,286 @@
+import {
+  type DropTargetDropEvent,
+  type DropTargetOptions,
+  IconButton,
+  useDropTarget,
+} from '@affine/component';
+import { CategoryDivider } from '@affine/core/components/app-sidebar';
+import {
+  DropEffect,
+  type ExplorerTreeNodeDropEffect,
+  ExplorerTreeRoot,
+} from '@affine/core/modules/explorer/views/tree';
+import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
+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 { DocsService, useLiveData, useServices } from '@toeverything/infra';
+import { useCallback, useMemo } from 'react';
+
+import { ExplorerCollectionNode } from '../../nodes/collection';
+import { ExplorerDocNode } from '../../nodes/doc';
+import { RootEmpty } from './empty';
+import * as styles from './styles.css';
+
+export const ExplorerFavorites = () => {
+  const { favoriteItemsAdapter, docsService, workbenchService } = useServices({
+    FavoriteItemsAdapter,
+    DocsService,
+    WorkbenchService,
+  });
+
+  const docs = useLiveData(docsService.list.docs$);
+  const trashDocs = useLiveData(docsService.list.trashDocs$);
+
+  const favorites = useLiveData(
+    favoriteItemsAdapter.orderedFavorites$.map(favs => {
+      return favs.filter(fav => {
+        if (fav.type === 'doc') {
+          return (
+            docs.some(doc => doc.id === fav.id) &&
+            !trashDocs.some(doc => doc.id === fav.id)
+          );
+        }
+        return true;
+      });
+    })
+  );
+
+  const t = useI18n();
+
+  const handleDrop = useCallback(
+    (data: DropTargetDropEvent<AffineDNDData>) => {
+      if (
+        data.source.data.entity?.type === 'doc' ||
+        data.source.data.entity?.type === 'collection'
+      ) {
+        favoriteItemsAdapter.set(
+          data.source.data.entity.id,
+          data.source.data.entity?.type,
+          true
+        );
+      }
+    },
+    [favoriteItemsAdapter]
+  );
+
+  const handleDropEffect = useCallback<ExplorerTreeNodeDropEffect>(data => {
+    if (
+      data.source.data.entity?.type === 'doc' ||
+      data.source.data.entity?.type === 'collection'
+    ) {
+      return 'link';
+    }
+    return;
+  }, []);
+
+  const handleCanDrop = useMemo<DropTargetOptions<AffineDNDData>['canDrop']>(
+    () => data => {
+      return (
+        data.source.data.entity?.type === 'doc' ||
+        data.source.data.entity?.type === 'collection'
+      );
+    },
+    []
+  );
+
+  const handleCreateNewFavoriteDoc = useCallback(() => {
+    const newDoc = docsService.createDoc();
+    favoriteItemsAdapter.set(newDoc.id, 'doc', true);
+    workbenchService.workbench.openDoc(newDoc.id);
+  }, [docsService, favoriteItemsAdapter, workbenchService]);
+
+  const handleOnChildrenDrop = useCallback(
+    (
+      favorite: { id: string; type: 'doc' | 'collection' },
+      data: DropTargetDropEvent<AffineDNDData>
+    ) => {
+      if (
+        data.treeInstruction?.type === 'reorder-above' ||
+        data.treeInstruction?.type === 'reorder-below'
+      ) {
+        if (
+          data.source.data.from?.at === 'explorer:favorite:items' &&
+          (data.source.data.entity?.type === 'doc' ||
+            data.source.data.entity?.type === 'collection')
+        ) {
+          // is reordering
+          favoriteItemsAdapter.sorter.moveTo(
+            FavoriteItemsAdapter.getFavItemKey(
+              data.source.data.entity.id,
+              data.source.data.entity.type
+            ),
+            FavoriteItemsAdapter.getFavItemKey(favorite.id, favorite.type),
+            data.treeInstruction?.type === 'reorder-above' ? 'before' : 'after'
+          );
+        } else if (
+          data.source.data.entity?.type === 'doc' ||
+          data.source.data.entity?.type === 'collection'
+        ) {
+          favoriteItemsAdapter.set(
+            data.source.data.entity.id,
+            data.source.data.entity?.type,
+            true
+          );
+          favoriteItemsAdapter.sorter.moveTo(
+            FavoriteItemsAdapter.getFavItemKey(
+              data.source.data.entity.id,
+              data.source.data.entity.type
+            ),
+            FavoriteItemsAdapter.getFavItemKey(favorite.id, favorite.type),
+            data.treeInstruction?.type === 'reorder-above' ? 'before' : 'after'
+          );
+        }
+      } else {
+        return; // not supported
+      }
+    },
+    [favoriteItemsAdapter]
+  );
+
+  const handleChildrenDropEffect = useCallback<ExplorerTreeNodeDropEffect>(
+    data => {
+      if (
+        data.treeInstruction?.type === 'reorder-above' ||
+        data.treeInstruction?.type === 'reorder-below'
+      ) {
+        if (
+          data.source.data.from?.at === 'explorer:favorite:items' &&
+          (data.source.data.entity?.type === 'doc' ||
+            data.source.data.entity?.type === 'collection')
+        ) {
+          return 'move';
+        } else if (
+          data.source.data.entity?.type === 'doc' ||
+          data.source.data.entity?.type === 'collection'
+        ) {
+          return 'link';
+        }
+      }
+      return; // not supported
+    },
+    []
+  );
+
+  const handleChildrenCanDrop = useMemo<
+    DropTargetOptions<AffineDNDData>['canDrop']
+  >(
+    () => args =>
+      args.source.data.entity?.type === 'doc' ||
+      args.source.data.entity?.type === 'collection',
+    []
+  );
+
+  const { dropTargetRef, draggedOverDraggable, draggedOverPosition } =
+    useDropTarget<AffineDNDData>(
+      () => ({
+        data: {
+          at: 'explorer:favorite:root',
+        },
+        onDrop: handleDrop,
+        canDrop: handleCanDrop,
+      }),
+      [handleCanDrop, handleDrop]
+    );
+
+  return (
+    <div className={styles.container} data-testid="explorer-favorites">
+      <CategoryDivider
+        className={styles.draggedOverHighlight}
+        label={t['com.affine.rootAppSidebar.favorites']()}
+        ref={dropTargetRef}
+        data-testid="explorer-favorite-category-divider"
+      >
+        <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>
+      <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>
+  );
+};
+
+const childLocation = {
+  at: 'explorer:favorite:items' as const,
+};
+const ExplorerFavoriteNode = ({
+  favorite,
+  onDrop,
+  canDrop,
+  dropEffect,
+}: {
+  favorite: {
+    id: string;
+    type: 'collection' | 'doc';
+  };
+  canDrop?: DropTargetOptions<AffineDNDData>['canDrop'];
+  onDrop: (
+    favorite: {
+      id: string;
+      type: 'collection' | 'doc';
+    },
+    data: DropTargetDropEvent<AffineDNDData>
+  ) => void;
+  dropEffect: ExplorerTreeNodeDropEffect;
+}) => {
+  const handleOnChildrenDrop = useCallback(
+    (data: DropTargetDropEvent<AffineDNDData>) => {
+      onDrop(favorite, data);
+    },
+    [favorite, onDrop]
+  );
+  return favorite.type === 'doc' ? (
+    <ExplorerDocNode
+      key={favorite.id}
+      docId={favorite.id}
+      location={childLocation}
+      onDrop={handleOnChildrenDrop}
+      dropEffect={dropEffect}
+      canDrop={canDrop}
+    />
+  ) : (
+    <ExplorerCollectionNode
+      key={favorite.id}
+      collectionId={favorite.id}
+      location={childLocation}
+      onDrop={handleOnChildrenDrop}
+      dropEffect={dropEffect}
+      canDrop={canDrop}
+    />
+  );
+};
--- 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
@@ -0,0 +1,16 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  marginTop: '16px',
+});
+
+export const draggedOverHighlight = style({
+  position: 'relative',
+  selectors: {
+    '&[data-dragged-over="true"]': {
+      background: cssVar('--affine-hover-color'),
+      borderRadius: '4px',
+    },
+  },
+});
--- a/packages/frontend/core/src/modules/explorer/views/sections/organize/empty.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/sections/organize/empty.css.ts
@@ -0,0 +1,36 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const content = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 6,
+  padding: '9px 20px 25px 21px',
+  position: 'relative',
+});
+export const iconWrapper = style({
+  width: 36,
+  height: 36,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  backgroundColor: cssVar('hoverColor'),
+});
+export const icon = style({
+  fontSize: 20,
+  color: cssVar('iconSecondary'),
+});
+export const message = style({
+  fontSize: cssVar('fontSm'),
+  textAlign: 'center',
+  color: cssVar('black30'),
+  userSelect: 'none',
+});
+
+export const newButton = style({
+  padding: '0 8px',
+  height: '28px',
+  fontSize: cssVar('fontXs'),
+});
--- a/packages/frontend/core/src/modules/explorer/views/sections/organize/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/organize/empty.tsx
@@ -0,0 +1,30 @@
+import { Button } from '@affine/component';
+import { useI18n } from '@affine/i18n';
+import { FolderIcon } from '@blocksuite/icons/rc';
+
+import * as styles from './empty.css';
+
+export const RootEmpty = ({
+  onClickCreate,
+}: {
+  onClickCreate?: () => void;
+}) => {
+  const t = useI18n();
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.iconWrapper}>
+        <FolderIcon className={styles.icon} />
+      </div>
+      <div
+        data-testid="slider-bar-organize-empty-message"
+        className={styles.message}
+      >
+        {t['com.affine.rootAppSidebar.organize.empty']()}
+      </div>
+      <Button className={styles.newButton} onClick={onClickCreate}>
+        {t['com.affine.rootAppSidebar.organize.empty.new-folders-button']()}
+      </Button>
+    </div>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx
@@ -0,0 +1,125 @@
+import {
+  type DropTargetDropEvent,
+  type DropTargetOptions,
+  IconButton,
+  toast,
+} from '@affine/component';
+import { CategoryDivider } from '@affine/core/components/app-sidebar';
+import {
+  type ExplorerTreeNodeDropEffect,
+  ExplorerTreeRoot,
+} from '@affine/core/modules/explorer/views/tree';
+import {
+  type FolderNode,
+  OrganizeService,
+} from '@affine/core/modules/organize';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import { useI18n } from '@affine/i18n';
+import { PlusIcon } from '@blocksuite/icons/rc';
+import { useLiveData, useServices } from '@toeverything/infra';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ExplorerFolderNode } from '../../nodes/folder';
+import { RootEmpty } from './empty';
+import * as styles from './styles.css';
+
+export const ExplorerOrganize = () => {
+  const { organizeService } = useServices({ OrganizeService });
+  const [newFolderId, setNewFolderId] = useState<string | null>(null);
+
+  const t = useI18n();
+
+  const rootFolder = organizeService.folderTree.rootFolder;
+
+  const folders = useLiveData(rootFolder.sortedChildren$);
+
+  const handleCreateFolder = useCallback(() => {
+    const newFolderId = rootFolder.createFolder(
+      'New Folder',
+      rootFolder.indexAt('before')
+    );
+    setNewFolderId(newFolderId);
+  }, [rootFolder]);
+
+  const handleOnChildrenDrop = useCallback(
+    (data: DropTargetDropEvent<AffineDNDData>, node?: FolderNode) => {
+      if (!node || !node.id) {
+        return; // never happens
+      }
+      if (
+        data.treeInstruction?.type === 'reorder-above' ||
+        data.treeInstruction?.type === 'reorder-below'
+      ) {
+        const at =
+          data.treeInstruction?.type === 'reorder-below' ? 'after' : 'before';
+        if (data.source.data.entity?.type === 'folder') {
+          rootFolder.moveHere(
+            data.source.data.entity.id,
+            rootFolder.indexAt(at, node.id)
+          );
+        } else {
+          toast(t['com.affine.rootAppSidebar.organize.root-folder-only']());
+        }
+      } else {
+        return; // not supported
+      }
+    },
+    [rootFolder, t]
+  );
+
+  const handleChildrenDropEffect = useCallback<ExplorerTreeNodeDropEffect>(
+    data => {
+      if (
+        data.treeInstruction?.type === 'reorder-above' ||
+        data.treeInstruction?.type === 'reorder-below'
+      ) {
+        if (data.source.data.entity?.type === 'folder') {
+          return 'move';
+        }
+      } else {
+        return; // not supported
+      }
+      return;
+    },
+    []
+  );
+
+  const handleChildrenCanDrop = useMemo<
+    DropTargetOptions<AffineDNDData>['canDrop']
+  >(() => args => args.source.data.entity?.type === 'folder', []);
+
+  return (
+    <div className={styles.container}>
+      <CategoryDivider
+        className={styles.draggedOverHighlight}
+        label={t['com.affine.rootAppSidebar.organize']()}
+      >
+        <IconButton
+          data-testid="explorer-bar-add-organize-button"
+          onClick={handleCreateFolder}
+          size="small"
+        >
+          <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>
+  );
+};
--- 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
@@ -0,0 +1,15 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  marginTop: '16px',
+});
+
+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/tags/empty.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/sections/tags/empty.css.ts
@@ -0,0 +1,36 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const content = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 6,
+  padding: '9px 20px 25px 21px',
+  position: 'relative',
+});
+export const iconWrapper = style({
+  width: 36,
+  height: 36,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  backgroundColor: cssVar('hoverColor'),
+});
+export const icon = style({
+  fontSize: 20,
+  color: cssVar('iconSecondary'),
+});
+export const message = style({
+  fontSize: cssVar('fontSm'),
+  textAlign: 'center',
+  color: cssVar('black30'),
+  userSelect: 'none',
+});
+
+export const newButton = style({
+  padding: '0 8px',
+  height: '28px',
+  fontSize: cssVar('fontXs'),
+});
--- a/packages/frontend/core/src/modules/explorer/views/sections/tags/empty.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/tags/empty.tsx
@@ -0,0 +1,30 @@
+import { Button } from '@affine/component';
+import { useI18n } from '@affine/i18n';
+import { TagIcon } from '@blocksuite/icons/rc';
+
+import * as styles from './empty.css';
+
+export const RootEmpty = ({
+  onClickCreate,
+}: {
+  onClickCreate?: () => void;
+}) => {
+  const t = useI18n();
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.iconWrapper}>
+        <TagIcon className={styles.icon} />
+      </div>
+      <div
+        data-testid="slider-bar-tags-empty-message"
+        className={styles.message}
+      >
+        {t['com.affine.rootAppSidebar.tags.empty']()}
+      </div>
+      <Button className={styles.newButton} onClick={onClickCreate}>
+        {t['com.affine.rootAppSidebar.tags.empty.new-tag-button']()}
+      </Button>
+    </div>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
@@ -0,0 +1,64 @@
+import { IconButton } from '@affine/component';
+import { CategoryDivider } from '@affine/core/components/app-sidebar';
+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 { useLiveData, useServices } from '@toeverything/infra';
+import { useCallback, useState } from 'react';
+
+import { ExplorerTagNode } from '../../nodes/tag';
+import { RootEmpty } from './empty';
+import * as styles from './styles.css';
+
+export const ExplorerTags = () => {
+  const { tagService } = useServices({
+    TagService,
+  });
+  const [createdTag, setCreatedTag] = useState<Tag | null>(null);
+
+  const tags = useLiveData(tagService.tagList.tags$);
+
+  const t = useI18n();
+
+  const handleCreateNewFavoriteDoc = useCallback(() => {
+    const newTags = tagService.tagList.createTag(
+      t['com.affine.rootAppSidebar.tags.new-tag'](),
+      tagService.randomTagColor()
+    );
+    setCreatedTag(newTags);
+  }, [t, tagService]);
+
+  return (
+    <div className={styles.container}>
+      <CategoryDivider
+        className={styles.draggedOverHighlight}
+        label={t['com.affine.rootAppSidebar.tags']()}
+      >
+        <IconButton
+          data-testid="explorer-bar-add-favorite-button"
+          onClick={handleCreateNewFavoriteDoc}
+          size="small"
+        >
+          <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>
+  );
+};
--- 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
@@ -0,0 +1,15 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  marginTop: '16px',
+});
+
+export const draggedOverHighlight = style({
+  selectors: {
+    '&[data-dragged-over="true"]': {
+      background: cssVar('--affine-hover-color'),
+      borderRadius: '4px',
+    },
+  },
+});
--- a/packages/frontend/core/src/modules/explorer/views/tree/context.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/tree/context.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface ExplorerTreeContextData {
+  /**
+   * The level of the current tree node.
+   */
+  level: number;
+}
+
+export const ExplorerTreeContext =
+  React.createContext<ExplorerTreeContextData | null>(null);
--- a/packages/frontend/core/src/modules/explorer/views/tree/drop-effect.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/tree/drop-effect.css.ts
@@ -0,0 +1,25 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const dropEffect = style({
+  zIndex: 99999,
+  position: 'absolute',
+  left: '0px',
+  top: '-34px',
+  opacity: 0.9,
+  background: cssVar('--affine-background-primary-color'),
+  boxShadow: cssVar('--affine-toolbar-shadow'),
+  padding: '0px 4px',
+  fontSize: '12px',
+  borderRadius: '4px',
+  lineHeight: 1.4,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '4px',
+});
+
+export const icon = style({
+  width: '12px',
+  height: '12px',
+});
--- a/packages/frontend/core/src/modules/explorer/views/tree/drop-effect.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/tree/drop-effect.tsx
@@ -0,0 +1,36 @@
+import { useI18n } from '@affine/i18n';
+import { CopyIcon, LinkIcon, MoveToIcon } from '@blocksuite/icons/rc';
+
+import * as styles from './drop-effect.css';
+
+export const DropEffect = ({
+  dropEffect,
+  position,
+}: {
+  dropEffect?: 'copy' | 'move' | 'link' | undefined;
+  position: { x: number; y: number };
+}) => {
+  const t = useI18n();
+  if (dropEffect === undefined) return null;
+  return (
+    <div
+      className={styles.dropEffect}
+      style={{
+        transform: `translate(${position.x + 10}px, ${position.y + 10}px)`,
+      }}
+    >
+      {dropEffect === 'copy' ? (
+        <CopyIcon className={styles.icon} />
+      ) : dropEffect === 'move' ? (
+        <MoveToIcon className={styles.icon} />
+      ) : (
+        <LinkIcon className={styles.icon} />
+      )}
+      {dropEffect === 'copy'
+        ? t['com.affine.rootAppSidebar.explorer.drop-effect.copy']()
+        : dropEffect === 'move'
+          ? t['com.affine.rootAppSidebar.explorer.drop-effect.move']()
+          : t['com.affine.rootAppSidebar.explorer.drop-effect.link']()}
+    </div>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/tree/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/tree/index.tsx
@@ -0,0 +1,7 @@
+export { DropEffect } from './drop-effect';
+export type {
+  ExplorerTreeNodeDropEffect,
+  ExplorerTreeNodeDropEffectData,
+} from './node';
+export { ExplorerTreeNode } from './node';
+export { ExplorerTreeRoot } from './root';
--- a/packages/frontend/core/src/modules/explorer/views/tree/node.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/tree/node.css.ts
@@ -0,0 +1,166 @@
+import { cssVar } from '@toeverything/theme';
+import { createVar, keyframes, style } from '@vanilla-extract/css';
+export const levelIndent = createVar();
+export const linkItemRoot = style({
+  color: 'inherit',
+});
+export const itemRoot = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  borderRadius: '4px',
+  textAlign: 'left',
+  color: 'inherit',
+  width: '100%',
+  minHeight: '30px',
+  userSelect: 'none',
+  cursor: 'pointer',
+  padding: '0 4px',
+  fontSize: cssVar('fontSm'),
+  position: 'relative',
+  marginTop: '0px',
+  selectors: {
+    '&:hover': {
+      background: cssVar('hoverColor'),
+    },
+    '&[data-active="true"]': {
+      background: cssVar('hoverColor'),
+    },
+    '&[data-disabled="true"]': {
+      cursor: 'default',
+      color: cssVar('textSecondaryColor'),
+      pointerEvents: 'none',
+    },
+    '&[data-dragging="true"]': {
+      opacity: 0.5,
+    },
+  },
+});
+export const itemContent = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  display: 'flex',
+  alignItems: 'center',
+  flex: 1,
+});
+export const postfix = style({
+  display: 'flex',
+  alignItems: 'center',
+  right: '4px',
+  position: 'absolute',
+  opacity: 0,
+  pointerEvents: 'none',
+  selectors: {
+    [`${itemRoot}:hover &`]: {
+      justifySelf: 'flex-end',
+      position: 'initial',
+      opacity: 1,
+      pointerEvents: 'all',
+    },
+  },
+});
+export const icon = style({
+  color: cssVar('iconColor'),
+  fontSize: '20px',
+});
+export const collapsedIconContainer = style({
+  width: '16px',
+  height: '16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '2px',
+  transition: 'transform 0.2s',
+  color: 'inherit',
+  selectors: {
+    '&[data-collapsed="true"]': {
+      transform: 'rotate(-90deg)',
+    },
+    '&[data-disabled="true"]': {
+      opacity: 0.3,
+      pointerEvents: 'none',
+    },
+    '&:hover': {
+      background: cssVar('hoverColor'),
+    },
+  },
+});
+export const iconsContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  width: '44px',
+  flexShrink: 0,
+});
+export const collapsedIcon = style({
+  transition: 'transform 0.2s ease-in-out',
+  selectors: {
+    '&[data-collapsed="true"]': {
+      transform: 'rotate(-90deg)',
+    },
+  },
+});
+
+export const collapseContentPlaceholder = style({
+  display: 'none',
+  selectors: {
+    '&:only-child': {
+      display: 'initial',
+    },
+  },
+});
+
+const draggedOverAnimation = keyframes({
+  '0%': {
+    opacity: 1,
+  },
+  '60%': {
+    opacity: 1,
+  },
+  '70%': {
+    opacity: 0,
+  },
+  '80%': {
+    opacity: 1,
+  },
+  '90%': {
+    opacity: 0,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
+export const contentContainer = style({
+  paddingLeft: levelIndent,
+  position: 'relative',
+});
+
+export const draggingContainer = style({
+  background: cssVar('--affine-background-primary-color'),
+  boxShadow: cssVar('--affine-toolbar-shadow'),
+  width: '200px',
+  borderRadius: '6px',
+});
+
+export const draggedOverEffect = style({
+  position: 'relative',
+  selectors: {
+    '&[data-tree-instruction="make-child"][data-self-dragged-over="false"]:after':
+      {
+        display: 'block',
+        content: '""',
+        position: 'absolute',
+        zIndex: 1,
+        background: cssVar('--affine-hover-color'),
+        left: levelIndent,
+        top: 0,
+        width: `calc(100% - ${levelIndent})`,
+        height: '100%',
+      },
+    '&[data-tree-instruction="make-child"][data-self-dragged-over="false"][data-open="false"]:after':
+      {
+        animation: `${draggedOverAnimation} 1s infinite linear`,
+      },
+  },
+});
--- a/packages/frontend/core/src/modules/explorer/views/tree/node.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/tree/node.tsx
@@ -0,0 +1,422 @@
+import {
+  DropIndicator,
+  type DropTargetDropEvent,
+  type DropTargetOptions,
+  type DropTargetTreeInstruction,
+  IconButton,
+  Menu,
+  MenuIcon,
+  MenuItem,
+  useDraggable,
+  useDropTarget,
+} from '@affine/component';
+import { RenameModal } from '@affine/component/rename-modal';
+import { WorkbenchLink } from '@affine/core/modules/workbench';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import { useI18n } from '@affine/i18n';
+import {
+  ArrowDownSmallIcon,
+  EditIcon,
+  MoreHorizontalIcon,
+} from '@blocksuite/icons/rc';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import clsx from 'clsx';
+import type { To } from 'history';
+import {
+  type Dispatch,
+  Fragment,
+  type RefAttributes,
+  type SetStateAction,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { ExplorerTreeContext } from './context';
+import { DropEffect } from './drop-effect';
+import * as styles from './node.css';
+import type { NodeOperation } from './types';
+
+export type ExplorerTreeNodeDropEffectData = {
+  source: { data: AffineDNDData['draggable'] };
+  treeInstruction: DropTargetTreeInstruction | null;
+};
+export type ExplorerTreeNodeDropEffect = (
+  data: ExplorerTreeNodeDropEffectData
+) => 'copy' | 'move' | 'link' | undefined;
+
+export const ExplorerTreeNode = ({
+  children,
+  icon: Icon,
+  name,
+  onClick,
+  to,
+  active,
+  defaultRenaming,
+  renameable,
+  onRename,
+  disabled,
+  collapsed,
+  setCollapsed,
+  canDrop,
+  reorderable = true,
+  operations = [],
+  postfix,
+  childrenOperations = [],
+  childrenPlaceholder,
+  linkComponent: LinkComponent = WorkbenchLink,
+  dndData,
+  onDrop,
+  dropEffect,
+  ...otherProps
+}: {
+  name?: string;
+  icon?: React.ComponentType<{
+    className?: string;
+    draggedOver?: boolean;
+    treeInstruction?: DropTargetTreeInstruction | null;
+  }>;
+  children?: React.ReactNode;
+  active?: boolean;
+  reorderable?: boolean;
+  defaultRenaming?: boolean;
+  collapsed: boolean;
+  setCollapsed: Dispatch<SetStateAction<boolean>>;
+  renameable?: boolean;
+  onRename?: (newName: string) => void;
+  disabled?: boolean;
+  onClick?: () => void;
+  to?: To;
+  postfix?: React.ReactNode;
+  canDrop?: DropTargetOptions<AffineDNDData>['canDrop'];
+  operations?: NodeOperation[];
+  childrenOperations?: NodeOperation[];
+  childrenPlaceholder?: React.ReactNode;
+  linkComponent?: React.ComponentType<
+    React.PropsWithChildren<{ to: To; className?: string }> & RefAttributes<any>
+  >;
+  dndData?: AffineDNDData;
+  onDrop?: (data: DropTargetDropEvent<AffineDNDData>) => void;
+  dropEffect?: ExplorerTreeNodeDropEffect;
+} & { [key in `data-${string}`]?: any }) => {
+  const t = useI18n();
+  const cid = useId();
+  const context = useContext(ExplorerTreeContext);
+  const level = context?.level ?? 0;
+  // If no onClick or to is provided, clicking on the node will toggle the collapse state
+  const clickForCollapse = !onClick && !to && !disabled;
+  const [childCount, setChildCount] = useState(0);
+  const [renaming, setRenaming] = useState(defaultRenaming);
+  const [lastInGroup, setLastInGroup] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const { dragRef, dragging, CustomDragPreview } = useDraggable<
+    AffineDNDData & { draggable: { __cid: string } }
+  >(
+    () => ({
+      data: { ...dndData?.draggable, __cid: cid },
+      dragPreviewPosition: 'pointer-outside',
+    }),
+    [cid, dndData]
+  );
+  const handleCanDrop = useMemo<DropTargetOptions<AffineDNDData>['canDrop']>(
+    () => args => {
+      if (!reorderable && args.treeInstruction?.type !== 'make-child') {
+        return false;
+      }
+      return (typeof canDrop === 'function' ? canDrop(args) : canDrop) ?? true;
+    },
+    [canDrop, reorderable]
+  );
+  const {
+    dropTargetRef,
+    treeInstruction,
+    draggedOverDraggable,
+    draggedOver,
+    draggedOverPosition,
+  } = useDropTarget<AffineDNDData & { draggable: { __cid: string } }>(
+    () => ({
+      data: dndData?.dropTarget,
+      treeInstruction: {
+        currentLevel: level,
+        indentPerLevel: 20,
+        mode: !collapsed
+          ? 'expanded'
+          : lastInGroup
+            ? 'last-in-group'
+            : 'standard',
+        block:
+          reorderable === false
+            ? ['reorder-above', 'reorder-below', 'reparent']
+            : [],
+      },
+      onDrop: data => {
+        if (
+          data.source.data.__cid === cid &&
+          data.treeInstruction?.type !== 'reparent'
+        ) {
+          // Do nothing if dropped on self
+          return;
+        }
+        onDrop?.(data);
+        if (data.treeInstruction?.type === 'make-child') {
+          setCollapsed(false);
+        }
+      },
+      canDrop: handleCanDrop,
+    }),
+    [
+      dndData?.dropTarget,
+      level,
+      collapsed,
+      lastInGroup,
+      reorderable,
+      handleCanDrop,
+      cid,
+      onDrop,
+      setCollapsed,
+    ]
+  );
+  const isSelfDraggedOver = draggedOverDraggable?.data.__cid === cid;
+
+  useEffect(() => {
+    if (
+      draggedOver &&
+      treeInstruction?.type === 'make-child' &&
+      !isSelfDraggedOver
+    ) {
+      // auto expand when dragged over
+      const timeout = setTimeout(() => {
+        setCollapsed(false);
+      }, 1000);
+      return () => clearTimeout(timeout);
+    }
+    return;
+  }, [draggedOver, isSelfDraggedOver, setCollapsed, treeInstruction?.type]);
+
+  useEffect(() => {
+    if (rootRef.current) {
+      const parent = rootRef.current.parentElement;
+      if (parent) {
+        const updateLastInGroup = () => {
+          setLastInGroup(parent?.lastElementChild === rootRef.current);
+        };
+        updateLastInGroup();
+        const observer = new MutationObserver(updateLastInGroup);
+        observer.observe(parent, {
+          childList: true,
+        });
+        return () => observer.disconnect();
+      }
+    }
+    return;
+  }, []);
+
+  const presetOperations = useMemo(
+    () =>
+      (
+        [
+          renameable
+            ? {
+                index: 0,
+                view: (
+                  <MenuItem
+                    key={'explorer-tree-rename'}
+                    type={'default'}
+                    preFix={
+                      <MenuIcon>
+                        <EditIcon />
+                      </MenuIcon>
+                    }
+                    onClick={() => setRenaming(true)}
+                  >
+                    {t['com.affine.menu.rename']()}
+                  </MenuItem>
+                ),
+              }
+            : null,
+        ] as (NodeOperation | null)[]
+      ).filter((t): t is NodeOperation => t !== null),
+    [renameable, t]
+  );
+
+  const { menuOperations, inlineOperations } = useMemo(() => {
+    const sorted = [...presetOperations, ...operations].sort(
+      (a, b) => a.index - b.index
+    );
+    return {
+      menuOperations: sorted.filter(({ inline }) => !inline),
+      inlineOperations: sorted.filter(({ inline }) => !!inline),
+    };
+  }, [presetOperations, operations]);
+
+  const contextValue = useMemo(() => {
+    return {
+      operations: childrenOperations,
+      level: (context?.level ?? 0) + 1,
+      registerChild: () => {
+        setChildCount(c => c + 1);
+        return () => setChildCount(c => c - 1);
+      },
+    };
+  }, [childrenOperations, context?.level]);
+
+  const handleCollapsedChange = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault(); // for links
+      setCollapsed(!collapsed);
+    },
+    [collapsed, setCollapsed]
+  );
+
+  const handleRename = useCallback(
+    (newName: string) => {
+      onRename?.(newName);
+    },
+    [onRename]
+  );
+
+  const handleClick = useCallback(() => {
+    if (!clickForCollapse) {
+      onClick?.();
+    } else {
+      setCollapsed(prev => !prev);
+    }
+  }, [clickForCollapse, onClick, setCollapsed]);
+
+  const content = (
+    <div
+      onClick={handleClick}
+      className={styles.itemRoot}
+      data-active={active}
+      data-disabled={disabled}
+    >
+      {Icon && (
+        <div className={styles.iconsContainer}>
+          <div
+            data-disabled={disabled}
+            onClick={handleCollapsedChange}
+            data-testid="explorer-collapsed-button"
+            className={styles.collapsedIconContainer}
+          >
+            <ArrowDownSmallIcon
+              className={styles.collapsedIcon}
+              data-collapsed={collapsed !== false}
+            />
+          </div>
+          <Icon
+            className={styles.icon}
+            draggedOver={draggedOver && !isSelfDraggedOver}
+            treeInstruction={treeInstruction}
+          />
+        </div>
+      )}
+      {renameable && renaming && (
+        <RenameModal
+          open={renaming}
+          onOpenChange={setRenaming}
+          onRename={handleRename}
+          currentName={name ?? ''}
+        />
+      )}
+
+      <div className={styles.itemContent}>{name}</div>
+
+      {postfix}
+      <div
+        className={styles.postfix}
+        onClick={e => {
+          // prevent jump to page
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        {inlineOperations.map(({ view }, index) => (
+          <Fragment key={index}>{view}</Fragment>
+        ))}
+        {menuOperations.length > 0 && (
+          <Menu
+            items={menuOperations.map(({ view }, index) => (
+              <Fragment key={index}>{view}</Fragment>
+            ))}
+          >
+            <IconButton
+              size="small"
+              type="plain"
+              data-testid="explorer-tree-node-operation-button"
+              style={{ marginLeft: 4 }}
+            >
+              <MoreHorizontalIcon />
+            </IconButton>
+          </Menu>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <Collapsible.Root
+      open={!collapsed}
+      onOpenChange={setCollapsed}
+      style={assignInlineVars({
+        [styles.levelIndent]: `${level * 20}px`,
+      })}
+      ref={rootRef}
+      {...otherProps}
+    >
+      <div
+        className={clsx(styles.contentContainer, styles.draggedOverEffect)}
+        data-open={!collapsed}
+        data-self-dragged-over={isSelfDraggedOver}
+        ref={dropTargetRef}
+      >
+        {to ? (
+          <LinkComponent to={to} className={styles.linkItemRoot} ref={dragRef}>
+            {content}
+          </LinkComponent>
+        ) : (
+          <div ref={dragRef}>{content}</div>
+        )}
+        <CustomDragPreview>
+          <div className={styles.draggingContainer}>{content}</div>
+        </CustomDragPreview>
+        {treeInstruction &&
+          // Do not show drop indicator for self dragged over
+          !(treeInstruction.type !== 'reparent' && isSelfDraggedOver) &&
+          treeInstruction.type !== 'instruction-blocked' && (
+            <DropIndicator instruction={treeInstruction} />
+          )}
+        {draggedOver &&
+          dropEffect &&
+          draggedOverPosition &&
+          !isSelfDraggedOver &&
+          draggedOverDraggable && (
+            <DropEffect
+              dropEffect={dropEffect({
+                source: draggedOverDraggable,
+                treeInstruction: treeInstruction,
+              })}
+              position={{
+                x: draggedOverPosition.relativeX,
+                y: draggedOverPosition.relativeY,
+              }}
+            />
+          )}
+      </div>
+      <Collapsible.Content style={{ display: dragging ? 'none' : undefined }}>
+        {/* For lastInGroup check, the placeholder must be placed above all children in the dom */}
+        <div className={styles.collapseContentPlaceholder}>
+          {childCount === 0 && !collapsed && childrenPlaceholder}
+        </div>
+        <ExplorerTreeContext.Provider value={contextValue}>
+          {collapsed ? null : children}
+        </ExplorerTreeContext.Provider>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/tree/root.css.ts
+++ b/packages/frontend/core/src/modules/explorer/views/tree/root.css.ts
@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+
+export const placeholder = style({
+  display: 'none',
+  selectors: {
+    '&:only-child': {
+      display: 'initial',
+    },
+  },
+});
--- a/packages/frontend/core/src/modules/explorer/views/tree/root.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/tree/root.tsx
@@ -0,0 +1,41 @@
+import { useMemo, useState } from 'react';
+
+import { ExplorerTreeContext } from './context';
+import * as styles from './root.css';
+import type { NodeOperation } from './types';
+
+export const ExplorerTreeRoot = ({
+  children,
+  childrenOperations = [],
+  placeholder,
+}: {
+  children?: React.ReactNode;
+  childrenOperations?: NodeOperation[];
+  className?: string;
+  placeholder?: React.ReactNode;
+}) => {
+  const [childCount, setChildCount] = useState(0);
+  const contextValue = useMemo(() => {
+    return {
+      operations: childrenOperations,
+      level: 0,
+      registerChild: () => {
+        setChildCount(c => c + 1);
+        return () => setChildCount(c => c - 1);
+      },
+    };
+  }, [childrenOperations]);
+
+  return (
+    // <div> is for placeholder:last-child selector
+    <div>
+      {/* For lastInGroup check, the placeholder must be placed above all children in the dom */}
+      <div className={styles.placeholder}>
+        {childCount === 0 && placeholder}
+      </div>
+      <ExplorerTreeContext.Provider value={contextValue}>
+        {children}
+      </ExplorerTreeContext.Provider>
+    </div>
+  );
+};
--- a/packages/frontend/core/src/modules/explorer/views/tree/types.ts
+++ b/packages/frontend/core/src/modules/explorer/views/tree/types.ts
@@ -0,0 +1,5 @@
+export type NodeOperation = {
+  index: number;
+  view: React.ReactNode;
+  inline?: boolean;
+};
--- a/packages/frontend/core/src/modules/index.ts
+++ b/packages/frontend/core/src/modules/index.ts
@@ -7,6 +7,7 @@ import { configureDocLinksModule } from './doc-link';
 import { configureDocsSearchModule } from './docs-search';
 import { configureFindInPageModule } from './find-in-page';
 import { configureNavigationModule } from './navigation';
+import { configureOrganizeModule } from './organize';
 import { configurePeekViewModule } from './peek-view';
 import { configurePermissionsModule } from './permissions';
 import { configureWorkspacePropertiesModule } from './properties';
@@ -33,4 +34,5 @@ export function configureCommonModules(framework: Framework) {
  configureQuickSearchModule(framework);
  configureDocsSearchModule(framework);
  configureDocLinksModule(framework);
+  configureOrganizeModule(framework);
 }
--- a/packages/frontend/core/src/modules/organize/entities/folder-node.ts
+++ b/packages/frontend/core/src/modules/organize/entities/folder-node.ts
@@ -0,0 +1,168 @@
+import { generateFractionalIndexingKeyBetween } from '@affine/core/utils';
+import { Entity, LiveData } from '@toeverything/infra';
+import { map, of, switchMap } from 'rxjs';
+
+import type { FolderStore } from '../stores/folder';
+
+export class FolderNode extends Entity<{
+  id: string | null;
+}> {
+  id = this.props.id;
+
+  info$ = LiveData.from<{
+    data: string;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    type: (string & {}) | 'folder' | 'doc' | 'tag' | 'collection';
+    index: string;
+    id: string;
+    parentId?: string | null;
+  } | null>(this.store.watchNodeInfo(this.id ?? ''), null);
+  type$ = this.info$.map(info =>
+    this.id === null ? 'folder' : (info?.type ?? '')
+  );
+  data$ = this.info$.map(info => info?.data);
+  name$ = this.info$.map(info => (info?.type === 'folder' ? info.data : ''));
+  children$ = LiveData.from<FolderNode[]>(
+    // watch children if this is a folder, otherwise return empty array
+    this.type$.pipe(
+      switchMap(type =>
+        type === 'folder'
+          ? this.store
+              .watchNodeChildren(this.id)
+              .pipe(
+                map(children =>
+                  children
+                    .filter(e => this.filterInvalidChildren(e))
+                    .map(child =>
+                      this.framework.createEntity(FolderNode, child)
+                    )
+                )
+              )
+              .pipe()
+          : of([])
+      )
+    ),
+    []
+  );
+  sortedChildren$ = LiveData.computed(get => {
+    return get(this.children$)
+      .map(node => [node, get(node.index$)] as const)
+      .sort((a, b) => (a[1] > b[1] ? 1 : -1))
+      .map(([node]) => node);
+  });
+  index$ = this.info$.map(info => info?.index ?? '');
+
+  constructor(readonly store: FolderStore) {
+    super();
+  }
+
+  contains(childId: string | null): boolean {
+    if (!this.id) {
+      return true;
+    }
+    if (!childId) {
+      return false;
+    }
+    return this.store.isAncestor(childId, this.id);
+  }
+
+  beChildOf(parentId: string | null): boolean {
+    if (!this.id) {
+      return false;
+    }
+    if (!parentId) {
+      return true;
+    }
+    return this.store.isAncestor(this.id, parentId);
+  }
+
+  filterInvalidChildren(child: { type: string }): boolean {
+    if (this.id === null && child.type !== 'folder') {
+      return false; // root node can only have folders
+    }
+    return true;
+  }
+
+  createFolder(name: string, index: string) {
+    if (this.type$.value !== 'folder') {
+      throw new Error('Cannot create folder on non-folder node');
+    }
+    return this.store.createFolder(this.id, name, index);
+  }
+
+  createLink(
+    type: 'doc' | 'tag' | 'collection',
+    targetId: string,
+    index: string
+  ) {
+    if (this.id === null) {
+      throw new Error('Cannot create link on root node');
+    }
+    if (this.type$.value !== 'folder') {
+      throw new Error('Cannot create link on non-folder node');
+    }
+    this.store.createLink(this.id, type, targetId, index);
+  }
+
+  delete() {
+    if (this.id === null) {
+      throw new Error('Cannot delete root node');
+    }
+    if (this.type$.value === 'folder') {
+      this.store.removeFolder(this.id);
+    } else {
+      this.store.removeLink(this.id);
+    }
+  }
+
+  moveHere(childId: string, index: string) {
+    this.store.moveNode(childId, this.id, index);
+  }
+
+  rename(name: string) {
+    if (this.id === null) {
+      throw new Error('Cannot rename root node');
+    }
+    this.store.renameNode(this.id, name);
+  }
+
+  indexAt(at: 'before' | 'after', targetId?: string) {
+    if (!targetId) {
+      if (at === 'before') {
+        const first = this.sortedChildren$.value.at(0);
+        return generateFractionalIndexingKeyBetween(
+          null,
+          first?.index$.value || null
+        );
+      } else {
+        const last = this.sortedChildren$.value.at(-1);
+        return generateFractionalIndexingKeyBetween(
+          last?.index$.value || null,
+          null
+        );
+      }
+    } else {
+      const sortedChildren = this.sortedChildren$.value;
+      const targetIndex = sortedChildren.findIndex(
+        node => node.id === targetId
+      );
+      if (targetIndex === -1) {
+        throw new Error('Target node not found');
+      }
+      const target = sortedChildren[targetIndex];
+      const before: FolderNode | null = sortedChildren[targetIndex - 1] || null;
+      const after: FolderNode | null = sortedChildren[targetIndex + 1] || null;
+      if (at === 'before') {
+        return generateFractionalIndexingKeyBetween(
+          before?.index$.value || null,
+          target.index$.value
+        );
+      } else {
+        return generateFractionalIndexingKeyBetween(
+          target.index$.value,
+          after?.index$.value || null
+        );
+      }
+    }
+  }
+}
--- a/packages/frontend/core/src/modules/organize/entities/folder-tree.ts
+++ b/packages/frontend/core/src/modules/organize/entities/folder-tree.ts
@@ -0,0 +1,32 @@
+import { Entity, LiveData } from '@toeverything/infra';
+import { map } from 'rxjs';
+
+import type { FolderStore } from '../stores/folder';
+import { FolderNode } from './folder-node';
+
+export class FolderTree extends Entity {
+  constructor(private readonly folderStore: FolderStore) {
+    super();
+  }
+
+  readonly rootFolder = this.framework.createEntity(FolderNode, {
+    id: null,
+  });
+
+  // get folder by id
+  folderNode$(id: string) {
+    return LiveData.from(
+      this.folderStore.watchNodeInfo(id).pipe(
+        map(info => {
+          if (!info) {
+            return null;
+          }
+          return this.framework.createEntity(FolderNode, {
+            id,
+          });
+        })
+      ),
+      null
+    );
+  }
+}
--- a/packages/frontend/core/src/modules/organize/index.ts
+++ b/packages/frontend/core/src/modules/organize/index.ts
@@ -0,0 +1,18 @@
+import { DBService, type Framework, WorkspaceScope } from '@toeverything/infra';
+
+import { FolderNode } from './entities/folder-node';
+import { FolderTree } from './entities/folder-tree';
+import { OrganizeService } from './services/organize';
+import { FolderStore } from './stores/folder';
+
+export type { FolderNode } from './entities/folder-node';
+export { OrganizeService } from './services/organize';
+
+export function configureOrganizeModule(framework: Framework) {
+  framework
+    .scope(WorkspaceScope)
+    .service(OrganizeService)
+    .entity(FolderTree, [FolderStore])
+    .entity(FolderNode, [FolderStore])
+    .store(FolderStore, [DBService]);
+}
--- a/packages/frontend/core/src/modules/organize/services/organize.ts
+++ b/packages/frontend/core/src/modules/organize/services/organize.ts
@@ -0,0 +1,6 @@
+import { Service } from '@toeverything/infra';
+
+import { FolderTree } from '../entities/folder-tree';
+export class OrganizeService extends Service {
+  folderTree = this.framework.createEntity(FolderTree);
+}
--- a/packages/frontend/core/src/modules/organize/stores/folder.ts
+++ b/packages/frontend/core/src/modules/organize/stores/folder.ts
@@ -0,0 +1,148 @@
+import type { DBService } from '@toeverything/infra';
+import { Store } from '@toeverything/infra';
+
+export class FolderStore extends Store {
+  constructor(private readonly dbService: DBService) {
+    super();
+  }
+
+  watchNodeInfo(nodeId: string) {
+    return this.dbService.db.folders.get$(nodeId);
+  }
+
+  watchNodeChildren(parentId: string | null) {
+    return this.dbService.db.folders.find$({
+      parentId: parentId,
+    });
+  }
+
+  isAncestor(childId: string, ancestorId: string): boolean {
+    if (childId === ancestorId) {
+      return false;
+    }
+    const history = new Set<string>([childId]);
+    let current: string = childId;
+    while (current) {
+      const info = this.dbService.db.folders.get(current);
+      if (info === null || !info.parentId) {
+        return false;
+      }
+      current = info.parentId;
+      if (history.has(current)) {
+        return false; // loop detected
+      }
+      history.add(current);
+      if (current === ancestorId) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  createLink(
+    parentId: string,
+    type: 'doc' | 'tag' | 'collection',
+    nodeId: string,
+    index: string
+  ) {
+    const parent = this.dbService.db.folders.get(parentId);
+    if (parent === null || parent.type !== 'folder') {
+      throw new Error('Parent folder not found');
+    }
+
+    this.dbService.db.folders.create({
+      parentId,
+      type,
+      data: nodeId,
+      index: index,
+    });
+  }
+
+  renameNode(nodeId: string, name: string) {
+    const node = this.dbService.db.folders.get(nodeId);
+    if (node === null) {
+      throw new Error('Node not found');
+    }
+    if (node.type !== 'folder') {
+      throw new Error('Cannot rename non-folder node');
+    }
+    this.dbService.db.folders.update(nodeId, {
+      data: name,
+    });
+  }
+
+  createFolder(parentId: string | null, name: string, index: string) {
+    if (parentId) {
+      const parent = this.dbService.db.folders.get(parentId);
+      if (parent === null || parent.type !== 'folder') {
+        throw new Error('Parent folder not found');
+      }
+    }
+
+    return this.dbService.db.folders.create({
+      parentId: parentId,
+      type: 'folder',
+      data: name,
+      index: index,
+    }).id;
+  }
+
+  removeFolder(folderId: string) {
+    const info = this.dbService.db.folders.get(folderId);
+    if (info === null || info.type !== 'folder') {
+      throw new Error('Folder not found');
+    }
+    const stack = [info];
+    while (stack.length > 0) {
+      const current = stack.pop();
+      if (!current) {
+        continue;
+      }
+      if (current.type !== 'folder') {
+        this.dbService.db.folders.delete(current.id);
+      } else {
+        const children = this.dbService.db.folders.find({
+          parentId: current.id,
+        });
+        stack.push(...children);
+        this.dbService.db.folders.delete(current.id);
+      }
+    }
+  }
+
+  removeLink(linkId: string) {
+    const link = this.dbService.db.folders.get(linkId);
+    if (link === null || link.type === 'folder') {
+      throw new Error('Link not found');
+    }
+    this.dbService.db.folders.delete(linkId);
+  }
+
+  moveNode(nodeId: string, parentId: string | null, index: string) {
+    const node = this.dbService.db.folders.get(nodeId);
+    if (node === null) {
+      throw new Error('Node not found');
+    }
+
+    if (parentId) {
+      if (nodeId === parentId) {
+        throw new Error('Cannot move a node to itself');
+      }
+      if (this.isAncestor(parentId, nodeId)) {
+        throw new Error('Cannot move a node to its descendant');
+      }
+      const parent = this.dbService.db.folders.get(parentId);
+      if (parent === null || parent.type !== 'folder') {
+        throw new Error('Parent folder not found');
+      }
+    } else {
+      if (node.type !== 'folder') {
+        throw new Error('Root node can only have folders');
+      }
+    }
+    this.dbService.db.folders.update(nodeId, {
+      parentId,
+      index,
+    });
+  }
+}
--- a/packages/frontend/core/src/modules/organize/types.ts
+++ b/packages/frontend/core/src/modules/organize/types.ts
@@ -0,0 +1,7 @@
+export interface NodeInfo {
+  id: string;
+  parentId: string | null;
+  type: 'folder' | 'doc' | 'tag' | 'collection';
+  data: string;
+  index: string;
+}
--- a/packages/frontend/core/src/modules/tag/service/tag.ts
+++ b/packages/frontend/core/src/modules/tag/service/tag.ts
@@ -1,7 +1,32 @@
 import { Service } from '@toeverything/infra';
+import { cssVar } from '@toeverything/theme';

 import { TagList } from '../entities/tag-list';

+type TagColorHelper<T> = T extends `paletteLine${infer Color}` ? Color : never;
+export type TagColorName = TagColorHelper<Parameters<typeof cssVar>[0]>;
+
+const tagColorIds: TagColorName[] = [
+  'Red',
+  'Magenta',
+  'Orange',
+  'Yellow',
+  'Green',
+  'Teal',
+  'Blue',
+  'Purple',
+  'Grey',
+];
+
 export class TagService extends Service {
  tagList = this.framework.createEntity(TagList);
+
+  tagColors = tagColorIds.map(
+    color => [color, cssVar(`paletteLine${color}`)] as const
+  );
+
+  randomTagColor() {
+    const randomIndex = Math.floor(Math.random() * this.tagColors.length);
+    return this.tagColors[randomIndex][1];
+  }
 }