fix(core): speed up navigation performance (#8794)

add some memo...

packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.tsx

@@ -1,24 +1,35 @@
 import { IconButton } from '@affine/component';
+import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
+import { isNewTabTrigger } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
+import track from '@affine/track';
 import { PlusIcon } from '@blocksuite/icons/rc';
+import { useService, WorkspaceService } from '@toeverything/infra';
 import clsx from 'clsx';
 import type React from 'react';
-import type { MouseEventHandler } from 'react';
+import { type MouseEvent, useCallback } from 'react';
 
 import * as styles from './index.css';
 
 interface AddPageButtonProps {
-  onClick?: MouseEventHandler;
   className?: string;
   style?: React.CSSProperties;
 }
 
 const sideBottom = { side: 'bottom' as const };
-export function AddPageButton({
-  onClick,
-  className,
-  style,
-}: AddPageButtonProps) {
+export function AddPageButton({ className, style }: AddPageButtonProps) {
+  const workspaceService = useService(WorkspaceService);
+  const currentWorkspace = workspaceService.workspace;
+  const pageHelper = usePageHelper(currentWorkspace.docCollection);
+
+  const onClickNewPage = useCallback(
+    (e?: MouseEvent) => {
+      pageHelper.createPage(undefined, isNewTabTrigger(e) ? 'new-tab' : true);
+      track.$.navigationPanel.$.createDoc();
+    },
+    [pageHelper]
+  );
+
   const t = useI18n();
 
   return (
@@ -28,8 +39,8 @@ export function AddPageButton({
       data-testid="sidebar-new-page-button"
       style={style}
       className={clsx([styles.root, className])}
-      onClick={onClick}
-      onAuxClick={onClick}
+      onClick={onClickNewPage}
+      onAuxClick={onClickNewPage}
     >
       <PlusIcon />
     </IconButton>

packages/frontend/core/src/modules/explorer/views/tree/node.tsx

@@ -89,6 +89,34 @@ interface WebExplorerTreeNodeProps extends BaseExplorerTreeNodeProps {
   dropEffect?: ExplorerTreeNodeDropEffect;
 }
 
+/**
+ * specific rename modal for explorer tree node,
+ * Separate it into a separate component to prevent re-rendering the entire component when width changes.
+ */
+const ExplorerTreeNodeRenameModal = ({
+  setRenaming,
+  handleRename,
+  rawName,
+}: {
+  setRenaming: (renaming: boolean) => void;
+  handleRename: (newName: string) => void;
+  rawName: string | undefined;
+}) => {
+  const appSidebarService = useService(AppSidebarService).sidebar;
+  const sidebarWidth = useLiveData(appSidebarService.width$);
+  return (
+    <RenameModal
+      open
+      width={sidebarWidth - 32}
+      onOpenChange={setRenaming}
+      onRename={handleRename}
+      currentName={rawName ?? ''}
+    >
+      <div className={styles.itemRenameAnchor} />
+    </RenameModal>
+  );
+};
+
 export const ExplorerTreeNode = ({
   children,
   icon: Icon,
@@ -126,9 +154,6 @@ export const ExplorerTreeNode = ({
   const [lastInGroup, setLastInGroup] = useState(false);
   const rootRef = useRef<HTMLDivElement>(null);
 
-  const appSidebarService = useService(AppSidebarService).sidebar;
-  const sidebarWidth = useLiveData(appSidebarService.width$);
-
   const { emoji, name } = useMemo(() => {
     if (!extractEmojiAsIcon || !rawName) {
       return {
@@ -379,16 +404,12 @@ export const ExplorerTreeNode = ({
         </div>
       </div>
 
-      {renameable && (
-        <RenameModal
-          open={!!renaming}
-          width={sidebarWidth - 32}
-          onOpenChange={setRenaming}
-          onRename={handleRename}
-          currentName={rawName ?? ''}
-        >
-          <div className={styles.itemRenameAnchor} />
-        </RenameModal>
+      {renameable && renaming && (
+        <ExplorerTreeNodeRenameModal
+          setRenaming={setRenaming}
+          handleRename={handleRename}
+          rawName={rawName}
+        />
       )}
     </div>
   );

packages/frontend/core/src/modules/workbench/index.ts

@@ -1,6 +1,7 @@
 export { View as WorkbenchView } from './entities/view';
 export { Workbench } from './entities/workbench';
 export { ViewScope } from './scopes/view';
+export { ViewService } from './services/view';
 export { WorkbenchService } from './services/workbench';
 export { useBindWorkbenchToBrowserRouter } from './view/browser-adapter';
 export { useIsActiveView } from './view/use-is-active-view';