chore: move constants

frontend/appflowy_tauri/src/appflowy_app/components/_shared/constants.ts

@@ -0,0 +1,4 @@
+export const INITIAL_FOLDER_HEIGHT = 40;
+export const PAGE_ITEM_HEIGHT = 40;
+export const ANIMATION_DURATION = 300;
+export const NAV_PANEL_MINIMUM_WIDTH = 200;

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

@@ -1,8 +1,7 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { HeaderPanel } from './HeaderPanel/HeaderPanel';
 import { FooterPanel } from './FooterPanel';
-
-const ANIMATION_DURATION = 300;
+import { ANIMATION_DURATION } from '../_shared/constants';
 
 export const MainPanel = ({
   left,

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/FolderItem.hooks.ts

@@ -9,10 +9,7 @@ import { useError } from '../../error/Error.hooks';
 import { AppObserver } from '../../../stores/effects/folder/app/app_observer';
 import { activePageIdActions } from '../../../stores/reducers/activePageId/slice';
 import { useNavigate } from 'react-router-dom';
-
-const initialFolderHeight = 40;
-const initialPageHeight = 40;
-const animationDuration = 500;
+import { INITIAL_FOLDER_HEIGHT, PAGE_ITEM_HEIGHT } from '../../_shared/constants';
 
 export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
   const appDispatch = useAppDispatch();
@@ -27,7 +24,7 @@ export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
   const [showRenamePopup, setShowRenamePopup] = useState(false);
 
   // UI configurations
-  const [folderHeight, setFolderHeight] = useState(`${initialFolderHeight}px`);
+  const [folderHeight, setFolderHeight] = useState(`${INITIAL_FOLDER_HEIGHT}px`);
 
   // Observers
   const appObserver = new AppObserver(folder.id);
@@ -62,15 +59,15 @@ export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
 
   useEffect(() => {
     if (showPages) {
-      setFolderHeight(`${initialFolderHeight + pages.length * initialPageHeight}px`);
+      setFolderHeight(`${INITIAL_FOLDER_HEIGHT + pages.length * PAGE_ITEM_HEIGHT}px`);
     }
   }, [pages]);
 
   const onFolderNameClick = () => {
     if (showPages) {
-      setFolderHeight(`${initialFolderHeight}px`);
+      setFolderHeight(`${INITIAL_FOLDER_HEIGHT}px`);
     } else {
-      setFolderHeight(`${initialFolderHeight + pages.length * initialPageHeight}px`);
+      setFolderHeight(`${INITIAL_FOLDER_HEIGHT + pages.length * PAGE_ITEM_HEIGHT}px`);
     }
     setShowPages(!showPages);
   };
@@ -228,7 +225,6 @@ export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
 
     closePopup,
     folderHeight,
-    animationDuration,
     setOffsetTop,
   };
 };

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

@@ -10,6 +10,7 @@ import { Button } from '../../_shared/Button';
 import { RenamePopup } from './RenamePopup';
 import { useEffect, useRef, useState } from 'react';
 import { DropDownShowSvg } from '../../_shared/svg/DropDownShowSvg';
+import { ANIMATION_DURATION } from '../../_shared/constants';
 
 let timeoutHandle: any;
 
@@ -43,7 +44,6 @@ export const FolderItem = ({
 
     closePopup,
     folderHeight,
-    animationDuration,
     setOffsetTop,
   } = useFolderEvents(folder, pages);
 
@@ -54,7 +54,7 @@ export const FolderItem = ({
     if (showPages) {
       timeoutHandle = setTimeout(() => {
         setHideOverflow(!showPages);
-      }, animationDuration);
+      }, ANIMATION_DURATION);
     } else {
       setHideOverflow(!showPages);
     }
@@ -70,7 +70,7 @@ export const FolderItem = ({
     <div className={'relative'} ref={el}>
       <div
         className={`relative my-2 ${hideOverflow ? 'overflow-hidden' : ''} transition-all `}
-        style={{ height: folderHeight, transitionDuration: `${animationDuration}ms` }}
+        style={{ height: folderHeight, transitionDuration: `${ANIMATION_DURATION}ms` }}
       >
         <div
           onClick={() => onFolderNameClick()}

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

@@ -1,79 +0,0 @@
-import { AppLogo } from '../AppLogo';
-import { WorkspaceUser } from '../WorkspaceUser';
-import { FolderItem } from './FolderItem';
-import { PluginsButton } from './PluginsButton';
-import { TrashButton } from './TrashButton';
-import { NewFolderButton } from './NewFolderButton';
-import { IFolder } from '../../../stores/reducers/folders/slice';
-import { IPage } from '../../../stores/reducers/pages/slice';
-import { useEffect, useRef, useState } from 'react';
-
-const animationDuration = 500;
-
-export const NavigationFloatingPanel = ({
-  onFixNavigationClick,
-  slideInFloatingPanel,
-  folders,
-  pages,
-  onPageClick,
-  setWidth,
-}: {
-  onFixNavigationClick: () => void;
-  slideInFloatingPanel: boolean;
-  folders: IFolder[];
-  pages: IPage[];
-  onPageClick: (page: IPage) => void;
-  setWidth: (v: number) => void;
-}) => {
-  const el = useRef<HTMLDivElement>(null);
-  const [panelLeft, setPanelLeft] = useState(0);
-
-  useEffect(() => {
-    if (!el?.current) return;
-
-    const { width } = el.current.getBoundingClientRect();
-    setWidth(width);
-
-    if (slideInFloatingPanel) {
-      setPanelLeft(0);
-    } else {
-      setPanelLeft(-width);
-    }
-  }, [el.current, slideInFloatingPanel]);
-
-  return (
-    <div
-      ref={el}
-      className={
-        'fixed top-16 z-10 flex flex-col justify-between rounded-tr rounded-br border border-l-0 border-shade-4 bg-white text-sm shadow-md transition-all'
-      }
-      style={{ left: panelLeft, transitionDuration: `${animationDuration}ms` }}
-    >
-      <div className={'flex flex-col'}>
-        <AppLogo iconToShow={'show'} onShowMenuClick={onFixNavigationClick}></AppLogo>
-
-        <WorkspaceUser></WorkspaceUser>
-
-        <div className={'flex flex-col px-2'}>
-          {folders.map((folder, index) => (
-            <FolderItem
-              key={index}
-              folder={folder}
-              pages={pages.filter((page) => page.folderId === folder.id)}
-              onPageClick={onPageClick}
-            ></FolderItem>
-          ))}
-        </div>
-      </div>
-
-      <div className={'flex flex-col'}>
-        <div className={'border-b border-shade-6 px-2 pb-4'}>
-          <PluginsButton></PluginsButton>
-          <TrashButton></TrashButton>
-        </div>
-
-        <NewFolderButton></NewFolderButton>
-      </div>
-    </div>
-  );
-};

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

@@ -7,10 +7,10 @@ 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 from 'react';
-
-const MINIMUM_WIDTH = 200;
-const ANIMATION_DURATION = 300;
+import React, { useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { useAppSelector } from '../../../stores/store';
+import { ANIMATION_DURATION, NAV_PANEL_MINIMUM_WIDTH } from '../../_shared/constants';
 
 export const NavigationPanel = ({
   onHideMenuClick,
@@ -27,6 +27,12 @@ export const NavigationPanel = ({
   pages: IPage[];
   onPageClick: (page: IPage) => void;
 }) => {
+  const el = useRef<HTMLDivElement>(null);
+  const dispatch = useDispatch();
+  const foldersStore = useAppSelector((state) => state.folders);
+  const pagesStore = useAppSelector((state) => state.pages);
+  const activePageId = useAppSelector((state) => state.activePageId);
+
   return (
     <>
       <div
@@ -40,7 +46,9 @@ export const NavigationPanel = ({
         <div className={'flex flex-col'}>
           <AppLogo iconToShow={'hide'} onHideMenuClick={onHideMenuClick}></AppLogo>
           <WorkspaceUser></WorkspaceUser>
-          <WorkspaceApps folders={folders} pages={pages} onPageClick={onPageClick} />
+          <div className={'flex flex-col overflow-auto px-2'} style={{ height: 'calc(100vh - 300px)' }} ref={el}>
+            <WorkspaceApps folders={folders} pages={pages} onPageClick={onPageClick} />
+          </div>
         </div>
 
         <div className={'flex flex-col'}>
@@ -58,7 +66,7 @@ export const NavigationPanel = ({
           <NewFolderButton></NewFolderButton>
         </div>
       </div>
-      <NavigationResizer minWidth={MINIMUM_WIDTH}></NavigationResizer>
+      <NavigationResizer minWidth={NAV_PANEL_MINIMUM_WIDTH}></NavigationResizer>
     </>
   );
 };
@@ -70,7 +78,7 @@ type AppsContext = {
 };
 
 const WorkspaceApps: React.FC<AppsContext> = ({ folders, pages, onPageClick }) => (
-  <div className={'flex flex-col overflow-auto px-2'} style={{ height: 'calc(100vh - 300px)' }}>
+  <>
     {folders.map((folder, index) => (
       <FolderItem
         key={index}
@@ -79,7 +87,7 @@ const WorkspaceApps: React.FC<AppsContext> = ({ folders, pages, onPageClick }) =
         onPageClick={onPageClick}
       ></FolderItem>
     ))}
-  </div>
+  </>
 );
 
 export const TestBackendButton = () => {

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

@@ -9,6 +9,7 @@ import { usePageEvents } from './PageItem.hooks';
 import { RenamePopup } from './RenamePopup';
 import { ViewLayoutTypePB } from '../../../../services/backend';
 import { useEffect, useRef } from 'react';
+import { PAGE_ITEM_HEIGHT } from '../../_shared/constants';
 
 export const PageItem = ({ page, onPageClick }: { page: IPage; onPageClick: () => void }) => {
   const {
@@ -29,15 +30,16 @@ export const PageItem = ({ page, onPageClick }: { page: IPage; onPageClick: () =
 
   useEffect(() => {
     setOffsetTop(el.current?.offsetTop || 0);
-  }, [el]);
+  }, [el.current]);
 
   return (
     <div className={'relative'} ref={el}>
       <div
         onClick={() => onPageClick()}
-        className={`flex cursor-pointer items-center justify-between rounded-lg py-2 pl-8 pr-4 hover:bg-surface-2 ${
+        className={`flex cursor-pointer items-center justify-between rounded-lg pl-8 pr-4 hover:bg-surface-2 ${
           activePageId === page.id ? 'bg-surface-2' : ''
         }`}
+        style={{ height: PAGE_ITEM_HEIGHT }}
       >
         <button className={'flex min-w-0 flex-1 items-center'}>
           <i className={'ml-1 mr-1 h-[16px] w-[16px]'}>