perf: Delegate all component event handling to component parent

Improves: #276

frontend/src/components/BuilderAssets.vue

@@ -11,21 +11,20 @@
 					}
 				" />
 		</div>
-		<div>
+		<div ref="componentContainer">
 			<div v-show="!components.length" class="mt-2 text-base italic text-gray-600">No components saved</div>
 			<div v-for="component in components" :key="component.name" class="flex w-full">
 				<div class="component-container group relative flex w-full flex-col">
 					<div
-						class="relative flex translate-x-0 translate-y-0 cursor-pointer items-center justify-between overflow-hidden truncate rounded border border-transparent bg-surface-white px-2 py-1.5"
+						class="user-component relative flex translate-x-0 translate-y-0 cursor-pointer items-center justify-between overflow-hidden truncate rounded border border-transparent bg-surface-white px-2 py-1.5"
 						draggable="true"
+						:data-component-id="component.component_id"
+						:data-component-name="component.name"
 						:class="{
 							'!border-outline-gray-4':
 								store.fragmentData.fragmentId === component.name ||
-								selectedComponent === component.component_id,
-						}"
-						@click="selectComponent(component)"
-						@dblclick="componentStore.editComponent(null, component.name)"
-						@dragstart="(ev) => setComponentData(ev, component)">
+								componentStore.selectedComponent === component.component_id,
+						}">
 						<div class="flex items-center gap-2 text-ink-gray-5">
 							<FeatherIcon :name="'box'" class="h-4 w-4"></FeatherIcon>
 							<p class="text-base">
@@ -47,11 +46,13 @@ import webComponent from "@/data/webComponent";
 import useStore from "@/store";
 import { BuilderComponent } from "@/types/Builder/BuilderComponent";
 import useComponentStore from "@/utils/useComponentStore";
+import { useEventListener } from "@vueuse/core";
 import { computed, onMounted, ref } from "vue";
 
 const store = useStore();
 const componentStore = useComponentStore();
 const componentFilter = ref("");
+const componentContainer = ref(null);
 
 onMounted(() => {
 	webComponent.fetch();
@@ -70,16 +71,37 @@ const components = computed(() =>
 	}),
 );
 
-const setComponentData = (ev: DragEvent, component: BlockComponent) => {
-	ev?.dataTransfer?.setData("componentName", component.name);
-};
+useEventListener(componentContainer, "click", (e) => {
+	const component = (e.target as HTMLElement)?.closest(".user-component") as HTMLElement;
+	if (component) {
+		const componentStore = useComponentStore();
+		const componentId = component.dataset.componentId as string;
+		const componentName = component.dataset.componentName as string;
+		componentStore.selectedComponent = componentId;
+		// if in edit mode, open the component in editor
+		if (store.fragmentData.fragmentId) {
+			componentStore.editComponent(null, componentName);
+		}
+	}
+});
 
-const selectedComponent = ref<string | null>(null);
-const selectComponent = (component: BlockComponent) => {
-	selectedComponent.value = component.component_id;
-	// if in edit mode, open the component in editor
-	if (store.fragmentData.fragmentId) {
-		componentStore.editComponent(null, component.name);
+useEventListener(componentContainer, "dragstart", (e) => {
+	const component = (e.target as HTMLElement)?.closest(".user-component") as HTMLElement;
+	if (component) {
+		setComponentData(e, component.dataset.componentName as string);
 	}
+});
+
+useEventListener(componentContainer, "dblclick", (e) => {
+	const component = (e.target as HTMLElement)?.closest(".user-component") as HTMLElement;
+	if (component) {
+		const componentStore = useComponentStore();
+		const componentName = component.dataset.componentName as string;
+		componentStore.editComponent(null, componentName);
+	}
+});
+
+const setComponentData = (ev: DragEvent, componentName: string) => {
+	ev?.dataTransfer?.setData("componentName", componentName);
 };
 </script>

frontend/src/utils/useComponentStore.ts

@@ -15,6 +15,7 @@ const useComponentStore = defineStore("componentStore", {
 		componentMap: <Map<string, Block>>new Map(),
 		componentDocMap: <Map<string, BuilderComponent>>new Map(),
 		fetchingComponent: new Set(),
+		selectedComponent: null as string | null,
 	}),
 	actions: {
 		async editComponent(block?: Block | null, componentName?: string) {