Add resizable sidebar with drag handle

Adds a horizontal resize handle between the sidebar and main content area,
allowing users to adjust sidebar width by dragging.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: ozgesolidkey

src/renderer/index.html

@@ -167,11 +167,15 @@
             <button id="btn-terminal-toggle" class="section-btn" title="Toggle Terminal (Ctrl+`)">⌨</button>
           </div>
           <div id="terminal-panel" class="terminal-section-content hidden">
+            <div id="terminal-resize-handle" class="terminal-resize-handle"></div>
             <div id="terminal-container" class="terminal-container"></div>
           </div>
         </div>
       </aside>
 
+      <!-- Sidebar Resize Handle -->
+      <div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
+
       <!-- Log Viewer -->
       <main class="log-viewer">
         <div id="editor-container" class="editor-container">

src/renderer/renderer.ts

@@ -352,8 +352,11 @@ const elements = {
   // Terminal
   terminalPanel: document.getElementById('terminal-panel') as HTMLDivElement,
   terminalContainer: document.getElementById('terminal-container') as HTMLDivElement,
+  terminalResizeHandle: document.getElementById('terminal-resize-handle') as HTMLDivElement,
   btnTerminalToggle: document.getElementById('btn-terminal-toggle') as HTMLButtonElement,
   sectionTerminal: document.getElementById('section-terminal') as HTMLDivElement,
+  // Sidebar resize
+  sidebarResizeHandle: document.getElementById('sidebar-resize-handle') as HTMLDivElement,
 };
 
 // Virtual Log Viewer
@@ -3700,6 +3703,47 @@ function init(): void {
   // Terminal
   elements.btnTerminalToggle.addEventListener('click', toggleTerminal);
 
+  // Sidebar resize (horizontal)
+  let isResizingSidebar = false;
+  let sidebarStartX = 0;
+  let sidebarStartWidth = 0;
+
+  elements.sidebarResizeHandle.addEventListener('mousedown', (e) => {
+    isResizingSidebar = true;
+    sidebarStartX = e.clientX;
+    sidebarStartWidth = elements.sidebar.offsetWidth;
+    elements.sidebarResizeHandle.classList.add('dragging');
+    document.body.style.cursor = 'ew-resize';
+    document.body.style.userSelect = 'none';
+    e.preventDefault();
+  });
+
+  document.addEventListener('mousemove', (e) => {
+    if (!isResizingSidebar) return;
+
+    const deltaX = e.clientX - sidebarStartX;
+    const newWidth = Math.max(200, Math.min(window.innerWidth * 0.5, sidebarStartWidth + deltaX));
+    elements.sidebar.style.width = `${newWidth}px`;
+
+    // Resize terminal to fit new width if visible
+    if (fitAddon && state.terminalVisible) {
+      fitAddon.fit();
+      const dims = fitAddon.proposeDimensions();
+      if (dims) {
+        window.api.terminalResize(dims.cols, dims.rows);
+      }
+    }
+  });
+
+  document.addEventListener('mouseup', () => {
+    if (isResizingSidebar) {
+      isResizingSidebar = false;
+      elements.sidebarResizeHandle.classList.remove('dragging');
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+  });
+
   // Search
   elements.btnSearch.addEventListener('click', performSearch);
   elements.btnPrevResult.addEventListener('click', () => {

src/renderer/styles.css

@@ -234,6 +234,24 @@ body {
   overflow: hidden;
 }
 
+.sidebar-resize-handle {
+  width: 6px;
+  background: var(--bg-secondary);
+  cursor: ew-resize;
+  flex-shrink: 0;
+  border-right: 1px solid var(--border-color);
+  transition: background 0.15s;
+}
+
+.sidebar-resize-handle:hover,
+.sidebar-resize-handle.dragging {
+  background: var(--accent-color);
+}
+
+.sidebar.collapsed + .sidebar-resize-handle {
+  display: none;
+}
+
 .sidebar-section {
   border-bottom: 1px solid var(--border-color);
 }
@@ -1792,19 +1810,37 @@ kbd {
 /* Terminal Section in Sidebar */
 .terminal-section-content {
   height: 250px;
-  min-height: 150px;
+  min-height: 100px;
+  max-height: 80vh;
   background: var(--bg-primary);
   border-top: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
 }
 
 .terminal-section-content.hidden {
   display: none;
 }
 
+.terminal-resize-handle {
+  height: 6px;
+  background: var(--bg-secondary);
+  cursor: ns-resize;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-color);
+  transition: background 0.15s;
+}
+
+.terminal-resize-handle:hover,
+.terminal-resize-handle.dragging {
+  background: var(--accent-color);
+}
+
 .terminal-container {
-  height: 100%;
+  flex: 1;
   padding: 4px;
   overflow: hidden;
+  min-height: 0;
 }
 
 .terminal-container .xterm {