Refactor to use generic flag for dragging and hide settings bar when dragging

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

@@ -21,6 +21,7 @@
     // Update state
     dragTarget = e.target.dataset.componentId
     builderStore.actions.selectComponent(dragTarget)
+    builderStore.actions.setDragging(true)
 
     // Highlight being dragged by setting opacity
     const child = getDOMNodeForComponent(e.target)
@@ -34,15 +35,13 @@
     // Reset state and styles
     dropTarget = null
     dropInfo = null
+    builderStore.actions.setDragging(false)
 
     // Reset opacity style
     const child = getDOMNodeForComponent(e.target)
     if (child) {
       child.style.opacity = ""
     }
-
-    // Re-enable the hover indicator
-    builderStore.actions.showHoverIndicator(true)
   }
 
   // Callback when on top of a component
@@ -96,11 +95,11 @@
       element.dataset.droppable &&
       element.dataset.id !== dragTarget
     ) {
-      // Disable hover selection again to ensure it's always disabled.
+      // Ensure the dragging flag is always set.
       // 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) {
+      if (!get(builderStore).isDragging) {
-        builderStore.actions.showHoverIndicator(false)
+        builderStore.actions.setDragging(true)
       }
 
       // Store target ID

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

@@ -30,7 +30,7 @@
 </script>
 
 <IndicatorSet
-  componentId={$builderStore.showHoverIndicator ? componentId : null}
+  componentId={$builderStore.isDragging ? null : componentId}
   color="var(--spectrum-global-color-static-blue-200)"
   transition
   {zIndex}

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

@@ -16,7 +16,7 @@
   let measured = false
 
   $: definition = $builderStore.selectedComponentDefinition
-  $: showBar = definition?.showSettingsBar
+  $: showBar = definition?.showSettingsBar && !$builderStore.isDragging
   $: settings = definition?.settings?.filter(setting => setting.showInBar) ?? []
 
   const updatePosition = () => {

packages/client/src/stores/builder.js

@@ -23,7 +23,7 @@ const createBuilderStore = () => {
     theme: null,
     customTheme: null,
     previewDevice: "desktop",
-    showHoverIndicator: true,
+    isDragging: false,
   }
   const writableStore = writable(initialState)
   const derivedStore = derived(writableStore, $state => {
@@ -77,16 +77,15 @@ const createBuilderStore = () => {
         mode,
       })
     },
-    showHoverIndicator: show => {
+    setDragging: dragging => {
       writableStore.update(state => {
-        state.showHoverIndicator = show
+        state.isDragging = dragging
         return state
       })
     },
   }
   return {
     ...writableStore,
-    set: state => writableStore.set({ ...initialState, ...state }),
     subscribe: derivedStore.subscribe,
     actions,
   }