Merge pull request #19 from tessel-la/feat-resizable_panels

feat: Add vertically resizable panels with draggable handle

Implemented a vertically split layout system allowing users to dynamically resize 
the camera/3D visualization area and control pad area by dragging a handle between them.

Key Features:
- Draggable handle between top (camera/3D) and bottom (control pad) sections
- Smooth, real-time resizing with visual feedback on hover/drag
- Configurable minimum heights (20% each section) to prevent collapse
- Persistent panel sizes saved to localStorage
- Default 60/40 split ratio (camera:pad)

Mobile Optimizations:
- Full touch event support (touchstart, touchmove, touchend)
- Larger touch targets on mobile (20px vs 16px desktop)
- Fixed viewport height using 100dvh for proper mobile browser handling
- Prevented page scrolling and layout overflow issues
- Fixed bottom panel cutoff on mobile devices

Technical Implementation:
- Custom React hook `useResizablePanels` for reusable resize logic
- Fixed positioning to prevent unwanted scrolling
- Proper overflow handling throughout layout hierarchy
- Percentage-based height calculations with resize handle offset

Both sections always fill 100% of available vertical space, providing an 
intuitive split-pane experience similar to docked windows.

Author: ricfrr

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.srr6p8sni98"
+    "revision": "0.6t0ml03e15"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/App.css

@@ -1,12 +1,21 @@
 .App {
   /* text-align: center; */ /* Remove if using flex for centering */
-  min-height: 100vh; /* Ensure App fills viewport height */
+  height: 100vh; /* Fixed height for viewport */
+  height: 100dvh; /* Use dynamic viewport height for mobile browsers */
   display: flex;
   flex-direction: column; /* Stack children vertically */
+  overflow: hidden; /* Prevent scrolling at App level */
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .App main {
-  flex-grow: 1; /* Allow main content to take up space */
+  flex: 1; /* Allow main content to take up space */
+  overflow: hidden; /* Prevent scrolling in main */
+  position: relative;
   /* display: flex; /* REMOVED */
   /* justify-content: center; /* REMOVED */
   /* align-items: stretch; /* REMOVED */

src/components/ControlPanelTabs.css

@@ -5,8 +5,9 @@
     flex-shrink: 0; /* Prevent shrinking */
     padding-bottom: 5px; /* Space between tabs and panel content */
     border-bottom: 1px solid var(--border-color);
-    margin-bottom: 10px;
+    margin-bottom: 8px; /* Reduced from 10px */
     overflow-x: auto; /* Allow horizontal scrolling if many tabs */
+    overflow-y: hidden; /* Prevent vertical overflow */
     position: relative; /* Establish stacking context */
     z-index: 1;         /* Ensure it's above default content */
 

src/components/MainControlView.css

@@ -2,10 +2,15 @@
     display: flex;
     flex-direction: column;
     height: 100vh; /* Ensure it tries to fill the viewport height */
+    height: 100dvh; /* Use dynamic viewport height for mobile browsers */
     /* Remove padding-top, handled by content area now */
     padding: 0; 
     gap: 0; /* Remove gap, handled by content area padding */
-    position: relative; 
+    position: fixed; /* Fixed positioning to prevent scrolling */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     box-sizing: border-box; 
     overflow: hidden; /* Prevent scrolling on the main view */
 }
@@ -33,14 +38,17 @@
 /* Main Content Area Styles */
 .main-content-area {
     padding: 10px; /* Reduced from 15px */
-    padding-top: calc(40px + 10px); /* Reduced from 15px */
+    padding-top: calc(40px + 10px); /* Top bar height + padding */
+    padding-bottom: 10px;
     display: flex;
     flex-direction: column;
     align-items: stretch; 
-    gap: 10px; /* Reduced from 15px */
     overflow: hidden;
-    height: calc(100vh - 10px); 
+    height: 100vh;
+    height: 100dvh; /* Use dynamic viewport height */
+    width: 100%;
     box-sizing: border-box;
+    position: relative;
 }
 
 /* Remove styles for the old .view-header */
@@ -148,36 +156,90 @@
 
 /* Adjust containers to fit within the new main-content-area */
 .view-panel-container {
-    /* flex: 3 1 auto; */
-    flex: 1 1 auto; /* Let it grow and shrink to fill remaining space */
     display: flex;
     flex-direction: column;
     min-height: 0; 
     width: 100%; 
     box-sizing: border-box;
     overflow: hidden; /* Hide overflow for the view panel */
+    flex-shrink: 0; /* Prevent flex shrinking */
+    /* Height set via inline style calculated by hook */
 }
 
 .control-panel-container {
-    /* flex: 1 1 auto; /* Removed flex sizing */
-    height: 35vh; /* Assign fixed viewport height (adjust as needed) */
-    flex-shrink: 0; /* Prevent shrinking below this height */
     display: flex;
     flex-direction: column;
-    /* min-height: 0; /* Not needed with fixed height */
+    min-height: 0;
     width: 100%; 
     box-sizing: border-box;
-    margin-bottom: 10px; 
+    flex-shrink: 0; /* Prevent flex shrinking */
+    /* Height set via inline style calculated by hook */
+    padding-bottom: 0; /* Remove any extra padding */
+}
+
+/* Resize Handle Styles */
+.resize-handle {
+    height: 16px; /* Increased from 10px for better touch target */
+    min-height: 16px;
+    max-height: 16px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: row-resize;
+    position: relative;
+    z-index: 10;
+    user-select: none;
+    flex-shrink: 0;
+    touch-action: none; /* Prevent default touch behaviors */
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+    margin: 0; /* Remove any margins */
+    padding: 0; /* Remove padding that adds to height */
+}
+
+.resize-handle:hover .resize-handle-bar,
+.resize-handle.dragging .resize-handle-bar {
+    background-color: var(--primary-color, #4285f4);
+    height: 4px;
+}
+
+.resize-handle-bar {
+    width: 60px;
+    height: 3px;
+    background-color: var(--border-color, #ccc);
+    border-radius: 2px;
+    transition: all 0.2s ease;
+}
+
+.resize-handle.dragging {
+    background-color: rgba(66, 133, 244, 0.1);
+}
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+    .resize-handle {
+        height: 20px; /* Even larger touch target on mobile */
+        min-height: 20px;
+        max-height: 20px;
+    }
+    
+    .resize-handle-bar {
+        width: 80px; /* Wider bar on mobile */
+        height: 4px; /* Thicker bar on mobile */
+    }
 }
 
 /* Ensure panels fill their containers */
 .view-panel,
 .control-panel {
-    flex-grow: 1; 
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column; 
     overflow-y: auto;
+    overflow-x: hidden;
     width: 100%;
+    min-height: 0; /* Important for flex children with overflow */
     box-sizing: border-box;
 }
 
@@ -192,6 +254,7 @@
 
 .control-panel {
     padding: 2px; /* Keep padding for control panel */
+    margin: 0; /* Remove any margin */
 }
 
 /* Center placeholder message */
@@ -243,7 +306,7 @@ body.no-scroll {
     .main-content-area {
         padding: 5px; /* Reduced from 10px */
         padding-top: calc(40px + 5px); /* Reduced from 10px */
-        gap: 5px; /* Reduced from 10px */
+        padding-bottom: 5px; /* Ensure bottom padding is also reduced */
     }
 
     /* Adjust top bar height/padding on mobile if needed */
@@ -262,6 +325,11 @@ body.no-scroll {
         /* Adjust icon sizes for mobile if needed */
         /* width: 1.1em; height: 1.1em; */
     }
+    
+    /* Adjust control panel to ensure it fits */
+    .control-panel {
+        padding: 0px; /* Reduce padding on mobile */
+    }
 }
 
 /* View Panel Animation Styles */

src/components/MainControlView.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { ConnectionParams } from '../App'; // Import types
 import { useRos } from '../hooks/useRos'; // Import the hook
+import { useResizablePanels } from '../hooks/useResizablePanels'; // Import the resizable panels hook
 import './MainControlView.css';
 // Import placeholder components (we'll create these next)
 import CameraView from './CameraView'; // Import the new CameraView
@@ -116,6 +117,14 @@ const MainControlView: React.FC<MainControlViewProps> = ({ connectionParams, onD
   const viewPanelRef = useRef<HTMLDivElement>(null);
   const [isTransitioning, setIsTransitioning] = useState(false);
 
+  // Resizable panels hook
+  const { topHeight, bottomHeight, handleMouseDown, handleTouchStart, containerRef, isDragging } = useResizablePanels({
+    initialTopHeight: 60,
+    minTopHeight: 20,
+    minBottomHeight: 20,
+    storageKey: 'robo-boy-panel-split',
+  });
+
   // Fetch topics when connected
   useEffect(() => {
     if (isConnected && ros) {
@@ -386,8 +395,8 @@ const MainControlView: React.FC<MainControlViewProps> = ({ connectionParams, onD
       </div>
 
       {/* Main Content Area - ensure it starts below the top bar */}
-      <div className="main-content-area">
-        <div className="view-panel-container">
+      <div className="main-content-area" ref={containerRef}>
+        <div className="view-panel-container" style={{ height: `calc(${topHeight}% - 8px)` }}>
           <div className="view-panel card" ref={viewPanelRef}>
             {viewMode === 'camera' ? (
               isConnected && ros && selectedCameraTopic ? (
@@ -412,7 +421,16 @@ const MainControlView: React.FC<MainControlViewProps> = ({ connectionParams, onD
           </div>
         </div>
 
-        <div className="control-panel-container">
+        {/* Resizable Handle */}
+        <div 
+          className={`resize-handle ${isDragging ? 'dragging' : ''}`}
+          onMouseDown={handleMouseDown}
+          onTouchStart={handleTouchStart}
+        >
+          <div className="resize-handle-bar" />
+        </div>
+
+        <div className="control-panel-container" style={{ height: `calc(${bottomHeight}% - 8px)` }}>
            <ControlPanelTabs 
                panels={activePanels}
                selectedPanelId={selectedPanelId}

src/hooks/useResizablePanels.ts

@@ -0,0 +1,125 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+interface UseResizablePanelsOptions {
+  initialTopHeight?: number; // in percentage (0-100)
+  minTopHeight?: number; // in percentage
+  minBottomHeight?: number; // in percentage
+  storageKey?: string; // localStorage key to persist sizes
+}
+
+export const useResizablePanels = ({
+  initialTopHeight = 60,
+  minTopHeight = 20,
+  minBottomHeight = 20,
+  storageKey,
+}: UseResizablePanelsOptions = {}) => {
+  // Load initial height from localStorage if storageKey is provided
+  const [topHeight, setTopHeight] = useState<number>(() => {
+    if (storageKey) {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) {
+        const parsed = parseFloat(stored);
+        if (!isNaN(parsed) && parsed >= minTopHeight && parsed <= (100 - minBottomHeight)) {
+          return parsed;
+        }
+      }
+    }
+    return initialTopHeight;
+  });
+
+  const isDragging = useRef(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Save to localStorage when topHeight changes
+  useEffect(() => {
+    if (storageKey) {
+      localStorage.setItem(storageKey, topHeight.toString());
+    }
+  }, [topHeight, storageKey]);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isDragging.current = true;
+    document.body.style.cursor = 'row-resize';
+    document.body.style.userSelect = 'none';
+  }, []);
+
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    e.preventDefault();
+    isDragging.current = true;
+    document.body.style.userSelect = 'none';
+  }, []);
+
+  const handleMove = useCallback(
+    (clientY: number) => {
+      if (!isDragging.current || !containerRef.current) return;
+
+      const container = containerRef.current;
+      const rect = container.getBoundingClientRect();
+      const offsetY = clientY - rect.top;
+      const newTopHeight = (offsetY / rect.height) * 100;
+
+      // Apply constraints
+      const constrainedHeight = Math.max(
+        minTopHeight,
+        Math.min(100 - minBottomHeight, newTopHeight)
+      );
+
+      setTopHeight(constrainedHeight);
+    },
+    [minTopHeight, minBottomHeight]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      handleMove(e.clientY);
+    },
+    [handleMove]
+  );
+
+  const handleTouchMove = useCallback(
+    (e: TouchEvent) => {
+      if (e.touches.length > 0) {
+        handleMove(e.touches[0].clientY);
+      }
+    },
+    [handleMove]
+  );
+
+  const handleEnd = useCallback(() => {
+    if (isDragging.current) {
+      isDragging.current = false;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+  }, []);
+
+  // Add event listeners
+  useEffect(() => {
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleEnd);
+    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+    document.addEventListener('touchend', handleEnd);
+    document.addEventListener('touchcancel', handleEnd);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleEnd);
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleEnd);
+      document.removeEventListener('touchcancel', handleEnd);
+    };
+  }, [handleMouseMove, handleTouchMove, handleEnd]);
+
+  const bottomHeight = 100 - topHeight;
+
+  return {
+    topHeight,
+    bottomHeight,
+    handleMouseDown,
+    handleTouchStart,
+    containerRef,
+    isDragging: isDragging.current,
+  };
+};
+