organize scroller element

apps/app/src/client/components/Common/SimplifiedItemsTree/SimplifiedItemsTree.tsx

@@ -35,14 +35,16 @@ type Props = {
   isWipPageShown?: boolean;
   isEnableActions?: boolean;
   isReadOnlyUser?: boolean;
+  scrollerElem?: HTMLElement | null;
 };
 
 export const SimplifiedItemsTree: FC<Props> = (props: Props) => {
   const {
-    targetPath, targetPathOrId, isWipPageShown = true, isEnableActions = false, isReadOnlyUser = false,
+    targetPath, targetPathOrId,
+    isWipPageShown = true, isEnableActions = false, isReadOnlyUser = false,
+    scrollerElem,
   } = props;
 
-  const scrollElementRef = useRef<HTMLDivElement>(null);
   const [, setRebuildTrigger] = useState(0);
 
   const { data: rootPageResult } = useSWRxRootPage({ suspense: true });
@@ -106,8 +108,8 @@ export const SimplifiedItemsTree: FC<Props> = (props: Props) => {
 
   const virtualizer = useVirtualizer({
     count: items.length,
-    getScrollElement: () => scrollElementRef.current,
-    estimateSize: () => 36,
+    getScrollElement: () => scrollerElem ?? null,
+    estimateSize: () => 24,
     overscan: 5,
   });
 
@@ -129,73 +131,60 @@ export const SimplifiedItemsTree: FC<Props> = (props: Props) => {
   }, [targetPathOrId, items, virtualizer]);
 
   return (
-    <div
-      {...tree.getContainerProps()}
-      ref={scrollElementRef}
-      className={styles['simplified-items-tree']}
-      style={{ height: '100%', overflow: 'auto' }}
-    >
-      <div
-        style={{
-          height: `${virtualizer.getTotalSize()}px`,
-          width: '100%',
-          position: 'relative',
-        }}
-      >
-        {virtualizer.getVirtualItems().map((virtualItem) => {
-          const item = items[virtualItem.index];
-          const itemData = item.getItemData();
-
-          // Skip rendering virtual root
-          if (itemData._id === ROOT_PAGE_VIRTUAL_ID) {
-            return null;
-          }
-
-          // Skip rendering WIP pages if not shown
-          if (!isWipPageShown && itemData.wip) {
-            return null;
-          }
-
-          const isSelected = targetPathOrId === itemData._id || targetPathOrId === itemData.path;
-          const props = item.getProps();
-
-          return (
-            <div
-              key={virtualItem.key}
-              data-index={virtualItem.index}
-              ref={(node) => {
-                virtualizer.measureElement(node);
-                if (node && props.ref) {
-                  (props.ref as (node: HTMLElement) => void)(node);
+    <>
+      {virtualizer.getVirtualItems().map((virtualItem) => {
+        const item = items[virtualItem.index];
+        const itemData = item.getItemData();
+
+        // Skip rendering virtual root
+        if (itemData._id === ROOT_PAGE_VIRTUAL_ID) {
+          return null;
+        }
+
+        // Skip rendering WIP pages if not shown
+        if (!isWipPageShown && itemData.wip) {
+          return null;
+        }
+
+        const isSelected = targetPathOrId === itemData._id || targetPathOrId === itemData.path;
+        const props = item.getProps();
+
+        return (
+          <div
+            key={virtualItem.key}
+            data-index={virtualItem.index}
+            ref={(node) => {
+              virtualizer.measureElement(node);
+              if (node && props.ref) {
+                (props.ref as (node: HTMLElement) => void)(node);
+              }
+            }}
+          >
+            <SimplifiedTreeItem
+              item={itemData}
+              isSelected={isSelected}
+              level={item.getItemMeta().level}
+              isExpanded={item.isExpanded()}
+              isFolder={item.isFolder()}
+              targetPath={targetPath}
+              targetPathOrId={targetPathOrId}
+              isWipPageShown={isWipPageShown}
+              isEnableActions={isEnableActions}
+              isReadOnlyUser={isReadOnlyUser}
+              onToggle={() => {
+                if (item.isExpanded()) {
+                  item.collapse();
                 }
+                else {
+                  item.expand();
+                }
+                // Trigger re-render to show/hide children
+                setRebuildTrigger(prev => prev + 1);
               }}
-            >
-              <SimplifiedTreeItem
-                item={itemData}
-                isSelected={isSelected}
-                level={item.getItemMeta().level}
-                isExpanded={item.isExpanded()}
-                isFolder={item.isFolder()}
-                targetPath={targetPath}
-                targetPathOrId={targetPathOrId}
-                isWipPageShown={isWipPageShown}
-                isEnableActions={isEnableActions}
-                isReadOnlyUser={isReadOnlyUser}
-                onToggle={() => {
-                  if (item.isExpanded()) {
-                    item.collapse();
-                  }
-                  else {
-                    item.expand();
-                  }
-                  // Trigger re-render to show/hide children
-                  setRebuildTrigger(prev => prev + 1);
-                }}
-              />
-            </div>
-          );
-        })}
-      </div>
-    </div>
+            />
+          </div>
+        );
+      })}
+    </>
   );
 };

apps/app/src/client/components/Sidebar/PageTree/PageTreeSubstance.tsx

@@ -102,68 +102,7 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
   const targetPathOrId = targetId || currentPath;
   const path = currentPath || '/';
 
-  const { data: rootPageResult } = useSWRxRootPage({ suspense: true });
   const sidebarScrollerElem = useSidebarScrollerElem();
-  const [isInitialScrollCompleted, setIsInitialScrollCompleted] = useState(false);
-
-  const rootElemRef = useRef<HTMLDivElement>(null);
-
-  // ***************************  Scroll on init ***************************
-  const scrollOnInit = useCallback(() => {
-    const rootElement = rootElemRef.current;
-    const scrollElement = sidebarScrollerElem;
-
-    if (rootElement == null || scrollElement == null) {
-      return;
-    }
-
-    const scrollTargetElement = rootElement.querySelector<HTMLElement>('[aria-current]');
-
-    if (scrollTargetElement == null) {
-      return;
-    }
-
-    logger.debug('scrollOnInit has invoked');
-
-
-    // NOTE: could not use scrollIntoView
-    //  https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move
-
-    // calculate the center point
-    const scrollTop = scrollTargetElement.offsetTop - scrollElement.getBoundingClientRect().height / 2;
-    scrollElement.scrollTo({ top: scrollTop });
-
-    setIsInitialScrollCompleted(true);
-  }, [sidebarScrollerElem]);
-
-  const scrollOnInitDebounced = useMemo(() => debounce(500, scrollOnInit), [scrollOnInit]);
-
-  useEffect(() => {
-    if (isInitialScrollCompleted || rootPageResult == null) {
-      return;
-    }
-
-    const rootElement = rootElemRef.current as HTMLElement | null;
-    if (rootElement == null) {
-      return;
-    }
-
-    const observerCallback = (mutationRecords: MutationRecord[]) => {
-      mutationRecords.forEach(() => scrollOnInitDebounced());
-    };
-
-    const observer = new MutationObserver(observerCallback);
-    observer.observe(rootElement, { childList: true, subtree: true });
-
-    // first call for the situation that all rendering is complete at this point
-    scrollOnInitDebounced();
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [isInitialScrollCompleted, scrollOnInitDebounced, rootPageResult]);
-  // *******************************  end  *******************************
-
 
   if (!migrationStatus?.isV5Compatible) {
     return <PageTreeUnavailable />;
@@ -177,7 +116,7 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
   }
 
   return (
-    <div ref={rootElemRef} className="pt-4">
+    <div className="pt-4">
       {/*
       <ItemsTree
         isEnableActions={!isGuestUser}
@@ -194,6 +133,7 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
         isWipPageShown={isWipPageShown}
         targetPath={path}
         targetPathOrId={targetPathOrId}
+        scrollerElem={sidebarScrollerElem}
       />
 
       {!isGuestUser && !isReadOnlyUser && migrationStatus?.migratablePagesCount != null && migrationStatus.migratablePagesCount !== 0 && (