From bd57578bc49281dbabb7ab1022ba905b3dbaf4ba Mon Sep 17 00:00:00 2001 From: RemDelaporteMathurin Date: Mon, 18 Aug 2025 14:14:05 -0400 Subject: [PATCH 1/3] white spaces --- src/components/ShareModal.jsx | 2 +- src/utils/urlSharing.js | 170 +++++++++++++++++----------------- 2 files changed, 86 insertions(+), 86 deletions(-) diff --git a/src/components/ShareModal.jsx b/src/components/ShareModal.jsx index f1f34221..f46b38ce 100644 --- a/src/components/ShareModal.jsx +++ b/src/components/ShareModal.jsx @@ -94,7 +94,7 @@ const ShareModal = ({ isOpen, onClose, shareableURL, urlMetadata }) => {

Copy this URL to share your workflow with others.

- + {/* URL Length Warning */} {isLongURL && (
} - Result object with success status and metadata */ export async function copyShareableURLToClipboard(graphData) { - try { - const urlResult = generateShareableURL(graphData); - if (!urlResult) { - throw new Error('Failed to generate shareable URL'); - } - - await navigator.clipboard.writeText(urlResult.url); - return { - success: true, - isSafe: urlResult.isSafe, - length: urlResult.length, - maxLength: urlResult.maxLength, - url: urlResult.url - }; - } catch (error) { - console.error('Error copying to clipboard:', error); - // Fallback for older browsers try { - const urlResult = generateShareableURL(graphData); - const textArea = document.createElement('textarea'); - textArea.value = urlResult.url; - document.body.appendChild(textArea); - textArea.select(); - document.execCommand('copy'); - document.body.removeChild(textArea); - return { - success: true, - isSafe: urlResult.isSafe, - length: urlResult.length, - maxLength: urlResult.maxLength, - url: urlResult.url - }; - } catch (fallbackError) { - console.error('Clipboard fallback failed:', fallbackError); - return { - success: false, - isSafe: false, - length: 0, - maxLength: MAX_SAFE_URL_LENGTH, - url: null - }; + const urlResult = generateShareableURL(graphData); + if (!urlResult) { + throw new Error('Failed to generate shareable URL'); + } + + await navigator.clipboard.writeText(urlResult.url); + return { + success: true, + isSafe: urlResult.isSafe, + length: urlResult.length, + maxLength: urlResult.maxLength, + url: urlResult.url + }; + } catch (error) { + console.error('Error copying to clipboard:', error); + // Fallback for older browsers + try { + const urlResult = generateShareableURL(graphData); + const textArea = document.createElement('textarea'); + textArea.value = urlResult.url; + document.body.appendChild(textArea); + textArea.select(); + document.execCommand('copy'); + document.body.removeChild(textArea); + return { + success: true, + isSafe: urlResult.isSafe, + length: urlResult.length, + maxLength: urlResult.maxLength, + url: urlResult.url + }; + } catch (fallbackError) { + console.error('Clipboard fallback failed:', fallbackError); + return { + success: false, + isSafe: false, + length: 0, + maxLength: MAX_SAFE_URL_LENGTH, + url: null + }; + } } - } } From 800d98d59e03d89fdb069c5c311d16f83c907942 Mon Sep 17 00:00:00 2001 From: RemDelaporteMathurin Date: Mon, 18 Aug 2025 14:29:32 -0400 Subject: [PATCH 2/3] same as strudel-flow --- src/App.jsx | 304 ++++++++++++++++++++++++--------------------- src/styles/App.css | 37 ++++++ 2 files changed, 199 insertions(+), 142 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index af31d6a1..393de637 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1063,130 +1063,144 @@ const DnDFlow = () => { {/* Graph Editor Tab */} {activeTab === 'graph' && (
- {/* Sidebar Toggle Button */} - - - {/* Sidebar */} - {sidebarVisible && ( -
- )} - - - {/* Log Dock */} - setDockOpen(false)} - lines={logLines} - progress={null} - /> - {/* Node Sidebar */} - - {/* Edge Details */} - setSelectedEdge(null)} - onDelete={deleteSelectedEdge} - /> +
+ + {/* Main content area that moves with sidebar */} +
+ {/* Sidebar Toggle Button - positioned within main content area */} + + + + + {/* Log Dock */} + setDockOpen(false)} + lines={logLines} + progress={null} + /> + + {/* Node Sidebar */} + + + {/* Edge Details */} + setSelectedEdge(null)} + onDelete={deleteSelectedEdge} + /> +
)} @@ -1194,33 +1208,39 @@ const DnDFlow = () => { {activeTab === 'events' && } {/* Solver Parameters Tab */} - {activeTab === 'solver' && ( - - )} + { + activeTab === 'solver' && ( + + ) + } {/* Global Variables Tab */} - {activeTab === 'globals' && ( - - )} + { + activeTab === 'globals' && ( + + ) + } {/* Results Tab */} - {activeTab === 'results' && ( - - )} + { + activeTab === 'results' && ( + + ) + } {/* Share URL Modal */} { urlMetadata={urlMetadata} /> - + ); } diff --git a/src/styles/App.css b/src/styles/App.css index def03a59..0f348f88 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -431,4 +431,41 @@ aside::-webkit-scrollbar-thumb { aside::-webkit-scrollbar-thumb:hover { background: #666; +} + +/* Sidebar transition styles - inspired by strudel-flow */ +.sidebar-container { + transition: width 0.8s ease; +} + +.sidebar-container[data-sidebar-state="collapsed"] { + width: 0 !important; +} + +.sidebar-container[data-sidebar-state="expanded"] { + width: 250px !important; +} + +/* Sidebar trigger button - strudel-flow style */ +.sidebar-trigger { + /* Ghost button variant */ + background-color: transparent !important; + border: none; + border-radius: 4px; + transition: background-color 0.2s ease, color 0.2s ease; + position: relative; +} + +.sidebar-trigger:hover { + background-color: #f1f5f9 !important; + color: #1e293b !important; +} + +.sidebar-trigger:focus { + outline: 2px solid #3b82f6; + outline-offset: 2px; +} + +.sidebar-trigger:active { + scale: 0.95; } \ No newline at end of file From 34beba21c527f1b4320ffa459cd148809b1c2f83 Mon Sep 17 00:00:00 2001 From: RemDelaporteMathurin Date: Mon, 18 Aug 2025 14:42:36 -0400 Subject: [PATCH 3/3] improved transition --- src/App.jsx | 53 ++---------------------------------- src/components/GraphView.jsx | 48 +++++++++++++++++++++++++++++++- src/styles/App.css | 12 ++++++-- 3 files changed, 60 insertions(+), 53 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 393de637..7003faad 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1071,7 +1071,7 @@ const DnDFlow = () => { position: 'relative', width: sidebarVisible ? '250px' : '0px', height: '100%', - transition: 'width 0.8s ease', + transition: 'width 0.5s ease', overflow: 'hidden' }} > @@ -1082,7 +1082,7 @@ const DnDFlow = () => { top: '50px', // Account for top bar height width: '250px', height: 'calc(100vh - 50px)', - transition: 'left 0.8s ease', + transition: 'left 0.5s ease', zIndex: 10, borderRight: '1px solid #ccc', backgroundColor: '#1e1e2f' @@ -1094,54 +1094,6 @@ const DnDFlow = () => { {/* Main content area that moves with sidebar */}
- {/* Sidebar Toggle Button - positioned within main content area */} - - { shareGraphURL, dockOpen, setDockOpen, onToggleLogs, showKeyboardShortcuts, setShowKeyboardShortcuts, + sidebarVisible, setSidebarVisible, }} /> diff --git a/src/components/GraphView.jsx b/src/components/GraphView.jsx index a72f4846..db6cd831 100644 --- a/src/components/GraphView.jsx +++ b/src/components/GraphView.jsx @@ -50,7 +50,8 @@ function FloatingButtons({ deleteSelectedNode, deleteSelectedEdge, saveGraph, loadGraph, resetGraph, saveToPython, runPathsim, shareGraphURL, - dockOpen, onToggleLogs + dockOpen, onToggleLogs, + sidebarVisible, setSidebarVisible }) { return ( <> @@ -142,6 +143,51 @@ function FloatingButtons({ > New graph + + {/* Sidebar Toggle Button - strudel-flow style */} + +