@@ -12,6 +12,7 @@ export function App() {
1212 const [ view , setView ] = useState < ViewMode > ( "space" ) ;
1313 const [ focusFileId , setFocusFileId ] = useState < string | null > ( null ) ;
1414 const [ refreshKey , setRefreshKey ] = useState ( 0 ) ;
15+ const [ sidebarOpen , setSidebarOpen ] = useState ( false ) ;
1516 const searchRef = useRef < InlineSearchHandle > ( null ) ;
1617 const selectPot = useVisualizationStore ( ( s ) => s . selectPot ) ;
1718 const selectedPotId = useVisualizationStore ( ( s ) => s . selectedPotId ) ;
@@ -27,13 +28,14 @@ export function App() {
2728 e . preventDefault ( ) ;
2829 searchRef . current ?. focus ( ) ;
2930 }
30- if ( e . key === "Escape" && selectedPotId ) {
31- selectPot ( null ) ;
31+ if ( e . key === "Escape" ) {
32+ if ( sidebarOpen ) setSidebarOpen ( false ) ;
33+ if ( selectedPotId ) selectPot ( null ) ;
3234 }
3335 } ;
3436 window . addEventListener ( "keydown" , handleKeyDown ) ;
3537 return ( ) => window . removeEventListener ( "keydown" , handleKeyDown ) ;
36- } , [ selectedPotId , selectPot ] ) ;
38+ } , [ selectedPotId , selectPot , sidebarOpen ] ) ;
3739
3840 return (
3941 < ToastProvider >
@@ -48,11 +50,13 @@ export function App() {
4850 } }
4951 searchRef = { searchRef }
5052 onUploadComplete = { ( ) => setRefreshKey ( ( k ) => k + 1 ) }
53+ onToggleSidebar = { ( ) => setSidebarOpen ( ( o ) => ! o ) }
5154 />
5255
5356 { view === "space" ? (
54- < div className = "flex-1 min-h-0 flex bg-[#0a0a0f]" >
55- < div className = "w-72 shrink-0 border-r border-[#1f3647]/50 bg-[#061018]/50 flex flex-col overflow-y-auto" >
57+ < div className = "flex-1 min-h-0 flex relative" >
58+ { /* Desktop sidebar — absolutely positioned to overlay canvas for transparency */ }
59+ < div className = "hidden md:flex absolute left-0 top-0 h-full w-72 z-sidebar border-r border-[var(--border)]/50 bg-[var(--bg-panel)]/80 backdrop-blur-sm flex-col overflow-y-auto" >
5660 < PotsSidebar
5761 selectedSlug = { selectedPotSlug }
5862 onSelectPot = { ( slug ) => {
@@ -61,11 +65,26 @@ export function App() {
6165 } }
6266 />
6367 </ div >
68+ { /* Mobile sidebar overlay */ }
69+ { sidebarOpen && (
70+ < div className = "fixed inset-0 z-overlay md:hidden" onClick = { ( ) => setSidebarOpen ( false ) } >
71+ < div className = "absolute left-0 top-0 h-full w-72 bg-[var(--bg-panel)] border-r border-[var(--border-subtle)] overflow-y-auto" onClick = { ( e ) => e . stopPropagation ( ) } >
72+ < PotsSidebar
73+ selectedSlug = { selectedPotSlug }
74+ onSelectPot = { ( slug ) => {
75+ const pot = slug ? pots . find ( ( p ) => p . slug === slug ) : null ;
76+ selectPot ( pot ?. id ?? null ) ;
77+ setSidebarOpen ( false ) ;
78+ } }
79+ />
80+ </ div >
81+ </ div >
82+ ) }
6483 < EmbeddingSpace focusFileId = { focusFileId } />
6584 </ div >
6685 ) : (
6786 < div className = "flex-1 min-h-0 flex overflow-hidden" >
68- < FilesBrowser refreshKey = { refreshKey } />
87+ < FilesBrowser refreshKey = { refreshKey } sidebarOpen = { sidebarOpen } onCloseSidebar = { ( ) => setSidebarOpen ( false ) } />
6988 </ div >
7089 ) }
7190 </ div >
0 commit comments