improve link adding

src/lib/cards/BaseCard/BaseEditingCard.svelte

···
 		if (!cardDef) return false;
 
 		if (isMobile()) {
-			
-			return w >= minW && w*2 <= maxW && h >= minH && h*2 <= maxH;
+			return w >= minW && w * 2 <= maxW && h >= minH && h * 2 <= maxH;
 		}
 
 		return w >= minW && w <= maxW && h >= minH && h <= maxH;
···
 	let settingsPopoverOpen = $state(false);
 </script>
 
-<BaseCard {item} isEditing={true} bind:ref showOutline={isResizing} class="starting:scale-0 scale-100 starting:opacity-0 opacity-100" {...rest} >
+<BaseCard
+	{item}
+	isEditing={true}
+	bind:ref
+	showOutline={isResizing}
+	class="scale-100 opacity-100 starting:scale-0 starting:opacity-0"
+	{...rest}
+>
 	{@render children?.()}
 
 	{#snippet controls()}
···
 					{/if}
 
 					{#if cardDef.settingsComponent}
-						<Popover bind:open={settingsPopoverOpen}>
+						<Popover bind:open={settingsPopoverOpen} class="bg-base-50 dark:bg-base-900">
 							{#snippet child({ props })}
 								<button {...props} class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2">
 									<svg
···
 									</svg>
 								</button>
 							{/snippet}
-							<cardDef.settingsComponent bind:item />
+							<cardDef.settingsComponent
+								bind:item
+								onclose={() => {
+									settingsPopoverOpen = false;
+								}}
+							/>
 						</Popover>
 					{/if}
 				</div>

src/lib/cards/BigSocialCard/index.ts

···
 		item.cardData.href = url;
 
 		return item;
-	}
+	},
+	urlHandlerPriority: 1
 } as CardDefinition & { type: 'bigsocial' };
 
 import {

src/lib/cards/LinkCard/CreateLinkCardModal.svelte

···
-<script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
-	import type { CreationModalComponentProps } from '../types';
-
-	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
-
-	let isFetchingMetadata = $state(false);
-
-	let errorMessage = $state('');
-
-	async function fetchMetadata() {
-		errorMessage = '';
-		try {
-			item.cardData.domain = new URL(item.cardData.href).hostname;
-		} catch (error) {
-			errorMessage = 'Invalid URL!';
-			return false;
-		}
-		isFetchingMetadata = true;
-
-		try {
-			const response = await fetch('/api/links?link=' + encodeURIComponent(item.cardData.href));
-			if (response.ok) {
-				const data = await response.json();
-				item.cardData.description = data.description || '';
-				item.cardData.title = data.title || '';
-				item.cardData.image = data.images?.[0] || '';
-				item.cardData.favicon = data.favicons?.[0] || undefined;
-			} else {
-				throw new Error();
-			}
-		} catch (error) {
-			errorMessage = "Couldn't fetch metadata for this link!";
-			return false;
-		} finally {
-			isFetchingMetadata = false;
-		}
-		return true;
-	}
-</script>
-
-<Modal open={true} closeButton={false}>
-	<Subheading>Enter a link</Subheading>
-	<Input bind:value={item.cardData.href} />
-
-	{#if errorMessage}
-		<Alert type="error" title="Failed to create link card"><span>{errorMessage}</span></Alert>
-	{/if}
-
-	<div class="mt-4 flex justify-end gap-2">
-		<Button onclick={oncancel} variant="ghost">Cancel</Button>
-		<Button
-			disabled={isFetchingMetadata}
-			onclick={async () => {
-				if (await fetchMetadata()) oncreate();
-			}}>{isFetchingMetadata ? 'Creating...' : 'Create'}</Button
-		>
-	</div>
-</Modal>

src/lib/cards/LinkCard/EditingLinkCard.svelte

···
 	import { getIsMobile } from '$lib/website/context';
 	import type { ContentComponentProps } from '../types';
 	import PlainTextEditor from '../utils/PlainTextEditor.svelte';
+	import { onMount } from 'svelte';
 
 	let { item = $bindable() }: ContentComponentProps = $props();
 
 	let isMobile = getIsMobile();
 
 	let faviconHasError = $state(false);
+	let isFetchingMetadata = $state(false);
+
+	let hasFetched = $derived(item.cardData.hasFetched !== false);
+
+	async function fetchMetadata() {
+		let domain: string;
+		try {
+			domain = new URL(item.cardData.href).hostname;
+		} catch (error) {
+			return;
+		}
+		item.cardData.domain = domain;
+		faviconHasError = false;
+
+		try {
+			const response = await fetch('/api/links?link=' + encodeURIComponent(item.cardData.href));
+			if (!response.ok) {
+				throw new Error();
+			}
+			const data = await response.json();
+			item.cardData.description = data.description || '';
+			item.cardData.title = data.title || '';
+			item.cardData.image = data.images?.[0] || '';
+			item.cardData.favicon = data.favicons?.[0] || undefined;
+		} catch (error) {
+			return;
+		}
+	}
+
+	$effect(() => {
+		if (hasFetched !== false || isFetchingMetadata) {
+			return;
+		}
+
+		isFetchingMetadata = true;
+
+		fetchMetadata().then(() => {
+			item.cardData.hasFetched = true;
+			isFetchingMetadata = false;
+		});
+	});
 </script>
 
-<div class="flex h-full flex-col justify-between p-4">
-	<div>
-		{#if item.cardData.favicon}
-			<div
-				class="bg-base-100 border-base-300 dark:border-base-800 dark:bg-base-900 mb-2 inline-flex size-8 items-center justify-center rounded-xl border shadow-sm"
-			>
-				{#if !faviconHasError}
-					<img
-						class="size-6 rounded-lg object-cover"
-						onerror={() => (faviconHasError = true)}
-						src={item.cardData.favicon}
-						alt=""
+<div class="relative flex h-full flex-col justify-between p-4">
+	<div
+		class={[
+			'accent:bg-accent-500/50 absolute inset-0 z-20 bg-white/50 dark:bg-black/50',
+			!hasFetched ? 'animate-pulse' : 'hidden'
+		]}
+	></div>
+
+	<div class={isFetchingMetadata ? 'pointer-events-none' : ''}>
+		<div
+			class="bg-base-100 border-base-300 accent:bg-accent-100/50 accent:border-accent-200 dark:border-base-800 dark:bg-base-900 mb-2 inline-flex size-8 items-center justify-center rounded-xl border"
+		>
+			{#if hasFetched && item.cardData.favicon && !faviconHasError}
+				<img
+					class="size-6 rounded-lg object-cover"
+					onerror={() => (faviconHasError = true)}
+					src={item.cardData.favicon}
+					alt=""
+				/>
+			{:else}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="size-4"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 1 1.242 7.244"
 					/>
-				{:else}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="size-4"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
-						/>
-					</svg>
-				{/if}
-			</div>
-		{/if}
+				</svg>
+			{/if}
+		</div>
 
 		<div
-			class="hover:bg-base-200/70 dark:hover:bg-base-800/70 accent:hover:bg-accent-400 -m-1 rounded-md p-1 transition-colors duration-200"
+			class={[
+				'-m-1 rounded-md p-1 transition-colors duration-200',
+				hasFetched
+					? 'hover:bg-base-200/70 dark:hover:bg-base-800/70 accent:hover:bg-accent-200/30'
+					: ''
+			]}
 		>
-			<PlainTextEditor
-				class="text-base-900 dark:text-base-50 text-lg font-bold"
-				key="title"
-				bind:item
-			/>
+			{#if hasFetched}
+				<PlainTextEditor
+					class="text-base-900 dark:text-base-50 line-clamp-2 text-lg font-bold"
+					key="title"
+					bind:item
+					placeholder="Title here"
+				/>
+			{:else}
+				<span class={'text-base-900 dark:text-base-50 line-clamp-2 text-lg font-bold'}>
+					Loading data...
+				</span>
+			{/if}
 		</div>
 		<!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
-		<div class="text-accent-600 accent:text-accent-950 font-semibold dark:text-accent-400 mt-2 text-xs">
+		<div
+			class="text-accent-600 accent:text-accent-950 dark:text-accent-400 mt-2 text-xs font-semibold"
+		>
 			{item.cardData.domain}
 		</div>
 	</div>
 
-	{#if browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image}
+	{#if hasFetched && browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image}
 		<img class=" mb-2 max-h-32 w-full rounded-xl object-cover" src={item.cardData.image} alt="" />
 	{/if}
 </div>

src/lib/cards/LinkCard/LinkCard.svelte

···
 
 <div class="flex h-full flex-col justify-between p-4">
 	<div>
-		{#if item.cardData.favicon}
-			<div
-				class="bg-base-100 border-base-300 dark:border-base-800 dark:bg-base-900 mb-2 inline-flex size-8 items-center justify-center rounded-xl border shadow-sm"
-			>
-				{#if !faviconHasError}
-					<img
-						class="size-6 rounded-lg object-cover"
-						onerror={() => (faviconHasError = true)}
-						src={item.cardData.favicon}
-						alt=""
+		<div
+			class="bg-base-100 border-base-300 accent:bg-accent-100/50 accent:border-accent-200 dark:border-base-800 dark:bg-base-900 mb-2 inline-flex size-8 items-center justify-center rounded-xl border"
+		>
+			{#if item.cardData.favicon && !faviconHasError}
+				<img
+					class="size-6 rounded-lg object-cover"
+					onerror={() => (faviconHasError = true)}
+					src={item.cardData.favicon}
+					alt=""
+				/>
+			{:else}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="size-4"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
 					/>
-				{:else}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="size-4"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
-						/>
-					</svg>
-				{/if}
-			</div>
-		{/if}
+				</svg>
+			{/if}
+		</div>
 		<div
 			class={[
 				'text-base-900 dark:text-base-50 text-lg font-bold',
···
 	</div>
 
 	{#if browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image}
-		<img class="mb-2 max-h-32 w-full starting:opacity-0 opacity-100 transition-opacity duration-100 rounded-xl object-cover" src={item.cardData.image} alt="" />
+		<img
+			class="mb-2 max-h-32 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
+			src={item.cardData.image}
+			alt=""
+		/>
 	{/if}
 	{#if item.cardData.href}
 		<a

src/lib/cards/LinkCard/LinkCardSettings.svelte

···
+<script lang="ts">
+	import { validateLink } from '$lib/helper';
+	import type { Item } from '$lib/types';
+	import { Button, Input, toast } from '@foxui/core';
+
+	let { item, onclose }: { item: Item; onclose: () => void } = $props();
+
+	let linkValue = $derived(item.cardData.href.replace('https://', '').replace('http://', ''));
+
+	function updateLink() {
+		if (!linkValue.trim()) return;
+
+		let link = validateLink(linkValue);
+		if (!link) {
+			toast.error('Invalid link');
+			return;
+		}
+
+		item.cardData.href = link;
+		item.cardData.domain = new URL(link).hostname;
+		item.cardData.hasFetched = false;
+
+		onclose?.();
+	}
+</script>
+
+<Input
+	spellcheck={false}
+	type="url"
+	bind:value={linkValue}
+	onkeydown={(event) => {
+		if (event.code === 'Enter') {
+			updateLink();
+			event.preventDefault();
+		}
+	}}
+	placeholder="Enter link"
+/>
+<Button onclick={updateLink} size="icon"
+	><svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="size-6"
+	>
+		<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+	</svg>
+</Button>

src/lib/cards/LinkCard/index.ts

···
 import type { CardDefinition } from '../types';
-import CreateLinkCardModal from './CreateLinkCardModal.svelte';
 import EditingLinkCard from './EditingLinkCard.svelte';
 import LinkCard from './LinkCard.svelte';
+import LinkCardSettings from './LinkCardSettings.svelte';
 
 export const LinkCardDefinition = {
 	type: 'link',
···
 	editingContentComponent: EditingLinkCard,
 	createNew: (card) => {
 		card.cardType = 'link';
-		card.cardData = {
-			href: 'https://'
-		};
 	},
-	creationModalComponent: CreateLinkCardModal
+	settingsComponent: LinkCardSettings,
+	onUrlHandler: (url, item) => {
+		item.cardData.href = url;
+		item.cardData.domain = new URL(url).hostname;
+		item.cardData.hasFetched = false;
+		return item;
+	},
+	urlHandlerPriority: 0
 } as CardDefinition & { type: 'link' };

src/lib/cards/TextCard/TextCardSettings.svelte

···
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="1.5"
+				stroke-width="2"
 				stroke-linecap="round"
 				stroke-linejoin="round"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg
 			></ToggleGroupItem
···
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="1.5"
+				stroke-width="2"
 				stroke-linecap="round"
 				stroke-linejoin="round"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg
 			></ToggleGroupItem
···
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="1.5"
+				stroke-width="2"
 				stroke-linecap="round"
 				stroke-linejoin="round"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg
 			></ToggleGroupItem
···
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="1.5"
+				stroke-width="2"
 				stroke-linecap="round"
 				stroke-linejoin="round"
 				><rect width="6" height="16" x="4" y="6" rx="2" /><rect
···
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="1.5"
+				stroke-width="2"
 				stroke-linecap="round"
 				stroke-linejoin="round"
 				><rect width="10" height="6" x="7" y="9" rx="2" /><path d="M22 20H2" /><path
···
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="1.5"
+				stroke-width="2"
 				stroke-linecap="round"
 				stroke-linejoin="round"
 				><rect width="14" height="6" x="5" y="12" rx="2" /><rect

src/lib/cards/types.ts

···
 	oncancel: () => void;
 };
 
-export type SettingsModalComponentProps = {
+export type SettingsComponentProps = {
 	item: Item;
-	onsave: (item: Item) => void;
-	oncancel: () => void;
+	onclose: () => void;
 };
 
 export type SidebarComponentProps = {
···
 	sidebarButtonText?: string;
 
 	// if this component exists, a settings button with a popover will be shown containing this component
-	settingsComponent?: Component<ContentComponentProps>;
+	settingsComponent?: Component<SettingsComponentProps>;
 
 	// optionally load some extra data
 	loadData?: (
···
 	canResize?: boolean;
 
 	onUrlHandler?: (url: string, item: Item) => Item | null;
+	urlHandlerPriority?: number;
 };

src/lib/cards/utils/PlainTextEditor.svelte

···
 	:global(.tiptap p.is-editor-empty:first-child::before) {
 		color: var(--color-base-800);
 		content: attr(data-placeholder);
+		opacity: 50%;
 		float: left;
 		height: 0;
 		pointer-events: none;

src/lib/helper.ts

···
 
 	return isEditable;
 }
+
+export function validateLink(
+	link: string | undefined,
+	tryAdding: boolean = true
+): string | undefined {
+	if (!link) return;
+	try {
+		new URL(link);
+
+		return link;
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	} catch (e) {
+		if (!tryAdding) return;
+
+		try {
+			link = 'https://' + link;
+			new URL(link);
+
+			return link;
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch (e) {
+			return;
+		}
+	}
+}

src/lib/website/EditableWebsite.svelte

···
 <script lang="ts">
 	import { client, login } from '$lib/oauth/auth.svelte.js';
 
-	import { Navbar, Button, toast, Toaster, Toggle, Sidebar } from '@foxui/core';
+	import {
+		Navbar,
+		Button,
+		toast,
+		Toaster,
+		Toggle,
+		Sidebar,
+		Popover,
+		Input,
+		Label
+	} from '@foxui/core';
 	import { BlueskyLogin } from '@foxui/social';
 
 	import { COLUMNS, margin, mobileMargin } from '$lib';
···
 		getHideProfile,
 		getName,
 		isTyping,
-		setPositionOfNewItem
+		setPositionOfNewItem,
+		validateLink
 	} from '../helper';
 	import Profile from './Profile.svelte';
 	import type { Item, WebsiteData } from '../types';
···
 
 	let maxHeight = $derived(items.reduce((max, item) => Math.max(max, getY(item) + getH(item)), 0));
 
-	function newCard(type: string = 'link') {
+	function newCard(type: string = 'link', cardData?: any) {
 		// close sidebar if open
 		const popover = document.getElementById('mobile-menu');
 		if (popover) {
···
 			mobileX: 0,
 			mobileY: 0,
 			cardType: type,
-			cardData: {},
+			cardData: cardData ?? {},
 			version: 2,
 			page: data.page
 		};
···
 
 	let debugPoint = $state({ x: 0, y: 0 });
 
+	let linkPopoverOpen = $state(false);
+
 	function getDragXY(
 		e: DragEvent & {
 			currentTarget: EventTarget & HTMLDivElement;
···
 		}
 		return { x: gridX, y: gridY };
 	}
-</script>
 
-<svelte:body
-	onpaste={(event) => {
-		if (isTyping()) return;
+	let linkValue = $state('');
 
-		const text = event.clipboardData?.getData('text/plain');
-
-		if (!text) return;
+	function addLink(url: string) {
+		let link = validateLink(url);
+		if (!link) {
+			toast.error('invalid link');
+			return;
+		}
 
-		try {
-			const url = new URL(text);
+		let item: Item = {
+			id: TID.nextStr(),
+			x: 0,
+			y: 0,
+			w: 2,
+			h: 2,
+			mobileH: 4,
+			mobileW: 4,
+			mobileX: 0,
+			mobileY: 0,
+			cardType: '',
+			cardData: {}
+		};
 
-			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;
 
-			newItem.item = item;
+		console.log(AllCardDefinitions.toSorted(
+			(a, b) => (b.urlHandlerPriority ?? 0) - (a.urlHandlerPriority ?? 0)
+		));
 
-			for (const cardDef of AllCardDefinitions) {
-				if (cardDef.onUrlHandler?.(text, item)) {
-					item.cardType = cardDef.type;
-					saveNewItem();
-					return;
-				}
+		for (const cardDef of AllCardDefinitions.toSorted(
+			(a, b) => (b.urlHandlerPriority ?? 0) - (a.urlHandlerPriority ?? 0)
+		)) {
+			if (cardDef.onUrlHandler?.(link, item)) {
+				item.cardType = cardDef.type;
+				saveNewItem();
+				break;
 			}
+		}
 
-			newItem = {};
-		} catch (e) {
-			return;
+		newItem = {};
+
+		if(linkValue === url) {
+			linkValue = '';
+			linkPopoverOpen = false;
 		}
+	}
+</script>
+
+<svelte:body
+	onpaste={(event) => {
+		if (isTyping()) return;
+
+		const text = event.clipboardData?.getData('text/plain');
+		const link = validateLink(text, false);
+		if (!link) return;
+
+		addLink(link);
 	}}
 />
 
···
 						/></svg
 					>
 				</Button>
-				<Button
-					size="iconLg"
-					variant="ghost"
-					class="backdrop-blur-none"
-					onclick={() => {
-						newCard('link');
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="-2 -2 28 28"
-						stroke-width="1.5"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
-						/>
-					</svg>
-				</Button>
+
+				<Popover sideOffset={16} bind:open={linkPopoverOpen} class="bg-base-100 dark:bg-base-900">
+					{#snippet child({ props })}
+						<Button
+							size="iconLg"
+							variant="ghost"
+							class="backdrop-blur-none"
+							onclick={() => {
+								newCard('link');
+							}}
+							{...props}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="-2 -2 28 28"
+								stroke-width="1.5"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+								/>
+							</svg>
+						</Button>
+					{/snippet}
+					<Input
+						spellcheck={false}
+						type="url"
+						bind:value={linkValue}
+						onkeydown={(event) => {
+							if (event.code === 'Enter') {
+								addLink(linkValue);
+								event.preventDefault();
+							}
+						}}
+						placeholder="Enter link"
+					/>
+					<Button onclick={() => addLink(linkValue)} size="icon"
+						><svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="size-6"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+						</svg>
+					</Button>
+				</Popover>
 
 				<Button
 					size="iconLg"