the minimize/maximize button is inside the thing being minimized bro lol

index.html

@@ -84,7 +84,7 @@
         </div>
         <!-- Main Content Area -->
         <div class="flex-1 flex flex-col min-w-0">
-<!-- Top Bar -->
+            <!-- Top Bar -->
             <div class="bg-gray-800 border-b border-gray-700 p-4 flex justify-between items-center">
                 <div class="flex items-center gap-4">
                     <button id="mobile-menu" class="lg:hidden p-2 rounded hover:bg-gray-700">
@@ -93,6 +93,9 @@
                     <h1 class="text-xl font-bold text-primary-400">CodeCanvas AI Studio</h1>
                 </div>
                 <div class="flex items-center gap-3">
+                    <button id="restore-filesystem" class="p-2 rounded hover:bg-gray-700 hidden">
+                        <i data-feather="folder" class="w-4 h-4"></i>
+                    </button>
                     <button class="p-2 rounded hover:bg-gray-700">
                         <i data-feather="play" class="w-4 h-4 text-green-400"></i>
                     </button>
@@ -101,7 +104,7 @@
                     </button>
                 </div>
             </div>
-            <!-- Editor and Preview Area -->
+<!-- Editor and Preview Area -->
             <div class="flex-1 flex flex-col lg:flex-row overflow-hidden">
                 <!-- Code Editor -->
                 <div class="flex-1 flex flex-col min-w-0">
@@ -174,7 +177,6 @@
             // Initial preview update
             updatePreview(editor.getValue());
         });
-
         function updatePreview(code) {
             const preview = document.getElementById('preview');
             try {
@@ -198,23 +200,37 @@
                 `;
             }
         }
+        
         // Panel toggle functionality
         document.getElementById('toggle-filesystem').addEventListener('click', function() {
             const panel = document.getElementById('filesystem-panel');
+            const restoreButton = document.getElementById('restore-filesystem');
             const isExpanded = panel.classList.contains('w-64');
             
             if (isExpanded) {
                 panel.classList.remove('w-64');
                 panel.classList.add('w-0', 'overflow-hidden', 'p-0', 'border-r-0');
-                this.querySelector('i').setAttribute('data-feather', 'chevron-right');
+                restoreButton.classList.remove('hidden');
             } else {
                 panel.classList.remove('w-0', 'overflow-hidden', 'p-0', 'border-r-0');
                 panel.classList.add('w-64');
-                this.querySelector('i').setAttribute('data-feather', 'chevron-left');
+                restoreButton.classList.add('hidden');
             }
             feather.replace();
         });
-// Mobile menu toggle
+
+        // Restore filesystem panel from top bar
+        document.getElementById('restore-filesystem').addEventListener('click', function() {
+            const panel = document.getElementById('filesystem-panel');
+            const restoreButton = document.getElementById('restore-filesystem');
+            
+            panel.classList.remove('w-0', 'overflow-hidden', 'p-0', 'border-r-0');
+            panel.classList.add('w-64');
+            restoreButton.classList.add('hidden');
+            feather.replace();
+        });
+
+        // Mobile menu toggle
         document.getElementById('mobile-menu').addEventListener('click', function() {
             const panel = document.getElementById('filesystem-panel');
             panel.classList.toggle('hidden');
@@ -222,6 +238,6 @@
 
         // Initialize feather icons
         feather.replace();
-    </script>
+</script>
 </body>
 </html>