Add support for Only show one handle at a time.

frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx

@@ -13,6 +13,7 @@ export const ConfigHandle = ({
   customClassName = '',
   showHandle,
   componentType,
+  visibility,
 }) => {
   const shouldFreeze = useStore((state) => state.getShouldFreeze());
   const componentName = useStore((state) => state.getComponentDefinition(id)?.component?.name || '', shallow);
@@ -28,16 +29,28 @@ export const ConfigHandle = ({
   );
 
   const setComponentToInspect = useStore((state) => state.setComponentToInspect);
+
+  const _showHandle = useStore((state) => {
+    const isWidgetHovered = state.getHoveredComponentForGrid() === id;
+    const anyComponentHovered = state.getHoveredComponentForGrid() !== '';
+    // If one component is hovered and one is selected, show the handle for the hovered component
+    return (
+      isWidgetHovered ||
+      (showHandle &&
+        (!isMultipleComponentsSelected || (componentType === 'Modal' && isModalOpen)) &&
+        !anyComponentHovered)
+    );
+  }, shallow);
+
+  let height = visibility === false ? 10 : widgetHeight;
+
   return (
     <div
       className={`config-handle ${customClassName}`}
       widget-id={id}
       style={{
-        top: position === 'top' ? '-20px' : widgetTop + widgetHeight - (widgetTop < 10 ? 15 : 10),
-        visibility:
-          showHandle && (!isMultipleComponentsSelected || (componentType === 'Modal' && isModalOpen))
-            ? 'visible'
-            : 'hidden',
+        top: position === 'top' ? '-20px' : widgetTop + height - (widgetTop < 10 ? 15 : 10),
+        visibility: _showHandle ? 'visible' : 'hidden',
         left: '-1px',
       }}
       onClick={(e) => {

frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss

@@ -8,10 +8,6 @@
     transition: all .15s ease-in-out;
 }
 
-.config-handle-visible {
-  visibility: visible !important;
-}
-
 .multiple-components-config-handle {
   position: absolute;
   left: 54px;
@@ -65,9 +61,3 @@
     }
   }
 }
-
-.main-editor-canvas .widget-target:hover > .config-handle {
-  visibility: visible !important;
-}
-
-

frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx

@@ -89,6 +89,7 @@ const WidgetWrapper = memo(
               widgetHeight={layoutData.height}
               showHandle={isWidgetActive}
               componentType={componentType}
+              visibility={visibility}
             />
           )}
           <RenderWidget