From 3427b0448a61d661f2019f6788d73b89393089d4 Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Sat, 9 Aug 2025 21:37:14 -0600
Subject: [PATCH] Move status bar inside workflow editor

---
 Data/Server/WebUI/src/App.jsx | 70 ++++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/Data/Server/WebUI/src/App.jsx b/Data/Server/WebUI/src/App.jsx
index d3734f2..4a83eeb 100644
--- a/Data/Server/WebUI/src/App.jsx
+++ b/Data/Server/WebUI/src/App.jsx
@@ -226,47 +226,50 @@ export default function App() {
 
       case "workflow-editor":
         return (
-          <Box sx={{ display: "flex", flexGrow: 1, overflow: "hidden" }}>
-            <NodeSidebar
-              categorizedNodes={categorizedNodes}
-              handleExportFlow={() => {}}
-              handleImportFlow={() => {}}
-              handleOpenCloseAllDialog={() => {}}
-              fileInputRef={fileInputRef}
-              onFileInputChange={() => {}}
-            />
-            <Box sx={{ display: "flex", flexDirection: "column", flexGrow: 1, overflow: "hidden" }}>
+          <Box sx={{ display: "flex", flexDirection: "column", flexGrow: 1, overflow: "hidden" }}>
+            <Box sx={{ display: "flex", flexGrow: 1, overflow: "hidden" }}>
+              <NodeSidebar
+                categorizedNodes={categorizedNodes}
+                handleExportFlow={() => {}}
+                handleImportFlow={() => {}}
+                handleOpenCloseAllDialog={() => {}}
+                fileInputRef={fileInputRef}
+                onFileInputChange={() => {}}
+              />
+              <Box sx={{ display: "flex", flexDirection: "column", flexGrow: 1, overflow: "hidden" }}>
                 <FlowTabs
                   tabs={tabs}
                   activeTabId={activeTabId}
                   onTabChange={setActiveTabId}
                   onAddTab={() => {}}
-                onTabRightClick={handleTabRightClick}
+                  onTabRightClick={handleTabRightClick}
                 />
-              <Box sx={{ flexGrow: 1, position: "relative" }}>
-                {tabs.map((tab) => (
-                  <Box
-                    key={tab.id}
-                    sx={{
-                      position: "absolute", top: 0, bottom: 0, left: 0, right: 0,
-                      display: tab.id === activeTabId ? "block" : "none"
-                    }}
-                  >
-                    <ReactFlowProvider id={tab.id}>
-                      <FlowEditor
-                        flowId={tab.id}
-                        nodes={tab.nodes}
-                        edges={tab.edges}
-                        setNodes={(val) => handleSetNodes(val, tab.id)}
-                        setEdges={(val) => handleSetEdges(val, tab.id)}
-                        nodeTypes={nodeTypes}
-                        categorizedNodes={categorizedNodes}
-                      />
-                    </ReactFlowProvider>
-                  </Box>
-                ))}
+                <Box sx={{ flexGrow: 1, position: "relative" }}>
+                  {tabs.map((tab) => (
+                    <Box
+                      key={tab.id}
+                      sx={{
+                        position: "absolute", top: 0, bottom: 0, left: 0, right: 0,
+                        display: tab.id === activeTabId ? "block" : "none"
+                      }}
+                    >
+                      <ReactFlowProvider id={tab.id}>
+                        <FlowEditor
+                          flowId={tab.id}
+                          nodes={tab.nodes}
+                          edges={tab.edges}
+                          setNodes={(val) => handleSetNodes(val, tab.id)}
+                          setEdges={(val) => handleSetEdges(val, tab.id)}
+                          nodeTypes={nodeTypes}
+                          categorizedNodes={categorizedNodes}
+                        />
+                      </ReactFlowProvider>
+                    </Box>
+                  ))}
+                </Box>
               </Box>
             </Box>
+            <StatusBar />
           </Box>
         );
 
@@ -312,7 +315,6 @@ export default function App() {
             {renderMainContent()}
           </Box>
         </Box>
-        <StatusBar />
       </Box>
       <CloseAllDialog open={confirmCloseOpen} onClose={() => setConfirmCloseOpen(false)} onConfirm={() => {}} />
       <CreditsDialog open={creditsDialogOpen} onClose={() => setCreditsDialogOpen(false)} />