[UI] Fix custom opt string after draggable windows update (#50)

DraggableWindow currently attached onMouseDown to the root container
and conditionally checked for a .drag-title handle.
This means any click inside the window, including on text inputs,
bubbles through the handler and can interfere with typing
or focus, especially after the resize update.

Author: MrSidims

src/app/DraggableWindow.js

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useRef } from "react";
+import React, { useRef, useEffect } from "react";
 
 /**
  * Lightweight draggable/resizable wrapper used when the react-rnd package
@@ -25,7 +25,10 @@ export function DraggableWindow({
 
   const startDrag = (e) => {
     const handle = e.target.closest(".drag-title");
-    if (!handle) return;
+    if (!handle) {
+      e.stopPropagation();
+      return;
+    }
     onFocus && onFocus();
     const startX = e.clientX;
     const startY = e.clientY;
@@ -55,6 +58,13 @@ export function DraggableWindow({
     document.addEventListener("mouseup", onUp);
   };
 
+  useEffect(() => {
+    const title = ref.current?.querySelector(".drag-title");
+    if (!title) return;
+    title.addEventListener("mousedown", startDrag);
+    return () => title.removeEventListener("mousedown", startDrag);
+  }, [startDrag, children]);
+
   const startResize = (e, dir) => {
     e.stopPropagation();
     onFocus && onFocus();
@@ -139,7 +149,6 @@ export function DraggableWindow({
   return (
     <div
       ref={ref}
-      onMouseDown={startDrag}
       style={{
         position: "absolute",
         left: pos.x,

src/app/ExplorerContent.js

@@ -534,6 +534,12 @@ export default function ExplorerContent() {
   }
 
   function IRWindowBody({ irWin }) {
+    const [localCmd, setLocalCmd] = useState(customToolCmd[irWin.id] || "");
+
+    useEffect(() => {
+      setLocalCmd(customToolCmd[irWin.id] || "");
+    }, [customToolCmd, irWin.id]);
+
     return (
       <>
         <div
@@ -738,25 +744,27 @@ export default function ExplorerContent() {
                   />
                   <Input
                     placeholder="Call any tool in PATH + flags, e.g. `mlir-opt -convert-scf-to-cf` or `opt -O2 -S` and press `Enter`"
-                    value={customToolCmd[irWin.id] || ""}
-                    onChange={(e) =>
-                      updateActiveSource((s) => ({
-                        ...s,
-                        customToolCmd: {
-                          ...s.customToolCmd,
-                          [irWin.id]: e.target.value,
-                        },
-                      }))
-                    }
+                    value={localCmd}
+                    onChange={(e) => setLocalCmd(e.target.value)}
                     onPressEnter={() => {
-                      const flags = (customToolCmd[irWin.id] || "").trim();
+                      const flags = localCmd.trim();
                       if (!flags) return;
                       handleAddCustomTool(irWin.id, flags);
+                      setLocalCmd("");
                       updateActiveSource((s) => ({
                         ...s,
                         customToolCmd: { ...s.customToolCmd, [irWin.id]: "" },
                       }));
                     }}
+                    onBlur={() =>
+                      updateActiveSource((s) => ({
+                        ...s,
+                        customToolCmd: {
+                          ...s.customToolCmd,
+                          [irWin.id]: localCmd,
+                        },
+                      }))
+                    }
                     style={{
                       width: "100%",
                       marginBottom: "10px",