dragging and stuff

src/lib/EditableWebsite.svelte

···
 	import {
 		cardsEqual,
 		clamp,
+		compactItems,
 		fixCollisions,
 		setCanEdit,
 		setIsMobile,
-		setPositionOfNewItem
+		setPositionOfNewItem,
+		simulateFinalPosition
 	} from './helper';
 	import Profile from './Profile.svelte';
 	import type { Item } from './types';
···
 	);
 
 	let showSettings = $state(false);
+
+	let debugPoint = $state({ x: 0, y: 0 });
+
+	function getDragXY(
+		e: DragEvent & {
+			currentTarget: EventTarget & HTMLDivElement;
+		}
+	) {
+		if (!container) return;
+
+		const x = e.clientX + activeDragElement.mouseDeltaX;
+		const y = e.clientY + activeDragElement.mouseDeltaY;
+
+		const rect = container.getBoundingClientRect();
+
+		debugPoint.x = x - rect.left;
+		debugPoint.y = y - rect.top + margin;
+		console.log(rect.top);
+
+		let gridX = clamp(
+			Math.floor(((x - rect.left) / rect.width) * 4),
+			0,
+			4 - (activeDragElement.w ?? 0)
+		);
+		let gridY = Math.max(Math.round(((y - rect.top + margin) / (rect.width - margin)) * 4), 0);
+		if (isMobile) {
+			gridX = Math.floor(gridX / 2) * 2;
+			gridY = Math.floor(gridY / 2) * 2;
+		}
+		return { x: gridX, y: gridY };
+	}
 </script>
 
 {#if !dev}
···
 			bind:this={container}
 			ondragover={(e) => {
 				e.preventDefault();
-				if (!container) return;
+
+				const cell = getDragXY(e);
+				if (!cell) return;
 
-				const x = e.clientX + activeDragElement.mouseDeltaX;
-				const y = e.clientY + activeDragElement.mouseDeltaY;
-				const rect = container.getBoundingClientRect();
+				activeDragElement.x = cell.x;
+				activeDragElement.y = cell.y;
+
+				// Auto-scroll when dragging near top or bottom of viewport
+				const scrollZone = 150;
+				const scrollSpeed = 15;
+				const viewportHeight = window.innerHeight;
 
-				let gridX = clamp(
-					Math.floor(((x - rect.left) / rect.width) * 4),
-					0,
-					4 - (activeDragElement.w ?? 0)
-				);
-				let gridY = Math.max(Math.floor(((y - rect.top) / rect.width) * 4), 0);
-				if (isMobile) {
-					gridX = Math.floor(gridX / 2) * 2;
-					gridY = Math.floor(gridY / 2) * 2;
+				if (e.clientY < scrollZone) {
+					// Near top - scroll up
+					const intensity = 1 - e.clientY / scrollZone;
+					window.scrollBy(0, -scrollSpeed * intensity);
+				} else if (e.clientY > viewportHeight - scrollZone) {
+					// Near bottom - scroll down
+					const intensity = 1 - (viewportHeight - e.clientY) / scrollZone;
+					window.scrollBy(0, scrollSpeed * intensity);
 				}
-
-				activeDragElement.x = gridX;
-				activeDragElement.y = gridY;
 			}}
 			ondragend={async (e) => {
 				e.preventDefault();
-				if (!container) return;
-
-				const x = e.clientX + activeDragElement.mouseDeltaX;
-				const y = e.clientY + activeDragElement.mouseDeltaY;
-				const rect = container.getBoundingClientRect();
-
-				let gridX = clamp(
-					Math.floor(((x - rect.left) / rect.width) * 4),
-					0,
-					4 - (activeDragElement.w ?? 0)
-				);
-				let gridY = Math.max(Math.floor(((y - rect.top) / rect.width) * 4), 0);
-				if (isMobile) {
-					gridX = Math.floor(gridX / 2) * 2;
-					gridY = Math.floor(gridY / 2) * 2;
-				}
+				const cell = getDragXY(e);
+				if (!cell) return;
 
 				if (activeDragElement.item) {
 					if (isMobile) {
-						activeDragElement.item.mobileX = gridX;
-						activeDragElement.item.mobileY = gridY;
+						activeDragElement.item.mobileX = cell.x;
+						activeDragElement.item.mobileY = cell.y;
 					} else {
-						activeDragElement.item.x = gridX;
-						activeDragElement.item.y = gridY;
+						activeDragElement.item.x = cell.x;
+						activeDragElement.item.y = cell.y;
 					}
 
 					fixCollisions(items, activeDragElement.item, isMobile);
···
 					bind:item={items[i]}
 					ondelete={() => {
 						items = items.filter((it) => it !== item);
+						compactItems(items, isMobile);
 					}}
 					onsetsize={(newW: number, newH: number) => {
 						if (isMobile) {
···
 						fixCollisions(items, item, isMobile);
 					}}
 					ondragstart={(e) => {
-						const target = e.target as HTMLDivElement;
+						const target = e.currentTarget as HTMLDivElement;
 						activeDragElement.element = target;
 						activeDragElement.w = item.w;
 						activeDragElement.h = item.h;
 						activeDragElement.item = item;
 
 						const rect = target.getBoundingClientRect();
-						activeDragElement.mouseDeltaX = rect.left + margin - e.clientX;
+						activeDragElement.mouseDeltaX = rect.left - e.clientX;
 						activeDragElement.mouseDeltaY = rect.top - e.clientY;
+						console.log(activeDragElement.mouseDeltaY);
+						console.log(rect.width);
 					}}
 				>
 					<EditingCard bind:item={items[i]} />
···
 			{/each}
 
 			{#if activeDragElement.element && activeDragElement.x >= 0 && activeDragElement.item}
-				{@const item = activeDragElement}
+				{@const finalPos = simulateFinalPosition(items, activeDragElement.item, activeDragElement.x, activeDragElement.y, isMobile)}
 				<div
-					class={['bg-base-500/10 absolute aspect-square rounded-2xl']}
-					style={`translate: calc(${(item.x / 4) * 100}cqw + ${margin / 2}px) calc(${(item.y / 4) * 100}cqw + ${margin / 2}px); 
-                
-                width: calc(${(getW(activeDragElement.item) / 4) * 100}cqw - ${margin}px);
-                height: calc(${(getH(activeDragElement.item) / 4) * 100}cqw - ${margin}px);`}
+					class={[
+						'bg-base-500/10 absolute aspect-square rounded-2xl transition-transform duration-100'
+					]}
+					style={`translate: calc(${(finalPos.x / 4) * 100}cqw + ${margin}px) calc(${(finalPos.y / 4) * 100}cqw + ${margin}px);
+
+                width: calc(${(getW(activeDragElement.item) / 4) * 100}cqw - ${margin * 2}px);
+                height: calc(${(getH(activeDragElement.item) / 4) * 100}cqw - ${margin * 2}px);`}
+				></div>
+			{/if}
+
+			{#if dev}
+				<div
+					class="absolute size-4 rounded-full bg-red-500"
+					style={`translate: ${debugPoint.x}px ${debugPoint.y}px;`}
 				></div>
 			{/if}
 			<div style="height: {((maxHeight + 1) / 4) * 100}cqw;"></div>

src/lib/cards/BaseCard/BaseCard.svelte

···
 		height: calc((var(--mh) / 8) * 100cqw - (var(--mm) * 2));
 	}
 
-	@container wrapper (width >= 64rem) {
+	@container grid (width >= 42rem) {
 		.card {
 			translate: calc((var(--dx) / 8) * 100cqw + var(--dm))
 				calc((var(--dy) / 8) * 100cqw + var(--dm));

src/lib/helper.ts

···
 		if (mobile) it.mobileX = clamp(it.mobileX, 0, COLS - it.mobileW);
 		else it.x = clamp(it.x, 0, COLS - it.w);
 	}
+
+	compactItems(items, mobile);
+}
+
+// Move all items up as far as possible without collisions
+export function compactItems(items: Item[], mobile: boolean = false) {
+	// Sort by Y position (top-to-bottom) so upper items settle first.
+	const sortedItems = items.toSorted((a, b) =>
+		mobile ? a.mobileY - b.mobileY || a.mobileX - b.mobileX : a.y - b.y || a.x - b.x
+	);
+
+	for (const item of sortedItems) {
+		// Try moving item up row by row until we hit y=0 or a collision
+		while (true) {
+			const currentY = mobile ? item.mobileY : item.y;
+			if (currentY <= 0) break;
+
+			// Temporarily move up by 1
+			if (mobile) item.mobileY -= 1;
+			else item.y -= 1;
+
+			// Check for collision with any other item
+			const hasCollision = items.some((other) => other !== item && overlaps(item, other, mobile));
+
+			if (hasCollision) {
+				// Revert the move
+				if (mobile) item.mobileY += 1;
+				else item.y += 1;
+				break;
+			}
+			// No collision, keep the new position and try moving up again
+		}
+	}
+}
+
+// Simulate where an item would end up after fixCollisions + compaction
+export function simulateFinalPosition(
+	items: Item[],
+	movedItem: Item,
+	newX: number,
+	newY: number,
+	mobile: boolean = false
+): { x: number; y: number } {
+	// Deep clone positions for simulation
+	const clonedItems: Item[] = items.map((item) => ({
+		...item,
+		x: item.x,
+		y: item.y,
+		mobileX: item.mobileX,
+		mobileY: item.mobileY
+	}));
+
+	const clonedMovedItem = clonedItems.find((item) => item.id === movedItem.id);
+	if (!clonedMovedItem) return { x: newX, y: newY };
+
+	// Set the new position
+	if (mobile) {
+		clonedMovedItem.mobileX = newX;
+		clonedMovedItem.mobileY = newY;
+	} else {
+		clonedMovedItem.x = newX;
+		clonedMovedItem.y = newY;
+	}
+
+	// Run fixCollisions on the cloned data
+	fixCollisions(clonedItems, clonedMovedItem, mobile);
+
+	// Return the final position of the moved item
+	return mobile
+		? { x: clonedMovedItem.mobileX, y: clonedMovedItem.mobileY }
+		: { x: clonedMovedItem.x, y: clonedMovedItem.y };
 }
 
 export function sortItems(a: Item, b: Item) {

src/routes/[handle]/edit/+page.server.ts

···
-import { loadData } from '$lib/website/load';
-import { env } from '$env/dynamic/private';
-import { error } from '@sveltejs/kit';
-
-export async function load({ params }) {
-	if (env.PUBLIC_IS_SELFHOSTED) error(404);
-	const data = await loadData(params.handle);
-	return { ...data, handle: params.handle };
-}

src/routes/api/instagram/info/+server.ts

···
+import { json } from '@sveltejs/kit';
+
+export async function GET({ url }) {
+	const username = url.searchParams.get('username');
+	if (!username) {
+		return json({ error: 'No username provided' }, { status: 400 });
+	}
+
+	const requestUrl = `https://i.instagram.com/api/v1/users/web_profile_info/?username=${encodeURIComponent(username)}`;
+
+	try {
+		const response = await fetch(requestUrl, {
+			headers: {
+				'User-Agent':
+					'Instagram 76.0.0.15.395 Android (24/7.0; 640dpi; 1440x2560; samsung; SM-G930F; herolte; samsungexynos8890; en_US; 138226743)',
+				Origin: 'https://www.instagram.com',
+				Referer: 'https://www.instagram.com/'
+			}
+		});
+
+		if (!response.ok) {
+			return json(
+				{ error: 'Failed to fetch Instagram profile', status: response.status },
+				{ status: response.status }
+			);
+		}
+
+		const data = await response.json();
+		return json({ follower_count: data['data']['user']['edge_followed_by']['count'] });
+	} catch (error) {
+		console.error('Error fetching Instagram profile:', error);
+		return json({ error: 'Failed to fetch Instagram profile' }, { status: 500 });
+	}
+}