fix: issues from component dnd PR

libs/frontend/abstract/application/src/renderer/runtime-component/runtime-component.model.interface.ts

@@ -1,11 +1,10 @@
 import type { IComponentModel } from '@codelab/frontend/abstract/domain'
-import type { Maybe, Nullable } from '@codelab/shared/abstract/types'
+import type { Maybe } from '@codelab/shared/abstract/types'
 import type { Ref } from 'mobx-keystone'
 
 import type { IBaseRuntimeModel } from '../runtime.model.interface'
 import type { IRuntimeElementModel } from '../runtime-element'
 import type { IRuntimeComponentPropModel } from '../runtime-prop'
-import { ReactElement } from 'react'
 
 /**
  * Represents runtime model IComponentModel
@@ -25,9 +24,9 @@ export interface IRuntimeComponentModel extends IBaseRuntimeModel {
    * Exposed for external use by other models and to preserve structure
    */
   component: Ref<IComponentModel>
+  elements: Array<IRuntimeElementModel>
   isChildMapperComponentInstance: boolean
   isTypedProp?: boolean
-  elements: Array<IRuntimeElementModel>
   /**
    * When clicking an element from component while editing a page or another component we should select element
    * from main tree that is being edited

libs/frontend/abstract/application/src/renderer/runtime-page/runtime-page.model.interface.ts

@@ -1,6 +1,6 @@
 import type { IPageModel } from '@codelab/frontend/abstract/domain'
-import type { Ref } from 'mobx-keystone'
 import type { Maybe } from '@codelab/shared/abstract/types'
+import type { Ref } from 'mobx-keystone'
 
 import type { IBaseRuntimeModel } from '../runtime.model.interface'
 import type { IRuntimeElementModel } from '../runtime-element'

libs/frontend/application/builder/src/use-cases/base-builder/DeleteButton.tsx

@@ -1,31 +1,27 @@
 import type { IElementModel } from '@codelab/frontend/abstract/domain'
 
 import DeleteOutlined from '@ant-design/icons/DeleteOutlined'
-import { useDeleteElementModal } from '@codelab/frontend-application-element/use-cases/delete-element'
+import { DeleteElementPopconfirm } from '@codelab/frontend-application-element/use-cases/delete-element'
 
 export const DeleteButton = ({ element }: { element: IElementModel }) => {
-  const deleteElementModal = useDeleteElementModal()
-
   return (
-    <div
-      className={`
-        flex size-7 cursor-pointer
-        items-center justify-center align-middle
-      `}
-      onClick={(event) => {
-        event.stopPropagation()
-        deleteElementModal.open(element)
-      }}
-    >
+    <DeleteElementPopconfirm element={element} placement="leftBottom">
       <div
         className={`
-          flex size-5 items-center
-          justify-center rounded-full align-middle
+          flex size-7 cursor-pointer
+          items-center justify-center align-middle
         `}
-        style={{ backgroundColor: '#375583', color: 'red' }}
       >
-        <DeleteOutlined />
+        <div
+          className={`
+            flex size-5 items-center
+            justify-center rounded-full align-middle
+          `}
+          style={{ backgroundColor: '#375583', color: 'red' }}
+        >
+          <DeleteOutlined />
+        </div>
       </div>
-    </div>
+    </DeleteElementPopconfirm>
   )
 }

libs/frontend/application/renderer/src/services/runtime-element.service.ts

@@ -87,18 +87,18 @@ export class RuntimeElementService
     return runtimeElement
   }
 
-  @modelAction
-  remove(runtimeElement: IRuntimeElementModel) {
-    return this.elements.delete(runtimeElement.compositeKey)
-  }
-
   @modelAction
   getExpandedCompositeKeys() {
     return this.elementsList
       .filter((runtimeElement) => runtimeElement.element.current.expanded)
       .map((runtimeElement) => runtimeElement.compositeKey)
   }
 
+  @modelAction
+  remove(runtimeElement: IRuntimeElementModel) {
+    return this.elements.delete(runtimeElement.compositeKey)
+  }
+
   maybeRuntimeElement(compositeKey: string) {
     return this.elements.get(compositeKey)
   }