feat: hover over blueprint to delete - AB-939

.gitignore

@@ -25,4 +25,4 @@ playground/
 *.mp4
 .turbo
 styles.css
-.aider*
+.aider*

src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue

@@ -17,7 +17,15 @@
 		:disable-collapse="COMPONENT_TYPES_ROOT.has(component.type)"
 		:no-nested-space="COMPONENT_TYPES_ROOT.has(component.type)"
 		:collapsed="isOutsideActivePage"
+		:right-click-options="rightClickDropdownOptions"
+		:dropdown-options="
+			component?.type === 'blueprints_blueprint' &&
+			isDeleteAllowed(props.componentId)
+				? rightClickDropdownOptions
+				: undefined
+		"
 		@select="select"
+		@dropdown-select="handleDropdownSelect($event, key)"
 		@dragover="handleDragOver"
 		@dragstart="handleDragStart"
 		@dragend="handleDragEnd"
@@ -83,6 +91,7 @@
 	COMPONENT_TYPES_TOP_LEVEL,
 } from "@/constants/component";
 import WdsIcon from "@/wds/WdsIcon.vue";
+import type { WdsDropdownMenuOption } from "@/wds/WdsDropdownMenu.vue";
 
 const props = defineProps({
 	componentId: { type: String, required: true },
@@ -91,6 +100,9 @@
 
 const treeBranch = ref<ComponentPublicInstance<typeof BuilderTree>>();
 
+const rightClickDropdownOptions: WdsDropdownMenuOption[] = [
+	{ label: "Delete", value: "delete", icon: "trash-2" },
+];
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
 const selected = computed(() => wfbm.isComponentIdSelected(props.componentId));
@@ -101,11 +113,12 @@
 	moveComponent,
 	goToComponentParentPage,
 	isDraggingAllowed,
+	isDeleteAllowed,
 } = useComponentActions(wf, wfbm, tracking);
 const { getComponentInfoFromDrag, removeInsertionCandidacy, isParentSuitable } =
 	useDragDropComponent(wf);
 const { isComponentVisible } = useEvaluator(wf);
-const emit = defineEmits(["expandBranch"]);
+const emits = defineEmits(["expandBranch", "delete"]);
 
 const q = computed(() => props.query?.toLocaleLowerCase() ?? "");
 
@@ -145,7 +158,7 @@
 function expand() {
 	if (!treeBranch.value) return;
 	treeBranch.value.expand();
 	emit("expandBranch");
 }
 
 function scrollToShow() {
@@ -201,6 +214,10 @@
 	removeInsertionCandidacy(ev);
 }
 
+function handleDropdownSelect(action: string, key: string) {
+	if (action === "delete") emits("delete", key);
+}
+
 const isOutsideActivePage = computed(() => {
 	if (!wf.activePageId.value) return false;