Feat/tauri folder (#1921)

* refactor: folders item

* fix: show get stared page if it's not login

* chore: expose debug pages

frontend/appflowy_tauri/src/appflowy_app/App.tsx

@@ -1,7 +1,6 @@
 import { Routes, Route, BrowserRouter } from 'react-router-dom';
 
 import { TestColors } from './components/TestColors/TestColors';
-import { Welcome } from './views/Welcome';
 import { Provider } from 'react-redux';
 import { store } from './stores/store';
 import { DocumentPage } from './views/DocumentPage';
@@ -29,7 +28,6 @@ const App = () => {
             <Route path={'/page/document/:id'} element={<DocumentPage />} />
             <Route path={'/page/board/:id'} element={<BoardPage />} />
             <Route path={'/page/grid/:id'} element={<GridPage />} />
-            <Route path={'/'} element={<Welcome />} />
           </Route>
           <Route path={'/auth/login'} element={<LoginPage />}></Route>
           <Route path={'/auth/getStarted'} element={<GetStarted />}></Route>

frontend/appflowy_tauri/src/appflowy_app/components/auth/ProtectedRoutes.tsx

@@ -11,15 +11,16 @@ export const ProtectedRoutes = () => {
 
   useEffect(() => {
     void checkUser().then(async (result) => {
+      await new Promise(() =>
+          setTimeout(() => {
+            setIsLoading(false);
+          }, 1200)
+      );
+
       if (result.err) {
         throw new Error(result.val.msg);
       }
 
-      await new Promise(() =>
-        setTimeout(() => {
-          setIsLoading(false);
-        }, 1200)
-      );
     });
   }, []);
 

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

@@ -1,5 +1,5 @@
 import { AppLogo } from '../AppLogo';
-import { Workspace } from '../Workspace';
+import { WorkspaceUser } from '../WorkspaceUser';
 import { FolderItem } from './FolderItem';
 import { PluginsButton } from './PluginsButton';
 import { TrashButton } from './TrashButton';
@@ -52,7 +52,7 @@ export const NavigationFloatingPanel = ({
       <div className={'flex flex-col'}>
         <AppLogo iconToShow={'show'} onShowMenuClick={onFixNavigationClick}></AppLogo>
 
-        <Workspace></Workspace>
+        <WorkspaceUser></WorkspaceUser>
 
         <div className={'flex flex-col px-2'}>
           {folders.map((folder, index) => (

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

@@ -1,12 +1,13 @@
-import { Workspace } from '../Workspace';
+import { WorkspaceUser } from '../WorkspaceUser';
 import { AppLogo } from '../AppLogo';
 import { FolderItem } from './FolderItem';
-import { PluginsButton } from './PluginsButton';
 import { TrashButton } from './TrashButton';
 import { NewFolderButton } from './NewFolderButton';
 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';
 
 export const NavigationPanel = ({
   onCollapseNavigationClick,
@@ -26,27 +27,22 @@ export const NavigationPanel = ({
       <div className={'flex flex-col justify-between bg-surface-1 text-sm'} style={{ width: `${width}px` }}>
         <div className={'flex flex-col'}>
           <AppLogo iconToShow={'hide'} onHideMenuClick={onCollapseNavigationClick}></AppLogo>
-
-          <Workspace></Workspace>
-
-          <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>
+          <WorkspaceUser></WorkspaceUser>
+          <WorkspaceApps folders={folders} pages={pages} onPageClick={onPageClick} />
         </div>
 
         <div className={'flex flex-col'}>
           <div className={'border-b border-shade-6 px-2 pb-4'}>
-            <PluginsButton></PluginsButton>
+            {/*<PluginsButton></PluginsButton>*/}
+
+            <DesignSpec></DesignSpec>
+            <TestBackendButton></TestBackendButton>
+
+            {/*Trash Button*/}
             <TrashButton></TrashButton>
           </div>
 
+          {/*New Folder Button*/}
           <NewFolderButton></NewFolderButton>
         </div>
       </div>
@@ -54,3 +50,47 @@ export const NavigationPanel = ({
     </>
   );
 };
+
+type AppsContext = {
+  folders: IFolder[];
+  pages: IPage[];
+  onPageClick: (page: IPage) => void;
+};
+
+const WorkspaceApps: React.FC<AppsContext> = ({ folders, pages, onPageClick }) => (
+  <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>
+);
+
+export const TestBackendButton = () => {
+  const navigate = useNavigate();
+  return (
+    <button
+      onClick={() => navigate('/page/api-test')}
+      className={'flex w-full items-center rounded-lg px-4 py-2 hover:bg-surface-2'}
+    >
+      APITest
+    </button>
+  );
+};
+
+export const DesignSpec = () => {
+  const navigate = useNavigate();
+
+  return (
+    <button
+      onClick={() => navigate('page/colors')}
+      className={'flex w-full items-center rounded-lg px-4 py-2 hover:bg-surface-2'}
+    >
+      Design Specs
+    </button>
+  );
+};

frontend/appflowy_tauri/src/appflowy_app/components/layout/Workspace.tsx → frontend/appflowy_tauri/src/appflowy_app/components/layout/WorkspaceUser.tsx

@@ -1,6 +1,6 @@
 import { useAppSelector } from '../../stores/store';
 
-export const Workspace = () => {
+export const WorkspaceUser = () => {
   const currentUser = useAppSelector((state) => state.currentUser);
 
   return (

frontend/appflowy_tauri/src/appflowy_app/views/Welcome.tsx

@@ -1,15 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export const Welcome = () => {
-  return (
-    <div className={'p-4'}>
-      <div className={'mb-8 text-2xl'}>Welcome</div>
-      <div className={'mb-4'}>
-        <Link to={'/page/colors'}>Color Palette</Link>
-      </div>
-      <div className={'mb-4'}>
-        <Link to={'/page/api-test'}>Testing API</Link>
-      </div>
-    </div>
-  );
-};

frontend/rust-lib/flowy-codegen/src/protobuf_file/mod.rs

@@ -132,7 +132,7 @@ fn generate_ts_protobuf_files(
     };
 
     if result.is_err() {
-      panic!("Generate dart pb file failed with: {}, {:?}", path, result)
+      panic!("Generate ts pb file failed with: {}, {:?}", path, result)
     };
   });