allow editing profile in place

src/lib/cards/BaseCard/BaseEditingCard.svelte

···
 	import { AllCardDefinitions, CardDefinitionsByType, getColor } from '..';
 	import { COLUMNS } from '$lib';
 	import { getCanEdit, getIsMobile } from '$lib/website/context';
-	import PlainTextEditor from '../utils/PlainTextEditor.svelte';
+	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 
 	let colorsChoices = [
 		{ class: 'text-base-500', label: 'base' },
···
 			<PlainTextEditor
 				class="text-base-900 dark:text-base-50 w-fit text-base font-semibold"
 				key="label"
-				bind:item
+				bind:contentDict={item.cardData}
 				placeholder="Label"
 			/>
 		</div>

src/lib/cards/LinkCard/EditingLinkCard.svelte

···
 	import { getImage } from '$lib/helper';
 	import { getDidContext, getIsMobile } from '$lib/website/context';
 	import type { ContentComponentProps } from '../types';
-	import PlainTextEditor from '../utils/PlainTextEditor.svelte';
+	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 
 	let { item = $bindable() }: ContentComponentProps = $props();
 
···
 				<PlainTextEditor
 					class="text-base-900 dark:text-base-50 line-clamp-2 text-lg font-bold"
 					key="title"
-					bind:item
+					bind:contentDict={item.cardData}
 					placeholder="Title here"
 				/>
 			{:else}

src/lib/cards/SectionCard/EditingSectionCard.svelte

···
 	import type { Item } from '$lib/types';
 	import { textAlignClasses, textSizeClasses, verticalAlignClasses } from '.';
 	import type { ContentComponentProps } from '../types';
-	import PlainTextEditor from '../utils/PlainTextEditor.svelte';
+	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 
 	let { item = $bindable<Item>() }: ContentComponentProps = $props();
 </script>
···
 		textSizeClasses[(item.cardData.textSize ?? 1) as number]
 	]}
 >
-	<PlainTextEditor bind:item key="text" class="line-clamp-1 w-full" />
+	<PlainTextEditor bind:contentDict={item.cardData} key="text" class="line-clamp-1 w-full" />
 </div>

src/lib/cards/TextCard/EditingTextCard.svelte

···
 	import type { Editor } from '@tiptap/core';
 	import { textAlignClasses, textSizeClasses, verticalAlignClasses } from '.';
 	import type { ContentComponentProps } from '../types';
-	import MarkdownTextEditor from '../utils/MarkdownTextEditor.svelte';
+	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
 	import { cn } from '@foxui/core';
 
 	let { item = $bindable<Item>() }: ContentComponentProps = $props();
···
 		editor?.commands.focus('end');
 	}}
 >
-	<MarkdownTextEditor bind:item bind:editor />
+	<MarkdownTextEditor bind:contentDict={item.cardData} key="text" bind:editor />
 </div>

src/lib/cards/YoutubeVideoCard/YoutubeCard.svelte

···
 <script lang="ts">
-	import { videoPlayer } from '../utils/YoutubeVideoPlayer.svelte';
+	import { videoPlayer } from '$lib/components/YoutubeVideoPlayer.svelte';
 	import type { ContentComponentProps } from '../types';
 
 	let { item }: ContentComponentProps = $props();

src/lib/cards/utils/MarkdownTextEditor.svelte src/lib/components/MarkdownTextEditor.svelte

···
 
 	let {
 		editor = $bindable(),
-		item = $bindable(),
+		contentDict = $bindable(),
+		key = 'text',
 		placeholder = '',
-		defaultContent = ''
+		defaultContent = '',
+		class: className
 	}: {
 		editor: Editor | null;
-		item: Item;
+		contentDict: Record<string, any>;
+		key: string;
 		placeholder?: string;
 		defaultContent?: string;
+		class?: string;
 	} = $props();
 
 	const update = async () => {
···
 		});
 		const markdown = turndownService.turndown(html);
 
-		item.cardData.text = markdown;
+		contentDict[key] = markdown;
 	};
 
 	onMount(async () => {
···
 		let json: Content = '';
 
 		try {
-			let html = await marked.parse(item.cardData.text ?? (defaultContent as string));
+			let html = await marked.parse(contentDict[key] ?? (defaultContent as string));
 
 			// parse to json
 			json = generateJSON(html, [
···
 
 			editorProps: {
 				attributes: {
-					class: 'outline-none w-full'
+					class: 'outline-none w-full text-base-600 dark:text-base-400 prose dark:prose-invert prose-a:text-accent-500 prose-a:no-underline'
 				},
 				handleDOMEvents: { drop: () => false }
 			}
···
 	});
 </script>
 
-<div class="w-full cursor-text" bind:this={element}></div>
+<div class={["w-full cursor-text", className]} bind:this={element}></div>
 
 <style>
 	:global(.tiptap p.is-editor-empty:first-child::before) {

src/lib/cards/utils/PlainTextEditor.svelte src/lib/components/PlainTextEditor.svelte

···
 	let editor: Editor | null = $state(null);
 
 	let {
-		item = $bindable(),
+		contentDict = $bindable(),
 		key,
 		class: className,
 		placeholder = '',
 		defaultContent = ''
 	}: {
-		item: Item;
+		contentDict: Record<string, any>;
 		key: string;
 		class?: string;
 		placeholder?: string;
···
 	const update = async () => {
 		if (!editor) return;
 
-		item.cardData[key] = editor.getText();
+		contentDict[key] = editor.getText();
 	};
 
 	onMount(async () => {
···
 				update();
 			},
 
-			content: item.cardData[key] ?? defaultContent,
+			content: contentDict[key] ?? defaultContent,
 
 			editorProps: {
 				attributes: {
 					class: 'outline-none pointer-events-auto'
+				},
+				handleKeyDown: (_view, event) => {
+					// Prevent newlines by blocking Enter key
+					if (event.key === 'Enter') {
+						return true;
+					}
+					return false;
 				}
 			}
 		});

src/lib/helper.ts

···
 	}
 }
 
-export function getImage(objectWithImage: Record<string, any>, did: string, key: string = 'image') {
-	if (!objectWithImage[key]) return;
+export function getImage(
+	objectWithImage: Record<string, any> | undefined,
+	did: string,
+	key: string = 'image'
+) {
+	if (!objectWithImage?.[key]) return;
 
 	if (objectWithImage[key].objectUrl) return objectWithImage[key].objectUrl;
 

src/lib/website/EditableProfile.svelte

···
+<script lang="ts">
+	import type { WebsiteData } from '$lib/types';
+	import { getDescription, getName, getImage, compressImage } from '$lib/helper';
+	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
+	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
+	import type { Editor } from '@tiptap/core';
+
+	let { data = $bindable() }: { data: WebsiteData } = $props();
+
+	let fileInput: HTMLInputElement;
+	let isHoveringAvatar = $state(false);
+	let descriptionEditor: Editor | null = $state(null);
+
+	// Initialize publication if needed
+	$effect(() => {
+		if (!data.publication) {
+			data.publication = {
+				name: getName(data),
+				description: getDescription(data)
+			};
+		} else {
+			if (data.publication.name === undefined) {
+				data.publication.name = getName(data);
+			}
+			if (data.publication.description === undefined) {
+				data.publication.description = getDescription(data);
+			}
+		}
+	});
+
+	async function handleAvatarChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const file = target.files?.[0];
+		if (!file) return;
+
+		try {
+			const compressedBlob = await compressImage(file);
+			const objectUrl = URL.createObjectURL(compressedBlob);
+
+			data.publication ??= {};
+			data.publication.icon = {
+				blob: compressedBlob,
+				objectUrl
+			} as any;
+
+			data = { ...data };
+		} catch (error) {
+			console.error('Failed to process image:', error);
+		}
+	}
+
+	function getAvatarUrl(): string | undefined {
+		const customIcon = getImage(data.publication ?? {}, data.did, 'icon');
+		if (customIcon) return customIcon;
+		return data.profile.avatar;
+	}
+
+	function handleFileInputClick() {
+		fileInput.click();
+	}
+</script>
+
+<div
+	class="mx-auto flex max-w-lg flex-col justify-between px-8 @5xl/wrapper:fixed @5xl/wrapper:h-screen @5xl/wrapper:w-1/4 @5xl/wrapper:max-w-none @5xl/wrapper:px-12"
+>
+	<div class="flex flex-col gap-4 pt-16 pb-8 @5xl/wrapper:h-screen @5xl/wrapper:pt-24">
+		<!-- Avatar with edit capability -->
+		<button
+			type="button"
+			class="group relative size-32 cursor-pointer overflow-hidden rounded-full @5xl/wrapper:size-44"
+			onmouseenter={() => (isHoveringAvatar = true)}
+			onmouseleave={() => (isHoveringAvatar = false)}
+			onclick={handleFileInputClick}
+		>
+			{#if getAvatarUrl()}
+				<img
+					class="border-base-400 dark:border-base-800 size-full rounded-full border object-cover"
+					src={getAvatarUrl()}
+					alt=""
+				/>
+			{:else}
+				<div class="bg-base-300 dark:bg-base-700 size-full rounded-full"></div>
+			{/if}
+
+			<!-- Hover overlay -->
+			<div
+				class={[
+					'absolute inset-0 flex items-center justify-center rounded-full bg-black/50 transition-opacity duration-200',
+					isHoveringAvatar ? 'opacity-100' : 'opacity-0'
+				]}
+			>
+				<div class="text-center text-sm text-white">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="mx-auto mb-1 size-6"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
+						/>
+					</svg>
+					<span>Click to change</span>
+				</div>
+			</div>
+		</button>
+
+		<input
+			bind:this={fileInput}
+			type="file"
+			accept="image/*"
+			class="hidden"
+			onchange={handleAvatarChange}
+		/>
+
+		<!-- Editable Name -->
+		{#if data.publication}
+			<div class="text-4xl font-bold wrap-anywhere">
+				<PlainTextEditor bind:contentDict={data.publication} key="name" placeholder="Your name" />
+			</div>
+		{/if}
+
+		<!-- Editable Description -->
+		<div class="scrollbar -mx-4 grow overflow-x-hidden overflow-y-scroll px-4">
+			{#if data.publication}
+				
+				
+					<MarkdownTextEditor
+						bind:editor={descriptionEditor}
+						bind:contentDict={data.publication}
+						key="description"
+						placeholder="Add a description... (supports markdown)"
+						class=""
+					/>
+			{/if}
+		</div>
+
+		<div class="h-10.5 w-1 @5xl/wrapper:hidden"></div>
+
+		<div class="hidden text-xs font-light @5xl/wrapper:block">
+			made with <a
+				href="https://blento.app"
+				target="_blank"
+				class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
+				>blento</a
+			>
+		</div>
+	</div>
+</div>

src/lib/website/EditableWebsite.svelte

···
 	import { Button, toast, Toaster, Sidebar } from '@foxui/core';
 	import { COLUMNS, margin, mobileMargin } from '$lib';
 	import {
+		checkAndUploadImage,
 		clamp,
 		compactItems,
 		createEmptyCard,
···
 		setPositionOfNewItem,
 		validateLink
 	} from '../helper';
-	import Profile from './Profile.svelte';
+	import EditableProfile from './EditableProfile.svelte';
 	import type { Item, WebsiteData } from '../types';
 	import { innerWidth } from 'svelte/reactivity/window';
 	import EditingCard from '../cards/Card/EditingCard.svelte';
···
 		isSaving = true;
 
 		try {
+			// Upload profile icon if changed
+			if (data.publication?.icon) {
+				await checkAndUploadImage(data.publication, 'icon');
+			}
+
 			await savePage(data, items, publication);
 
 			publication = JSON.stringify(data.publication);
···
 		]}
 	>
 		{#if !getHideProfileSection(data)}
-			<Profile {data} />
+			<EditableProfile bind:data />
 		{/if}
 
 		<div

src/lib/website/Profile.svelte

···
 	import { BlueskyLogin } from '@foxui/social';
 	import { env } from '$env/dynamic/public';
 	import type { WebsiteData } from '$lib/types';
-	import { getDescription, getName } from '$lib/helper';
+	import { getDescription, getImage, getName } from '$lib/helper';
 	import { page } from '$app/state';
 	import type { ActorIdentifier } from '@atcute/lexicons';
 
···
 		{#if data.profile.avatar}
 			<img
 				class="border-base-400 dark:border-base-800 size-32 rounded-full border @5xl/wrapper:size-44"
-				src={data.profile.avatar}
+				src={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
 				alt=""
 			/>
 		{:else}

src/routes/+layout.svelte

···
 	import { ThemeToggle } from '@foxui/core';
 	import { onMount } from 'svelte';
 	import { initClient } from '$lib/atproto';
-	import YoutubeVideoPlayer, { videoPlayer } from '$lib/cards/utils/YoutubeVideoPlayer.svelte';
+	import YoutubeVideoPlayer, { videoPlayer } from '$lib/components/YoutubeVideoPlayer.svelte';
 
 	let { children } = $props();