Add resizable terminal panels

- Implement drag-based resizing for 2-terminal and 3-terminal layouts
- Add drag handles between panels with visual feedback
- Maintain minimum and maximum size constraints
- Fix TypeScript errors and boolean arithmetic issues

Author: SFARPak

src/components/preview_panel/Console.tsx

@@ -1,15 +1,94 @@
 import { appOutputAtom, frontendTerminalOutputAtom, backendTerminalOutputAtom, selectedAppIdAtom } from "@/atoms/appAtoms";
 import { useAtomValue } from "jotai";
 import { useLoadApp } from "@/hooks/useLoadApp";
+import { useState, useRef, useCallback, useEffect } from "react";
+import * as React from "react";
 
-// Console component with side-by-side terminal support
+// Console component with side-by-side terminal support and resizable panels
 export const Console = () => {
   const appOutput = useAtomValue(appOutputAtom);
   const frontendTerminalOutput = useAtomValue(frontendTerminalOutputAtom);
   const backendTerminalOutput = useAtomValue(backendTerminalOutputAtom);
   const selectedAppId = useAtomValue(selectedAppIdAtom);
   const { app } = useLoadApp(selectedAppId);
 
+  // State for panel sizes (percentages)
+  const [panelSizes, setPanelSizes] = useState({
+    left: 50,
+    right: 50,
+    left2: 33.33,
+    middle: 33.33,
+    right2: 33.34,
+  });
+
+  // Refs for drag handles
+  const dragHandleRef = useRef<HTMLDivElement>(null);
+  const dragHandle2Ref = useRef<HTMLDivElement>(null);
+  const dragHandle3Ref = useRef<HTMLDivElement>(null);
+
+  // Drag state
+  const [isDragging, setIsDragging] = useState<string | null>(null);
+  const [startX, setStartX] = useState(0);
+  const [startSizes, setStartSizes] = useState(panelSizes);
+
+  const handleMouseDown = useCallback((handleId: string, event: React.MouseEvent) => {
+    setIsDragging(handleId);
+    setStartX(event.clientX);
+    setStartSizes({ ...panelSizes });
+    event.preventDefault();
+  }, [panelSizes]);
+
+  const handleMouseMove = useCallback((event: MouseEvent) => {
+    if (!isDragging) return;
+
+    const container = document.querySelector('[data-terminal-container]');
+    if (!container) return;
+
+    const rect = container.getBoundingClientRect();
+    const deltaX = event.clientX - startX;
+    const containerWidth = rect.width;
+
+    if (isDragging === 'left-right') {
+      // Two panel resize
+      const deltaPercent = (deltaX / containerWidth) * 100;
+      const newLeft = Math.max(20, Math.min(80, startSizes.left + deltaPercent));
+      const newRight = 100 - newLeft;
+      setPanelSizes(prev => ({ ...prev, left: newLeft, right: newRight }));
+    } else if (isDragging === 'left-middle') {
+      // Three panel resize (left-middle)
+      const deltaPercent = (deltaX / containerWidth) * 100;
+      const newLeft2 = Math.max(15, Math.min(50, startSizes.left2 + deltaPercent));
+      const totalMiddleRight = 100 - newLeft2;
+      const newMiddle = totalMiddleRight * (startSizes.middle / (startSizes.middle + startSizes.right2));
+      const newRight2 = totalMiddleRight - newMiddle;
+      setPanelSizes(prev => ({ ...prev, left2: newLeft2, middle: newMiddle, right2: newRight2 }));
+    } else if (isDragging === 'middle-right') {
+      // Three panel resize (middle-right)
+      const deltaPercent = (deltaX / containerWidth) * 100;
+      const newRight2 = Math.max(15, Math.min(50, startSizes.right2 - deltaPercent));
+      const totalLeftMiddle = 100 - newRight2;
+      const newMiddle = totalLeftMiddle * (startSizes.middle / (startSizes.left2 + startSizes.middle));
+      const newLeft2 = totalLeftMiddle - newMiddle;
+      setPanelSizes(prev => ({ ...prev, left2: newLeft2, middle: newMiddle, right2: newRight2 }));
+    }
+  }, [isDragging, startX, startSizes]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(null);
+  }, []);
+
+  // Add global mouse event listeners
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
   // Determine which terminals to show
   const hasFrontendOutput = frontendTerminalOutput.length > 0;
   const hasBackendOutput = backendTerminalOutput.length > 0;
@@ -24,7 +103,7 @@ export const Console = () => {
   const hasBackend = hasBackendOutput || hasBackendFolder;
 
   // Show all terminals if any terminal has content (to ensure Frontend is visible when Backend/System have content)
-  const totalTerminals = hasFrontend + hasBackend + hasMain;
+  const totalTerminals = (hasFrontend ? 1 : 0) + (hasBackend ? 1 : 0) + (hasMain ? 1 : 0);
   const showAllTerminals = totalTerminals > 0;
 
   // Count active terminals
@@ -57,6 +136,22 @@ export const Console = () => {
     );
   };
 
+  // Drag handle component
+  const DragHandle = ({ onMouseDown, className = "" }: { onMouseDown: (e: React.MouseEvent) => void; className?: string }) => (
+    <div
+      className={`w-1 bg-border hover:bg-accent cursor-col-resize active:bg-primary transition-colors ${className}`}
+      onMouseDown={onMouseDown}
+      style={{ userSelect: 'none' }}
+    />
+  );
+
+  // Resizable container wrapper
+  const ResizableContainer = ({ children, className = "" }: { children: React.ReactNode; className?: string }) => (
+    <div data-terminal-container className={`flex h-full ${className}`}>
+      {children}
+    </div>
+  );
+
   // Single terminal layout
   if (terminalCount === 1) {
     if (hasFrontend) {
@@ -73,58 +168,63 @@ export const Console = () => {
     if (hasFrontend && hasBackend) {
       // Frontend and Backend side by side
       return (
-        <div className="flex h-full">
-          <div className="flex-1 border-r border-border">
+        <ResizableContainer>
+          <div className="h-full" style={{ width: `${panelSizes.left}%` }}>
             <TerminalPanel title="Frontend" outputs={frontendTerminalOutput} color="green" />
           </div>
-          <div className="flex-1">
+          <DragHandle onMouseDown={(e) => handleMouseDown('left-right', e)} />
+          <div className="h-full" style={{ width: `${panelSizes.right}%` }}>
             <TerminalPanel title="Backend" outputs={backendTerminalOutput} color="orange" />
           </div>
-        </div>
+        </ResizableContainer>
       );
     }
     if (hasMain && hasFrontend) {
       // System and Frontend side by side
       return (
-        <div className="flex h-full">
-          <div className="flex-1 border-r border-border">
+        <ResizableContainer>
+          <div className="h-full" style={{ width: `${panelSizes.left}%` }}>
             <TerminalPanel title="System" outputs={appOutput} color="blue" />
           </div>
-          <div className="flex-1">
+          <DragHandle onMouseDown={(e) => handleMouseDown('left-right', e)} />
+          <div className="h-full" style={{ width: `${panelSizes.right}%` }}>
             <TerminalPanel title="Frontend" outputs={frontendTerminalOutput} color="green" />
           </div>
-        </div>
+        </ResizableContainer>
       );
     }
     if (hasMain && hasBackend) {
       // System and Backend side by side
       return (
-        <div className="flex h-full">
-          <div className="flex-1 border-r border-border">
+        <ResizableContainer>
+          <div className="h-full" style={{ width: `${panelSizes.left}%` }}>
             <TerminalPanel title="System" outputs={appOutput} color="blue" />
           </div>
-          <div className="flex-1">
+          <DragHandle onMouseDown={(e) => handleMouseDown('left-right', e)} />
+          <div className="h-full" style={{ width: `${panelSizes.right}%` }}>
             <TerminalPanel title="Backend" outputs={backendTerminalOutput} color="orange" />
           </div>
-        </div>
+        </ResizableContainer>
       );
     }
   }
 
-  // Three terminals layout - show in a 3-column layout
+  // Three terminals layout - show in a 3-column layout with resizable panels
   if (terminalCount === 3) {
     return (
-      <div className="flex h-full">
-        <div className="flex-1 border-r border-border">
+      <ResizableContainer>
+        <div className="h-full" style={{ width: `${panelSizes.left2}%` }}>
           <TerminalPanel title="System" outputs={appOutput} color="blue" />
         </div>
-        <div className="flex-1 border-r border-border">
+        <DragHandle onMouseDown={(e) => handleMouseDown('left-middle', e)} />
+        <div className="h-full" style={{ width: `${panelSizes.middle}%` }}>
           <TerminalPanel title="Frontend" outputs={frontendTerminalOutput} color="green" />
         </div>
-        <div className="flex-1">
+        <DragHandle onMouseDown={(e) => handleMouseDown('middle-right', e)} />
+        <div className="h-full" style={{ width: `${panelSizes.right2}%` }}>
           <TerminalPanel title="Backend" outputs={backendTerminalOutput} color="orange" />
         </div>
-      </div>
+      </ResizableContainer>
     );
   }