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>
 

src/lib/components/editor/LogPanel.svelte

@@ -6,9 +6,11 @@
 
   interface Props {
     logs?: LogEntry[];
+    onHeaderClick?: () => void;
+    collapsed?: boolean;
   }
 
-  let { logs = [] }: Props = $props();
+  let { logs = [], onHeaderClick, collapsed = false }: Props = $props();
 
   const { csound } = getAppContext();
 
@@ -109,48 +111,50 @@
 </script>
 
 <div class="log-panel">
-  <div class="log-header">
-    <span class="log-title">Output</span>
-    <div class="log-actions">
-      <button
-        class="action-button"
-        class:search-active={searchVisible}
-        onclick={toggleSearch}
-        title={searchVisible ? 'Hide search' : 'Show search'}
-      >
-        <Search size={14} />
-      </button>
-      <button
-        class="action-button"
-        class:pause-active={!autoFollow}
-        onclick={toggleAutoFollow}
-        title={autoFollow ? 'Pause auto-follow' : 'Resume auto-follow'}
-      >
-        {#if autoFollow}
-          <Pause size={14} />
-        {:else}
-          <Play size={14} />
-        {/if}
-      </button>
-      <button
-        class="action-button"
-        onclick={copyLogs}
-        disabled={logs.length === 0}
-        title="Copy logs"
-      >
-        <Copy size={14} />
-      </button>
-      <button
-        class="action-button"
-        onclick={clearLogs}
-        disabled={logs.length === 0}
-        title="Clear logs"
-      >
-        <Trash2 size={14} />
-      </button>
-    </div>
+  <div class="log-header" onclick={onHeaderClick}>
+    <span class="log-title">Logs</span>
+    {#if !collapsed}
+      <div class="log-actions" onclick={(e) => e.stopPropagation()}>
+        <button
+          class="action-button"
+          class:search-active={searchVisible}
+          onclick={toggleSearch}
+          title={searchVisible ? 'Hide search' : 'Show search'}
+        >
+          <Search size={14} />
+        </button>
+        <button
+          class="action-button"
+          class:pause-active={!autoFollow}
+          onclick={toggleAutoFollow}
+          title={autoFollow ? 'Pause auto-follow' : 'Resume auto-follow'}
+        >
+          {#if autoFollow}
+            <Pause size={14} />
+          {:else}
+            <Play size={14} />
+          {/if}
+        </button>
+        <button
+          class="action-button"
+          onclick={copyLogs}
+          disabled={logs.length === 0}
+          title="Copy logs"
+        >
+          <Copy size={14} />
+        </button>
+        <button
+          class="action-button"
+          onclick={clearLogs}
+          disabled={logs.length === 0}
+          title="Clear logs"
+        >
+          <Trash2 size={14} />
+        </button>
+      </div>
+    {/if}
   </div>
-  {#if searchVisible}
+  {#if searchVisible && !collapsed}
     <div class="search-bar">
       <Search size={14} class="search-icon" />
       <input
@@ -161,7 +165,8 @@
       />
     </div>
   {/if}
-  <div class="log-content" bind:this={logContentEl} onscroll={handleScroll}>
+  {#if !collapsed}
+    <div class="log-content" bind:this={logContentEl} onscroll={handleScroll}>
     {#if filteredLogs.length === 0 && searchQuery.trim() !== ''}
       <div class="empty-state">No matching logs found...</div>
     {:else if logs.length === 0}
@@ -174,7 +179,8 @@
         </div>
       {/each}
     {/if}
-  </div>
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -192,6 +198,12 @@
     padding: 0.5rem 0.75rem;
     background-color: #2a2a2a;
     border-bottom: 1px solid #3a3a3a;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+
+  .log-header:hover {
+    background-color: #323232;
   }
 
   .search-bar {