disallow invalid layer drop

Author: Sahil-Gupta584

frontend/src/components/panels/Layers.svelte

@@ -308,16 +308,25 @@
 		let markerHeight = 0;
 		const layerPanel = document.querySelector("[data-layer-panel]"); // Selects the element with the data-layer-panel attribute
 		if (layerPanel !== null && treeChildren !== undefined && treeOffset !== undefined) {
+			const lastChild = treeChildren[treeChildren.length - 1];
+			if (lastChild.getBoundingClientRect().bottom < clientY) {
+				return { select, insertParentId: undefined, insertDepth: 0, insertIndex: undefined, highlightFolder: false, markerHeight: 0 };
+			}
+
 			let layerPanelTop = layerPanel.getBoundingClientRect().top;
 			Array.from(treeChildren).forEach((treeChild) => {
-				const indexAttribute = treeChild.getAttribute("data-index");
+				const indexAttribute = parseInt(treeChild.getAttribute("data-index") ?? "0", 10);
 				if (!indexAttribute) return;
-				const { folderIndex, entry: layer } = layers[parseInt(indexAttribute, 10)];
+				const { folderIndex, entry: layer } = layers[indexAttribute];
 
 				const rect = treeChild.getBoundingClientRect();
 				if (rect.top > clientY || rect.bottom < clientY) {
 					return;
 				}
+
+				const isDraggingBtnArtBoards = layers[indexAttribute]?.entry?.depth === 1 && layers[indexAttribute + 1]?.entry?.depth === 1;
+				if (isDraggingBtnArtBoards) return;
+
 				const pointerPercentage = (clientY - rect.top) / rect.height;
 				if (layer.childrenAllowed) {
 					if (pointerPercentage < 0.25) {
@@ -353,11 +362,18 @@
 			// Dragging to the empty space below all layers
 			let lastLayer = treeChildren[treeChildren.length - 1];
 			if (lastLayer.getBoundingClientRect().bottom < clientY) {
-				const numberRootLayers = layers.filter((layer) => layer.entry.depth === 1).length;
-				insertParentId = undefined;
-				insertDepth = 0;
-				insertIndex = numberRootLayers;
-				markerHeight = lastLayer.getBoundingClientRect().bottom - layerPanelTop;
+				const lastLayerIndexAttr = lastLayer.getAttribute("data-index");
+				if (lastLayerIndexAttr) {
+					const { folderIndex, entry: lastEntry } = layers[parseInt(lastLayerIndexAttr, 10)];
+
+					if (lastEntry.depth === 1) {
+						insertParentId = undefined;
+					} else {
+						insertParentId = lastEntry.parentId;
+					}
+					insertIndex = folderIndex + 1;
+					markerHeight = lastLayer.getBoundingClientRect().bottom - layerPanel.getBoundingClientRect().top;
+				}
 			}
 		}