feat(core): init organize (#7456)

packages/frontend/core/src/components/affine/page-properties/common.ts

@@ -1,26 +1,6 @@
-import { cssVar } from '@toeverything/theme';
 import { createContext } from 'react';
 
 import type { PagePropertiesManager } from './page-properties-manager';
 
 // @ts-expect-error this should always be set
 export const managerContext = createContext<PagePropertiesManager>();
-
-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 const tagColors = tagColorIds.map(
-  color => [color, cssVar(`paletteLine${color}`)] as const
-);

packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.tsx

@@ -5,12 +5,11 @@ import {
   Scrollable,
 } from '@affine/component';
 import { DocsSearchService } from '@affine/core/modules/docs-search';
-import type { Doc } from '@blocksuite/store';
 import {
   LiveData,
   useLiveData,
-  useService,
-  type Workspace,
+  useServices,
+  WorkspaceService,
 } from '@toeverything/infra';
 import { Suspense, useCallback, useContext, useMemo, useRef } from 'react';
 
@@ -30,27 +29,26 @@ import { TimeRow } from './time-row';
 export const InfoModal = ({
   open,
   onOpenChange,
-  page,
-  workspace,
+  docId,
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  page: Doc;
-  workspace: Workspace;
+  docId: string;
 }) => {
+  const { docsSearchService, workspaceService } = useServices({
+    DocsSearchService,
+    WorkspaceService,
+  });
   const titleInputHandleRef = useRef<InlineEditHandle>(null);
-
-  const manager = usePagePropertiesManager(page);
-
+  const manager = usePagePropertiesManager(docId);
   const handleClose = useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);
 
-  const docsSearchService = useService(DocsSearchService);
   const references = useLiveData(
     useMemo(
-      () => LiveData.from(docsSearchService.watchRefsFrom(page.id), null),
-      [docsSearchService, page.id]
+      () => LiveData.from(docsSearchService.watchRefsFrom(docId), null),
+      [docId, docsSearchService]
     )
   );
 
@@ -76,14 +74,14 @@ export const InfoModal = ({
             <BlocksuiteHeaderTitle
               className={styles.titleStyle}
               inputHandleRef={titleInputHandleRef}
-              pageId={page.id}
-              docCollection={workspace.docCollection}
+              pageId={docId}
+              docCollection={workspaceService.workspace.docCollection}
             />
           </div>
           <managerContext.Provider value={manager}>
             <Suspense>
               <InfoTable
-                docId={page.id}
+                docId={docId}
                 onClose={handleClose}
                 references={references}
                 readonly={manager.readonly}

packages/frontend/core/src/components/affine/page-properties/table.tsx

@@ -26,7 +26,6 @@ import {
   ToggleExpandIcon,
   ViewIcon,
 } from '@blocksuite/icons/rc';
-import type { Doc } from '@blocksuite/store';
 import type { DragEndEvent, DraggableAttributes } from '@dnd-kit/core';
 import {
   DndContext,
@@ -1085,21 +1084,21 @@ const PagePropertiesTableInner = () => {
   );
 };
 
-export const usePagePropertiesManager = (page: Doc) => {
+export const usePagePropertiesManager = (docId: string) => {
   // the workspace properties adapter adapter is reactive,
   // which means it's reference will change when any of the properties change
   // also it will trigger a re-render of the component
   const adapter = useCurrentWorkspacePropertiesAdapter();
   const manager = useMemo(() => {
-    return new PagePropertiesManager(adapter, page.id);
-  }, [adapter, page.id]);
+    return new PagePropertiesManager(adapter, docId);
+  }, [adapter, docId]);
   return manager;
 };
 
 // this is the main component that renders the page properties table at the top of the page below
 // the page title
-export const PagePropertiesTable = ({ page }: { page: Doc }) => {
-  const manager = usePagePropertiesManager(page);
+export const PagePropertiesTable = ({ docId }: { docId: string }) => {
+  const manager = usePagePropertiesManager(docId);
 
   // if the given page is not in the current workspace, then we don't render anything
   // eg. when it is in history modal

packages/frontend/core/src/components/affine/page-properties/tags-inline-editor.tsx

@@ -13,7 +13,6 @@ import type { HTMLAttributes, PropsWithChildren } from 'react';
 import { useCallback, useMemo, useReducer, useRef, useState } from 'react';
 
 import { TagItem, TempTagItem } from '../../page-list';
-import { tagColors } from './common';
 import type { MenuItemOption } from './menu-items';
 import { renderMenuItemOptions } from './menu-items';
 import * as styles from './tags-inline-editor.css';
@@ -80,7 +79,8 @@ export const EditTagMenu = ({
 }>) => {
   const t = useI18n();
   const legacyProperties = useService(WorkspaceLegacyProperties);
-  const tagList = useService(TagService).tagList;
+  const tagService = useService(TagService);
+  const tagList = tagService.tagList;
   const tag = useLiveData(tagList.tagByTagId$(tagId));
   const tagColor = useLiveData(tag?.color$);
   const tagValue = useLiveData(tag?.value$);
@@ -133,7 +133,7 @@ export const EditTagMenu = ({
     options.push('-');
 
     options.push(
-      tagColors.map(([name, color], i) => {
+      tagService.tagColors.map(([name, color], i) => {
         return {
           text: name,
           icon: (
@@ -170,6 +170,7 @@ export const EditTagMenu = ({
     t,
     tag,
     tagColor,
+    tagService.tagColors,
     tagValue,
   ]);
 
@@ -185,7 +186,8 @@ const isCreateNewTag = (
 
 export const TagsEditor = ({ pageId, readonly }: TagsEditorProps) => {
   const t = useI18n();
-  const tagList = useService(TagService).tagList;
+  const tagService = useService(TagService);
+  const tagList = tagService.tagList;
   const tags = useLiveData(tagList.tags$);
   const tagIds = useLiveData(tagList.tagIdsByPageId$(pageId));
   const [inputValue, setInputValue] = useState('');
@@ -265,10 +267,12 @@ export const TagsEditor = ({ pageId, readonly }: TagsEditorProps) => {
 
   const [nextColor, rotateNextColor] = useReducer(
     color => {
-      const idx = tagColors.findIndex(c => c[1] === color);
-      return tagColors[(idx + 1) % tagColors.length][1];
+      const idx = tagService.tagColors.findIndex(c => c[1] === color);
+      return tagService.tagColors[(idx + 1) % tagService.tagColors.length][1];
     },
-    tagColors[Math.floor(Math.random() * tagColors.length)][1]
+    tagService.tagColors[
+      Math.floor(Math.random() * tagService.tagColors.length)
+    ][1]
   );
 
   const onCreateTag = useCallback(

packages/frontend/core/src/components/app-sidebar/category-divider/index.tsx

@@ -1,17 +1,29 @@
 import clsx from 'clsx';
-import type { PropsWithChildren } from 'react';
+import { type ForwardedRef, forwardRef, type PropsWithChildren } from 'react';
 
 import * as styles from './index.css';
 
-interface CategoryDividerProps extends PropsWithChildren {
-  label: string;
-}
+export type CategoryDividerProps = PropsWithChildren<
+  {
+    label: string;
+    className?: string;
+  } & {
+    [key: `data-${string}`]: unknown;
+  }
+>;
 
-export function CategoryDivider({ label, children }: CategoryDividerProps) {
-  return (
-    <div className={clsx([styles.root])}>
-      <div className={styles.label}>{label}</div>
-      {children}
-    </div>
-  );
-}
+export const CategoryDivider = forwardRef(
+  (
+    { label, children, className, ...otherProps }: CategoryDividerProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <div className={clsx([styles.root, className])} ref={ref} {...otherProps}>
+        <div className={styles.label}>{label}</div>
+        {children}
+      </div>
+    );
+  }
+);
+
+CategoryDivider.displayName = 'CategoryDivider';

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -193,7 +193,7 @@ export const BlocksuiteDocEditor = forwardRef<
         ) : (
           <BlocksuiteEditorJournalDocTitle page={page} />
         )}
-        <PagePropertiesTable page={page} />
+        <PagePropertiesTable docId={page.id} />
         <adapted.DocEditor
           className={styles.docContainer}
           ref={onDocRef}

packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts

@@ -23,7 +23,7 @@ export const root = style({
 });
 
 export const dragPageItemOverlay = style({
-  height: '54px',
+  height: '45px',
   borderRadius: '10px',
   display: 'flex',
   alignItems: 'center',

packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx

@@ -1,17 +1,12 @@
-import { Checkbox } from '@affine/component';
-import { getDNDId } from '@affine/core/hooks/affine/use-global-dnd-helper';
+import { Checkbox, useDraggable } from '@affine/component';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
+import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
-import { useDraggable } from '@dnd-kit/core';
-import type { PropsWithChildren } from 'react';
-import { useCallback, useMemo } from 'react';
+import type { ForwardedRef, PropsWithChildren } from 'react';
+import { forwardRef, useCallback, useMemo } from 'react';
 
 import { selectionStateAtom, useAtom } from '../scoped-atoms';
-import type {
-  CollectionListItemProps,
-  DraggableTitleCellData,
-  PageListItemProps,
-} from '../types';
+import type { CollectionListItemProps, PageListItemProps } from '../types';
 import { ColWrapper, stopPropagation } from '../utils';
 import * as styles from './collection-list-item.css';
 
@@ -109,56 +104,64 @@ export const CollectionListItem = (props: CollectionListItemProps) => {
     props.title,
   ]);
 
-  const { setNodeRef, attributes, listeners, isDragging } = useDraggable({
-    id: getDNDId('collection-list', 'collection', props.collectionId),
-    data: {
-      preview: collectionTitleElement,
-    } satisfies DraggableTitleCellData,
-    disabled: !props.draggable,
-  });
+  const { dragRef, dragging, CustomDragPreview } = useDraggable<AffineDNDData>(
+    () => ({
+      data: {
+        entity: {
+          type: 'collection',
+          id: props.collectionId,
+        },
+        from: {
+          at: 'all-collections:list',
+        },
+      },
+      canDrag: props.draggable,
+    }),
+    [props.collectionId, props.draggable]
+  );
 
   return (
-    <CollectionListItemWrapper
-      onClick={props.onClick}
-      to={props.to}
-      collectionId={props.collectionId}
-      draggable={props.draggable}
-      isDragging={isDragging}
-    >
-      <ColWrapper flex={9}>
-        <ColWrapper
-          className={styles.dndCell}
-          flex={8}
-          ref={setNodeRef}
-          {...attributes}
-          {...listeners}
-        >
-          <div className={styles.titleIconsWrapper}>
-            <CollectionSelectionCell
-              onSelectedChange={props.onSelectedChange}
-              selectable={props.selectable}
-              selected={props.selected}
-            />
-            <ListIconCell icon={props.icon} />
-          </div>
-          <ListTitleCell title={props.title} />
+    <>
+      <CollectionListItemWrapper
+        onClick={props.onClick}
+        to={props.to}
+        collectionId={props.collectionId}
+        draggable={props.draggable}
+        isDragging={dragging}
+        ref={dragRef}
+      >
+        <ColWrapper flex={9}>
+          <ColWrapper className={styles.dndCell} flex={8}>
+            <div className={styles.titleIconsWrapper}>
+              <CollectionSelectionCell
+                onSelectedChange={props.onSelectedChange}
+                selectable={props.selectable}
+                selected={props.selected}
+              />
+              <ListIconCell icon={props.icon} />
+            </div>
+            <ListTitleCell title={props.title} />
+          </ColWrapper>
+          <ColWrapper
+            flex={4}
+            alignment="end"
+            style={{ overflow: 'visible' }}
+          ></ColWrapper>
         </ColWrapper>
-        <ColWrapper
-          flex={4}
-          alignment="end"
-          style={{ overflow: 'visible' }}
-        ></ColWrapper>
-      </ColWrapper>
-      {props.operations ? (
-        <ColWrapper
-          className={styles.actionsCellWrapper}
-          flex={3}
-          alignment="end"
-        >
-          <CollectionListOperationsCell operations={props.operations} />
-        </ColWrapper>
-      ) : null}
-    </CollectionListItemWrapper>
+        {props.operations ? (
+          <ColWrapper
+            className={styles.actionsCellWrapper}
+            flex={3}
+            alignment="end"
+          >
+            <CollectionListOperationsCell operations={props.operations} />
+          </ColWrapper>
+        ) : null}
+      </CollectionListItemWrapper>
+      <CustomDragPreview position="pointer-outside">
+        {collectionTitleElement}
+      </CustomDragPreview>
+    </>
   );
 };
 
@@ -171,58 +174,69 @@ type collectionListWrapperProps = PropsWithChildren<
   }
 >;
 
-function CollectionListItemWrapper({
-  to,
-  isDragging,
-  collectionId,
-  onClick,
-  children,
-  draggable,
-}: collectionListWrapperProps) {
-  const [selectionState, setSelectionActive] = useAtom(selectionStateAtom);
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (!selectionState.selectable) {
-        return;
-      }
-      if (e.shiftKey) {
-        stopPropagation(e);
-        setSelectionActive(true);
-        onClick?.();
-        return;
-      }
-      if (selectionState.selectionActive) {
-        return onClick?.();
-      }
-    },
-    [
+const CollectionListItemWrapper = forwardRef(
+  (
+    {
+      to,
+      isDragging,
+      collectionId,
       onClick,
-      selectionState.selectable,
-      selectionState.selectionActive,
-      setSelectionActive,
-    ]
-  );
-
-  const commonProps = useMemo(
-    () => ({
-      'data-testid': 'collection-list-item',
-      'data-collection-id': collectionId,
-      'data-draggable': draggable,
-      className: styles.root,
-      'data-clickable': !!onClick || !!to,
-      'data-dragging': isDragging,
-      onClick: handleClick,
-    }),
-    [collectionId, draggable, isDragging, onClick, to, handleClick]
-  );
-
-  if (to) {
-    return (
-      <WorkbenchLink {...commonProps} to={to}>
-        {children}
-      </WorkbenchLink>
+      children,
+      draggable,
+    }: collectionListWrapperProps,
+    ref: ForwardedRef<HTMLAnchorElement & HTMLDivElement>
+  ) => {
+    const [selectionState, setSelectionActive] = useAtom(selectionStateAtom);
+    const handleClick = useCallback(
+      (e: React.MouseEvent) => {
+        if (!selectionState.selectable) {
+          return;
+        }
+        if (e.shiftKey) {
+          stopPropagation(e);
+          setSelectionActive(true);
+          onClick?.();
+          return;
+        }
+        if (selectionState.selectionActive) {
+          return onClick?.();
+        }
+      },
+      [
+        onClick,
+        selectionState.selectable,
+        selectionState.selectionActive,
+        setSelectionActive,
+      ]
     );
-  } else {
-    return <div {...commonProps}>{children}</div>;
+
+    const commonProps = useMemo(
+      () => ({
+        'data-testid': 'collection-list-item',
+        'data-collection-id': collectionId,
+        'data-draggable': draggable,
+        className: styles.root,
+        'data-clickable': !!onClick || !!to,
+        'data-dragging': isDragging,
+        onClick: handleClick,
+      }),
+      [collectionId, draggable, isDragging, onClick, to, handleClick]
+    );
+
+    if (to) {
+      return (
+        <WorkbenchLink {...commonProps} to={to} ref={ref}>
+          {children}
+        </WorkbenchLink>
+      );
+    } else {
+      return (
+        <div {...commonProps} ref={ref}>
+          {children}
+        </div>
+      );
+    }
   }
-}
+);
+
+CollectionListItemWrapper.displayName = 'CollectionListItemWrapper';

packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts

@@ -23,8 +23,8 @@ export const root = style({
 });
 
 export const dragPageItemOverlay = style({
-  height: '54px',
-  borderRadius: '10px',
+  height: '45px',
+  borderRadius: '8px',
   display: 'flex',
   alignItems: 'center',
   background: cssVar('hoverColorFilled'),

packages/frontend/core/src/components/page-list/docs/page-list-item.tsx

@@ -1,11 +1,10 @@
-import { Checkbox, Tooltip } from '@affine/component';
-import { getDNDId } from '@affine/core/hooks/affine/use-global-dnd-helper';
+import { Checkbox, Tooltip, useDraggable } from '@affine/component';
 import { TagService } from '@affine/core/modules/tag';
+import type { AffineDNDData } from '@affine/core/types/dnd';
 import { i18nTime } from '@affine/i18n';
-import { useDraggable } from '@dnd-kit/core';
 import { useLiveData, useService } from '@toeverything/infra';
-import type { PropsWithChildren } from 'react';
-import { useCallback, useEffect, useMemo } from 'react';
+import type { ForwardedRef, PropsWithChildren } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo } from 'react';
 
 import { WorkbenchLink } from '../../../modules/workbench/view/workbench-link';
 import {
@@ -14,7 +13,7 @@ import {
   selectionStateAtom,
   useAtom,
 } from '../scoped-atoms';
-import type { DraggableTitleCellData, PageListItemProps } from '../types';
+import type { PageListItemProps } from '../types';
 import { useAllDocDisplayProperties } from '../use-all-doc-display-properties';
 import { ColWrapper, stopPropagation } from '../utils';
 import * as styles from './page-list-item.css';
@@ -167,76 +166,84 @@ export const PageListItem = (props: PageListItemProps) => {
     props.title,
   ]);
 
-  const { setNodeRef, attributes, listeners, isDragging } = useDraggable({
-    id: getDNDId('doc-list', 'doc', props.pageId),
-    data: {
-      preview: pageTitleElement,
-    } satisfies DraggableTitleCellData,
-    disabled: !props.draggable,
-  });
+  const { dragRef, CustomDragPreview, dragging } = useDraggable<AffineDNDData>(
+    () => ({
+      canDrag: props.draggable,
+      data: {
+        entity: {
+          type: 'doc',
+          id: props.pageId,
+        },
+        from: {
+          at: 'all-docs:list',
+        },
+      },
+    }),
+    [props.draggable, props.pageId]
+  );
 
   return (
-    <PageListItemWrapper
-      onClick={props.onClick}
-      to={props.to}
-      pageId={props.pageId}
-      draggable={props.draggable}
-      isDragging={isDragging}
-      pageIds={props.pageIds || []}
-    >
-      <ColWrapper flex={9}>
-        <ColWrapper
-          className={styles.dndCell}
-          flex={8}
-          ref={setNodeRef}
-          {...attributes}
-          {...listeners}
-        >
-          <div className={styles.titleIconsWrapper}>
-            <PageSelectionCell
-              onSelectedChange={props.onSelectedChange}
-              selectable={props.selectable}
-              selected={props.selected}
-            />
-            <ListIconCell icon={props.icon} />
-          </div>
-          <ListTitleCell title={props.title} preview={props.preview} />
+    <>
+      <PageListItemWrapper
+        onClick={props.onClick}
+        to={props.to}
+        pageId={props.pageId}
+        draggable={props.draggable}
+        isDragging={dragging}
+        ref={dragRef}
+        pageIds={props.pageIds || []}
+      >
+        <ColWrapper flex={9}>
+          <ColWrapper className={styles.dndCell} flex={8}>
+            <div className={styles.titleIconsWrapper}>
+              <PageSelectionCell
+                onSelectedChange={props.onSelectedChange}
+                selectable={props.selectable}
+                selected={props.selected}
+              />
+              <ListIconCell icon={props.icon} />
+            </div>
+            <ListTitleCell title={props.title} preview={props.preview} />
+          </ColWrapper>
+          <ColWrapper
+            flex={4}
+            alignment="end"
+            style={{ overflow: 'visible' }}
+            hidden={!displayProperties.displayProperties.tags}
+          >
+            <PageTagsCell pageId={props.pageId} />
+          </ColWrapper>
         </ColWrapper>
         <ColWrapper
-          flex={4}
-          alignment="end"
-          style={{ overflow: 'visible' }}
-          hidden={!displayProperties.displayProperties.tags}
-        >
-          <PageTagsCell pageId={props.pageId} />
-        </ColWrapper>
-      </ColWrapper>
-      <ColWrapper
-        flex={1}
-        alignment="end"
-        hideInSmallContainer
-        hidden={!displayProperties.displayProperties.createDate}
-      >
-        <PageCreateDateCell createDate={props.createDate} />
-      </ColWrapper>
-      <ColWrapper
-        flex={1}
-        alignment="end"
-        hideInSmallContainer
-        hidden={!displayProperties.displayProperties.updatedDate}
-      >
-        <PageUpdatedDateCell updatedDate={props.updatedDate} />
-      </ColWrapper>
-      {props.operations ? (
-        <ColWrapper
-          className={styles.actionsCellWrapper}
           flex={1}
           alignment="end"
+          hideInSmallContainer
+          hidden={!displayProperties.displayProperties.createDate}
         >
-          <PageListOperationsCell operations={props.operations} />
+          <PageCreateDateCell createDate={props.createDate} />
         </ColWrapper>
-      ) : null}
-    </PageListItemWrapper>
+        <ColWrapper
+          flex={1}
+          alignment="end"
+          hideInSmallContainer
+          hidden={!displayProperties.displayProperties.updatedDate}
+        >
+          <PageUpdatedDateCell updatedDate={props.updatedDate} />
+        </ColWrapper>
+        {props.operations ? (
+          <ColWrapper
+            className={styles.actionsCellWrapper}
+            flex={1}
+            alignment="end"
+          >
+            <PageListOperationsCell operations={props.operations} />
+          </ColWrapper>
+        ) : null}
+      </PageListItemWrapper>
+      <CustomDragPreview position="pointer-outside">
+        {pageTitleElement}
+      </CustomDragPreview>
+    </>
   );
 };
 
@@ -247,132 +254,142 @@ type PageListWrapperProps = PropsWithChildren<
   }
 >;
 
-function PageListItemWrapper({
-  to,
-  isDragging,
-  pageId,
-  pageIds,
-  onClick,
-  children,
-  draggable,
-}: PageListWrapperProps) {
-  const [selectionState, setSelectionActive] = useAtom(selectionStateAtom);
-  const [anchorIndex, setAnchorIndex] = useAtom(anchorIndexAtom);
-  const [rangeIds, setRangeIds] = useAtom(rangeIdsAtom);
-
-  const handleShiftClick = useCallback(
-    (currentIndex: number) => {
-      if (anchorIndex === undefined) {
-        setAnchorIndex(currentIndex);
-        onClick?.();
-        return;
-      }
-
-      const lowerIndex = Math.min(anchorIndex, currentIndex);
-      const upperIndex = Math.max(anchorIndex, currentIndex);
-      const newRangeIds = pageIds.slice(lowerIndex, upperIndex + 1);
-
-      const currentSelected = selectionState.selectedIds || [];
-
-      // Set operations
-      const setRange = new Set(rangeIds);
-      const newSelected = new Set(
-        currentSelected.filter(id => !setRange.has(id)).concat(newRangeIds)
-      );
-
-      selectionState.onSelectedIdsChange?.([...newSelected]);
-      setRangeIds(newRangeIds);
-    },
-    [
-      anchorIndex,
-      onClick,
-      pageIds,
-      selectionState,
-      setAnchorIndex,
-      rangeIds,
-      setRangeIds,
-    ]
-  );
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (!selectionState.selectable) {
-        return;
-      }
-      stopPropagation(e);
-      const currentIndex = pageIds.indexOf(pageId);
-
-      if (e.shiftKey) {
-        if (!selectionState.selectionActive) {
-          setSelectionActive(true);
-          setAnchorIndex(currentIndex);
-          onClick?.();
-          return false;
-        }
-        handleShiftClick(currentIndex);
-        return false;
-      } else {
-        setAnchorIndex(undefined);
-        setRangeIds([]);
-        onClick?.();
-        return;
-      }
-    },
-    [
-      handleShiftClick,
-      onClick,
+const PageListItemWrapper = forwardRef(
+  (
+    {
+      to,
+      isDragging,
       pageId,
       pageIds,
-      selectionState.selectable,
+      onClick,
+      children,
+      draggable,
+    }: PageListWrapperProps,
+    ref: ForwardedRef<HTMLAnchorElement & HTMLDivElement>
+  ) => {
+    const [selectionState, setSelectionActive] = useAtom(selectionStateAtom);
+    const [anchorIndex, setAnchorIndex] = useAtom(anchorIndexAtom);
+    const [rangeIds, setRangeIds] = useAtom(rangeIdsAtom);
+
+    const handleShiftClick = useCallback(
+      (currentIndex: number) => {
+        if (anchorIndex === undefined) {
+          setAnchorIndex(currentIndex);
+          onClick?.();
+          return;
+        }
+
+        const lowerIndex = Math.min(anchorIndex, currentIndex);
+        const upperIndex = Math.max(anchorIndex, currentIndex);
+        const newRangeIds = pageIds.slice(lowerIndex, upperIndex + 1);
+
+        const currentSelected = selectionState.selectedIds || [];
+
+        // Set operations
+        const setRange = new Set(rangeIds);
+        const newSelected = new Set(
+          currentSelected.filter(id => !setRange.has(id)).concat(newRangeIds)
+        );
+
+        selectionState.onSelectedIdsChange?.([...newSelected]);
+        setRangeIds(newRangeIds);
+      },
+      [
+        anchorIndex,
+        onClick,
+        pageIds,
+        selectionState,
+        setAnchorIndex,
+        rangeIds,
+        setRangeIds,
+      ]
+    );
+
+    const handleClick = useCallback(
+      (e: React.MouseEvent) => {
+        if (!selectionState.selectable) {
+          return;
+        }
+        stopPropagation(e);
+        const currentIndex = pageIds.indexOf(pageId);
+
+        if (e.shiftKey) {
+          if (!selectionState.selectionActive) {
+            setSelectionActive(true);
+            setAnchorIndex(currentIndex);
+            onClick?.();
+            return false;
+          }
+          handleShiftClick(currentIndex);
+          return false;
+        } else {
+          setAnchorIndex(undefined);
+          setRangeIds([]);
+          onClick?.();
+          return;
+        }
+      },
+      [
+        handleShiftClick,
+        onClick,
+        pageId,
+        pageIds,
+        selectionState.selectable,
+        selectionState.selectionActive,
+        setAnchorIndex,
+        setRangeIds,
+        setSelectionActive,
+      ]
+    );
+
+    const commonProps = useMemo(
+      () => ({
+        'data-testid': 'page-list-item',
+        'data-page-id': pageId,
+        'data-draggable': draggable,
+        className: styles.root,
+        'data-clickable': !!onClick || !!to,
+        'data-dragging': isDragging,
+        onClick: onClick ? handleClick : undefined,
+      }),
+      [pageId, draggable, onClick, to, isDragging, handleClick]
+    );
+
+    useEffect(() => {
+      if (selectionState.selectionActive) {
+        // listen for shift key up
+        const handleKeyUp = (e: KeyboardEvent) => {
+          if (e.key === 'Shift') {
+            setAnchorIndex(undefined);
+            setRangeIds([]);
+          }
+        };
+        window.addEventListener('keyup', handleKeyUp);
+        return () => {
+          window.removeEventListener('keyup', handleKeyUp);
+        };
+      }
+      return;
+    }, [
       selectionState.selectionActive,
       setAnchorIndex,
       setRangeIds,
       setSelectionActive,
-    ]
-  );
+    ]);
 
-  const commonProps = useMemo(
-    () => ({
-      'data-testid': 'page-list-item',
-      'data-page-id': pageId,
-      'data-draggable': draggable,
-      className: styles.root,
-      'data-clickable': !!onClick || !!to,
-      'data-dragging': isDragging,
-      onClick: onClick ? handleClick : undefined,
-    }),
-    [pageId, draggable, onClick, to, isDragging, handleClick]
-  );
-
-  useEffect(() => {
-    if (selectionState.selectionActive) {
-      // listen for shift key up
-      const handleKeyUp = (e: KeyboardEvent) => {
-        if (e.key === 'Shift') {
-          setAnchorIndex(undefined);
-          setRangeIds([]);
-        }
-      };
-      window.addEventListener('keyup', handleKeyUp);
-      return () => {
-        window.removeEventListener('keyup', handleKeyUp);
-      };
+    if (to) {
+      return (
+        <WorkbenchLink ref={ref} {...commonProps} to={to}>
+          {children}
+        </WorkbenchLink>
+      );
+    } else {
+      return (
+        <div ref={ref} {...commonProps}>
+          {children}
+        </div>
+      );
     }
-    return;
-  }, [
-    selectionState.selectionActive,
-    setAnchorIndex,
-    setRangeIds,
-    setSelectionActive,
-  ]);
-
-  if (to) {
-    return (
-      <WorkbenchLink {...commonProps} to={to}>
-        {children}
-      </WorkbenchLink>
-    );
-  } else {
-    return <div {...commonProps}>{children}</div>;
   }
-}
+);
+PageListItemWrapper.displayName = 'PageListItemWrapper';

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -239,8 +239,7 @@ export const PageOperationCell = ({
         <InfoModal
           open={openInfoModal}
           onOpenChange={setOpenInfoModal}
-          page={blocksuiteDoc}
-          workspace={currentWorkspace}
+          docId={blocksuiteDoc.id}
         />
       ) : null}
       <DisablePublicSharing.DisablePublicSharingModal

packages/frontend/core/src/components/page-list/tags/create-tag.tsx

@@ -5,7 +5,6 @@ import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { tagColors } from '../../affine/page-properties/common';
 import type { TagMeta } from '../types';
 import * as styles from './create-tag.css';
 
@@ -18,11 +17,6 @@ const TagIcon = ({ color, large }: { color: string; large?: boolean }) => (
   />
 );
 
-const randomTagColor = () => {
-  const randomIndex = Math.floor(Math.random() * tagColors.length);
-  return tagColors[randomIndex][1];
-};
-
 export const CreateOrEditTag = ({
   open,
   onOpenChange,
@@ -32,7 +26,8 @@ export const CreateOrEditTag = ({
   onOpenChange: (open: boolean) => void;
   tagMeta?: TagMeta;
 }) => {
-  const tagList = useService(TagService).tagList;
+  const tagService = useService(TagService);
+  const tagList = tagService.tagList;
   const tagOptions = useLiveData(tagList.tagMetas$);
   const tag = useLiveData(tagList.tagByTagId$(tagMeta?.id));
   const t = useI18n();
@@ -43,14 +38,16 @@ export const CreateOrEditTag = ({
     setTagName(value);
   }, []);
 
-  const [tagIcon, setTagIcon] = useState(tagMeta?.color || randomTagColor());
+  const [tagIcon, setTagIcon] = useState(
+    tagMeta?.color || tagService.randomTagColor()
+  );
 
   const handleChangeIcon = useCallback((value: string) => {
     setTagIcon(value);
   }, []);
 
   const tags = useMemo(() => {
-    return tagColors.map(([_, color]) => {
+    return tagService.tagColors.map(([name, color]) => {
       return {
         name: name,
         color: color,
@@ -60,7 +57,7 @@ export const CreateOrEditTag = ({
         },
       };
     });
-  }, [handleChangeIcon]);
+  }, [handleChangeIcon, tagService.tagColors]);
 
   const items = useMemo(() => {
     const tagItems = tags.map(item => {
@@ -81,11 +78,11 @@ export const CreateOrEditTag = ({
 
   const onClose = useCallback(() => {
     if (!tagMeta) {
-      handleChangeIcon(randomTagColor());
+      handleChangeIcon(tagService.randomTagColor());
       setTagName('');
     }
     onOpenChange(false);
-  }, [handleChangeIcon, onOpenChange, tagMeta]);
+  }, [handleChangeIcon, onOpenChange, tagMeta, tagService]);
 
   const onConfirm = useCallback(() => {
     if (!tagName?.trim()) return;
@@ -129,8 +126,8 @@ export const CreateOrEditTag = ({
 
   useEffect(() => {
     setTagName(tagMeta?.title || '');
-    setTagIcon(tagMeta?.color || randomTagColor());
-  }, [tagMeta?.color, tagMeta?.title]);
+    setTagIcon(tagMeta?.color || tagService.randomTagColor());
+  }, [tagMeta?.color, tagMeta?.title, tagService]);
 
   if (!open) {
     return null;

packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts

@@ -22,7 +22,7 @@ export const root = style({
   },
 });
 export const dragPageItemOverlay = style({
-  height: '54px',
+  height: '45px',
   borderRadius: '10px',
   display: 'flex',
   alignItems: 'center',

packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx

@@ -1,13 +1,12 @@
-import { Checkbox } from '@affine/component';
-import { getDNDId } from '@affine/core/hooks/affine/use-global-dnd-helper';
+import { Checkbox, useDraggable } from '@affine/component';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
+import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
-import { useDraggable } from '@dnd-kit/core';
-import type { PropsWithChildren } from 'react';
-import { useCallback, useMemo } from 'react';
+import type { ForwardedRef, PropsWithChildren } from 'react';
+import { forwardRef, useCallback, useMemo } from 'react';
 
 import { selectionStateAtom, useAtom } from '../scoped-atoms';
-import type { DraggableTitleCellData, TagListItemProps } from '../types';
+import type { TagListItemProps } from '../types';
 import { ColWrapper, stopPropagation } from '../utils';
 import * as styles from './tag-list-item.css';
 
@@ -83,45 +82,62 @@ const TagListOperationsCell = ({
 };
 
 export const TagListItem = (props: TagListItemProps) => {
-  const tagTitleElement = useMemo(() => {
-    return (
-      <div className={styles.dragPageItemOverlay}>
-        <div className={styles.titleIconsWrapper}>
-          <TagSelectionCell
-            onSelectedChange={props.onSelectedChange}
-            selectable={props.selectable}
-            selected={props.selected}
-          />
-          <ListIconCell color={props.color} />
-        </div>
-      </div>
-    );
-  }, [props.color, props.onSelectedChange, props.selectable, props.selected]);
-
-  const { setNodeRef, attributes, listeners, isDragging } = useDraggable({
-    id: getDNDId('tag-list', 'tag', props.tagId),
-    data: {
-      preview: tagTitleElement,
-    } satisfies DraggableTitleCellData,
-    disabled: !props.draggable,
-  });
+  const { dragRef, CustomDragPreview, dragging } = useDraggable<AffineDNDData>(
+    () => ({
+      canDrag: props.draggable,
+      data: {
+        entity: {
+          type: 'tag',
+          id: props.tagId,
+        },
+        from: {
+          at: 'all-tags:list',
+        },
+      },
+    }),
+    [props.draggable, props.tagId]
+  );
 
   return (
-    <TagListItemWrapper
-      onClick={props.onClick}
-      to={props.to}
-      tagId={props.tagId}
-      draggable={props.draggable}
-      isDragging={isDragging}
-    >
-      <ColWrapper flex={9}>
-        <ColWrapper
-          className={styles.dndCell}
-          flex={8}
-          ref={setNodeRef}
-          {...attributes}
-          {...listeners}
-        >
+    <>
+      <TagListItemWrapper
+        onClick={props.onClick}
+        to={props.to}
+        tagId={props.tagId}
+        draggable={props.draggable}
+        isDragging={dragging}
+        ref={dragRef}
+      >
+        <ColWrapper flex={9}>
+          <ColWrapper className={styles.dndCell} flex={8}>
+            <div className={styles.titleIconsWrapper}>
+              <TagSelectionCell
+                onSelectedChange={props.onSelectedChange}
+                selectable={props.selectable}
+                selected={props.selected}
+              />
+              <ListIconCell color={props.color} />
+            </div>
+            <TagListTitleCell title={props.title} pageCount={props.pageCount} />
+          </ColWrapper>
+          <ColWrapper
+            flex={4}
+            alignment="end"
+            style={{ overflow: 'visible' }}
+          ></ColWrapper>
+        </ColWrapper>
+        {props.operations ? (
+          <ColWrapper
+            className={styles.actionsCellWrapper}
+            flex={2}
+            alignment="end"
+          >
+            <TagListOperationsCell operations={props.operations} />
+          </ColWrapper>
+        ) : null}
+      </TagListItemWrapper>
+      <CustomDragPreview position="pointer-outside">
+        <div className={styles.dragPageItemOverlay}>
           <div className={styles.titleIconsWrapper}>
             <TagSelectionCell
               onSelectedChange={props.onSelectedChange}
@@ -131,23 +147,9 @@ export const TagListItem = (props: TagListItemProps) => {
             <ListIconCell color={props.color} />
           </div>
           <TagListTitleCell title={props.title} pageCount={props.pageCount} />
-        </ColWrapper>
-        <ColWrapper
-          flex={4}
-          alignment="end"
-          style={{ overflow: 'visible' }}
-        ></ColWrapper>
-      </ColWrapper>
-      {props.operations ? (
-        <ColWrapper
-          className={styles.actionsCellWrapper}
-          flex={2}
-          alignment="end"
-        >
-          <TagListOperationsCell operations={props.operations} />
-        </ColWrapper>
-      ) : null}
-    </TagListItemWrapper>
+        </div>
+      </CustomDragPreview>
+    </>
   );
 };
 
@@ -157,58 +159,68 @@ type TagListWrapperProps = PropsWithChildren<
   }
 >;
 
-function TagListItemWrapper({
-  to,
-  isDragging,
-  tagId,
-  onClick,
-  children,
-  draggable,
-}: TagListWrapperProps) {
-  const [selectionState, setSelectionActive] = useAtom(selectionStateAtom);
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (!selectionState.selectable) {
-        return;
-      }
-      if (e.shiftKey) {
-        stopPropagation(e);
-        setSelectionActive(true);
-        onClick?.();
-        return;
-      }
-      if (selectionState.selectionActive) {
-        return onClick?.();
-      }
-    },
-    [
+const TagListItemWrapper = forwardRef(
+  (
+    {
+      to,
+      isDragging,
+      tagId,
       onClick,
-      selectionState.selectable,
-      selectionState.selectionActive,
-      setSelectionActive,
-    ]
-  );
-
-  const commonProps = useMemo(
-    () => ({
-      'data-testid': 'tag-list-item',
-      'data-tag-id': tagId,
-      'data-draggable': draggable,
-      className: styles.root,
-      'data-clickable': !!onClick || !!to,
-      'data-dragging': isDragging,
-      onClick: handleClick,
-    }),
-    [tagId, draggable, isDragging, onClick, to, handleClick]
-  );
-
-  if (to) {
-    return (
-      <WorkbenchLink {...commonProps} to={to}>
-        {children}
-      </WorkbenchLink>
+      children,
+      draggable,
+    }: TagListWrapperProps,
+    ref: ForwardedRef<HTMLAnchorElement & HTMLDivElement>
+  ) => {
+    const [selectionState, setSelectionActive] = useAtom(selectionStateAtom);
+    const handleClick = useCallback(
+      (e: React.MouseEvent) => {
+        if (!selectionState.selectable) {
+          return;
+        }
+        if (e.shiftKey) {
+          stopPropagation(e);
+          setSelectionActive(true);
+          onClick?.();
+          return;
+        }
+        if (selectionState.selectionActive) {
+          return onClick?.();
+        }
+      },
+      [
+        onClick,
+        selectionState.selectable,
+        selectionState.selectionActive,
+        setSelectionActive,
+      ]
     );
-  } else {
-    return <div {...commonProps}>{children}</div>;
+
+    const commonProps = useMemo(
+      () => ({
+        'data-testid': 'tag-list-item',
+        'data-tag-id': tagId,
+        'data-draggable': draggable,
+        className: styles.root,
+        'data-clickable': !!onClick || !!to,
+        'data-dragging': isDragging,
+        onClick: handleClick,
+      }),
+      [tagId, draggable, isDragging, onClick, to, handleClick]
+    );
+
+    if (to) {
+      return (
+        <WorkbenchLink {...commonProps} to={to} ref={ref}>
+          {children}
+        </WorkbenchLink>
+      );
+    } else {
+      return (
+        <div {...commonProps} ref={ref}>
+          {children}
+        </div>
+      );
+    }
   }
-}
+);
+TagListItemWrapper.displayName = 'TagListItemWrapper';

packages/frontend/core/src/components/page-list/tags/virtualized-tag-list.tsx

@@ -86,7 +86,7 @@ export const VirtualizedTagList = ({
       <VirtualizedList
         ref={listRef}
         selectable="toggle"
-        draggable={false}
+        draggable={true}
         atTopThreshold={80}
         onSelectionActiveChange={setShowFloatingToolbar}
         heading={<TagListHeader onOpen={onOpenCreate} />}

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx

@@ -1,24 +0,0 @@
-import { IconButton } from '@affine/component/ui/button';
-import { PlusIcon } from '@blocksuite/icons/rc';
-import type { ReactElement } from 'react';
-
-export const AddCollectionButton = ({
-  node,
-  onClick,
-}: {
-  node: ReactElement | null;
-  onClick: () => void;
-}) => {
-  return (
-    <>
-      <IconButton
-        data-testid="slider-bar-add-collection-button"
-        onClick={onClick}
-        size="small"
-      >
-        <PlusIcon />
-      </IconButton>
-      {node}
-    </>
-  );
-};

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -1,327 +0,0 @@
-import {
-  AnimatedCollectionsIcon,
-  toast,
-  useConfirmModal,
-} from '@affine/component';
-import { RenameModal } from '@affine/component/rename-modal';
-import { Button, IconButton } from '@affine/component/ui/button';
-import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
-import {
-  CollectionOperations,
-  filterPage,
-  stopPropagation,
-} from '@affine/core/components/page-list';
-import {
-  type DNDIdentifier,
-  getDNDId,
-  parseDNDId,
-  resolveDragEndIntent,
-} from '@affine/core/hooks/affine/use-global-dnd-helper';
-import { CollectionService } from '@affine/core/modules/collection';
-import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
-import type { Collection } from '@affine/env/filter';
-import { useI18n } from '@affine/i18n';
-import {
-  MoreHorizontalIcon,
-  PlusIcon,
-  ViewLayersIcon,
-} from '@blocksuite/icons/rc';
-import type { DocCollection } from '@blocksuite/store';
-import { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { useLiveData, useService } from '@toeverything/infra';
-import { useCallback, useMemo, useState } from 'react';
-
-import { useAllPageListConfig } from '../../../../hooks/affine/use-all-page-list-config';
-import { useBlockSuiteDocMeta } from '../../../../hooks/use-block-suite-page-meta';
-import { WorkbenchService } from '../../../../modules/workbench';
-import { WorkbenchLink } from '../../../../modules/workbench/view/workbench-link';
-import { DragMenuItemOverlay } from '../components/drag-menu-item-overlay';
-import * as draggableMenuItemStyles from '../components/draggable-menu-item.css';
-import { SidebarDocItem } from '../doc-tree/doc';
-import { SidebarDocTreeNode } from '../doc-tree/node';
-import type { CollectionsListProps } from '../index';
-import * as styles from './styles.css';
-
-const animateLayoutChanges: AnimateLayoutChanges = ({
-  isSorting,
-  wasDragging,
-}) => (isSorting || wasDragging ? false : true);
-
-export const CollectionSidebarNavItem = ({
-  collection,
-  docCollection,
-  className,
-  dndId,
-}: {
-  collection: Collection;
-  docCollection: DocCollection;
-  dndId: DNDIdentifier;
-  className?: string;
-}) => {
-  const [open, setOpen] = useState(false);
-  const collectionService = useService(CollectionService);
-  const { createPage } = usePageHelper(docCollection);
-  const { openConfirmModal } = useConfirmModal();
-  const t = useI18n();
-
-  const overlayPreview = useMemo(() => {
-    return (
-      <DragMenuItemOverlay icon={<ViewLayersIcon />} title={collection.name} />
-    );
-  }, [collection.name]);
-
-  const {
-    setNodeRef,
-    isDragging,
-    attributes,
-    listeners,
-    transform,
-    over,
-    active,
-    transition,
-  } = useSortable({
-    id: dndId,
-    data: {
-      preview: overlayPreview,
-    },
-    animateLayoutChanges,
-  });
-
-  const isSorting = parseDNDId(active?.id)?.where === 'sidebar-pin';
-  const dragOverIntent = resolveDragEndIntent(active, over);
-
-  const style = {
-    transform: CSS.Translate.toString(transform),
-    transition: isSorting ? transition : undefined,
-  };
-
-  const isOver = over?.id === dndId && dragOverIntent === 'collection:add';
-
-  const currentPath = useLiveData(
-    useService(WorkbenchService).workbench.location$.map(
-      location => location.pathname
-    )
-  );
-  const path = `/collection/${collection.id}`;
-
-  const onRename = useCallback(
-    (name: string) => {
-      collectionService.updateCollection(collection.id, () => ({
-        ...collection,
-        name,
-      }));
-      toast(t['com.affine.toastMessage.rename']());
-    },
-    [collection, collectionService, t]
-  );
-  const handleOpen = useCallback(() => {
-    setOpen(true);
-  }, []);
-
-  const createAndAddDocument = useCallback(() => {
-    const newDoc = createPage();
-    collectionService.addPageToCollection(collection.id, newDoc.id);
-  }, [collection.id, collectionService, createPage]);
-
-  const onConfirmAddDocToCollection = 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 postfix = (
-    <div
-      onClick={stopPropagation}
-      onMouseDown={e => {
-        // prevent drag
-        e.stopPropagation();
-      }}
-      style={{ display: 'flex', alignItems: 'center' }}
-    >
-      <IconButton onClick={onConfirmAddDocToCollection} size="small">
-        <PlusIcon />
-      </IconButton>
-      <CollectionOperations
-        collection={collection}
-        openRenameModal={handleOpen}
-        onAddDocToCollection={onConfirmAddDocToCollection}
-      >
-        <IconButton
-          data-testid="collection-options"
-          type="plain"
-          size="small"
-          style={{ marginLeft: 4 }}
-        >
-          <MoreHorizontalIcon />
-        </IconButton>
-      </CollectionOperations>
-      <RenameModal
-        open={open}
-        onOpenChange={setOpen}
-        onRename={onRename}
-        currentName={collection.name}
-      />
-    </div>
-  );
-
-  return (
-    <SidebarDocTreeNode
-      ref={setNodeRef}
-      node={{ type: 'collection', data: collection }}
-      to={path}
-      linkComponent={WorkbenchLink}
-      subTree={
-        <CollectionSidebarNavItemContent
-          collection={collection}
-          docCollection={docCollection}
-          dndId={dndId}
-        />
-      }
-      rootProps={{
-        className,
-        style,
-        ...attributes,
-      }}
-      menuItemProps={{
-        ...listeners,
-        'data-draggable': true,
-        'data-dragging': isDragging,
-        'data-testid': 'collection-item',
-        'data-collection-id': collection.id,
-        'data-type': 'collection-list-item',
-        className: draggableMenuItemStyles.draggableMenuItem,
-        active: isOver || currentPath === path,
-        icon: <AnimatedCollectionsIcon closed={isOver} />,
-        postfix,
-      }}
-    >
-      <span>{collection.name}</span>
-    </SidebarDocTreeNode>
-  );
-};
-
-const CollectionSidebarNavItemContent = ({
-  collection,
-  docCollection,
-  dndId,
-}: {
-  collection: Collection;
-  docCollection: DocCollection;
-  dndId: DNDIdentifier;
-}) => {
-  const t = useI18n();
-  const pages = useBlockSuiteDocMeta(docCollection);
-  const favAdapter = useService(FavoriteItemsAdapter);
-  const collectionService = useService(CollectionService);
-
-  const config = useAllPageListConfig();
-  const favourites = useLiveData(favAdapter.favorites$);
-  const allowList = useMemo(
-    () => new Set(collection.allowList),
-    [collection.allowList]
-  );
-  const removeFromAllowList = useCallback(
-    (id: string) => {
-      collectionService.deletePageFromCollection(collection.id, id);
-      toast(t['com.affine.collection.removePage.success']());
-    },
-    [collection, collectionService, t]
-  );
-
-  const filtered = pages.filter(meta => {
-    if (meta.trash) return false;
-    const pageData = {
-      meta,
-      publicMode: config.getPublicMode(meta.id),
-      favorite: favourites.some(fav => fav.id === meta.id),
-    };
-    return filterPage(collection, pageData);
-  });
-
-  return (
-    <div className={styles.docsListContainer}>
-      {filtered.length > 0 ? (
-        filtered.map(page => {
-          return (
-            <SidebarDocItem
-              key={page.id}
-              docId={page.id}
-              postfixConfig={{
-                inAllowList: allowList.has(page.id),
-                removeFromAllowList: removeFromAllowList,
-              }}
-              dragConfig={{
-                parentId: dndId,
-                where: 'collection-list',
-              }}
-              menuItemProps={{
-                'data-testid': 'collection-page',
-              }}
-            />
-          );
-        })
-      ) : (
-        <div className={styles.noReferences}>
-          {t['com.affine.collection.emptyCollection']()}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const CollectionsList = ({
-  docCollection: workspace,
-  onCreate,
-}: CollectionsListProps) => {
-  const collections = useLiveData(useService(CollectionService).collections$);
-  const t = useI18n();
-
-  if (collections.length === 0) {
-    return (
-      <div className={styles.emptyCollectionWrapper}>
-        <div className={styles.emptyCollectionContent}>
-          <div className={styles.emptyCollectionIconWrapper}>
-            <ViewLayersIcon className={styles.emptyCollectionIcon} />
-          </div>
-          <div
-            data-testid="slider-bar-collection-null-description"
-            className={styles.emptyCollectionMessage}
-          >
-            {t['com.affine.collections.empty.message']()}
-          </div>
-        </div>
-        <Button className={styles.emptyCollectionNewButton} onClick={onCreate}>
-          {t['com.affine.collections.empty.new-collection-button']()}
-        </Button>
-      </div>
-    );
-  }
-  return (
-    <div data-testid="collections" className={styles.wrapper}>
-      {collections.map(view => {
-        const dragItemId = getDNDId(
-          'sidebar-collections',
-          'collection',
-          view.id
-        );
-
-        return (
-          <CollectionSidebarNavItem
-            key={view.id}
-            collection={view}
-            docCollection={workspace}
-            dndId={dragItemId}
-          />
-        );
-      })}
-    </div>
-  );
-};

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/index.tsx

@@ -1 +0,0 @@
-export * from './collections-list';

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts

@@ -1,111 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { globalStyle, style } from '@vanilla-extract/css';
-export const wrapper = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2,
-  userSelect: 'none',
-  // marginLeft:8,
-});
-export const collapsedIcon = style({
-  transition: 'transform 0.2s ease-in-out',
-  selectors: {
-    '&[data-collapsed="true"]': {
-      transform: 'rotate(-90deg)',
-    },
-  },
-});
-export const view = style({
-  display: 'flex',
-  alignItems: 'center',
-});
-export const viewTitle = style({
-  display: 'flex',
-  alignItems: 'center',
-});
-export const more = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: 2,
-  fontSize: 16,
-  color: cssVar('iconColor'),
-  ':hover': {
-    backgroundColor: cssVar('hoverColor'),
-  },
-});
-export const deleteFolder = style({
-  ':hover': {
-    color: cssVar('errorColor'),
-    backgroundColor: cssVar('backgroundErrorColor'),
-  },
-});
-globalStyle(`${deleteFolder}:hover svg`, {
-  color: cssVar('errorColor'),
-});
-export const menuDividerStyle = style({
-  marginTop: '2px',
-  marginBottom: '2px',
-  marginLeft: '12px',
-  marginRight: '8px',
-  height: '1px',
-  background: cssVar('borderColor'),
-});
-export const collapsibleContent = style({
-  overflow: 'hidden',
-  marginTop: '4px',
-  selectors: {
-    '&[data-hidden="true"]': {
-      display: 'none',
-    },
-  },
-});
-export const emptyCollectionWrapper = style({
-  padding: '9px 0',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 8,
-});
-export const emptyCollectionContent = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 6,
-});
-export const emptyCollectionIconWrapper = style({
-  width: 36,
-  height: 36,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '50%',
-  backgroundColor: cssVar('hoverColor'),
-});
-export const emptyCollectionIcon = style({
-  fontSize: 20,
-  color: cssVar('iconSecondary'),
-});
-export const emptyCollectionMessage = style({
-  fontSize: cssVar('fontSm'),
-  textAlign: 'center',
-  color: cssVar('black30'),
-  userSelect: 'none',
-});
-export const emptyCollectionNewButton = style({
-  padding: '0 8px',
-  height: '28px',
-  fontSize: cssVar('fontXs'),
-});
-export const docsListContainer = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2,
-});
-export const noReferences = style({
-  fontSize: cssVar('fontSm'),
-  textAlign: 'left',
-  paddingLeft: '32px',
-  color: cssVar('black30'),
-  userSelect: 'none',
-});

packages/frontend/core/src/components/pure/workspace-slider-bar/components/drag-menu-item-overlay.tsx

@@ -1,16 +0,0 @@
-import * as styles from '../favorite/styles.css';
-
-export const DragMenuItemOverlay = ({
-  title,
-  icon,
-}: {
-  icon: React.ReactNode;
-  title: React.ReactNode;
-}) => {
-  return (
-    <div className={styles.dragPageItemOverlay}>
-      {icon}
-      <span>{title}</span>
-    </div>
-  );
-};

packages/frontend/core/src/components/pure/workspace-slider-bar/components/draggable-menu-item.css.ts

@@ -1,33 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
-
-export const draggableMenuItem = style({
-  selectors: {
-    '&[data-draggable=true]:before': {
-      content: '""',
-      position: 'absolute',
-      top: '50%',
-      transform: 'translateY(-50%)',
-      left: 0,
-      width: 4,
-      height: 4,
-      transition: 'height 0.2s, opacity 0.2s',
-      backgroundColor: cssVar('placeholderColor'),
-      borderRadius: '2px',
-      opacity: 0,
-      willChange: 'height, opacity',
-    },
-    '&[data-draggable=true]:hover:before': {
-      height: 12,
-      opacity: 1,
-    },
-    '&[data-draggable=true][data-dragging=true]': {
-      backgroundColor: cssVar('hoverColor'),
-    },
-    '&[data-draggable=true][data-dragging=true]:before': {
-      height: 32,
-      width: 2,
-      opacity: 1,
-    },
-  },
-});

packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-item.tsx

@@ -1,182 +0,0 @@
-import type { MenuItemProps } from '@affine/component';
-import { MenuIcon, MenuItem, MenuSeparator } from '@affine/component';
-import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
-import { useI18n } from '@affine/i18n';
-import {
-  DeleteIcon,
-  EditIcon,
-  FavoriteIcon,
-  FilterMinusIcon,
-  InformationIcon,
-  LinkedPageIcon,
-  SplitViewIcon,
-} from '@blocksuite/icons/rc';
-import type { ReactElement } from 'react';
-import { useMemo } from 'react';
-
-type OperationItemsProps = {
-  inFavorites?: boolean;
-  isReferencePage?: boolean;
-  inAllowList?: boolean;
-  onRemoveFromAllowList?: () => void;
-  setRenameModalOpen?: () => void;
-  onRename: () => void;
-  onAddLinkedPage: () => void;
-  onRemoveFromFavourites?: () => void;
-  onDelete: () => void;
-  onOpenInSplitView: () => void;
-  onOpenInfoModal: () => void;
-};
-
-export const OperationItems = ({
-  inFavorites,
-  isReferencePage,
-  inAllowList,
-  onRemoveFromAllowList,
-  onRename,
-  onAddLinkedPage,
-  onRemoveFromFavourites,
-  onDelete,
-  onOpenInSplitView,
-  onOpenInfoModal,
-}: OperationItemsProps) => {
-  const { appSettings } = useAppSettingHelper();
-  const t = useI18n();
-  const actions = useMemo<
-    Array<
-      | {
-          icon: ReactElement;
-          name: string;
-          click: () => void;
-          type?: MenuItemProps['type'];
-          element?: undefined;
-        }
-      | {
-          element: ReactElement;
-        }
-    >
-  >(
-    () => [
-      {
-        icon: (
-          <MenuIcon>
-            <EditIcon />
-          </MenuIcon>
-        ),
-        name: t['Rename'](),
-        click: onRename,
-      },
-      ...(runtimeConfig.enableInfoModal
-        ? [
-            {
-              icon: (
-                <MenuIcon>
-                  <InformationIcon />
-                </MenuIcon>
-              ),
-              name: t['com.affine.page-properties.page-info.view'](),
-              click: onOpenInfoModal,
-            },
-          ]
-        : []),
-      {
-        icon: (
-          <MenuIcon>
-            <LinkedPageIcon />
-          </MenuIcon>
-        ),
-        name: t['com.affine.page-operation.add-linked-page'](),
-        click: onAddLinkedPage,
-      },
-      ...(inFavorites && onRemoveFromFavourites && !isReferencePage
-        ? [
-            {
-              icon: (
-                <MenuIcon>
-                  <FavoriteIcon />
-                </MenuIcon>
-              ),
-              name: t['Remove from favorites'](),
-              click: onRemoveFromFavourites,
-            },
-          ]
-        : []),
-      ...(inAllowList && onRemoveFromAllowList
-        ? [
-            {
-              icon: (
-                <MenuIcon>
-                  <FilterMinusIcon />
-                </MenuIcon>
-              ),
-              name: t['Remove special filter'](),
-              click: onRemoveFromAllowList,
-            },
-          ]
-        : []),
-
-      ...(appSettings.enableMultiView
-        ? [
-            // open split view
-            {
-              icon: (
-                <MenuIcon>
-                  <SplitViewIcon />
-                </MenuIcon>
-              ),
-              name: t['com.affine.workbench.split-view.page-menu-open'](),
-              click: onOpenInSplitView,
-            },
-          ]
-        : []),
-
-      {
-        element: <MenuSeparator key="menu-separator" />,
-      },
-      {
-        icon: (
-          <MenuIcon>
-            <DeleteIcon />
-          </MenuIcon>
-        ),
-        name: t['com.affine.moveToTrash.title'](),
-        click: onDelete,
-        type: 'danger',
-      },
-    ],
-    [
-      t,
-      onRename,
-      onAddLinkedPage,
-      inFavorites,
-      onRemoveFromFavourites,
-      isReferencePage,
-      inAllowList,
-      onRemoveFromAllowList,
-      appSettings.enableMultiView,
-      onOpenInSplitView,
-      onOpenInfoModal,
-      onDelete,
-    ]
-  );
-  return (
-    <>
-      {actions.map(action => {
-        if (action.element) {
-          return action.element;
-        }
-        return (
-          <MenuItem
-            data-testid="sidebar-page-option-item"
-            key={action.name}
-            type={action.type}
-            preFix={action.icon}
-            onClick={action.click}
-          >
-            {action.name}
-          </MenuItem>
-        );
-      })}
-    </>
-  );
-};

packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-menu-button.tsx

@@ -1,124 +0,0 @@
-import { toast } from '@affine/component';
-import { IconButton } from '@affine/component/ui/button';
-import { Menu } from '@affine/component/ui/menu';
-import { InfoModal } from '@affine/core/components/affine/page-properties';
-import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
-import { WorkbenchService } from '@affine/core/modules/workbench';
-import { useI18n } from '@affine/i18n';
-import { MoreHorizontalIcon } from '@blocksuite/icons/rc';
-import { useService, useServices, WorkspaceService } from '@toeverything/infra';
-import { useCallback, useState } from 'react';
-
-import { useTrashModalHelper } from '../../../../hooks/affine/use-trash-modal-helper';
-import { usePageHelper } from '../../../blocksuite/block-suite-page-list/utils';
-import { OperationItems } from './operation-item';
-
-export type OperationMenuButtonProps = {
-  pageId: string;
-  pageTitle: string;
-  setRenameModalOpen: () => void;
-  inFavorites?: boolean;
-  isReferencePage?: boolean;
-  inAllowList?: boolean;
-  removeFromAllowList?: (id: string) => void;
-};
-
-export const OperationMenuButton = ({ ...props }: OperationMenuButtonProps) => {
-  const {
-    pageId,
-    pageTitle,
-    setRenameModalOpen,
-    removeFromAllowList,
-    inAllowList,
-    inFavorites,
-    isReferencePage,
-  } = props;
-  const t = useI18n();
-  const [openInfoModal, setOpenInfoModal] = useState(false);
-
-  const { workspaceService } = useServices({
-    WorkspaceService,
-  });
-  const page = workspaceService.workspace.docCollection.getDoc(pageId);
-  const { createLinkedPage } = usePageHelper(
-    workspaceService.workspace.docCollection
-  );
-  const { setTrashModal } = useTrashModalHelper(
-    workspaceService.workspace.docCollection
-  );
-
-  const favAdapter = useService(FavoriteItemsAdapter);
-  const workbench = useService(WorkbenchService).workbench;
-
-  const handleRename = useCallback(() => {
-    setRenameModalOpen?.();
-  }, [setRenameModalOpen]);
-
-  const handleAddLinkedPage = useCallback(() => {
-    createLinkedPage(pageId);
-    toast(t['com.affine.toastMessage.addLinkedPage']());
-  }, [createLinkedPage, pageId, t]);
-
-  const handleRemoveFromFavourites = useCallback(() => {
-    favAdapter.remove(pageId, 'doc');
-    toast(t['com.affine.toastMessage.removedFavorites']());
-  }, [favAdapter, pageId, t]);
-
-  const handleDelete = useCallback(() => {
-    setTrashModal({
-      open: true,
-      pageIds: [pageId],
-      pageTitles: [pageTitle],
-    });
-  }, [pageId, pageTitle, setTrashModal]);
-
-  const handleRemoveFromAllowList = useCallback(() => {
-    removeFromAllowList?.(pageId);
-  }, [pageId, removeFromAllowList]);
-
-  const handleOpenInSplitView = useCallback(() => {
-    workbench.openDoc(pageId, { at: 'tail' });
-  }, [pageId, workbench]);
-
-  const handleOpenInfoModal = useCallback(() => {
-    setOpenInfoModal(true);
-  }, [setOpenInfoModal]);
-
-  return (
-    <>
-      <Menu
-        items={
-          <OperationItems
-            onAddLinkedPage={handleAddLinkedPage}
-            onDelete={handleDelete}
-            onRemoveFromAllowList={handleRemoveFromAllowList}
-            onRemoveFromFavourites={handleRemoveFromFavourites}
-            onRename={handleRename}
-            onOpenInSplitView={handleOpenInSplitView}
-            onOpenInfoModal={handleOpenInfoModal}
-            inAllowList={inAllowList}
-            inFavorites={inFavorites}
-            isReferencePage={isReferencePage}
-          />
-        }
-      >
-        <IconButton
-          size="small"
-          type="plain"
-          data-testid="left-sidebar-page-operation-button"
-          style={{ marginLeft: 4 }}
-        >
-          <MoreHorizontalIcon />
-        </IconButton>
-      </Menu>
-      {page ? (
-        <InfoModal
-          open={openInfoModal}
-          onOpenChange={setOpenInfoModal}
-          page={page}
-          workspace={workspaceService.workspace}
-        />
-      ) : null}
-    </>
-  );
-};

packages/frontend/core/src/components/pure/workspace-slider-bar/components/postfix-item.tsx

@@ -1,69 +0,0 @@
-import { toast } from '@affine/component';
-import { RenameModal } from '@affine/component/rename-modal';
-import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
-import { useI18n } from '@affine/i18n';
-import { useServices, WorkspaceService } from '@toeverything/infra';
-import { useCallback, useState } from 'react';
-
-import { AddFavouriteButton } from '../favorite/add-favourite-button';
-import * as styles from '../favorite/styles.css';
-import { OperationMenuButton } from './operation-menu-button';
-
-export type PostfixItemProps = {
-  pageId: string;
-  pageTitle: string;
-  inFavorites?: boolean;
-  isReferencePage?: boolean;
-  inAllowList?: boolean;
-  removeFromAllowList?: (id: string) => void;
-};
-
-export const PostfixItem = ({ ...props }: PostfixItemProps) => {
-  const { pageId, pageTitle } = props;
-  const t = useI18n();
-  const [open, setOpen] = useState(false);
-  const { workspaceService } = useServices({
-    WorkspaceService,
-  });
-  const { setDocTitle } = useDocMetaHelper(
-    workspaceService.workspace.docCollection
-  );
-
-  const handleRename = useCallback(
-    (newName: string) => {
-      setDocTitle(pageId, newName);
-      setOpen(false);
-      toast(t['com.affine.toastMessage.rename']());
-    },
-    [pageId, setDocTitle, t]
-  );
-
-  return (
-    <div
-      className={styles.favoritePostfixItem}
-      onMouseDown={e => {
-        // prevent drag
-        e.stopPropagation();
-      }}
-      onClick={e => {
-        // prevent jump to page
-        e.stopPropagation();
-        e.preventDefault();
-      }}
-    >
-      <AddFavouriteButton {...props} />
-      <OperationMenuButton
-        setRenameModalOpen={() => {
-          setOpen(true);
-        }}
-        {...props}
-      />
-      <RenameModal
-        open={open}
-        onOpenChange={setOpen}
-        onRename={handleRename}
-        currentName={pageTitle}
-      />
-    </div>
-  );
-};

packages/frontend/core/src/components/pure/workspace-slider-bar/doc-tree/doc.css.ts

@@ -1,61 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { globalStyle, style } from '@vanilla-extract/css';
-
-export const title = style({
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
-globalStyle(`[data-draggable=true] ${title}:before`, {
-  content: '""',
-  position: 'absolute',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  left: 0,
-  width: 4,
-  height: 4,
-  transition: 'height 0.2s, opacity 0.2s',
-  backgroundColor: cssVar('placeholderColor'),
-  borderRadius: '2px',
-  opacity: 0,
-  willChange: 'height, opacity',
-});
-globalStyle(`[data-draggable=true] ${title}:hover:before`, {
-  height: 12,
-  opacity: 1,
-});
-globalStyle(`[data-draggable=true][data-dragging=true] ${title}`, {
-  opacity: 0.5,
-});
-globalStyle(`[data-draggable=true][data-dragging=true] ${title}:before`, {
-  height: 32,
-  width: 2,
-  opacity: 1,
-});
-
-export const label = style({
-  selectors: {
-    '&[data-untitled="true"]': {
-      opacity: 0.6,
-    },
-  },
-});
-export const labelContainer = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-export const labelTooltipContainer = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-
-export const noReferences = style({
-  fontSize: cssVar('fontSm'),
-  textAlign: 'left',
-  paddingLeft: '32px',
-  color: cssVar('black30'),
-  userSelect: 'none',
-});

packages/frontend/core/src/components/pure/workspace-slider-bar/doc-tree/doc.tsx

@@ -1,174 +0,0 @@
-import { Loading, Tooltip } from '@affine/component';
-import type { MenuItemProps } from '@affine/core/components/app-sidebar';
-import {
-  type DNDIdentifier,
-  type DndWhere,
-  getDNDId,
-} from '@affine/core/hooks/affine/use-global-dnd-helper';
-import { DocsSearchService } from '@affine/core/modules/docs-search';
-import {
-  WorkbenchLink,
-  WorkbenchService,
-} from '@affine/core/modules/workbench';
-import { useI18n } from '@affine/i18n';
-import { EdgelessIcon, PageIcon } from '@blocksuite/icons/rc';
-import { useDraggable } from '@dnd-kit/core';
-import {
-  DocsService,
-  LiveData,
-  useLiveData,
-  useServices,
-} from '@toeverything/infra';
-import { nanoid } from 'nanoid';
-import { useEffect, useMemo, useState } from 'react';
-
-import { DragMenuItemOverlay } from '../components/drag-menu-item-overlay';
-import { PostfixItem, type PostfixItemProps } from '../components/postfix-item';
-import * as styles from './doc.css';
-import { SidebarDocTreeNode } from './node';
-
-export type SidebarDocItemProps = {
-  docId: string;
-  postfixConfig?: Omit<
-    PostfixItemProps,
-    'pageId' | 'pageTitle' | 'isReferencePage'
-  >;
-  isReference?: boolean;
-  dragConfig?: {
-    parentId?: DNDIdentifier;
-    where: DndWhere;
-  };
-  menuItemProps?: Partial<MenuItemProps> & Record<`data-${string}`, string>;
-};
-
-export const SidebarDocItem = function SidebarDocItem({
-  docId,
-  postfixConfig,
-  isReference,
-  dragConfig,
-  menuItemProps,
-}: SidebarDocItemProps) {
-  const { docsSearchService, workbenchService, docsService } = useServices({
-    DocsSearchService,
-    WorkbenchService,
-    DocsService,
-  });
-  const t = useI18n();
-  const location = useLiveData(workbenchService.workbench.location$);
-  const active = location.pathname === '/' + docId;
-
-  const docRecord = useLiveData(docsService.list.doc$(docId));
-  const docMode = useLiveData(docRecord?.mode$);
-  const docTitle = useLiveData(docRecord?.title$);
-  const icon = useMemo(() => {
-    return docMode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
-  }, [docMode]);
-
-  const references = 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);
-  useEffect(() => {
-    setReferencesLoading(
-      prev =>
-        prev &&
-        indexerLoading /* after loading becomes false, it never becomes true */
-    );
-  }, [indexerLoading]);
-  const untitled = !docTitle;
-  const title = docTitle || t['Untitled']();
-
-  // drag (not available for sub-docs)
-  const dragItemId = dragConfig
-    ? getDNDId(dragConfig.where, 'doc', docId, dragConfig.parentId)
-    : nanoid();
-  const docTitleElement = useMemo(() => {
-    return <DragMenuItemOverlay icon={icon} title={docTitle} />;
-  }, [icon, docTitle]);
-  const { setNodeRef, attributes, listeners, isDragging } = useDraggable({
-    id: dragItemId,
-    data: { preview: docTitleElement },
-    disabled: !dragConfig || isReference,
-  });
-
-  const dragAttrs: Partial<MenuItemProps> = isReference
-    ? {
-        // prevent dragging parent node
-        onMouseDown: e => e.stopPropagation(),
-      }
-    : { ...attributes, ...listeners };
-
-  // workaround to avoid invisible in playwright caused by nested drag
-  delete dragAttrs['aria-disabled'];
-
-  return (
-    <SidebarDocTreeNode
-      ref={setNodeRef}
-      rootProps={{ 'data-dragging': isDragging }}
-      node={{ type: 'doc', data: docId }}
-      to={`/${docId}`}
-      linkComponent={WorkbenchLink}
-      menuItemProps={{
-        'data-type': isReference ? 'reference-page' : undefined,
-        icon,
-        active,
-        className: styles.title,
-        postfix: (
-          <PostfixItem
-            pageId={docId}
-            pageTitle={title}
-            isReferencePage={isReference}
-            {...postfixConfig}
-          />
-        ),
-        ...dragAttrs,
-        ...menuItemProps,
-      }}
-      subTree={
-        references ? (
-          references.length > 0 ? (
-            references.map(({ docId: childDocId }) => {
-              return (
-                <SidebarDocItem
-                  key={childDocId}
-                  docId={childDocId}
-                  isReference={true}
-                  menuItemProps={{
-                    'data-testid': `reference-page-${childDocId}`,
-                  }}
-                />
-              );
-            })
-          ) : (
-            <div className={styles.noReferences}>
-              {t['com.affine.rootAppSidebar.docs.no-subdoc']()}
-            </div>
-          )
-        ) : null
-      }
-    >
-      <div className={styles.labelContainer}>
-        <span className={styles.label} data-untitled={untitled}>
-          {title || t['Untitled']()}
-        </span>
-        {referencesLoading && (
-          <Tooltip
-            content={t['com.affine.rootAppSidebar.docs.references-loading']()}
-          >
-            <div className={styles.labelTooltipContainer}>
-              <Loading />
-            </div>
-          </Tooltip>
-        )}
-      </div>
-    </SidebarDocTreeNode>
-  );
-};

packages/frontend/core/src/components/pure/workspace-slider-bar/doc-tree/node.css.ts

@@ -1,6 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const collapseContent = style({
-  paddingTop: 2,
-  paddingLeft: 20,
-});

packages/frontend/core/src/components/pure/workspace-slider-bar/doc-tree/node.tsx

@@ -1,103 +0,0 @@
-import {
-  MenuItem,
-  type MenuItemProps,
-  MenuLinkItem,
-} from '@affine/core/components/app-sidebar';
-import type { Collection } from '@affine/env/filter';
-import * as Collapsible from '@radix-ui/react-collapsible';
-import {
-  createContext,
-  forwardRef,
-  type PropsWithChildren,
-  type ReactNode,
-  useContext,
-  useState,
-} from 'react';
-import { Link, type To } from 'react-router-dom';
-
-import * as styles from './node.css';
-
-type SidebarDocTreeNode =
-  | {
-      type: 'collection';
-      data: Collection;
-    }
-  // | { type: 'tag' }
-  // | { type: 'folder' }
-  | {
-      type: 'doc';
-      data: string;
-    };
-
-export type SidebarDocTreeNodeProps = PropsWithChildren<{
-  node: SidebarDocTreeNode;
-  subTree?: ReactNode;
-  to?: To;
-  linkComponent?: React.ComponentType<{ to: To; className?: string }>;
-
-  menuItemProps?: MenuItemProps & Record<`data-${string}`, unknown>;
-  rootProps?: Collapsible.CollapsibleProps & Record<`data-${string}`, unknown>;
-}>;
-
-type SidebarDocTreeNodeContext = {
-  ancestors: SidebarDocTreeNode[];
-};
-
-export const sidebarDocTreeContext =
-  createContext<SidebarDocTreeNodeContext | null>(null);
-
-/**
- * Tree node for the sidebar doc/folder/tag/collection tree.
- * This component is used to manage:
- * - Collapsing state
- * - Ancestors context
- * - Link/Menu item rendering
- * - Subtree indentation (left/top)
- */
-export const SidebarDocTreeNode = forwardRef(function SidebarDocTreeNode(
-  {
-    node,
-    children,
-    subTree,
-    to,
-    linkComponent: LinkComponent = Link,
-    menuItemProps,
-    rootProps,
-  }: SidebarDocTreeNodeProps,
-  ref: React.Ref<HTMLDivElement>
-) {
-  const [collapsed, setCollapsed] = useState(true);
-  const { ancestors } = useContext(sidebarDocTreeContext) ?? { ancestors: [] };
-
-  const finalMenuItemProps: SidebarDocTreeNodeProps['menuItemProps'] = {
-    ...menuItemProps,
-    collapsed,
-    onCollapsedChange: setCollapsed,
-  };
-
-  return (
-    <sidebarDocTreeContext.Provider value={{ ancestors: [...ancestors, node] }}>
-      <Collapsible.Root
-        {...rootProps}
-        ref={ref}
-        open={!collapsed}
-        onOpenChange={setCollapsed}
-      >
-        {to ? (
-          <MenuLinkItem
-            to={to}
-            linkComponent={LinkComponent}
-            {...finalMenuItemProps}
-          >
-            {children}
-          </MenuLinkItem>
-        ) : (
-          <MenuItem {...finalMenuItemProps}>{children}</MenuItem>
-        )}
-        <Collapsible.Content className={styles.collapseContent}>
-          {collapsed ? null : subTree}
-        </Collapsible.Content>
-      </Collapsible.Root>
-    </sidebarDocTreeContext.Provider>
-  );
-});

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/add-favourite-button.tsx

@@ -1,68 +0,0 @@
-import { IconButton } from '@affine/component/ui/button';
-import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
-import { TelemetryWorkspaceContextService } from '@affine/core/modules/telemetry/services/telemetry';
-import { mixpanel } from '@affine/core/utils';
-import { PlusIcon } from '@blocksuite/icons/rc';
-import { useService, useServices, WorkspaceService } from '@toeverything/infra';
-
-import { usePageHelper } from '../../../blocksuite/block-suite-page-list/utils';
-
-type AddFavouriteButtonProps = {
-  pageId?: string;
-};
-
-export const AddFavouriteButton = ({ pageId }: AddFavouriteButtonProps) => {
-  const { workspaceService } = useServices({
-    WorkspaceService,
-  });
-  const { createPage, createLinkedPage } = usePageHelper(
-    workspaceService.workspace.docCollection
-  );
-  const favAdapter = useService(FavoriteItemsAdapter);
-  const telemetry = useService(TelemetryWorkspaceContextService);
-  const handleAddFavorite = useAsyncCallback(
-    async e => {
-      const page = telemetry.getPageContext();
-
-      if (pageId) {
-        e.stopPropagation();
-        e.preventDefault();
-        createLinkedPage(pageId);
-        mixpanel.track('DocCreated', {
-          // page:
-          segment: 'all doc',
-          module: 'favorite',
-          control: 'new fav sub doc',
-          type: 'doc',
-          category: 'page',
-          page: page,
-        });
-      } else {
-        const page = createPage();
-        page.load();
-        favAdapter.set(page.id, 'doc', true);
-        mixpanel.track('DocCreated', {
-          // page:
-          segment: 'all doc',
-          module: 'favorite',
-          control: 'new fav doc',
-          type: 'doc',
-          category: 'page',
-          page: page,
-        });
-      }
-    },
-    [telemetry, pageId, createLinkedPage, createPage, favAdapter]
-  );
-
-  return (
-    <IconButton
-      data-testid="slider-bar-add-favorite-button"
-      onClick={handleAddFavorite}
-      size="small"
-    >
-      <PlusIcon />
-    </IconButton>
-  );
-};

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx

@@ -1,22 +0,0 @@
-import { useI18n } from '@affine/i18n';
-import { FavoriteIcon } from '@blocksuite/icons/rc';
-
-import * as styles from './styles.css';
-export const EmptyItem = () => {
-  const t = useI18n();
-  return (
-    <div className={styles.emptyFavouritesContent}>
-      <div className={styles.emptyFavouritesIconWrapper}>
-        <FavoriteIcon className={styles.emptyFavouritesIcon} />
-      </div>
-      <div
-        data-testid="slider-bar-favourites-empty-message"
-        className={styles.emptyFavouritesMessage}
-      >
-        {t['com.affine.rootAppSidebar.favorites.empty']()}
-      </div>
-    </div>
-  );
-};
-
-export default EmptyItem;

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx

@@ -1,132 +0,0 @@
-import { CategoryDivider } from '@affine/core/components/app-sidebar';
-import {
-  getDNDId,
-  resolveDragEndIntent,
-} from '@affine/core/hooks/affine/use-global-dnd-helper';
-import { CollectionService } from '@affine/core/modules/collection';
-import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
-import type { WorkspaceFavoriteItem } from '@affine/core/modules/properties/services/schema';
-import { useI18n } from '@affine/i18n';
-import { useDndContext, useDroppable } from '@dnd-kit/core';
-import {
-  SortableContext,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import {
-  DocsService,
-  useLiveData,
-  useService,
-  useServices,
-} from '@toeverything/infra';
-import { Fragment, useCallback, useMemo } from 'react';
-
-import { CollectionSidebarNavItem } from '../collections';
-import type { FavoriteListProps } from '../index';
-import { AddFavouriteButton } from './add-favourite-button';
-import EmptyItem from './empty-item';
-import { FavouriteDocSidebarNavItem } from './favourite-nav-item';
-import * as styles from './styles.css';
-
-const FavoriteListInner = ({ docCollection: workspace }: FavoriteListProps) => {
-  const { favoriteItemsAdapter, docsService, collectionService } = useServices({
-    FavoriteItemsAdapter,
-    DocsService,
-    CollectionService,
-  });
-  const collections = useLiveData(collectionService.collections$);
-  const docs = useLiveData(docsService.list.docs$);
-  const trashDocs = useLiveData(docsService.list.trashDocs$);
-  const dropItemId = getDNDId('sidebar-pin', 'container', workspace.id);
-
-  const favourites = 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;
-      });
-    })
-  );
-
-  // disable drop styles when dragging from the pin list
-  const { active } = useDndContext();
-
-  const { setNodeRef, over } = useDroppable({
-    id: dropItemId,
-  });
-
-  const intent = resolveDragEndIntent(active, over);
-  const shouldRenderDragOver = intent === 'pin:add';
-
-  const renderFavItem = useCallback(
-    (item: WorkspaceFavoriteItem) => {
-      if (item.type === 'collection') {
-        const collection = collections.find(c => c.id === item.id);
-        if (collection) {
-          const dragItemId = getDNDId(
-            'sidebar-pin',
-            'collection',
-            collection.id
-          );
-          return (
-            <CollectionSidebarNavItem
-              dndId={dragItemId}
-              className={styles.favItemWrapper}
-              docCollection={workspace}
-              collection={collection}
-            />
-          );
-        }
-      } else if (item.type === 'doc') {
-        return (
-          <FavouriteDocSidebarNavItem
-            docId={item.id}
-            // memo?
-          />
-        );
-      }
-      return null;
-    },
-    [collections, workspace]
-  );
-
-  const t = useI18n();
-
-  return (
-    <div
-      className={styles.favoriteList}
-      data-testid="favourites"
-      ref={setNodeRef}
-      data-over={shouldRenderDragOver}
-    >
-      <CategoryDivider label={t['com.affine.rootAppSidebar.favorites']()}>
-        <AddFavouriteButton />
-      </CategoryDivider>
-      {favourites.map(item => {
-        return <Fragment key={item.id}>{renderFavItem(item)}</Fragment>;
-      })}
-      {favourites.length === 0 && <EmptyItem />}
-    </div>
-  );
-};
-
-export const FavoriteList = ({
-  docCollection: workspace,
-}: FavoriteListProps) => {
-  const favAdapter = useService(FavoriteItemsAdapter);
-  const favourites = useLiveData(favAdapter.orderedFavorites$);
-  const sortItems = useMemo(() => {
-    return favourites.map(fav => getDNDId('sidebar-pin', fav.type, fav.id));
-  }, [favourites]);
-  return (
-    <SortableContext items={sortItems} strategy={verticalListSortingStrategy}>
-      <FavoriteListInner docCollection={workspace} />
-    </SortableContext>
-  );
-};
-
-export default FavoriteList;

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favourite-nav-item.tsx

@@ -1,81 +0,0 @@
-import {
-  getDNDId,
-  parseDNDId,
-} from '@affine/core/hooks/affine/use-global-dnd-helper';
-import { useI18n } from '@affine/i18n';
-import { EdgelessIcon, PageIcon } from '@blocksuite/icons/rc';
-import { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { DocsService, useLiveData, useService } from '@toeverything/infra';
-import { useMemo } from 'react';
-
-import { DragMenuItemOverlay } from '../components/drag-menu-item-overlay';
-import { SidebarDocItem } from '../doc-tree/doc';
-import * as styles from './styles.css';
-
-const animateLayoutChanges: AnimateLayoutChanges = ({
-  isSorting,
-  wasDragging,
-}) => (isSorting || wasDragging ? false : true);
-
-export const FavouriteDocSidebarNavItem = ({ docId }: { docId: string }) => {
-  const t = useI18n();
-  const docsService = useService(DocsService);
-  const docRecord = useLiveData(docsService.list.doc$(docId));
-  const docMode = useLiveData(docRecord?.mode$);
-  const docTitle = useLiveData(docRecord?.title$);
-  const pageTitle = docTitle || t['Untitled']();
-
-  const icon = useMemo(() => {
-    return docMode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
-  }, [docMode]);
-
-  const overlayPreview = useMemo(() => {
-    return <DragMenuItemOverlay icon={icon} title={pageTitle} />;
-  }, [icon, pageTitle]);
-
-  const dragItemId = getDNDId('sidebar-pin', 'doc', docId);
-
-  const {
-    setNodeRef,
-    isDragging,
-    attributes,
-    listeners,
-    transform,
-    transition,
-    active,
-  } = useSortable({
-    id: dragItemId,
-    data: {
-      preview: overlayPreview,
-    },
-    animateLayoutChanges,
-  });
-
-  const isSorting = parseDNDId(active?.id)?.where === 'sidebar-pin';
-  const style = {
-    transform: CSS.Translate.toString(transform),
-    transition: isSorting ? transition : undefined,
-  };
-
-  return (
-    <div
-      className={styles.favItemWrapper}
-      style={style}
-      ref={setNodeRef}
-      data-draggable={true}
-      data-dragging={isDragging}
-      data-testid={`favourite-page-${docId}`}
-      data-favourite-page-item
-      {...attributes}
-      {...listeners}
-    >
-      <SidebarDocItem
-        docId={docId}
-        postfixConfig={{
-          inFavorites: true,
-        }}
-      />
-    </div>
-  );
-};

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/index.tsx

@@ -1 +0,0 @@
-export * from './favorite-list';

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/styles.css.ts

@@ -1,123 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { globalStyle, style } from '@vanilla-extract/css';
-export const label = style({
-  selectors: {
-    '&[data-untitled="true"]': {
-      opacity: 0.6,
-    },
-  },
-});
-export const labelContainer = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-export const labelTooltipContainer = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-export const favItemWrapper = style({
-  display: 'flex',
-  flexDirection: 'column',
-  flexShrink: 0,
-  userSelect: 'none',
-});
-export const collapsibleContent = style({
-  overflow: 'hidden',
-  marginTop: '4px',
-  selectors: {
-    '&[data-hidden="true"]': {
-      display: 'none',
-    },
-  },
-});
-export const collapsibleContentInner = style({
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-export const dragPageItemOverlay = style({
-  display: 'flex',
-  alignItems: 'center',
-  background: cssVar('hoverColorFilled'),
-  boxShadow: cssVar('menuShadow'),
-  minHeight: '30px',
-  maxWidth: '360px',
-  width: '100%',
-  fontSize: cssVar('fontSm'),
-  gap: '8px',
-  padding: '4px',
-  borderRadius: '4px',
-});
-globalStyle(`${dragPageItemOverlay} svg`, {
-  width: '20px',
-  height: '20px',
-  color: cssVar('iconColor'),
-});
-globalStyle(`${dragPageItemOverlay} span`, {
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-});
-export const favoriteList = style({
-  overflow: 'hidden',
-  borderRadius: '4px',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2,
-  selectors: {
-    '&[data-over="true"]': {
-      background: cssVar('hoverColorFilled'),
-    },
-  },
-});
-export const favoritePostfixItem = style({
-  display: 'flex',
-  alignItems: 'center',
-});
-export const menuItem = style({
-  gap: '8px',
-});
-globalStyle(`${menuItem} svg`, {
-  width: '20px',
-  height: '20px',
-  color: cssVar('iconColor'),
-});
-globalStyle(`${menuItem}.danger:hover svg`, {
-  color: cssVar('errorColor'),
-});
-export const emptyFavouritesContent = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 6,
-  padding: '9px 20px 25px 21px',
-});
-export const emptyFavouritesIconWrapper = style({
-  width: 36,
-  height: 36,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '50%',
-  backgroundColor: cssVar('hoverColor'),
-});
-export const emptyFavouritesIcon = style({
-  fontSize: 20,
-  color: cssVar('iconSecondary'),
-});
-export const emptyFavouritesMessage = style({
-  fontSize: cssVar('fontSm'),
-  textAlign: 'center',
-  color: cssVar('black30'),
-  userSelect: 'none',
-});
-export const noReferences = style({
-  fontSize: cssVar('fontSm'),
-  textAlign: 'left',
-  paddingLeft: '32px',
-  color: cssVar('black30'),
-  lineHeight: '30px',
-  userSelect: 'none',
-});

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -1,23 +1,23 @@
-import { AnimatedDeleteIcon } from '@affine/component';
-import { getDNDId } from '@affine/core/hooks/affine/use-global-dnd-helper';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { CollectionService } from '@affine/core/modules/collection';
+import {
+  ExplorerCollections,
+  ExplorerFavorites,
+  ExplorerOrganize,
+} from '@affine/core/modules/explorer';
+import { ExplorerTags } from '@affine/core/modules/explorer/views/sections/tags';
 import { TelemetryWorkspaceContextService } from '@affine/core/modules/telemetry/services/telemetry';
 import { mixpanel } from '@affine/core/utils';
 import { apis, events } from '@affine/electron-api';
 import { useI18n } from '@affine/i18n';
 import { FolderIcon, SettingsIcon } from '@blocksuite/icons/rc';
 import type { Doc } from '@blocksuite/store';
-import { useDroppable } from '@dnd-kit/core';
 import type { Workspace } from '@toeverything/infra';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useAtomValue } from 'jotai';
-import { nanoid } from 'nanoid';
-import type { HTMLAttributes, ReactElement } from 'react';
-import { forwardRef, memo, useCallback, useEffect } from 'react';
+import type { ReactElement } from 'react';
+import { memo, useEffect } from 'react';
 
 import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
-import { useNavigateHelper } from '../../hooks/use-navigate-helper';
 import { WorkbenchService } from '../../modules/workbench';
 import {
   AddPageButton,
@@ -31,10 +31,6 @@ import {
   SidebarContainer,
   SidebarScrollableContainer,
 } from '../app-sidebar';
-import { createEmptyCollection, useEditCollectionName } from '../page-list';
-import { CollectionsList } from '../pure/workspace-slider-bar/collections';
-import { AddCollectionButton } from '../pure/workspace-slider-bar/collections/add-collection-button';
-import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
 import { WorkspaceSelector } from '../workspace-selector';
 import ImportPage from './import-page';
 import {
@@ -44,6 +40,7 @@ import {
   workspaceWrapper,
 } from './index.css';
 import { AppSidebarJournalButton } from './journal-button';
+import { TrashButton } from './trash-button';
 import { UpdaterButton } from './updater-button';
 import { UserInfo } from './user-info';
 
@@ -61,29 +58,6 @@ export type RootAppSidebarProps = {
   };
 };
 
-const RouteMenuLinkItem = forwardRef<
-  HTMLDivElement,
-  {
-    path: string;
-    icon: ReactElement;
-    active?: boolean;
-    children?: ReactElement;
-  } & HTMLAttributes<HTMLDivElement>
->(({ path, icon, active, children, ...props }, ref) => {
-  return (
-    <MenuLinkItem
-      ref={ref}
-      {...props}
-      active={active}
-      to={path ?? ''}
-      icon={icon}
-    >
-      {children}
-    </MenuLinkItem>
-  );
-});
-RouteMenuLinkItem.displayName = 'RouteMenuLinkItem';
-
 /**
  * This is for the whole affine app sidebar.
  * This component wraps the app sidebar in `@affine/component` with logic and data.
@@ -113,8 +87,6 @@ export const RootAppSidebar = memo(
 
     const allPageActive = currentPath === '/all';
 
-    const trashActive = currentPath === '/trash';
-
     const onClickNewPage = useAsyncCallback(async () => {
       const page = createPage();
       page.load();
@@ -129,7 +101,6 @@ export const RootAppSidebar = memo(
       });
     }, [createPage, openPage, telemetry]);
 
-    const navigateHelper = useNavigateHelper();
     // Listen to the "New Page" action from the menu
     useEffect(() => {
       if (environment.isDesktop) {
@@ -147,28 +118,6 @@ export const RootAppSidebar = memo(
       }
     }, [sidebarOpen]);
 
-    const dropItemId = getDNDId('sidebar-trash', 'container', 'trash');
-    const trashDroppable = useDroppable({
-      id: dropItemId,
-    });
-
-    const collection = useService(CollectionService);
-    const { node, open } = useEditCollectionName({
-      title: t['com.affine.editCollection.createCollection'](),
-      showTips: true,
-    });
-    const handleCreateCollection = useCallback(() => {
-      open('')
-        .then(name => {
-          const id = nanoid();
-          collection.addCollection(createEmptyCollection(id, { name }));
-          navigateHelper.jumpToCollection(docCollection.id, id);
-        })
-        .catch(err => {
-          console.error(err);
-        });
-    }, [docCollection.id, collection, navigateHelper, open]);
-
     return (
       <AppSidebar
         clientBorder={appSettings.clientBorder}
@@ -189,15 +138,15 @@ export const RootAppSidebar = memo(
             />
             <AddPageButton onClick={onClickNewPage} />
           </div>
-          <RouteMenuLinkItem
+          <MenuLinkItem
             icon={<FolderIcon />}
             active={allPageActive}
-            path={paths.all(currentWorkspaceId)}
+            to={paths.all(currentWorkspaceId)}
           >
             <span data-testid="all-pages">
               {t['com.affine.workspaceSubPath.all']()}
             </span>
-          </RouteMenuLinkItem>
+          </MenuLinkItem>
           <AppSidebarJournalButton
             docCollection={currentWorkspace.docCollection}
           />
@@ -212,28 +161,15 @@ export const RootAppSidebar = memo(
           </MenuItem>
         </SidebarContainer>
         <SidebarScrollableContainer>
-          <FavoriteList docCollection={docCollection} />
-          <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
-            <AddCollectionButton node={node} onClick={handleCreateCollection} />
-          </CategoryDivider>
-          <CollectionsList
-            docCollection={docCollection}
-            onCreate={handleCreateCollection}
-          />
+          {runtimeConfig.enableOrganize && <ExplorerOrganize />}
+          <ExplorerFavorites />
+          <ExplorerCollections />
+          <ExplorerTags />
           <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
           {/* fixme: remove the following spacer */}
           <div style={{ height: '4px' }} />
           <div style={{ padding: '0 8px' }}>
-            <RouteMenuLinkItem
-              ref={trashDroppable.setNodeRef}
-              icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
-              active={trashActive || trashDroppable.isOver}
-              path={paths.trash(currentWorkspaceId)}
-            >
-              <span data-testid="trash-page">
-                {t['com.affine.workspaceSubPath.trash']()}
-              </span>
-            </RouteMenuLinkItem>
+            <TrashButton />
             <ImportPage docCollection={docCollection} />
           </div>
         </SidebarScrollableContainer>

packages/frontend/core/src/components/root-app-sidebar/trash-button.tsx

@@ -0,0 +1,73 @@
+import {
+  AnimatedDeleteIcon,
+  useConfirmModal,
+  useDropTarget,
+} from '@affine/component';
+import { WorkbenchLink } from '@affine/core/modules/workbench';
+import type { AffineDNDData } from '@affine/core/types/dnd';
+import { useI18n } from '@affine/i18n';
+import {
+  DocsService,
+  GlobalContextService,
+  useLiveData,
+  useService,
+} from '@toeverything/infra';
+
+import { MenuLinkItem } from '../app-sidebar';
+
+export const TrashButton = () => {
+  const t = useI18n();
+  const docsService = useService(DocsService);
+  const { openConfirmModal } = useConfirmModal();
+  const globalContextService = useService(GlobalContextService);
+  const trashActive = useLiveData(globalContextService.globalContext.isTrash.$);
+
+  const { dropTargetRef, draggedOver } = useDropTarget<AffineDNDData>(
+    () => ({
+      data: {
+        at: 'app-sidebar:trash',
+      },
+      canDrop(data) {
+        return data.source.data.entity?.type === 'doc';
+      },
+      onDrop(data) {
+        if (data.source.data.entity?.type === 'doc') {
+          const docId = data.source.data.entity.id;
+          const docRecord = docsService.list.doc$(docId).value;
+          if (docRecord) {
+            openConfirmModal({
+              title: t['com.affine.moveToTrash.confirmModal.title'](),
+              description: t['com.affine.moveToTrash.confirmModal.description'](
+                {
+                  title: docRecord.title$.value || t['Untitled'](),
+                }
+              ),
+              confirmText: t.Delete(),
+              confirmButtonOptions: {
+                type: 'error',
+              },
+              onConfirm() {
+                docRecord.moveToTrash();
+              },
+            });
+          }
+        }
+      },
+    }),
+    [docsService.list, openConfirmModal, t]
+  );
+
+  return (
+    <MenuLinkItem
+      ref={dropTargetRef}
+      icon={<AnimatedDeleteIcon closed={draggedOver} />}
+      active={trashActive || draggedOver}
+      linkComponent={WorkbenchLink}
+      to={'/trash'}
+    >
+      <span data-testid="trash-page">
+        {t['com.affine.workspaceSubPath.trash']()}
+      </span>
+    </MenuLinkItem>
+  );
+};

packages/frontend/core/src/hooks/affine/use-global-dnd-helper.ts

@@ -1,281 +0,0 @@
-import { toast } from '@affine/component';
-import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
-import { CollectionService } from '@affine/core/modules/collection';
-import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
-import { useI18n } from '@affine/i18n';
-import type {
-  Active,
-  DragEndEvent,
-  Over,
-  UniqueIdentifier,
-} from '@dnd-kit/core';
-import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
-import { useMemo } from 'react';
-
-import { useDeleteCollectionInfo } from './use-delete-collection-info';
-import { useTrashModalHelper } from './use-trash-modal-helper';
-
-export type DndWhere =
-  | 'sidebar-pin'
-  | 'sidebar-collections'
-  | 'sidebar-trash'
-  | 'doc-list'
-  | 'collection-list'
-  | 'tag-list';
-
-export type DNDItemKind = 'container' | 'collection' | 'doc' | 'tag';
-
-// where:kind:id
-// we want to make the id something that can be used to identify the item
-//
-// Note, not all combinations are valid
-type DNDItemIdentifier = `${DndWhere}:${DNDItemKind}:${string}`;
-export type DNDIdentifier =
-  | `${DNDItemIdentifier}/${DNDItemIdentifier}`
-  | DNDItemIdentifier;
-
-export type DndItem = {
-  where: DndWhere;
-  kind: DNDItemKind;
-  itemId: string;
-  parent?: DndItem; // for now we only support one level of nesting
-};
-
-export function getDNDId(
-  where: DndWhere,
-  kind: DNDItemKind,
-  id: string,
-  parentId?: DNDIdentifier
-): DNDIdentifier {
-  const itemId = `${where}:${kind}:${id}` as DNDItemIdentifier;
-  return parentId ? `${parentId}/${itemId}` : itemId;
-}
-
-export function parseDNDId(
-  id: UniqueIdentifier | null | undefined
-): DndItem | undefined {
-  if (typeof id !== 'string') return undefined;
-  const parts = id.split('/');
-  if (parts.length === 1) {
-    const [where, kind, itemId] = id.split(':') as [
-      DndWhere,
-      DNDItemKind,
-      string,
-    ];
-    return where && kind && itemId
-      ? {
-          where,
-          kind,
-          itemId,
-        }
-      : undefined;
-  } else if (parts.length === 2) {
-    const item = parseDNDId(parts[1]);
-    const parent = parseDNDId(parts[0]);
-    if (!item || !parent) return undefined;
-    return {
-      ...item,
-      parent,
-    };
-  } else {
-    throw new Error('Invalid DND ID');
-  }
-}
-
-export function resolveDragEndIntent(
-  active?: Active | null,
-  over?: Over | null
-) {
-  const dragItem = parseDNDId(active?.id);
-  const dropItem = parseDNDId(over?.id);
-
-  if (!dragItem) return null;
-
-  // any doc item to trash
-  if (
-    dropItem?.where === 'sidebar-trash' &&
-    (dragItem.kind === 'doc' || dragItem.kind === 'collection')
-  ) {
-    return 'trash:move-to';
-  }
-
-  // add page to collection
-  if (
-    dragItem.kind === 'doc' &&
-    dragItem.where !== dropItem?.where &&
-    dropItem?.kind === 'collection'
-  ) {
-    return 'collection:add';
-  }
-
-  // move a doc from one collection to another
-  if (
-    dragItem.kind === 'doc' &&
-    dragItem?.where === 'collection-list' &&
-    dragItem.parent?.kind === 'collection' &&
-    dropItem?.kind !== 'collection'
-  ) {
-    return 'collection:remove';
-  }
-
-  // move any doc/collection to sidebar pin
-  if (
-    dragItem.where !== 'sidebar-pin' &&
-    dropItem?.where === 'sidebar-pin' &&
-    (dragItem.kind === 'doc' || dragItem.kind === 'collection')
-  ) {
-    return 'pin:add';
-  }
-
-  // from sidebar pin to sidebar pin (reorder)
-  if (
-    dragItem.where === 'sidebar-pin' &&
-    dropItem?.where === 'sidebar-pin' &&
-    (dragItem.kind === 'doc' || dragItem.kind === 'collection') &&
-    (dropItem.kind === 'doc' || dropItem.kind === 'collection')
-  ) {
-    return 'pin:reorder';
-  }
-
-  // from sidebar pin to outside (remove from favourites)
-  if (
-    dragItem.where === 'sidebar-pin' &&
-    dropItem?.where !== 'sidebar-pin' &&
-    (dragItem.kind === 'doc' || dragItem.kind === 'collection')
-  ) {
-    return 'pin:remove';
-  }
-
-  return null;
-}
-
-export type GlobalDragEndIntent = ReturnType<typeof resolveDragEndIntent>;
-
-export const useGlobalDNDHelper = () => {
-  const t = useI18n();
-  const currentWorkspace = useService(WorkspaceService).workspace;
-  const favAdapter = useService(FavoriteItemsAdapter);
-  const workspace = currentWorkspace.docCollection;
-  const { setTrashModal } = useTrashModalHelper(workspace);
-  const { getDocMeta } = useDocMetaHelper(workspace);
-  const collectionService = useService(CollectionService);
-  const collections = useLiveData(collectionService.collections$);
-  const deleteInfo = useDeleteCollectionInfo();
-
-  return useMemo(() => {
-    return {
-      handleDragEnd: (e: DragEndEvent) => {
-        const intent = resolveDragEndIntent(e.active, e.over);
-
-        const dragItem = parseDNDId(e.active.id);
-        const dropItem = parseDNDId(e.over?.id);
-
-        switch (intent) {
-          case 'pin:remove':
-            if (
-              dragItem &&
-              favAdapter.isFavorite(
-                dragItem.itemId,
-                dragItem.kind as 'doc' | 'collection'
-              )
-            ) {
-              favAdapter.remove(
-                dragItem.itemId,
-                dragItem.kind as 'doc' | 'collection'
-              );
-              toast(
-                t['com.affine.cmdk.affine.editor.remove-from-favourites']()
-              );
-            }
-            return;
-
-          case 'pin:reorder':
-            if (dragItem && dropItem) {
-              const fromId = FavoriteItemsAdapter.getFavItemKey(
-                dragItem.itemId,
-                dragItem.kind as 'doc' | 'collection'
-              );
-              const toId = FavoriteItemsAdapter.getFavItemKey(
-                dropItem.itemId,
-                dropItem.kind as 'doc' | 'collection'
-              );
-              favAdapter.sorter.move(fromId, toId);
-            }
-
-            return;
-
-          case 'pin:add':
-            if (
-              dragItem &&
-              !favAdapter.isFavorite(
-                dragItem.itemId,
-                dragItem.kind as 'doc' | 'collection'
-              )
-            ) {
-              favAdapter.set(
-                dragItem.itemId,
-                dragItem.kind as 'collection' | 'doc',
-                true
-              );
-              toast(t['com.affine.cmdk.affine.editor.add-to-favourites']());
-            }
-            return;
-
-          case 'collection:add':
-            if (dragItem && dropItem) {
-              const pageId = dragItem.itemId;
-              const collectionId = dropItem.itemId;
-              const collection = collections.find(c => {
-                return c.id === collectionId;
-              });
-
-              if (collection?.allowList.includes(pageId)) {
-                toast(t['com.affine.collection.addPage.alreadyExists']());
-              } else {
-                collectionService.addPageToCollection(collectionId, pageId);
-                toast(t['com.affine.collection.addPage.success']());
-              }
-            }
-            return;
-
-          case 'collection:remove':
-            if (dragItem) {
-              const pageId = dragItem.itemId;
-              const collId = dragItem.parent?.itemId;
-              if (collId) {
-                collectionService.deletePageFromCollection(collId, pageId);
-                toast(t['com.affine.collection.removePage.success']());
-              }
-            }
-            return;
-
-          case 'trash:move-to':
-            if (dragItem) {
-              const pageId = dragItem.itemId;
-              if (dragItem.kind === 'doc') {
-                const pageTitle = getDocMeta(pageId)?.title ?? t['Untitled']();
-                setTrashModal({
-                  open: true,
-                  pageIds: [pageId],
-                  pageTitles: [pageTitle],
-                });
-              } else {
-                collectionService.deleteCollection(deleteInfo, dragItem.itemId);
-              }
-            }
-            return;
-          default:
-            return;
-        }
-      },
-    };
-  }, [
-    collectionService,
-    collections,
-    deleteInfo,
-    favAdapter,
-    getDocMeta,
-    setTrashModal,
-    t,
-  ]);
-};

packages/frontend/core/src/layouts/styles.css.ts

@@ -1,19 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const dragOverlay = style({
-  display: 'flex',
-  alignItems: 'center',
-  zIndex: 1001,
-  cursor: 'grabbing',
-  maxWidth: '360px',
-  transition: 'transform 0.2s, opacity 0.2s',
-  willChange: 'transform opacity',
-  selectors: {
-    '&[data-over-drop=true]': {
-      transform: 'scale(0.8)',
-    },
-    '&[data-sorting=true]': {
-      opacity: 0,
-    },
-  },
-});

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -6,14 +6,6 @@ import {
 import { useI18n } from '@affine/i18n';
 import { ZipTransformer } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
-import {
-  DndContext,
-  DragOverlay,
-  MouseSensor,
-  useDndContext,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
 import {
   type DocMode,
   DocsService,
@@ -26,9 +18,8 @@ import {
   WorkspaceService,
 } from '@toeverything/infra';
 import { useAtomValue, useSetAtom } from 'jotai';
-import type { PropsWithChildren, ReactNode } from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { createPortal } from 'react-dom';
+import type { PropsWithChildren } from 'react';
+import { useCallback, useEffect } from 'react';
 import {
   catchError,
   EMPTY,
@@ -46,16 +37,11 @@ import { AppContainer } from '../components/affine/app-container';
 import { SyncAwareness } from '../components/affine/awareness';
 import { appSidebarResizingAtom } from '../components/app-sidebar';
 import { usePageHelper } from '../components/blocksuite/block-suite-page-list/utils';
-import type { DraggableTitleCellData } from '../components/page-list';
 import { AIIsland } from '../components/pure/ai-island';
 import { RootAppSidebar } from '../components/root-app-sidebar';
 import { MainContainer } from '../components/workspace';
 import { WorkspaceUpgrade } from '../components/workspace-upgrade';
 import { useAppSettingHelper } from '../hooks/affine/use-app-setting-helper';
-import {
-  resolveDragEndIntent,
-  useGlobalDNDHelper,
-} from '../hooks/affine/use-global-dnd-helper';
 import { useRegisterFindInPageCommands } from '../hooks/affine/use-register-find-in-page-commands';
 import { useSubscriptionNotifyReader } from '../hooks/affine/use-subscription-notify';
 import { useNavigateHelper } from '../hooks/use-navigate-helper';
@@ -71,7 +57,6 @@ import {
 import { SWRConfigProvider } from '../providers/swr-config-provider';
 import { pathGenerator } from '../shared';
 import { mixpanel } from '../utils';
-import * as styles from './styles.css';
 
 export const WorkspaceLayout = function WorkspaceLayout({
   children,
@@ -215,6 +200,7 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
       activeTab: 'appearance',
       open: true,
     });
+
     mixpanel.track('SettingsViewed', {
       // page:
       segment: 'navigation panel',
@@ -225,99 +211,33 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
 
   const resizing = useAtomValue(appSidebarResizingAtom);
 
-  const sensors = useSensors(
-    useSensor(
-      MouseSensor,
-      useMemo(
-        /* useMemo is necessary to avoid re-render */
-        () => ({
-          activationConstraint: {
-            distance: 10,
-          },
-        }),
-        []
-      )
-    )
-  );
-
-  const { handleDragEnd } = useGlobalDNDHelper();
   const { appSettings } = useAppSettingHelper();
 
   return (
     <>
-      {/* This DndContext is used for drag page from all-pages list into a folder in sidebar */}
-      <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
-        <AppContainer data-current-path={currentPath} resizing={resizing}>
-          <RootAppSidebar
-            isPublicWorkspace={false}
-            onOpenQuickSearchModal={handleOpenQuickSearchModal}
-            onOpenSettingModal={handleOpenSettingModal}
-            currentWorkspace={currentWorkspace}
-            openPage={useCallback(
-              (pageId: string) => {
-                assertExists(currentWorkspace);
-                return openPage(currentWorkspace.id, pageId);
-              },
-              [currentWorkspace, openPage]
-            )}
-            createPage={handleCreatePage}
-            paths={pathGenerator}
-          />
+      <AppContainer data-current-path={currentPath} resizing={resizing}>
+        <RootAppSidebar
+          isPublicWorkspace={false}
+          onOpenQuickSearchModal={handleOpenQuickSearchModal}
+          onOpenSettingModal={handleOpenSettingModal}
+          currentWorkspace={currentWorkspace}
+          openPage={useCallback(
+            (pageId: string) => {
+              assertExists(currentWorkspace);
+              return openPage(currentWorkspace.id, pageId);
+            },
+            [currentWorkspace, openPage]
+          )}
+          createPage={handleCreatePage}
+          paths={pathGenerator}
+        />
 
-          <MainContainer clientBorder={appSettings.clientBorder}>
-            {needUpgrade || upgrading ? <WorkspaceUpgrade /> : children}
-          </MainContainer>
-        </AppContainer>
-        <GlobalDragOverlay />
-      </DndContext>
+        <MainContainer clientBorder={appSettings.clientBorder}>
+          {needUpgrade || upgrading ? <WorkspaceUpgrade /> : children}
+        </MainContainer>
+      </AppContainer>
       <QuickSearchContainer />
       <SyncAwareness />
     </>
   );
 };
-
-function GlobalDragOverlay() {
-  const { active, over } = useDndContext();
-  const [preview, setPreview] = useState<ReactNode>();
-
-  useEffect(() => {
-    if (active) {
-      const data = active.data.current as DraggableTitleCellData;
-      setPreview(data.preview);
-    }
-    // do not update content since it may disappear because of virtual rendering
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [active?.id]);
-
-  const intent = resolveDragEndIntent(active, over);
-
-  const overDropZone =
-    intent === 'pin:add' ||
-    intent === 'collection:add' ||
-    intent === 'trash:move-to';
-
-  const accent =
-    intent === 'pin:remove'
-      ? 'warning'
-      : intent === 'trash:move-to'
-        ? 'error'
-        : 'normal';
-
-  const sorting = intent === 'pin:reorder';
-
-  return createPortal(
-    <DragOverlay adjustScale={false} dropAnimation={null}>
-      {preview ? (
-        <div
-          data-over-drop={overDropZone}
-          data-sorting={sorting}
-          data-accent={accent}
-          className={styles.dragOverlay}
-        >
-          {preview}
-        </div>
-      ) : null}
-    </DragOverlay>,
-    document.body
-  );
-}

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() ?? []);

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);
 

packages/frontend/core/src/modules/explorer/README.md

@@ -0,0 +1,3 @@
+# explorer
+
+file manager in app left sidebar

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';

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',
+    },
+  },
+});

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>
+  );
+};

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>
+                ),
+              },
+            ]
+          : []
+      }
+    />
+  ));
+};

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,
+    ]
+  );
+};

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',
+    },
+  },
+});

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>
+  );
+};

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}
+        />
+      )}
+    </>
+  );
+};

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,
+    ]
+  );
+};

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',
+});

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',
+    },
+  },
+});

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>
+  );
+};

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>
+  );
+};

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',
+    },
+  },
+});

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>
+  );
+};

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>
+  );
+};

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,
+    ]
+  );
+};

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',
+});

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;
+}

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'),
+});

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>
+  );
+};

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}
+    </>
+  );
+};

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',
+});

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'),
+});

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>
+  );
+};

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}
+    />
+  );
+};

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',
+    },
+  },
+});

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'),
+});

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>
+  );
+};

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>
+  );
+};

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',
+    },
+  },
+});

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'),
+});

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>
+  );
+};

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>
+  );
+};

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',
+    },
+  },
+});

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);

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',
+});

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>
+  );
+};

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';

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`,
+      },
+  },
+});

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>
+  );
+};

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',
+    },
+  },
+});

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>
+  );
+};

packages/frontend/core/src/modules/explorer/views/tree/types.ts

@@ -0,0 +1,5 @@
+export type NodeOperation = {
+  index: number;
+  view: React.ReactNode;
+  inline?: boolean;
+};

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);
 }

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
+        );
+      }
+    }
+  }
+}

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
+    );
+  }
+}

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]);
+}

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);
+}

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,
+    });
+  }
+}

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;
+}

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];
+  }
 }

packages/frontend/core/src/pages/workspace/collection/index.tsx

@@ -14,12 +14,22 @@ import {
   PageIcon,
   ViewLayersIcon,
 } from '@blocksuite/icons/rc';
-import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
+import {
+  GlobalContextService,
+  useLiveData,
+  useService,
+  useServices,
+  WorkspaceService,
+} from '@toeverything/infra';
 import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
-import { ViewBody, ViewHeader } from '../../../modules/workbench';
+import {
+  useIsActiveView,
+  ViewBody,
+  ViewHeader,
+} from '../../../modules/workbench';
 import { WorkspaceSubPath } from '../../../shared';
 import * as styles from './collection.css';
 import { CollectionDetailHeader } from './header';
@@ -58,13 +68,18 @@ export const CollectionDetail = ({
 };
 
 export const Component = function CollectionPage() {
-  const collectionService = useService(CollectionService);
+  const { collectionService, globalContextService } = useServices({
+    CollectionService,
+    GlobalContextService,
+  });
+  const globalContext = globalContextService.globalContext;
 
   const collections = useLiveData(collectionService.collections$);
   const navigate = useNavigateHelper();
   const params = useParams();
   const workspace = useService(WorkspaceService).workspace;
   const collection = collections.find(v => v.id === params.collectionId);
+  const isActiveView = useIsActiveView();
 
   const notifyCollectionDeleted = useCallback(() => {
     navigate.jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
@@ -82,6 +97,19 @@ export const Component = function CollectionPage() {
     return notify.error({ title: text });
   }, [collectionService, navigate, params.collectionId, workspace.id]);
 
+  useEffect(() => {
+    if (isActiveView && collection) {
+      globalContext.collectionId.set(collection.id);
+      globalContext.isCollection.set(true);
+
+      return () => {
+        globalContext.collectionId.set(null);
+        globalContext.isCollection.set(false);
+      };
+    }
+    return;
+  }, [collection, globalContext, isActiveView]);
+
   useEffect(() => {
     if (!collection) {
       notifyCollectionDeleted();

packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.tsx

@@ -176,8 +176,7 @@ export function DetailPageHeader(props: PageHeaderProps) {
       <InfoModal
         open={openInfoModal}
         onOpenChange={setOpenInfoModal}
-        page={page}
-        workspace={workspace}
+        docId={page.id}
       />
     </>
   );

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -95,7 +95,6 @@ const DetailPageImpl = memo(function DetailPageImpl() {
 
   useEffect(() => {
     const disposable = AIProvider.slots.requestOpenWithChat.on(params => {
-      console.log(params);
       workbench.openSidebar();
       view.activeSidebarTab('chat');
 
@@ -110,9 +109,11 @@ const DetailPageImpl = memo(function DetailPageImpl() {
   useEffect(() => {
     if (isActiveView) {
       globalContext.docId.set(doc.id);
+      globalContext.isDoc.set(true);
 
       return () => {
         globalContext.docId.set(null);
+        globalContext.isDoc.set(false);
       };
     }
     return;

packages/frontend/core/src/pages/workspace/tag/index.tsx

@@ -4,9 +4,18 @@ import {
 } from '@affine/core/components/page-list';
 import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import { TagService } from '@affine/core/modules/tag';
-import { ViewBody, ViewHeader } from '@affine/core/modules/workbench';
-import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
-import { useMemo } from 'react';
+import {
+  useIsActiveView,
+  ViewBody,
+  ViewHeader,
+} from '@affine/core/modules/workbench';
+import {
+  GlobalContextService,
+  useLiveData,
+  useService,
+  WorkspaceService,
+} from '@toeverything/infra';
+import { useEffect, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { PageNotFound } from '../../404';
@@ -15,6 +24,7 @@ import { TagDetailHeader } from './header';
 import * as styles from './index.css';
 
 export const TagDetail = ({ tagId }: { tagId?: string }) => {
+  const globalContext = useService(GlobalContextService).globalContext;
   const currentWorkspace = useService(WorkspaceService).workspace;
   const pageMetas = useBlockSuiteDocMeta(currentWorkspace.docCollection);
 
@@ -28,6 +38,21 @@ export const TagDetail = ({ tagId }: { tagId?: string }) => {
     return pageMetas.filter(page => pageIdsSet.has(page.id));
   }, [pageIds, pageMetas]);
 
+  const isActiveView = useIsActiveView();
+
+  useEffect(() => {
+    if (isActiveView && currentTag) {
+      globalContext.tagId.set(currentTag.id);
+      globalContext.isTag.set(true);
+
+      return () => {
+        globalContext.tagId.set(null);
+        globalContext.isTag.set(false);
+      };
+    }
+    return;
+  }, [currentTag, globalContext, isActiveView]);
+
   if (!currentTag) {
     return <PageNotFound />;
   }

packages/frontend/core/src/pages/workspace/trash-page.tsx

@@ -7,9 +7,14 @@ import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-me
 import { useI18n } from '@affine/i18n';
 import { assertExists } from '@blocksuite/global/utils';
 import { DeleteIcon } from '@blocksuite/icons/rc';
-import { useService, WorkspaceService } from '@toeverything/infra';
+import {
+  GlobalContextService,
+  useService,
+  WorkspaceService,
+} from '@toeverything/infra';
+import { useEffect } from 'react';
 
-import { ViewBody, ViewHeader } from '../../modules/workbench';
+import { useIsActiveView, ViewBody, ViewHeader } from '../../modules/workbench';
 import { EmptyPageList } from './page-list-empty';
 import * as styles from './trash-page.css';
 
@@ -28,6 +33,7 @@ const TrashHeader = () => {
 };
 
 export const TrashPage = () => {
+  const globalContextService = useService(GlobalContextService);
   const currentWorkspace = useService(WorkspaceService).workspace;
   const docCollection = currentWorkspace.docCollection;
   assertExists(docCollection);
@@ -37,6 +43,19 @@ export const TrashPage = () => {
     trash: true,
   });
 
+  const isActiveView = useIsActiveView();
+
+  useEffect(() => {
+    if (isActiveView) {
+      globalContextService.globalContext.isTrash.set(true);
+
+      return () => {
+        globalContextService.globalContext.isTrash.set(false);
+      };
+    }
+    return;
+  }, [globalContextService.globalContext.isTrash, isActiveView]);
+
   return (
     <>
       <ViewHeader>

packages/frontend/core/src/types/dnd.ts

@@ -0,0 +1,77 @@
+import type { DNDData } from '@affine/component';
+
+export interface AffineDNDData extends DNDData {
+  draggable: {
+    entity?:
+      | {
+          type: 'doc';
+          id: string;
+        }
+      | {
+          type: 'folder';
+          id: string;
+        }
+      | {
+          type: 'collection';
+          id: string;
+        }
+      | {
+          type: 'tag';
+          id: string;
+        };
+    from?:
+      | {
+          at: 'explorer:organize:folder-node';
+          nodeId: string;
+        }
+      | {
+          at: 'explorer:collection:list';
+        }
+      | {
+          at: 'explorer:doc:linked-docs';
+          docId: string;
+        }
+      | {
+          at: 'explorer:collection:filtered-docs';
+          collectionId: string;
+        }
+      | {
+          at: 'explorer:favorite:items';
+        }
+      | {
+          at: 'all-docs:list';
+        }
+      | {
+          at: 'all-tags:list';
+        }
+      | {
+          at: 'all-collections:list';
+        }
+      | {
+          at: 'explorer:tags:list';
+        }
+      | {
+          at: 'explorer:tags:docs';
+        };
+  };
+  dropTarget:
+    | {
+        at: 'explorer:organize:root';
+      }
+    | {
+        at: 'explorer:favorite:root';
+      }
+    | {
+        at: 'explorer:organize:folder';
+      }
+    | {
+        at: 'explorer:doc';
+      }
+    | {
+        at: 'app-sidebar:trash';
+      }
+    | {
+        at: 'explorer:tag';
+      }
+    | Record<string, unknown>;
+}