Better UI

src/lib/components/editor/EditorWithLogs.svelte

@@ -28,6 +28,8 @@
   let isResizing = $state(false);
   let startY = $state(0);
   let startHeight = $state(0);
+  let previousHeight = $state(70);
+  let isCollapsed = $state(false);
 
   function handleResizeStart(e: MouseEvent) {
     isResizing = true;
@@ -54,6 +56,17 @@
     isResizing = false;
   }
 
+  function toggleCollapse() {
+    if (isCollapsed) {
+      editorHeight = previousHeight;
+      isCollapsed = false;
+    } else {
+      previousHeight = editorHeight;
+      editorHeight = 96;
+      isCollapsed = true;
+    }
+  }
+
   onMount(() => {
     document.addEventListener('mousemove', handleResizeMove);
     document.addEventListener('mouseup', handleResizeEnd);
@@ -80,7 +93,7 @@
   <div class="resize-divider" onmousedown={handleResizeStart}></div>
 
   <div class="logs-section" style="height: {100 - editorHeight}%;">
-    <LogPanel bind:this={logPanelRef} {logs} />
+    <LogPanel bind:this={logPanelRef} {logs} onHeaderClick={toggleCollapse} collapsed={isCollapsed} />
   </div>
 </div>