fixed routing, working perfectly

src/frontend/src/App.tsx

@@ -42,13 +42,6 @@ export default function App() {
 
   const { flows, addFlow } = useContext(TabsContext);
 
-  useEffect(() => {
-    //create the first flow
-    if (flows.length === 0) {
-      addFlow();
-    }
-  }, [addFlow, flows.length]);
-
   // Initialize state variable for the list of alerts
   const [alertsList, setAlertsList] = useState<
     Array<{
@@ -133,12 +126,8 @@ export default function App() {
         }}
         FallbackComponent={CrashErrorComponent}
       >
-        {flows.length !== 0 && (
-          <>
             <Header />
             <Router />
-          </>
-        )}
       </ErrorBoundary>
       <div></div>
       <div

src/frontend/src/components/headerComponent/index.tsx

@@ -36,6 +36,7 @@ export default function Header(){
       }, [addFlow, flows.length, templates]);
     return (
         <div className="w-full h-16 flex justify-between items-center border-b">
+          {flows.findIndex((f) => tabId === f.id) !== -1 && 
           <MenuBar
             activeTab={activeTab}
             setRename={setRename}
@@ -43,6 +44,7 @@ export default function Header(){
             flows={flows}
             tabId={tabId}
           />
+        }
           <div className="flex">
             <Button>Explore</Button>
             <Button>My Flows</Button>

src/frontend/src/contexts/tabsContext.tsx

@@ -130,12 +130,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }, [templates]);
 
-  function getLocalStorageTabsData() {
-    let cookie = window.localStorage.getItem("tabsData");
-    let cookieObject: LangFlowState = JSON.parse(cookie);
-    return cookieObject;
-  }
-
   function getTabsDataFromDB() {
     //get tabs from db
     return readFlowsFromDatabase();

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -1,6 +1,21 @@
 import _ from "lodash";
 import { useContext, useRef, useState, useEffect, useCallback } from "react";
-import ReactFlow, { OnSelectionChangeParams, useNodesState, useEdgesState, useReactFlow, EdgeChange, Connection, addEdge, NodeDragHandler, SelectionDragHandler, OnEdgesDelete, Edge, updateEdge, Background, Controls } from "reactflow";
+import ReactFlow, {
+  OnSelectionChangeParams,
+  useNodesState,
+  useEdgesState,
+  useReactFlow,
+  EdgeChange,
+  Connection,
+  addEdge,
+  NodeDragHandler,
+  SelectionDragHandler,
+  OnEdgesDelete,
+  Edge,
+  updateEdge,
+  Background,
+  Controls,
+} from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import Chat from "../../../../components/chatComponent";
 import { alertContext } from "../../../../contexts/alertContext";
@@ -14,8 +29,6 @@ import useUndoRedo from "../../hooks/useUndoRedo";
 import ConnectionLineComponent from "../ConnectionLineComponent";
 import ExtraSidebar from "../extraSidebarComponent";
 
-
-
 const nodeTypes = {
   genericNode: GenericNode,
 };
@@ -295,13 +308,23 @@ export default function Page({ flow }: { flow: FlowType }) {
   const { setDisableCopyPaste } = useContext(TabsContext);
 
   return (
+    <div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
+      <ExtraSidebar />
+      {/* Main area */}
+      <main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
+        {/* Primary column */}
+        <div className="w-full h-full">
           <div className="w-full h-full" ref={reactFlowWrapper}>
-      {Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
+            {Object.keys(templates).length > 0 &&
-        <>
+            Object.keys(types).length > 0 ? (
+                <div className="w-full h-full">
                   <ReactFlow
                     nodes={nodes}
                     onMove={() => {
-              updateFlow({ ...flow, data: reactFlowInstance.toObject() });
+                      updateFlow({
+                        ...flow,
+                        data: reactFlowInstance.toObject(),
+                      });
                     }}
                     edges={edges}
                     onPaneClick={() => {
@@ -340,10 +363,13 @@ export default function Page({ flow }: { flow: FlowType }) {
                     <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
                   </ReactFlow>
                   <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
-        </>
+                </div>
             ) : (
               <></>
             )}
           </div>
+        </div>
+      </main>
+    </div>
   );
 }

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -49,7 +49,7 @@ export default function ExtraSidebar() {
   }
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col overflow-auto scrollbar-hide">
       <div className="relative mt-2 flex items-center mb-2 mx-2">
         <input
           type="text"

src/frontend/src/pages/MainPage/components/menuBar/index.tsx

@@ -19,6 +19,7 @@ import ExportModal from "../../../../modals/exportModal";
 import ApiModal from "../../../../modals/ApiModal";
 import { alertContext } from "../../../../contexts/alertContext";
 import { updateFlowInDatabase } from "../../../../controllers/API";
+import { Link } from "react-router-dom";
 
 export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
   const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
@@ -129,6 +130,7 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
             <MenubarMenu>
               <MenubarTrigger>Flows</MenubarTrigger>
               <MenubarContent>
+                
                 <MenubarRadioGroup
                   value={tabId}
                   onValueChange={(value) => {
@@ -137,9 +139,12 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
                 >
                   {flows.map((flow, idx) => {
                     return (
-                      <MenubarRadioItem value={idx.toString()}>
+                      <Link to={"/flow/" + flow.id}>
+                  <MenubarRadioItem value={flow.id}>
                         {emoji} {flow.name}
                       </MenubarRadioItem>
+                </Link>
+                      
                     );
                   })}
                 </MenubarRadioGroup>

src/frontend/src/pages/MainPage/index.tsx

@@ -30,7 +30,6 @@ export default function HomePage() {
     setTabId,
   } = useContext(TabsContext);
   return (
-    Object.keys(flows).length !== 0 && (
       <div
         className="w-full h-full flex flex-col bg-muted"
       >
@@ -45,6 +44,5 @@ export default function HomePage() {
             ))}
           </div>
       </div>
-    )
   );
 }