chore: smooth scroll and scroll to new folder

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx

@@ -7,7 +7,7 @@ import { NavigationResizer } from './NavigationResizer';
 import { IFolder } from '../../../stores/reducers/folders/slice';
 import { IPage } from '../../../stores/reducers/pages/slice';
 import { useNavigate } from 'react-router-dom';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useAppSelector } from '../../../stores/store';
 import {
@@ -38,6 +38,7 @@ export const NavigationPanel = ({
   const foldersStore = useAppSelector((state) => state.folders);
   const pagesStore = useAppSelector((state) => state.pages);
   const activePageId = useAppSelector((state) => state.activePageId);
+  const [maxHeight, setMaxHeight] = useState(0);
 
   useEffect(() => {
     setTimeout(() => {
@@ -72,11 +73,21 @@ export const NavigationPanel = ({
       console.log(`scrollTop: ${scrollTop}, elHeight: ${elHeight.toFixed(0)}, height: ${height}`);
 
       if (scrollTop + elHeight < height) {
-        el.current.scrollTo(0, height - elHeight);
+        el.current.scrollTo({ top: height - elHeight, behavior: 'smooth' });
       }
     }, ANIMATION_DURATION);
   }, [activePageId]);
 
+  useEffect(() => {
+    setMaxHeight(foldersStore.length * (INITIAL_FOLDER_HEIGHT + FOLDER_MARGIN) + pagesStore.length * PAGE_ITEM_HEIGHT);
+  }, [foldersStore, pagesStore]);
+
+  const scrollDown = () => {
+    setTimeout(() => {
+      el?.current?.scrollTo({ top: maxHeight, behavior: 'smooth' });
+    }, ANIMATION_DURATION);
+  };
+
   return (
     <>
       <div
@@ -109,7 +120,7 @@ export const NavigationPanel = ({
           </div>
 
           {/*New Folder Button*/}
-          <NewFolderButton></NewFolderButton>
+          <NewFolderButton scrollDown={scrollDown}></NewFolderButton>
         </div>
       </div>
       <NavigationResizer minWidth={NAV_PANEL_MINIMUM_WIDTH}></NavigationResizer>

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NewFolderButton.tsx

@@ -1,11 +1,17 @@
 import AddSvg from '../../_shared/svg/AddSvg';
 import { useNewFolder } from './NewFolderButton.hooks';
 
-export const NewFolderButton = () => {
+export const NewFolderButton = ({ scrollDown }: { scrollDown: () => void }) => {
   const { onNewFolder } = useNewFolder();
 
   return (
-    <button onClick={() => onNewFolder()} className={'flex h-[50px] w-full items-center px-6 hover:bg-surface-2'}>
+    <button
+      onClick={() => {
+        void onNewFolder();
+        scrollDown();
+      }}
+      className={'flex h-[50px] w-full items-center px-6 hover:bg-surface-2'}
+    >
       <div className={'mr-2 rounded-full bg-main-accent text-white'}>
         <div className={'h-[24px] w-[24px] text-white'}>
           <AddSvg></AddSvg>