fixed outline effect windows

src/components/client-windows.tsx

@@ -45,6 +45,9 @@ export const FakeRelativeWindow = ({
     content: "animate-[fade-in-half_1s]"
   });
 
+  const offsetRef = useRef({ x: 0, y: 0 });
+  const [isDragging, setDragging] = useState(false);
+
   const popupRef = useRef<HTMLDivElement>(null);
   const pos = useRef({
     dragging: false,
@@ -72,10 +75,6 @@ export const FakeRelativeWindow = ({
     }
   }, []);
 
-  useEffect(() => {
-    if (popupRef.current) popupRef.current.style.transform = `translate(${currentWindow?.offset.x || 0}px, ${currentWindow?.offset.y || 0}px)`;
-  }, [currentWindow?.offset])
-
   useEffect(() => {
     if (!withAnim) return;
     const node = popupRef.current;
@@ -100,6 +99,18 @@ export const FakeRelativeWindow = ({
     return () => observer.disconnect();
   }, []);
 
+  useEffect(() => {
+    if (popupRef.current && currentWindow) {
+      const initPos = {
+        x: currentWindow.offset.x,
+        y: currentWindow.offset.y
+      }
+      offsetRef.current.x = initPos.x;
+      offsetRef.current.y = initPos.y;
+      popupRef.current.style.transform = `translate(${initPos.x}px, ${initPos.y}px)`;
+    }
+  }, [popupRef.current, currentWindow]);
+
   const toggleMinimize = () => windowManager.toggleMinimize(windowName);
   const handleClose = () => windowManager.close(windowName);
 
@@ -109,19 +120,26 @@ export const FakeRelativeWindow = ({
       pos.current.dragging = true;
       pos.current.mouseX = e.clientX;
       pos.current.mouseY = e.clientY;
-      pos.current.x = currentWindow.offset.x;
+      pos.current.x = offsetRef.current.x;
-      pos.current.y = currentWindow.offset.y;
+      pos.current.y = offsetRef.current.y;
       document.body.style.userSelect = "none";
+      setDragging(true);
     }
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("mouseup", onMouseUp);
   };
 
   const onMouseUp = () => {
+    windowManager.move(windowName, {
+      x: offsetRef.current.x,
+      y: offsetRef.current.y
+    });
+
     pos.current.dragging = false;
     document.body.style.userSelect = "";
     window.removeEventListener("mousemove", onMouseMove);
     window.removeEventListener("mouseup", onMouseUp);
+    setDragging(false);
   };
 
   const onMouseMove = (e: MouseEvent) => {
@@ -129,12 +147,10 @@ export const FakeRelativeWindow = ({
     if (pos.current.dragging && popupRef.current) {
       const dx = e.clientX - pos.current.mouseX;
       const dy = e.clientY - pos.current.mouseY;
-      const newX = pos.current.x + dx;
+      const x = pos.current.x + dx;
-      const newY = pos.current.y + dy;
+      const y = pos.current.y + dy;
-      windowManager.move(windowName, {
+      offsetRef.current = { x, y }
-        x: newX,
+      popupRef.current.style.transform = `translate(${x}px, ${y}px)`;
-        y: newY
-      });
     }
   };
 
@@ -142,28 +158,60 @@ export const FakeRelativeWindow = ({
 
   return (
     <div className={clsx("absolute hidden lg:block", className)}>
-      <div className={clsx("mx-auto md:border bg-background border-primary", withAnim && animation.window)} ref={popupRef}>
+      {/* Outline Window */}
+      {draggable && (
         <div
-          className="hidden md:flex bg-primary p-2 justify-between text-background windowbar"
+          className={clsx("absolute border-primary w-full z-10", isDragging && "md:border")}
-          onMouseDown={onMouseDown}
+          ref={popupRef}
         >
-          <div className="ms-1 pointer-events-none">
+          <div
-            {currentWindow ? currentWindow.name : "Error!"}
+            className={clsx("hidden md:flex p-2 gap-2 justify-end text-background windowbar", isDragging ? "opacity-0" : "opacity-100")}
-          </div>
+            onMouseDown={onMouseDown}
-          <div className="flex gap-2">
+          >
             <button
-              className="bg-primary border border-[#FFA826] border-outset p-1"
+              className={clsx("bg-primary border border-[#FFA826] border-outset p-1")}
               onClick={toggleMinimize}
             >
               <Icon icon="lucide:minus"/>
             </button>
             <button
-              className="bg-primary border border-[#FFA826] border-outset p-1"
+              className={clsx("bg-primary border border-[#FFA826] border-outset p-1")}
               onClick={handleClose}
             >
               <Icon icon="lucide:x"/>
             </button>
           </div>
+          <div className={clsx("m-1", currentWindow?.minimized && "h-0")}>
+            <div className={clsx("md:p-4 opacity-0")}>
+              {children}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Main window */}
+      <div
+        className={clsx("md:border bg-background border-primary", withAnim && animation.window)}
+        style={{
+          transform: `translate(${currentWindow.offset.x}px, ${currentWindow.offset.y}px)`
+        }}
+      >
+        <div className="hidden md:flex bg-primary p-2 justify-between text-background windowbar">
+          <div className="ms-1 pointer-events-none">
+            {currentWindow ? currentWindow.name : "Error!"}
+          </div>
+          <div className={clsx("flex gap-2", !isDragging ? "opacity-0" : "opacity-100")}>
+            <button
+              className="bg-primary border border-[#FFA826] border-outset p-1 pointer-events-none"
+            >
+              <Icon icon="lucide:minus"/>
+            </button>
+            <button
+              className="bg-primary border border-[#FFA826] border-outset p-1 pointer-events-none"
+            >
+              <Icon icon="lucide:x"/>
+            </button>
+          </div>
         </div>
         <div className={clsx("m-1 border border-primary", currentWindow?.minimized ? "h-0 overflow-y-clip" : "h-fit")}>
           <div className={clsx("md:p-4", withAnim && animation.content)}>