more cleanup

src/lib/cards/BigSocialCard/index.ts

···
 		const platform = href ? detectPlatform(href) : null;
 		if (!href || !platform) return item;
 		item.cardData = {
-			href,
+			...item.cardData,
 			platform,
 			color: platformsData[platform].hex
 		};

src/lib/cards/EmbedCard/index.ts

···
 import type { CardDefinition } from '../types';
 import CreateEmbedCardModal from './CreateEmbedCardModal.svelte';
 import EmbedCard from './EmbedCard.svelte';
-import SidebarItemEmbedCard from './SidebarItemEmbedCard.svelte';
 
 export const EmbedCardDefinition = {
 	type: 'embed',
 	contentComponent: EmbedCard,
 	creationModalComponent: CreateEmbedCardModal,
-	sidebarComponent: SidebarItemEmbedCard,
+
 	createNew: (card) => {
 		card.w = 4;
 		card.h = 4;

src/lib/cards/ImageCard/ImageCardSettings.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()) {
+			item.cardData.href = '';
+			item.cardData.domain = '';
+		}
+
+		let link = validateLink(linkValue);
+		if (!link) {
+			toast.error('Invalid link');
+			return;
+		}
+
+		item.cardData.href = link;
+		item.cardData.domain = new URL(link).hostname;
+
+		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/ImageCard/index.ts

···
 import { uploadBlob } from '$lib/oauth/utils';
 import type { CardDefinition } from '../types';
 import ImageCard from './ImageCard.svelte';
+import ImageCardSettings from './ImageCardSettings.svelte';
 
 export const ImageCardDefinition = {
 	type: 'image',
···
 		}
 
 		return item;
-	}
+	},
+	settingsComponent: ImageCardSettings
 } as CardDefinition & { type: 'image' };

src/lib/cards/LinkCard/index.ts

···
 		if (!href) return item;
 
 		item.cardData = {
-			href,
+			...item.cardData,
 			hasFetched: false
 		};
 		return item;

src/lib/cards/LivestreamCard/LivestreamEmbedCard.svelte

···
 <script lang="ts">
 	import type { ContentComponentProps } from '../types';
 
-	let {
-		item,
-		sandbox
-	}: ContentComponentProps & {
-		sandbox: string;
-	} = $props();
+	let { item }: ContentComponentProps = $props();
 
 	// svelte-ignore state_referenced_locally
-	let domain = new URL(item.cardData.href).hostname;
+	let domain = new URL(item.cardData.embed).hostname;
 </script>
 
 {#if domain === 'stream.place'}
 	<iframe
-		src={item.cardData.href}
+		src={item.cardData.embed}
 		sandbox="allow-scripts allow-same-origin"
 		referrerpolicy="no-referrer"
 		class="absolute inset-0 h-full w-full"

src/lib/cards/LivestreamCard/index.ts

···
 import type { CardDefinition } from '../types';
 import LivestreamCard from './LivestreamCard.svelte';
 import LivestreamEmbedCard from './LivestreamEmbedCard.svelte';
-import SidebarItemEmbedLivestreamCard from './SidebarItemEmbedLivestreamCard.svelte';
 import SidebarItemLivestreamCard from './SidebarItemLivestreamCard.svelte';
 
 export const LivestreamCardDefitition = {
···
 		card.h = 4;
 		card.mobileH = 8;
 		card.mobileW = 8;
+
+		card.cardType = 'latestLivestream';
 	},
 	loadData: async (items, { did }) => {
 		const records = await listRecords({ did, collection: 'place.stream.livestream', limit: 3 });
···
 		}
 
 		return latestLivestream;
-	}
+	},
+
+	onUrlHandler: (url, item) => {
+		console.log(url, 'https://stream.place/' + client.profile?.handle);
+		if (url === 'https://stream.place/' + client.profile?.handle) {
+			item.w = 4;
+			item.h = 4;
+			item.mobileH = 8;
+			item.mobileW = 8;
+			item.cardData.href = 'https://stream.place/' + client.profile?.handle;
+			return item;
+		}
+	},
+
+	canChange: (item) => item.cardData.href === 'https://stream.place/' + client.profile?.handle,
+
+	urlHandlerPriority: 5,
+
+	name: 'stream.place Card'
 } as CardDefinition & { type: 'latestLivestream' };
 
 export const LivestreamEmbedCardDefitition = {
 	type: 'livestreamEmbed',
 	contentComponent: LivestreamEmbedCard,
-	sidebarComponent: SidebarItemEmbedLivestreamCard,
 	createNew: (card) => {
 		card.w = 4;
 		card.h = 2;
···
 		card.mobileH = 4;
 
 		card.cardData = {
-			href: 'https://stream.place/embed/' + client.profile?.handle
+			href: 'https://stream.place/' + client.profile?.handle,
+			embed: 'https://stream.place/embed/' + client.profile?.handle
 		};
 	}
+	// canChange: (item) => item.cardData.href === 'https://stream.place/' + client.profile?.handle,
+
+	// change: (item) => {
+	// 	item.cardData.embed = 'https://stream.place/embed/' + client.profile?.handle;
+	// },
 } as CardDefinition & { type: 'livestreamEmbed' };

src/lib/cards/TextCard/TextCardSettings.svelte

···
 </script>
 
 <div class="flex flex-col gap-2">
-	<ToggleGroup
-		type="single"
-		bind:value={
-			() => {
-				return item.cardData.textAlign ?? 'left';
-			},
-			(value) => {
-				if (!value) return;
-				item.cardData.textAlign = value;
-			}
-		}
-	>
-		<ToggleGroupItem size="sm" value="left" class={classes}
-			><svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg
-			></ToggleGroupItem
-		>
-		<ToggleGroupItem size="sm" value="center" class={classes}
-			><svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg
-			></ToggleGroupItem
-		>
-		<ToggleGroupItem size="sm" value="right" class={classes}
-			><svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg
-			></ToggleGroupItem
-		>
-	</ToggleGroup>
 
 	<ToggleGroup
 		type="single"
···
 			></ToggleGroupItem
 		>
 	</ToggleGroup>
+	
+	<ToggleGroup
+		type="single"
+		bind:value={
+			() => {
+				return item.cardData.textAlign ?? 'left';
+			},
+			(value) => {
+				if (!value) return;
+				item.cardData.textAlign = value;
+			}
+		}
+	>
+		<ToggleGroupItem size="sm" value="left" class={classes}
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg
+			></ToggleGroupItem
+		>
+		<ToggleGroupItem size="sm" value="center" class={classes}
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg
+			></ToggleGroupItem
+		>
+		<ToggleGroupItem size="sm" value="right" class={classes}
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg
+			></ToggleGroupItem
+		>
+	</ToggleGroup>
+
 
 	<div>
 		<Button

src/lib/website/EditableWebsite.svelte

···
 		}
 
 		let item = createEmptyCard(data.page);
+		item.cardType = type;
 
 		item.cardData = cardData ?? {};
 
···
 		const objectUrl = URL.createObjectURL(compressedFile);
 
 		let item = createEmptyCard(data.page);
-		
+
 		item.cardType = 'image';
 		item.cardData = {
-				blob: compressedFile,
-				objectUrl
+			blob: compressedFile,
+			objectUrl
 		};
 
 		// If grid position is provided