improve image card, some cleanup

docs/Beta.md

···
 
 - video card
 
--
+- allow changing profile picture
+
+- allow editing profile stuff inline (in sidebar profile)
+
+- allow setting base and accent color
+
+- edit link of image card

src/lib/cards/ImageCard/CreateImageCardModal.svelte

···
-<script lang="ts">
-	import { Button, Input, Label, Modal, Subheading } from '@foxui/core';
-	import type { CreationModalComponentProps } from '../types';
-	import { compressImage } from '$lib/helper';
-
-	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
-
-	async function handleFileChange(event: Event) {
-		const target = event.target as HTMLInputElement;
-		if (!target.files || target.files.length < 1) return;
-
-		const file = target.files[0];
-		const compressedFile = await compressImage(file);
-
-		if (item.cardData.objectUrl) URL.revokeObjectURL(item.cardData.objectUrl);
-
-		item.cardData.blob = compressedFile;
-		item.cardData.objectUrl = URL.createObjectURL(compressedFile);
-	}
-
-	let inputRef = $state<HTMLInputElement | null>(null);
-
-	function handleDragOver(event: DragEvent) {
-		event.preventDefault();
-		if (event.dataTransfer) {
-			event.dataTransfer.dropEffect = 'copy';
-		}
-	}
-
-	function handleDrop(event: DragEvent) {
-		event.preventDefault();
-		const file = event.dataTransfer?.files[0];
-		if (file) {
-			handleFileChange({ target: { files: [file] } } as unknown as Event);
-		}
-	}
-
-	function handleDragLeave(event: DragEvent) {
-		event.preventDefault();
-		if (event.dataTransfer) {
-			event.dataTransfer.dropEffect = 'none';
-		}
-	}
-</script>
-
-<Modal
-	bind:open={
-		() => true,
-		(change) => {
-			if (!change) oncancel();
-		}
-	}
-	closeButton={false}
->
-	<Subheading>Select an image</Subheading>
-
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		ondragover={handleDragOver}
-		ondrop={handleDrop}
-		ondragleave={handleDragLeave}
-		onclick={() => {
-			inputRef?.click();
-		}}
-		class="dark:bg-accent-600/5 hover:bg-accent-400/10 dark:hover:bg-accent-600/10 border-accent-400 bg-accent-400/5 dark:border-accent-800 flex h-32 w-full cursor-pointer items-center justify-center gap-2 rounded-2xl border border-dashed p-2 transition-colors duration-200"
-	>
-		{#if !item.cardData.objectUrl}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				class="text-accent-600 dark:text-accent-400 size-6"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
-				/>
-			</svg>
-			<span class="text-accent-600 dark:text-accent-400 text-sm">Click to upload image</span>
-		{:else}
-			<img
-				alt=""
-				src={item.cardData.objectUrl}
-				class="max-h-full max-w-full rounded-xl object-contain"
-			/>
-		{/if}
-		<input
-			type="file"
-			accept="image/*"
-			onchange={handleFileChange}
-			class="hidden"
-			multiple
-			bind:this={inputRef}
-		/>
-	</div>
-    <Label class="mt-4">Link (optional):</Label>
-	<Input bind:value={item.cardData.href} />
-
-
-	<div class="mt-4 flex justify-end gap-2">
-		<Button
-			onclick={() => {
-				if (item.cardData.objectUrl) URL.revokeObjectURL(item.cardData.objectUrl);
-
-				oncancel();
-			}}
-			variant="ghost">Cancel</Button
-		>
-		<Button
-			disabled={!item.cardData.objectUrl}
-			onclick={async () => {
-				oncreate();
-			}}>Create</Button
-		>
-	</div>
-</Modal>

src/lib/cards/ImageCard/index.ts

···
 import { uploadBlob } from '$lib/oauth/utils';
 import type { CardDefinition } from '../types';
-import CreateImageCardModal from './CreateImageCardModal.svelte';
 import ImageCard from './ImageCard.svelte';
 
 export const ImageCardDefinition = {
···
 			href: ''
 		};
 	},
-	creationModalComponent: CreateImageCardModal,
 	upload: async (item) => {
 		if (item.cardData.blob) {
 			item.cardData.image = await uploadBlob(item.cardData.blob);

src/lib/helper.ts

···
 import type { Item, WebsiteData } from './types';
-import { COLUMNS } from '$lib';
+import { COLUMNS, margin, mobileMargin } from '$lib';
+import { CardDefinitionsByType } from './cards';
+import { deleteRecord, putRecord } from './oauth/atproto';
+import { toast } from '@foxui/core';
+import { TID } from '@atproto/common-web';
 
 export function clamp(value: number, min: number, max: number): number {
 	return Math.min(Math.max(value, min), max);
···
 
 		img.onerror = (err) => reject(err);
 	});
-}
+}
+
+export async function savePage(
+	data: WebsiteData,
+	currentItems: Item[],
+	originalPublication: string
+) {
+	const promises = [];
+	// find all cards that have been updated (where items differ from originalItems)
+	for (let item of currentItems) {
+		const originalItem = data.cards.find((i) => cardsEqual(i, item));
+
+		if (!originalItem) {
+			console.log('updated or new item', item);
+			item.updatedAt = new Date().toISOString();
+			// run optional upload function for this card type
+			const cardDef = CardDefinitionsByType[item.cardType];
+
+			if (cardDef?.upload) {
+				item = await cardDef?.upload(item);
+			}
+
+			item.page = data.page;
+			item.version = 2;
+
+			promises.push(
+				putRecord({
+					collection: 'app.blento.card',
+					rkey: item.id,
+					record: item
+				})
+			);
+		}
+	}
+
+	// delete items that are in originalItems but not in items
+	for (const originalItem of data.cards) {
+		const item = currentItems.find((i) => i.id === originalItem.id);
+		if (!item) {
+			console.log('deleting item', originalItem);
+			promises.push(
+				deleteRecord({ collection: 'app.blento.card', rkey: originalItem.id, did: data.did })
+			);
+		}
+	}
+
+	if (!originalPublication || originalPublication !== JSON.stringify(data.publication)) {
+		data.publication ??= {
+			name: getName(data),
+			description: getDescription(data),
+			preferences: {
+				hideProfile: getHideProfile(data)
+			}
+		};
+
+		if (!data.publication.url) {
+			data.publication.url = 'https://blento.app/' + data.handle;
+
+			if (data.page !== 'blento.self') {
+				data.publication.url += '/' + data.page.replace('blento.', '');
+			}
+		}
+		promises.push(
+			putRecord({
+				collection: 'site.standard.publication',
+				rkey: data.page,
+				record: data.publication
+			})
+		);
+
+		console.log('updating or adding publication', data.publication);
+	}
+
+	await Promise.all(promises);
+
+	fetch('/' + data.handle + '/api/refreshData').then(() => {
+		console.log('data refreshed!');
+	});
+	console.log('refreshing data');
+
+	toast('Saved', {
+		description: 'Your website has been saved!'
+	});
+}
+
+export function createEmptyCard(page: string) {
+	return {
+		id: TID.nextStr(),
+		x: 0,
+		y: 0,
+		w: 2,
+		h: 2,
+		mobileH: 4,
+		mobileW: 4,
+		mobileX: 0,
+		mobileY: 0,
+		cardType: '',
+		cardData: {},
+		page
+	} as Item;
+}
+
+export function scrollToItem(
+	item: Item,
+	isMobile: boolean,
+	container: HTMLDivElement | undefined,
+	force: boolean = false
+) {
+	// scroll to newly created card only if not fully visible
+	const containerRect = container?.getBoundingClientRect();
+	if (!containerRect) return;
+	const currentMargin = isMobile ? mobileMargin : margin;
+	const currentY = isMobile ? item.mobileY : item.y;
+	const currentH = isMobile ? item.mobileH : item.h;
+	const cellSize = (containerRect.width - currentMargin * 2) / COLUMNS;
+
+	const cardTop = containerRect.top + currentMargin + currentY * cellSize;
+	const cardBottom = containerRect.top + currentMargin + (currentY + currentH) * cellSize;
+
+	const isFullyVisible = cardTop >= 0 && cardBottom <= window.innerHeight;
+
+	if (!isFullyVisible || force) {
+		const bodyRect = document.body.getBoundingClientRect();
+		const offset = containerRect.top - bodyRect.top;
+		window.scrollTo({ top: offset + cellSize * (currentY - 1), behavior: 'smooth' });
+	}
+}

src/lib/website/EditableWebsite.svelte

···
 <script lang="ts">
 	import { client, login } from '$lib/oauth/auth.svelte.js';
 
-	import {
-		Navbar,
-		Button,
-		toast,
-		Toaster,
-		Toggle,
-		Sidebar,
-		Popover,
-		Input,
-	} from '@foxui/core';
+	import { Navbar, Button, toast, Toaster, Toggle, Sidebar, Popover, Input } from '@foxui/core';
 	import { BlueskyLogin } from '@foxui/social';
 
 	import { COLUMNS, margin, mobileMargin } from '$lib';
 	import {
-		cardsEqual,
 		clamp,
 		compactItems,
+		createEmptyCard,
 		fixCollisions,
-		getDescription,
 		getHideProfile,
 		getName,
 		isTyping,
+		savePage,
+		scrollToItem,
 		setPositionOfNewItem,
 		validateLink
 	} from '../helper';
 	import Profile from './Profile.svelte';
 	import type { Item, WebsiteData } from '../types';
-	import { deleteRecord, putRecord } from '../oauth/atproto';
 	import { innerWidth } from 'svelte/reactivity/window';
-	import { TID } from '@atproto/common-web';
 	import EditingCard from '../cards/Card/EditingCard.svelte';
 	import { AllCardDefinitions, CardDefinitionsByType } from '../cards';
 	import { tick, type Component } from 'svelte';
···
 	import Context from './Context.svelte';
 	import Settings from './Settings.svelte';
 	import Head from './Head.svelte';
+	import { compressImage } from '../helper';
 
 	let {
 		data
 	}: {
 		data: WebsiteData;
 	} = $props();
+
+	let imageInputRef: HTMLInputElement | undefined = $state();
+	let imageDragOver = $state(false);
+	let imageDragPosition: { x: number; y: number } | null = $state(null);
 
 	// svelte-ignore state_referenced_locally
 	let items: Item[] = $state(data.cards);
···
 			popover.hidePopover();
 		}
 
-		let item: Item = {
-			id: TID.nextStr(),
-			x: 0,
-			y: 0,
-			w: 2,
-			h: 2,
-			mobileH: 4,
-			mobileW: 4,
-			mobileX: 0,
-			mobileY: 0,
-			cardType: type,
-			cardData: cardData ?? {},
-			version: 2,
-			page: data.page
-		};
+		let item = createEmptyCard(data.page);
+
+		item.cardData = cardData ?? {};
+
 		const cardDef = CardDefinitionsByType[type];
 		cardDef?.createNew?.(item);
 
···
 
 		items = [...items, item];
 
-		const containerRect = container?.getBoundingClientRect();
-
 		newItem = {};
 
 		await tick();
 
-		// scroll to newly created card
-		if (!containerRect) return;
-		const currentMargin = isMobile ? mobileMargin : margin;
-		const currentY = isMobile ? item.mobileY : item.y;
-		const bodyRect = document.body.getBoundingClientRect();
-		const offset = containerRect.top - bodyRect.top;
-		const cellSize = (containerRect.width - currentMargin * 2) / COLUMNS;
-		window.scrollTo({ top: offset + cellSize * (currentY - 1), behavior: 'smooth' });
+		scrollToItem(item, isMobile, container);
 	}
 
 	let isSaving = $state(false);
···
 	async function save() {
 		isSaving = true;
 
-		const promises = [];
-		// find all cards that have been updated (where items differ from originalItems)
-		for (let item of items) {
-			const originalItem = data.cards.find((i) => cardsEqual(i, item));
+		await savePage(data, items, publication);
 
-			if (!originalItem) {
-				console.log('updated or new item', item);
-				item.updatedAt = new Date().toISOString();
-				// run optional upload function for this card type
-				const cardDef = CardDefinitionsByType[item.cardType];
-
-				if (cardDef?.upload) {
-					item = await cardDef?.upload(item);
-				}
-
-				item.page = data.page;
-				item.version = 2;
-
-				promises.push(
-					putRecord({
-						collection: 'app.blento.card',
-						rkey: item.id,
-						record: item
-					})
-				);
-			}
-		}
-
-		// delete items that are in originalItems but not in items
-		for (let originalItem of data.cards) {
-			const item = items.find((i) => i.id === originalItem.id);
-			if (!item) {
-				console.log('deleting item', originalItem);
-				promises.push(
-					deleteRecord({ collection: 'app.blento.card', rkey: originalItem.id, did: data.did })
-				);
-			}
-		}
-
-		console.log(publication, data.publication);
-		if (!publication || publication !== JSON.stringify(data.publication)) {
-			data.publication ??= {
-				name: getName(data),
-				description: getDescription(data),
-				preferences: {
-					hideProfile: getHideProfile(data)
-				}
-			};
-
-			if (!data.publication.url) {
-				data.publication.url = 'https://blento.app/' + data.handle;
-
-				if (data.page !== 'blento.self') {
-					data.publication.url += '/' + data.page.replace('blento.', '');
-				}
-			}
-			promises.push(
-				putRecord({
-					collection: 'site.standard.publication',
-					rkey: data.page,
-					record: data.publication
-				})
-			);
-
-			publication = JSON.stringify(data.publication);
-
-			console.log('updating or adding publication', data.publication);
-		}
-
-		await Promise.all(promises);
-
-		isSaving = false;
-
-		fetch('/' + data.handle + '/api/refreshData').then(() => {
-			console.log('data refreshed!');
-		});
-		console.log('refreshing data');
-
-		toast('Saved', {
-			description: 'Your website has been saved!'
-		});
+		publication = JSON.stringify(data.publication);
 	}
 
 	const sidebarItems = AllCardDefinitions.filter(
···
 		e: DragEvent & {
 			currentTarget: EventTarget & HTMLDivElement;
 		}
-	): { x: number; y: number; swapWithId: string | null; placement: 'above' | 'below' | null } | undefined {
+	):
+		| { x: number; y: number; swapWithId: string | null; placement: 'above' | 'below' | null }
+		| undefined {
 		if (!container || !activeDragElement.item) return;
 
 		// x, y represent the top-left corner of the dragged card
···
 		const cellSize = (rect.width - currentMargin * 2) / COLUMNS;
 
 		// Get card dimensions based on current view mode
-		const cardW = isMobile ? (activeDragElement.item?.mobileW ?? activeDragElement.w) : activeDragElement.w;
-		const cardH = isMobile ? (activeDragElement.item?.mobileH ?? activeDragElement.h) : activeDragElement.h;
+		const cardW = isMobile
+			? (activeDragElement.item?.mobileW ?? activeDragElement.w)
+			: activeDragElement.w;
+		const cardH = isMobile
+			? (activeDragElement.item?.mobileH ?? activeDragElement.h)
+			: activeDragElement.h;
 
 		// Get dragged card's original position
 		const draggedOrigPos = activeDragElement.originalPositions.get(activeDragElement.item.id);
-		const draggedOrigX = draggedOrigPos ? (isMobile ? draggedOrigPos.mobileX : draggedOrigPos.x) : 0;
-		const draggedOrigY = draggedOrigPos ? (isMobile ? draggedOrigPos.mobileY : draggedOrigPos.y) : 0;
+		const draggedOrigX = draggedOrigPos
+			? isMobile
+				? draggedOrigPos.mobileX
+				: draggedOrigPos.x
+			: 0;
+		const draggedOrigY = draggedOrigPos
+			? isMobile
+				? draggedOrigPos.mobileY
+				: draggedOrigPos.y
+			: 0;
 
 		// Calculate raw grid position based on top-left of dragged card
-		let gridX = clamp(
-			Math.round((x - rect.left - currentMargin) / cellSize),
-			0,
-			COLUMNS - cardW
-		);
+		let gridX = clamp(Math.round((x - rect.left - currentMargin) / cellSize), 0, COLUMNS - cardW);
 		gridX = Math.floor(gridX / 2) * 2;
 
-		let gridY = Math.max(
-			Math.round((y - rect.top - currentMargin) / cellSize),
-			0
-		);
+		let gridY = Math.max(Math.round((y - rect.top - currentMargin) / cellSize), 0);
 
 		if (isMobile) {
 			gridX = Math.floor(gridX / 2) * 2;
···
 			const otherH = isMobile ? other.mobileH : other.h;
 
 			// Check if dragged card's center point is within this card's original bounds
-			if (centerGridX >= otherX && centerGridX < otherX + otherW &&
-				centerGridY >= otherY && centerGridY < otherY + otherH) {
-
+			if (
+				centerGridX >= otherX &&
+				centerGridX < otherX + otherW &&
+				centerGridY >= otherY &&
+				centerGridY < otherY + otherH
+			) {
 				// Check if this is a swap situation:
 				// Cards have the same dimensions and are on the same row
 				const canSwap = cardW === otherW && cardH === otherH && draggedOrigY === otherY;
···
 			toast.error('invalid link');
 			return;
 		}
-
-		let item: Item = {
-			id: TID.nextStr(),
-			x: 0,
-			y: 0,
-			w: 2,
-			h: 2,
-			mobileH: 4,
-			mobileW: 4,
-			mobileX: 0,
-			mobileY: 0,
-			cardType: '',
-			cardData: {}
-		};
-
-		newItem.item = item;
-
-		console.log(AllCardDefinitions.toSorted(
-			(a, b) => (b.urlHandlerPriority ?? 0) - (a.urlHandlerPriority ?? 0)
-		));
+		let item = createEmptyCard(data.page);
 
 		for (const cardDef of AllCardDefinitions.toSorted(
 			(a, b) => (b.urlHandlerPriority ?? 0) - (a.urlHandlerPriority ?? 0)
 		)) {
 			if (cardDef.onUrlHandler?.(link, item)) {
 				item.cardType = cardDef.type;
+
+				newItem.item = item;
 				saveNewItem();
 				break;
 			}
 		}
 
-		newItem = {};
-
-		if(linkValue === url) {
+		if (linkValue === url) {
 			linkValue = '';
 			linkPopoverOpen = false;
 		}
 	}
+
+	async function processImageFile(file: File, gridX?: number, gridY?: number) {
+		const compressedFile = await compressImage(file);
+		const objectUrl = URL.createObjectURL(compressedFile);
+
+		let item = createEmptyCard(data.page);
+		
+		item.cardType = 'image';
+		item.cardData = {
+				blob: compressedFile,
+				objectUrl
+		};
+
+		// If grid position is provided
+		if (gridX !== undefined && gridY !== undefined) {
+			if (isMobile) {
+				item.mobileX = gridX;
+				item.mobileY = gridY;
+			} else {
+				item.x = gridX;
+				item.y = gridY;
+			}
+
+			items = [...items, item];
+			fixCollisions(items, item, isMobile);
+		} else {
+			setPositionOfNewItem(item, items);
+			items = [...items, item];
+		}
+
+		await tick();
+
+		scrollToItem(item, isMobile, container);
+	}
+
+	function handleImageDragOver(event: DragEvent) {
+		const dt = event.dataTransfer;
+		if (!dt) return;
+
+		let hasImage = false;
+		if (dt.items) {
+			for (let i = 0; i < dt.items.length; i++) {
+				const item = dt.items[i];
+				if (item && item.kind === 'file' && item.type.startsWith('image/')) {
+					hasImage = true;
+					break;
+				}
+			}
+		} else if (dt.files) {
+			for (let i = 0; i < dt.files.length; i++) {
+				const file = dt.files[i];
+				if (file?.type.startsWith('image/')) {
+					hasImage = true;
+					break;
+				}
+			}
+		}
+
+		if (hasImage) {
+			event.preventDefault();
+			event.stopPropagation();
+
+			imageDragOver = true;
+			imageDragPosition = { x: event.clientX, y: event.clientY };
+		}
+	}
+
+	function handleImageDragLeave(event: DragEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		imageDragOver = false;
+		imageDragPosition = null;
+	}
+
+	async function handleImageDrop(event: DragEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		const dropX = event.clientX;
+		const dropY = event.clientY;
+		imageDragOver = false;
+		imageDragPosition = null;
+
+		if (!event.dataTransfer?.files?.length) return;
+
+		const imageFiles = Array.from(event.dataTransfer.files).filter((f) =>
+			f?.type.startsWith('image/')
+		);
+		if (imageFiles.length === 0) return;
+
+		// Calculate starting grid position from drop coordinates
+		let gridX = 0;
+		let gridY = 0;
+		if (container) {
+			const rect = container.getBoundingClientRect();
+			const currentMargin = isMobile ? mobileMargin : margin;
+			const cellSize = (rect.width - currentMargin * 2) / COLUMNS;
+			const cardW = isMobile ? 4 : 2;
+
+			gridX = clamp(Math.round((dropX - rect.left - currentMargin) / cellSize), 0, COLUMNS - cardW);
+			gridX = Math.floor(gridX / 2) * 2;
+
+			gridY = Math.max(Math.round((dropY - rect.top - currentMargin) / cellSize), 0);
+			if (isMobile) {
+				gridY = Math.floor(gridY / 2) * 2;
+			}
+		}
+
+		for (const file of imageFiles) {
+			await processImageFile(file, gridX, gridY);
+
+			// Move to next cell position
+			const cardW = isMobile ? 4 : 2;
+			gridX += cardW;
+			if (gridX + cardW > COLUMNS) {
+				gridX = 0;
+				gridY += isMobile ? 4 : 2;
+			}
+		}
+	}
+
+	async function handleImageInputChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		if (!target.files || target.files.length < 1) return;
+
+		const files = Array.from(target.files);
+
+		if (files.length === 1) {
+			// Single file: use default positioning
+			await processImageFile(files[0]);
+		} else {
+			// Multiple files: place in grid pattern starting from first available position
+			let gridX = 0;
+			let gridY = maxHeight;
+			const cardW = isMobile ? 4 : 2;
+			const cardH = isMobile ? 4 : 2;
+
+			for (const file of files) {
+				await processImageFile(file, gridX, gridY);
+
+				// Move to next cell position
+				gridX += cardW;
+				if (gridX + cardW > COLUMNS) {
+					gridX = 0;
+					gridY += cardH;
+				}
+			}
+		}
+
+		// Reset the input so the same file can be selected again
+		target.value = '';
+	}
 </script>
 
 <svelte:body
···
 	}}
 />
 
+<svelte:window
+	ondragover={handleImageDragOver}
+	ondragleave={handleImageDragLeave}
+	ondrop={handleImageDrop}
+/>
+
 <Head
 	favicon={data.profile.avatar ?? null}
 	title={getName(data)}
···
 <Settings bind:open={showSettings} bind:data />
 
 <Context {data}>
-	<!-- <ImageDropper processImageFile={(file: File) => {}} /> -->
+	<input
+		type="file"
+		accept="image/*"
+		onchange={handleImageInputChange}
+		class="hidden"
+		multiple
+		bind:this={imageInputRef}
+	/>
 
 	{#if !dev}
 		<div
···
 
 	{#if showingMobileView}
 		<div
-			class="bg-base-200 dark:bg-base-900 pointer-events-none fixed inset-0 -z-10 h-full w-full"
+			class="bg-base-200 dark:bg-base-950 pointer-events-none fixed inset-0 -z-10 h-full w-full"
 		></div>
 	{/if}
 
···
 		class={[
 			'@container/wrapper relative w-full',
 			showingMobileView
-				? 'bg-base-50 dark:bg-base-950 my-4 min-h-[calc(100dhv-2em)] rounded-2xl lg:mx-auto lg:w-[400px]'
+				? 'bg-base-50 dark:bg-base-900 my-4 min-h-[calc(100dhv-2em)] rounded-2xl lg:mx-auto lg:w-[375px]'
 				: ''
 		]}
 	>
···
 
 					if (activeDragElement.item) {
 						// Get dragged card's original position for swapping
-						const draggedOrigPos = activeDragElement.originalPositions.get(activeDragElement.item.id);
+						const draggedOrigPos = activeDragElement.originalPositions.get(
+							activeDragElement.item.id
+						);
 
 						// Reset all items to original positions first
 						for (const it of items) {
···
 
 						// Handle horizontal swap
 						if (result.swapWithId && draggedOrigPos) {
-							const swapTarget = items.find(it => it.id === result.swapWithId);
+							const swapTarget = items.find((it) => it.id === result.swapWithId);
 							if (swapTarget) {
 								// Move swap target to dragged card's original position
 								if (isMobile) {
···
 					activeDragElement.lastPlacement = null;
 					return true;
 				}}
-				class="@container/grid relative col-span-3 px-2 py-8 @5xl/wrapper:px-8"
+				class={[
+					'@container/grid relative col-span-3 rounded-4xl px-2 py-8 @5xl/wrapper:px-8',
+					imageDragOver && 'outline-accent-500 outline-3 -outline-offset-10 outline-dashed'
+				]}
 			>
 				{#each items as item, i (item.id)}
 					<!-- {#if item !== activeDragElement.item} -->
···
 					variant="ghost"
 					class="backdrop-blur-none"
 					onclick={() => {
-						newCard('image');
+						imageInputRef?.click();
 					}}
 				>
 					<svg

todo.md

···
 # todo
 
 - general video card
-- edit already created cards (e.g. change link)
 - link card: save favicon and og image to pds
-- paste handler for card creation (+ when entering link)
-- change general settings:
-    - show profile
-    - profile on side or top
-    - base, accent color
-    - title
-    - favicon
+
 - option to hide cards on mobile
 - separate og image for main page
 - image cards: different images for dark and light mode