From e8f9894e05c97cdf4957c986a8e4730364b51cff Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Tue, 15 Apr 2025 02:06:28 -0600
Subject: [PATCH] Updated Design of Sidebar

---
 Data/WebUI/src/Node_Sidebar.jsx | 251 +++++++++++---------------------
 1 file changed, 89 insertions(+), 162 deletions(-)

diff --git a/Data/WebUI/src/Node_Sidebar.jsx b/Data/WebUI/src/Node_Sidebar.jsx
index 02ab345..59a080d 100644
--- a/Data/WebUI/src/Node_Sidebar.jsx
+++ b/Data/WebUI/src/Node_Sidebar.jsx
@@ -1,6 +1,6 @@
 ////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Node_Sidebar.jsx
 
-import React from "react";
+import React, { useState } from "react";
 import {
   Accordion,
   AccordionSummary,
@@ -19,17 +19,6 @@ import {
   Polyline as PolylineIcon
 } from "@mui/icons-material";
 
-/**
- * Left sidebar for managing workflows and node categories.
- * 
- * Props:
- * - categorizedNodes (object of arrays, e.g. { "Category": [{...}, ...], ... })
- * - handleExportFlow() => void
- * - handleImportFlow() => void
- * - handleOpenCloseAllDialog() => void
- * - fileInputRef (ref to hidden file input)
- * - onFileInputChange(event) => void
- */
 export default function NodeSidebar({
   categorizedNodes,
   handleExportFlow,
@@ -38,6 +27,12 @@ export default function NodeSidebar({
   fileInputRef,
   onFileInputChange
 }) {
+  const [expandedCategory, setExpandedCategory] = useState(null);
+
+  const handleAccordionChange = (category) => (_, isExpanded) => {
+    setExpandedCategory(isExpanded ? category : null);
+  };
+
   return (
     <div
       style={{
@@ -47,207 +42,114 @@ export default function NodeSidebar({
         overflowY: "auto"
       }}
     >
+      {/* Workflows Section */}
       <Accordion
         defaultExpanded
         square
         disableGutters
-        sx={{
-          "&:before": { display: "none" },
-          margin: 0,
-          border: 0
-        }}
+        sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
       >
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           sx={{
             backgroundColor: "#2c2c2c",
             minHeight: "36px",
-            "& .MuiAccordionSummary-content": {
-              margin: 0
-            }
+            "& .MuiAccordionSummary-content": { margin: 0 }
           }}
         >
-          <Typography
-            align="left"
-            sx={{
-              fontSize: "0.9rem",
-              color: "#0475c2"
-            }}
-          >
+          <Typography sx={{ fontSize: "0.9rem", color: "#0475c2" }}>
             <b>Workflows</b>
           </Typography>
         </AccordionSummary>
         <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
-          <Button
-            fullWidth
-            startIcon={<SaveIcon />}
-            sx={{
-              color: "#ccc",
-              backgroundColor: "#232323",
-              justifyContent: "flex-start",
-              pl: 2,
-              fontSize: "0.9rem",
-              textTransform: "none",
-              "&:hover": {
-                backgroundColor: "#2a2a2a"
-              }
-            }}
-            onClick={handleExportFlow}
-          >
+          <Button fullWidth startIcon={<SaveIcon />} onClick={handleExportFlow} sx={buttonStyle}>
             Export Current Flow
           </Button>
-          <Button
-            fullWidth
-            startIcon={<FileOpenIcon />}
-            sx={{
-              color: "#ccc",
-              backgroundColor: "#232323",
-              justifyContent: "flex-start",
-              pl: 2,
-              fontSize: "0.9rem",
-              textTransform: "none",
-              "&:hover": {
-                backgroundColor: "#2a2a2a"
-              }
-            }}
-            onClick={handleImportFlow}
-          >
+          <Button fullWidth startIcon={<FileOpenIcon />} onClick={handleImportFlow} sx={buttonStyle}>
             Import Flow
           </Button>
-          <Button
-            fullWidth
-            startIcon={<DeleteForeverIcon />}
-            sx={{
-              color: "#ccc",
-              backgroundColor: "#232323",
-              justifyContent: "flex-start",
-              pl: 2,
-              fontSize: "0.9rem",
-              textTransform: "none",
-              "&:hover": {
-                backgroundColor: "#2a2a2a"
-              }
-            }}
-            onClick={handleOpenCloseAllDialog}
-          >
+          <Button fullWidth startIcon={<DeleteForeverIcon />} onClick={handleOpenCloseAllDialog} sx={buttonStyle}>
             Close All Flows
           </Button>
         </AccordionDetails>
       </Accordion>
 
+      {/* Nodes Section */}
       <Accordion
         defaultExpanded
         square
         disableGutters
-        sx={{
-          "&:before": { display: "none" },
-          margin: 0,
-          border: 0
-        }}
+        sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
       >
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           sx={{
             backgroundColor: "#2c2c2c",
             minHeight: "36px",
-            "& .MuiAccordionSummary-content": {
-              margin: 0
-            }
+            "& .MuiAccordionSummary-content": { margin: 0 }
           }}
         >
-          <Typography
-            align="left"
-            sx={{
-              fontSize: "0.9rem",
-              color: "#0475c2"
-            }}
-          >
+          <Typography sx={{ fontSize: "0.9rem", color: "#0475c2" }}>
             <b>Nodes</b>
           </Typography>
         </AccordionSummary>
         <AccordionDetails sx={{ p: 0 }}>
           {Object.entries(categorizedNodes).map(([category, items]) => (
-            <div key={category} style={{ marginBottom: 0, backgroundColor: "#232323" }}>
-              <Divider
+            <Accordion
+              key={category}
+              square
+              expanded={expandedCategory === category}
+              onChange={handleAccordionChange(category)}
+              disableGutters
+              sx={{
+                bgcolor: "#232323",
+                "&:before": { display: "none" },
+                margin: 0,
+                border: 0
+              }}
+            >
+              <AccordionSummary
+                expandIcon={<ExpandMoreIcon />}
                 sx={{
-                  bgcolor: "transparent",
+                  bgcolor: "#1e1e1e",
                   px: 2,
-                  py: 0.75,
-                  display: "flex",
-                  justifyContent: "center",
-                  borderColor: "#333"
+                  minHeight: "32px",
+                  "& .MuiAccordionSummary-content": { margin: 0 }
                 }}
-                variant="fullWidth"
               >
-                <Typography
-                  variant="caption"
-                  sx={{
-                    color: "#888",
-                    fontSize: "0.75rem"
-                  }}
-                >
+                <Typography sx={{ color: "#888", fontSize: "0.75rem" }}>
                   {category}
                 </Typography>
-              </Divider>
-              {items.map((nodeDef) => (
-                <Tooltip
-                  key={`${category}-${nodeDef.type}`}
-                  title={
-                    <span
-                      style={{
-                        whiteSpace: "pre-line",
-                        wordWrap: "break-word",
-                        maxWidth: 220
-                      }}
-                    >
-                      {nodeDef.description || "Drag & Drop into Editor"}
-                    </span>
-                  }
-                  placement="right"
-                  arrow
-                >
-                  <Button
-                    fullWidth
-                    sx={{
-                      color: "#ccc",
-                      backgroundColor: "#232323",
-                      justifyContent: "space-between",
-                      pl: 2,
-                      pr: 1,
-                      fontSize: "0.9rem",
-                      textTransform: "none",
-                      "&:hover": {
-                        backgroundColor: "#2a2a2a"
-                      }
-                    }}
-                    draggable
-                    onDragStart={(event) => {
-                      event.dataTransfer.setData("application/reactflow", nodeDef.type);
-                      event.dataTransfer.effectAllowed = "move";
-                    }}
-                    startIcon={
-                      <DragIndicatorIcon
-                        sx={{
-                          color: "#666",
-                          fontSize: 18
-                        }}
-                      />
+              </AccordionSummary>
+              <AccordionDetails sx={{ px: 1, py: 0 }}>
+                {items.map((nodeDef) => (
+                  <Tooltip
+                    key={`${category}-${nodeDef.type}`}
+                    title={
+                      <span style={{ whiteSpace: "pre-line", wordWrap: "break-word", maxWidth: 220 }}>
+                        {nodeDef.description || "Drag & Drop into Editor"}
+                      </span>
                     }
+                    placement="right"
+                    arrow
                   >
-                    <span style={{ flexGrow: 1, textAlign: "left" }}>
-                      {nodeDef.label}
-                    </span>
-                    <PolylineIcon
-                      sx={{
-                        color: "#58a6ff",
-                        fontSize: 18,
-                        ml: 1
+                    <Button
+                      fullWidth
+                      sx={nodeButtonStyle}
+                      draggable
+                      onDragStart={(event) => {
+                        event.dataTransfer.setData("application/reactflow", nodeDef.type);
+                        event.dataTransfer.effectAllowed = "move";
                       }}
-                    />
-                  </Button>
-                </Tooltip>
-              ))}
-            </div>
+                      startIcon={<DragIndicatorIcon sx={{ color: "#666", fontSize: 18 }} />}
+                    >
+                      <span style={{ flexGrow: 1, textAlign: "left" }}>{nodeDef.label}</span>
+                      <PolylineIcon sx={{ color: "#58a6ff", fontSize: 18, ml: 1 }} />
+                    </Button>
+                  </Tooltip>
+                ))}
+              </AccordionDetails>
+            </Accordion>
           ))}
         </AccordionDetails>
       </Accordion>
@@ -263,3 +165,28 @@ export default function NodeSidebar({
     </div>
   );
 }
+
+const buttonStyle = {
+  color: "#ccc",
+  backgroundColor: "#232323",
+  justifyContent: "flex-start",
+  pl: 2,
+  fontSize: "0.9rem",
+  textTransform: "none",
+  "&:hover": {
+    backgroundColor: "#2a2a2a"
+  }
+};
+
+const nodeButtonStyle = {
+  color: "#ccc",
+  backgroundColor: "#232323",
+  justifyContent: "space-between",
+  pl: 2,
+  pr: 1,
+  fontSize: "0.9rem",
+  textTransform: "none",
+  "&:hover": {
+    backgroundColor: "#2a2a2a"
+  }
+};