Ensure hover indicator is correctly hidden when using DND and improve DND labels

packages/client/src/components/preview/DNDHandler.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
+  import { get } from "svelte/store"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import Indicator from "./Indicator.svelte"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
   import { builderStore } from "stores"
 
@@ -21,7 +21,6 @@
     // Update state
     dragTarget = e.target.dataset.componentId
     builderStore.actions.selectComponent(dragTarget)
-    builderStore.actions.showHoverIndicator(false)
 
     // Highlight being dragged by setting opacity
     const child = getDOMNodeForComponent(e.target)
@@ -97,6 +96,13 @@
       element.dataset.droppable &&
       element.dataset.id !== dragTarget
     ) {
+      // Disable hover selection again to ensure it's always disabled.
+      // There's a bit of a race condition between the app reinitialisation
+      // after selecting the DND component and setting this the first time
+      if (get(builderStore).showHoverIndicator) {
+        builderStore.actions.showHoverIndicator(false)
+      }
+
       // Store target ID
       dropTarget = element.dataset.id
 

packages/client/src/components/preview/DNDPositionIndicator.svelte

@@ -36,8 +36,7 @@
       {zIndex}
       {color}
       {transition}
-      flip={mode === "below"}
+      line
-      rounded
     />
   {/if}
 {/key}

packages/client/src/components/preview/Indicator.svelte

@@ -9,9 +9,9 @@
   export let color
   export let zIndex
   export let transition = false
-  export let flip = false
+  export let line = false
 
-  $: flipped = flip || top < 20
+  $: flipped = top < 20
 </script>
 
 <div
@@ -22,10 +22,11 @@
   out:fade={{ duration: transition ? 130 : 0 }}
   class="indicator"
   class:flipped
+  class:line
   style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
 >
   {#if text}
-    <div class="text" class:flipped>
+    <div class="text" class:flipped class:line>
       {text}
     </div>
   {/if}
@@ -45,6 +46,9 @@
   .indicator.flipped {
     border-top-left-radius: 4px;
   }
+  .indicator.line {
+    border-radius: 4px !important;
+  }
   .text {
     background-color: var(--color);
     color: white;
@@ -70,4 +74,8 @@
     transform: translateY(0%);
     top: -2px;
   }
+  .text.line {
+    transform: translateY(-50%) !important;
+    border-radius: 4px !important;
+  }
 </style>