From da0162243fd0904dd7a16717b4c67bfc4ef24d4c Mon Sep 17 00:00:00 2001
From: RemDelaporteMathurin <rdelaportemathurin@gmail.com>
Date: Mon, 18 Aug 2025 11:06:16 -0400
Subject: [PATCH 1/6] smaller cards

---
 src/styles/App.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/App.css b/src/styles/App.css
index 0ea9b2f0..db8cc652 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -300,7 +300,7 @@ aside .description {
 }
 
 .dndnode {
-  height: 50px;
+  height: 30px;
   padding: 10px;
   border: 1px solid #78A083;
   border-radius: 5px;

From 22169d41c147ef76fa484c9379347c2cf7872214 Mon Sep 17 00:00:00 2001
From: RemDelaporteMathurin <rdelaportemathurin@gmail.com>
Date: Mon, 18 Aug 2025 11:14:27 -0400
Subject: [PATCH 2/6] added show/hide button

---
 src/App.jsx | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 69 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 17df2eb2..bd3d8a96 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -48,6 +48,7 @@ const DnDFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const [selectedNode, setSelectedNode] = useState(null);
+  const [sidebarVisible, setSidebarVisible] = useState(true);
   const [activeTab, setActiveTab] = useState('graph');
   const [simulationResults, setSimulationResults] = useState(null);
   const [selectedEdge, setSelectedEdge] = useState(null);
@@ -957,9 +958,74 @@ const DnDFlow = () => {
       {/* Graph Editor Tab */}
       {activeTab === 'graph' && (
         <div style={{ display: 'flex', flex: 1, height: 'calc(100vh - 50px)', overflow: 'hidden' }}>
-          <div style={{ width: 250, height: '100%', borderRight: '1px solid #ccc' }}>
-            <Sidebar />
-          </div>
+          {/* Sidebar Toggle Button */}
+          <button
+            onClick={() => setSidebarVisible(!sidebarVisible)}
+            style={{
+              position: 'absolute',
+              top: '60px',
+              left: sidebarVisible ? '240px' : '10px',
+              zIndex: 1000,
+              backgroundColor: '#2c2c54',
+              color: '#ffffff',
+              border: '1px solid #555',
+              borderRadius: '4px',
+              width: '32px',
+              height: '32px',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'left 0.3s ease',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+              padding: '4px'
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.backgroundColor = '#3c3c64';
+              e.target.style.borderColor = '#78A083';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.backgroundColor = '#2c2c54';
+              e.target.style.borderColor = '#555';
+            }}
+            title={sidebarVisible ? 'Hide Sidebar' : 'Show Sidebar'}
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              {sidebarVisible ? (
+                // Hide sidebar icon (sidebar with left arrow)
+                <>
+                  <rect x="2" y="3" width="6" height="18" rx="1" fill="currentColor" opacity="0.3"/>
+                  <rect x="10" y="3" width="12" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+                  <path d="M6 12L4 10M6 12L4 14M6 12H1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                </>
+              ) : (
+                // Show sidebar icon (sidebar with right arrow)
+                <>
+                  <rect x="2" y="3" width="6" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+                  <rect x="10" y="3" width="12" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+                  <path d="M5 12L7 10M5 12L7 14M5 12H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                </>
+              )}
+            </svg>
+          </button>
+
+          {/* Sidebar */}
+          {sidebarVisible && (
+            <div style={{ 
+              width: 250, 
+              height: '100%', 
+              borderRight: '1px solid #ccc',
+              transition: 'width 0.3s ease'
+            }}>
+              <Sidebar />
+            </div>
+          )}
 
           <GraphView
             refEl={ref}

From b737e55b64edc51d8ef32addffb912b6d7fbba29 Mon Sep 17 00:00:00 2001
From: RemDelaporteMathurin <rdelaportemathurin@gmail.com>
Date: Mon, 18 Aug 2025 11:15:05 -0400
Subject: [PATCH 3/6] new SVG

---
 src/App.jsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index bd3d8a96..2c40a480 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1000,16 +1000,16 @@ const DnDFlow = () => {
               {sidebarVisible ? (
                 // Hide sidebar icon (sidebar with left arrow)
                 <>
-                  <rect x="2" y="3" width="6" height="18" rx="1" fill="currentColor" opacity="0.3"/>
-                  <rect x="10" y="3" width="12" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none"/>
-                  <path d="M6 12L4 10M6 12L4 14M6 12H1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                  <rect x="2" y="3" width="6" height="18" rx="1" fill="currentColor" opacity="0.3" />
+                  <rect x="10" y="3" width="12" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
+                  <path d="M6 12L4 10M6 12L4 14M6 12H1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                 </>
               ) : (
                 // Show sidebar icon (sidebar with right arrow)
                 <>
-                  <rect x="2" y="3" width="6" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none"/>
-                  <rect x="10" y="3" width="12" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none"/>
-                  <path d="M5 12L7 10M5 12L7 14M5 12H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                  <rect x="2" y="3" width="6" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
+                  <rect x="10" y="3" width="12" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
+                  <path d="M5 12L7 10M5 12L7 14M5 12H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                 </>
               )}
             </svg>
@@ -1017,9 +1017,9 @@ const DnDFlow = () => {
 
           {/* Sidebar */}
           {sidebarVisible && (
-            <div style={{ 
-              width: 250, 
-              height: '100%', 
+            <div style={{
+              width: 250,
+              height: '100%',
               borderRight: '1px solid #ccc',
               transition: 'width 0.3s ease'
             }}>

From 900e3588c2e8fba80e3fca48981041583fd33142 Mon Sep 17 00:00:00 2001
From: RemDelaporteMathurin <rdelaportemathurin@gmail.com>
Date: Mon, 18 Aug 2025 11:17:01 -0400
Subject: [PATCH 4/6] moved buttons to the right

---
 src/components/GraphView.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/GraphView.jsx b/src/components/GraphView.jsx
index 652b9b30..32cdf100 100644
--- a/src/components/GraphView.jsx
+++ b/src/components/GraphView.jsx
@@ -57,7 +57,7 @@ function FloatingButtons({
             <button
                 style={{
                     position: 'absolute',
-                    left: 20,
+                    left: 50,
                     top: 70,
                     zIndex: 10,
                     padding: '8px 12px',
@@ -75,7 +75,7 @@ function FloatingButtons({
             <button
                 style={{
                     position: 'absolute',
-                    left: 20,
+                    left: 50,
                     top: 120,
                     zIndex: 10,
                     padding: '8px 12px',
@@ -127,7 +127,7 @@ function FloatingButtons({
             <button
                 style={{
                     position: 'absolute',
-                    left: 20,
+                    left: 50,
                     top: 20,
                     zIndex: 10,
                     padding: '8px 12px',

From 78a7032ce5c70f743caaacdf34d3005144a1a121 Mon Sep 17 00:00:00 2001
From: RemDelaporteMathurin <rdelaportemathurin@gmail.com>
Date: Mon, 18 Aug 2025 11:23:51 -0400
Subject: [PATCH 5/6] added grip

---
 src/components/Sidebar.jsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 4490d4fe..5e71bc42 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -110,7 +110,9 @@ export default () => {
                     cursor: 'grab',
                     fontSize: '13px',
                     transition: 'all 0.2s ease',
-                    display: 'block'
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
                   }}
                   onMouseEnter={(e) => {
                     const currentBg = window.getComputedStyle(e.target).backgroundColor;
@@ -136,7 +138,13 @@ export default () => {
                     e.target.style.cursor = 'grab';
                   }}
                 >
-                  {getNodeDisplayName(nodeType)}
+                  <span>{getNodeDisplayName(nodeType)}</span>
+                  <span style={{
+                    fontSize: '12px',
+                    color: '#888',
+                  }}>
+                    ⋮⋮
+                  </span>
                 </div>
               ))}
             </div>

From d4b2d5decb2e2d06a3c43d7045fcd1fe0c63fc48 Mon Sep 17 00:00:00 2001
From: RemDelaporteMathurin <rdelaportemathurin@gmail.com>
Date: Mon, 18 Aug 2025 11:24:55 -0400
Subject: [PATCH 6/6] even smaller

---
 src/styles/App.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/App.css b/src/styles/App.css
index db8cc652..def03a59 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -300,7 +300,7 @@ aside .description {
 }
 
 .dndnode {
-  height: 30px;
+  height: 15px;
   padding: 10px;
   border: 1px solid #78A083;
   border-radius: 5px;