Improved UI

web/src/EditMode.tsx

@@ -7,6 +7,7 @@ import EditCanvas, { genWidgetId, DEFAULT_SIZES } from './EditCanvas';
 import PropertiesPane from './PropertiesPane';
 import ContextualHelp from './ContextualHelp';
 import HelpModal from './HelpModal';
+import ZoomControl from './ZoomControl';
 
 interface Props {
   initial: Interface | null;
@@ -83,6 +84,27 @@ export default function EditMode({ initial, onDone }: Props) {
   const [showInsertMenu, setShowInsertMenu] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
   const [helpSection, setHelpSection] = useState('edit');
+  const [leftW, setLeftW] = useState(220);
+  const [rightW, setRightW] = useState(260);
+
+  function startResize(side: 'left' | 'right') {
+    return (e: MouseEvent) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startW = side === 'left' ? leftW : rightW;
+      function onMove(mv: MouseEvent) {
+        const dx = mv.clientX - startX;
+        if (side === 'left') setLeftW(Math.max(140, startW + dx));
+        else setRightW(Math.max(180, startW - dx));
+      }
+      function onUp() {
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onUp);
+      }
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+    };
+  }
   function openHelp(section = 'edit') { setHelpSection(section); setShowHelp(true); }
 
   // Undo / redo
@@ -344,6 +366,7 @@ export default function EditMode({ initial, onDone }: Props) {
         </div>
 
         <div class="toolbar-right">
+          <ZoomControl />
           <ContextualHelp mode="edit" onOpenManual={openHelp} />
           <button class="icon-btn help-manual-btn" onClick={() => openHelp('edit')} title="Open user manual">📖</button>
           <button class="toolbar-btn" onClick={handleImport}>Import</button>
@@ -357,7 +380,8 @@ export default function EditMode({ initial, onDone }: Props) {
 
       {/* ── Three-panel body ── */}
       <div class="edit-body">
-        <SignalTree />
+        <SignalTree width={leftW} />
+        <div class="panel-resize-handle" onMouseDown={startResize('left')} />
         <EditCanvas
           iface={iface}
           selectedIds={selectedIds}
@@ -365,12 +389,14 @@ export default function EditMode({ initial, onDone }: Props) {
           onChange={handleWidgetsChange}
           snapGrid={snapGrid}
         />
+        <div class="panel-resize-handle" onMouseDown={startResize('right')} />
         <PropertiesPane
           selected={selectedWidget}
           multiCount={multiSelected ? selectedIds.length : 0}
           iface={iface}
           onChange={handleWidgetChange}
           onIfaceChange={handleIfaceChange}
+          width={rightW}
         />
       </div>