Refactor MarketPlace and Scene components; enhance drag-and-drop functionality in DraggableWidget and Panel; add WidgetPlaceHolder component; implement global echo logging interface.

app/src/modules/visualization/widgets/panel/Panel.tsx

@@ -69,6 +69,9 @@ const Panel: React.FC<PanelProps> = ({
     height: 0,
   });
 
+  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
+  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
+
   // Track canvas dimensions
   useEffect(() => {
     const canvas = document.getElementById("real-time-vis-canvas");
@@ -302,13 +305,14 @@ const Panel: React.FC<PanelProps> = ({
         >
           <div
             className={`panel-content
-  ${waitingPanels === side ? `${side}-closing` : ""}
-  ${
-    !hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
-      ? `${side}-opening`
-      : ""
-  }
-  ${isPlaying ? "fullScreen" : ""}`}
+            ${waitingPanels === side ? `${side}-closing` : ""}
+            ${
+              !hiddenPanels[selectedZone.zoneId]?.includes(side) &&
+              waitingPanels !== side
+                ? `${side}-opening`
+                : ""
+            }
+          ${isPlaying ? "fullScreen" : ""}`}
             style={{
               pointerEvents:
                 selectedZone.lockedPanels.includes(side) ||
@@ -319,7 +323,7 @@ const Panel: React.FC<PanelProps> = ({
             }}
           >
             {selectedZone.widgets
-              .filter((w) => w.panel === side)
+              .filter((w) => w.panel === "top")
               .map((widget, index) => (
                 <DraggableWidget
                   hiddenPanels={hiddenPanels}
@@ -329,10 +333,15 @@ const Panel: React.FC<PanelProps> = ({
                   onReorder={(fromIndex, toIndex) =>
                     handleReorder(fromIndex, toIndex, side)
                   }
+                  side={side}
                   openKebabId={openKebabId}
                   setOpenKebabId={setOpenKebabId}
                   selectedZone={selectedZone}
                   setSelectedZone={setSelectedZone}
+                  draggingIndex={draggingIndex}
+                  setDraggingIndex={setDraggingIndex}
+                  hoverIndex={hoverIndex}
+                  setHoverIndex={setHoverIndex}
                 />
               ))}
           </div>