feat(core): workbench system (#5837)

packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/info-logger.tsx

@@ -1,5 +1,5 @@
-import { Page, WorkspaceListService } from '@toeverything/infra';
-import { useService, useServiceOptional } from '@toeverything/infra/di';
+import { WorkspaceListService } from '@toeverything/infra';
+import { useService } from '@toeverything/infra/di';
 import { useLiveData } from '@toeverything/infra/livedata';
 import { useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
@@ -16,7 +16,6 @@ export const DumpInfo = (_props: DumpInfoProps) => {
   const currentWorkspace = useLiveData(
     useService(CurrentWorkspaceService).currentWorkspace
   );
-  const currentPage = useServiceOptional(Page);
   const path = location.pathname;
   const query = useParams();
   useEffect(() => {
@@ -24,9 +23,8 @@ export const DumpInfo = (_props: DumpInfoProps) => {
       path,
       query,
       currentWorkspaceId: currentWorkspace?.id,
-      currentPageId: currentPage?.id,
       workspaceList,
     });
-  }, [path, query, currentWorkspace, workspaceList, currentPage?.id]);
+  }, [path, query, currentWorkspace, workspaceList]);
   return null;
 };

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

@@ -2,8 +2,8 @@ import { Checkbox } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useDraggable } from '@dnd-kit/core';
 import { type PropsWithChildren, useCallback, useMemo } from 'react';
-import { Link } from 'react-router-dom';
 
+import { WorkbenchLink } from '../../../modules/workbench/workbench-link';
 import type { DraggableTitleCellData, PageListItemProps } from '../types';
 import { ColWrapper, formatDate, stopPropagation } from '../utils';
 import * as styles from './page-list-item.css';
@@ -235,14 +235,14 @@ function PageListItemWrapper({
       'data-dragging': isDragging,
       onClick: handleClick,
     }),
-    [pageId, draggable, isDragging, onClick, to, handleClick]
+    [pageId, draggable, onClick, to, isDragging, handleClick]
   );
 
   if (to) {
     return (
-      <Link {...commonProps} to={to}>
+      <WorkbenchLink {...commonProps} to={to}>
         {children}
-      </Link>
+      </WorkbenchLink>
     );
   } else {
     return <div {...commonProps}>{children}</div>;

packages/frontend/core/src/components/page-list/page-group.tsx

@@ -321,10 +321,7 @@ function pageMetaToListItemProp(
     ),
     createDate: new Date(item.createDate),
     updatedDate: item.updatedDate ? new Date(item.updatedDate) : undefined,
-    to:
-      props.rowAsLink && !props.selectable
-        ? `/workspace/${props.blockSuiteWorkspace.id}/${item.id}`
-        : undefined,
+    to: props.rowAsLink && !props.selectable ? `/${item.id}` : undefined,
     onClick: props.selectable ? toggleSelection : undefined,
     icon: (
       <UnifiedPageIcon
@@ -372,7 +369,7 @@ function collectionMetaToListItemProp(
     title: item.title,
     to:
       props.rowAsLink && !props.selectable
-        ? `/workspace/${props.blockSuiteWorkspace.id}/collection/${item.id}`
+        ? `/collection/${item.id}`
         : undefined,
     onClick: props.selectable ? toggleSelection : undefined,
     icon: <ViewLayersIcon />,
@@ -407,10 +404,7 @@ function tagMetaToListItemProp(
   const itemProps: TagListItemProps = {
     tagId: item.id,
     title: item.title,
-    to:
-      props.rowAsLink && !props.selectable
-        ? `/workspace/${props.blockSuiteWorkspace.id}/tag/${item.id}`
-        : undefined,
+    to: props.rowAsLink && !props.selectable ? `/tag/${item.id}` : undefined,
     onClick: props.selectable ? toggleSelection : undefined,
     color: item.color,
     pageCount: item.pageCount,

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

@@ -17,11 +17,12 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import { useService } from '@toeverything/infra';
 import { useLiveData } from '@toeverything/infra/livedata';
 import { useCallback, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 
 import { useAllPageListConfig } from '../../../../hooks/affine/use-all-page-list-config';
 import { getDropItemId } from '../../../../hooks/affine/use-sidebar-drag';
 import { useBlockSuitePageMeta } from '../../../../hooks/use-block-suite-page-meta';
+import { Workbench } from '../../../../modules/workbench';
+import { WorkbenchLink } from '../../../../modules/workbench/workbench-link';
 import type { CollectionsListProps } from '../index';
 import { Page } from './page';
 import * as styles from './styles.css';
@@ -88,9 +89,9 @@ const CollectionRenderer = ({
     };
     return filterPage(collection, pageData);
   });
-  const location = useLocation();
-  const currentPath = location.pathname.split('?')[0];
-  const path = `/workspace/${workspace.id}/collection/${collection.id}`;
+  const location = useLiveData(useService(Workbench).location);
+  const currentPath = location.pathname;
+  const path = `/collection/${collection.id}`;
 
   const onRename = useCallback(
     (name: string) => {
@@ -115,6 +116,7 @@ const CollectionRenderer = ({
         active={isOver || currentPath === path}
         icon={<AnimatedCollectionsIcon closed={isOver} />}
         to={path}
+        linkComponent={WorkbenchLink}
         postfix={
           <div
             onClick={stopPropagation}

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

@@ -19,7 +19,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FolderIcon, SettingsIcon } from '@blocksuite/icons';
 import { type Page } from '@blocksuite/store';
 import { useDroppable } from '@dnd-kit/core';
-import { useService, type Workspace } from '@toeverything/infra';
+import { useLiveData, useService, type Workspace } from '@toeverything/infra';
 import { useAtom, useAtomValue } from 'jotai';
 import { nanoid } from 'nanoid';
 import type { HTMLAttributes, ReactElement } from 'react';
@@ -34,6 +34,7 @@ import { getDropItemId } from '../../hooks/affine/use-sidebar-drag';
 import { useTrashModalHelper } from '../../hooks/affine/use-trash-modal-helper';
 import { useRegisterBrowserHistoryCommands } from '../../hooks/use-browser-history-commands';
 import { useNavigateHelper } from '../../hooks/use-navigate-helper';
+import { Workbench } from '../../modules/workbench';
 import { WorkspaceSubPath } from '../../shared';
 import {
   createEmptyCollection,
@@ -57,7 +58,6 @@ export type RootAppSidebarProps = {
   currentWorkspace: Workspace;
   openPage: (pageId: string) => void;
   createPage: () => Page;
-  currentPath: string;
   paths: {
     all: (workspaceId: string) => string;
     trash: (workspaceId: string) => string;
@@ -98,7 +98,6 @@ export const RootAppSidebar = ({
   currentWorkspace,
   openPage,
   createPage,
-  currentPath,
   paths,
   onOpenQuickSearchModal,
   onOpenSettingModal,
@@ -111,6 +110,7 @@ export const RootAppSidebar = ({
     openWorkspaceListModalAtom
   );
   const generalShortcutsInfo = useGeneralShortcuts();
+  const currentPath = useLiveData(useService(Workbench).location).pathname;
 
   const onClickNewPage = useAsyncCallback(async () => {
     const page = createPage();
@@ -193,21 +193,9 @@ export const RootAppSidebar = ({
       });
   }, [blockSuiteWorkspace.id, collection, navigateHelper, open]);
 
-  const allPageActive = useMemo(() => {
-    if (
-      currentPath.startsWith(`/workspace/${currentWorkspaceId}/collection/`) ||
-      currentPath.startsWith(`/workspace/${currentWorkspaceId}/tag/`)
-    ) {
-      return true;
-    }
-    return currentPath === paths.all(currentWorkspaceId);
-  }, [currentPath, currentWorkspaceId, paths]);
+  const allPageActive = currentPath === '/all';
 
-  const trashActive = useMemo(() => {
-    return (
-      currentPath === paths.trash(currentWorkspaceId) || trashDroppable.isOver
-    );
-  }, [currentPath, currentWorkspaceId, paths, trashDroppable.isOver]);
+  const trashActive = currentPath === '/trash';
 
   return (
     <AppSidebar