From 4183b905b1f142aff471b0d7dc831637823dee58 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Mon, 26 May 2025 12:20:13 +0200
Subject: [PATCH] add user profile editing

---
 src/lib/components/Avatar.svelte           |  75 +++++++++++
 src/lib/components/ChatMessage.svelte      |   5 +-
 src/lib/components/EditProfileModal.svelte | 138 +++++++++++++++++++++
 src/lib/components/Image.svelte            |  10 +-
 src/lib/components/ReplyMessage.svelte     |   5 +-
 src/routes/+layout.ts                      |   2 +-
 src/routes/+page.svelte                    |  30 +----
 7 files changed, 233 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/components/Avatar.svelte
 create mode 100644 src/lib/components/EditProfileModal.svelte

diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte
new file mode 100644
index 0000000..ad03029
--- /dev/null
+++ b/src/lib/components/Avatar.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import { cn } from '@fuxui/base';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Loaded } from 'jazz-tools';
+	import { type Image as ImageType } from '$lib/schema';
+	import Image from './Image.svelte';
+	import { browser } from '$app/environment';
+
+	let {
+		src,
+		alt,
+		fallback,
+		ref = $bindable(null),
+
+		image,
+
+		imageRef = $bindable(null),
+		imageClass,
+
+		fallbackRef = $bindable(null),
+		fallbackClass,
+
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>> & {
+		fallback?: string;
+		imageRef?: HTMLImageElement | null;
+		imageClass?: string;
+		fallbackRef?: HTMLElement | null;
+		fallbackClass?: string;
+
+		image?: Loaded<typeof ImageType>;
+
+		src?: string;
+		alt?: string;
+
+		useThemeColor?: boolean;
+	} = $props();
+</script>
+
+<div
+	class={cn(
+		'border-base-300 bg-base-200 text-base-900 dark:border-base-800 dark:bg-base-900 dark:text-base-50 relative isolate flex size-10 shrink-0 overflow-hidden rounded-full border',
+		className
+	)}
+	{...restProps}
+	bind:this={ref}
+>
+	{#if fallback}
+		<span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-medium"
+			>{fallback}</span
+		>
+	{:else}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			class="text-base-400 dark:text-base-600 absolute top-1/2 left-1/2 mt-[15%] size-full -translate-x-1/2 -translate-y-1/2"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	{/if}
+	{#if (src || image) && browser}
+		<Image
+			{src}
+			{image}
+			class="z-10 aspect-square size-full object-cover"
+		/>
+	{/if}
+</div>
diff --git a/src/lib/components/ChatMessage.svelte b/src/lib/components/ChatMessage.svelte
index 42d15c7..7bb4410 100644
--- a/src/lib/components/ChatMessage.svelte
+++ b/src/lib/components/ChatMessage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ImageDefinition, type Loaded } from 'jazz-tools';
 	import { Message, MyAppAccount, MyAppProfile, Reaction, Space } from '$lib/schema';
-	import { Avatar, cn, Prose } from '@fuxui/base';
+	import { cn, Prose } from '@fuxui/base';
 	import { CoState } from 'jazz-svelte';
 	import RelativeTime from 'svelte-relative-time';
 	import { isSpaceAdmin, publicGroup } from '$lib/utils';
@@ -12,6 +12,7 @@
 	import { useCurrentRoute } from '$lib/context';
 	import { view } from '../../routes/[spaceId]/view.svelte';
 	import Image from './Image.svelte';
+	import Avatar from './Avatar.svelte';
 
 	let {
 		message,
@@ -148,7 +149,7 @@
 		onpointerleave={() => (hovering = false)}
 	>
 		{#if !isSameUser}
-			<Avatar class="size-8 sm:size-10" src={profile?.current?.imageUrl} />
+			<Avatar class="size-8 sm:size-10" src={profile?.current?.imageUrl} image={profile?.current?.image} />
 		{:else}
 			<div class="size-8 shrink-0 sm:size-10"></div>
 		{/if}
diff --git a/src/lib/components/EditProfileModal.svelte b/src/lib/components/EditProfileModal.svelte
new file mode 100644
index 0000000..e6ca02f
--- /dev/null
+++ b/src/lib/components/EditProfileModal.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { MyAppAccount } from '$lib/schema';
+	import { Button, Input, Modal, Paragraph, Subheading } from '@fuxui/base';
+	import { AccountCoState } from 'jazz-svelte';
+	import Avatar from './Avatar.svelte';
+	import { createImage } from 'jazz-browser-media-images';
+	import { publicGroup } from '$lib/utils';
+	import { getProfile, resolveHandle } from '$lib/bluesky';
+
+	let {
+		open = $bindable(false)
+	}: {
+		open: boolean;
+	} = $props();
+
+	const me = new AccountCoState(MyAppAccount, {
+		resolve: {
+			profile: true,
+			root: true
+		}
+	});
+
+	let username = $derived(me.current?.profile?.name ?? '');
+
+	// async function editProfile() {
+	// 	editProfileModalOpen = false;
+
+	// 	let did = await resolveHandle({ handle });
+	// 	let profile = await getProfile({ did });
+
+	// 	if (!me.current?.profile) return;
+	// 	me.current.profile.name = profile.handle;
+
+	// 	if (profile.avatar) {
+	// 		me.current.profile.imageUrl = profile.avatar;
+	// 	}
+	// }
+
+	let isProcessingImage = $state(false);
+
+	let handle = $state('');
+
+	async function processImageFile(file: File) {
+		if (!me.current) return;
+		isProcessingImage = true;
+		const image = await createImage(file, {
+			owner: publicGroup('reader'),
+			maxSize: 1024
+		});
+
+		me.current.profile.image = image;
+		isProcessingImage = false;
+	}
+
+	let loadingBlueskyInfo = $state(false);
+
+	async function editProfile() {
+		loadingBlueskyInfo = true;
+
+		let did = await resolveHandle({ handle });
+		let profile = await getProfile({ did });
+
+		if (!me.current?.profile) return;
+		me.current.profile.name = profile.handle;
+
+		if (profile.avatar) {
+			me.current.profile.imageUrl = profile.avatar;
+			me.current.profile.image = undefined;
+		}
+		loadingBlueskyInfo = false;
+	}
+</script>
+
+<Modal bind:open>
+	<div class="flex flex-col gap-4">
+		<Subheading>Edit your profile</Subheading>
+
+		<div class="flex flex-col gap-2">
+			<button
+				onclick={() => {
+					// upload new image
+					// new file input
+					if (!me.current) return;
+					me.current.profile.imageUrl = undefined;
+
+					const input = document.createElement('input');
+					input.type = 'file';
+					input.accept = 'image/*';
+					input.onchange = (e) => {
+						const file = (e.target as HTMLInputElement).files?.[0];
+						if (!file) return;
+						processImageFile(file);
+					};
+					input.click();
+				}}
+				class="w-fit cursor-pointer hover:opacity-80"
+			>
+				{#if isProcessingImage}
+					<div class="bg-accent-500/20 size-24 animate-pulse rounded-full"></div>
+				{:else}
+					{#key me.current?.profile.imageUrl || me.current?.profile.image}
+						<Avatar
+							image={me.current?.profile?.image}
+							src={me.current?.profile?.imageUrl}
+							class="size-24"
+						/>
+					{/key}
+				{/if}
+			</button>
+			<span class="text-base-500 text-sm">click avatar to change</span>
+		</div>
+
+		<Paragraph>Username</Paragraph>
+		<Input
+			bind:value={username}
+			onkeydown={() => {
+				if (me.current) me.current.profile.name = username;
+			}}
+			onblur={() => {
+				if (me.current) me.current.profile.name = username;
+			}}
+		/>
+
+		<div class="text-base-800 dark:text-base-200 my-4 text-sm">Or set from bluesky handle:</div>
+
+		<form
+			class="flex gap-2"
+			onsubmit={() => {
+				editProfile();
+			}}
+		>
+			<Input bind:value={handle} class="grow" />
+			<Button variant="secondary" type="submit" disabled={loadingBlueskyInfo}>
+				{loadingBlueskyInfo ? 'Loading...' : 'Save'}
+			</Button>
+		</form>
+	</div>
+</Modal>
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index 981a0bb..f08a7e5 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -5,9 +5,10 @@
 
 	let {
 		image,
+		src,
 		class: className,
 		...rest
-	}: { image?: Loaded<typeof Image>; class?: string } = $props();
+	}: { image?: Loaded<typeof Image>; src?: string; class?: string } = $props();
 
 	onMount(() => {});
 
@@ -15,8 +16,13 @@
 
 	$effect(() => {
 		if (loaded) return;
-		if (!image) return;
 		if (!imageRef) return;
+		if (src && !image) {
+			imageRef.src = src;
+			loaded = true;
+			return;
+		}
+		if (!image) return;
 
 		loaded = true;
 		const highestRes = ImageDefinition.highestResAvailable(image);
diff --git a/src/lib/components/ReplyMessage.svelte b/src/lib/components/ReplyMessage.svelte
index d488b8c..7e51f09 100644
--- a/src/lib/components/ReplyMessage.svelte
+++ b/src/lib/components/ReplyMessage.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Message, MyAppProfile } from '$lib/schema';
-	import { Avatar, cn, Prose } from '@fuxui/base';
+	import { cn, Prose } from '@fuxui/base';
 	import { CoState } from 'jazz-svelte';
 	import { getContext } from 'svelte';
 	import { view } from '../../routes/[spaceId]/view.svelte';
+	import Avatar from './Avatar.svelte';
 
 	let {
 		replyToId
@@ -42,7 +43,7 @@
 		</svg>
 
 		{#if profile?.current?.imageUrl}
-			<Avatar class="size-4 z-10" src={profile?.current?.imageUrl} />
+			<Avatar class="size-4 z-10" src={profile?.current?.imageUrl} image={profile?.current?.image} />
 		{/if}
 
 		<span
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index e4b3dda..a3d1578 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1 +1 @@
-// export const ssr = false;
+export const ssr = false;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a8787ac..fc3f3ca 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Avatar, Button, cn, Heading, Input, Modal, Subheading, ThemeToggle } from '@fuxui/base';
+	import { Button, cn, Heading, Input, Modal, Subheading, ThemeToggle } from '@fuxui/base';
 	import { AccountCoState, CoState } from 'jazz-svelte';
 	import { LastReadList, MyAppAccount, SpaceList } from '$lib/schema';
 	import { createSpace } from '$lib/utils';
@@ -9,6 +9,8 @@
 	import SpaceItem from '$lib/components/SpaceItem.svelte';
 	import CreateSpaceModal from '$lib/components/CreateSpaceModal.svelte';
 	import SpaceSelection from '$lib/SpaceSelection.svelte';
+	import EditProfileModal from '$lib/components/EditProfileModal.svelte';
+	import Avatar from '$lib/components/Avatar.svelte';
 
 	const me = new AccountCoState(MyAppAccount, {
 		resolve: {
@@ -51,21 +53,6 @@
 	);
 
 	let editProfileModalOpen = $state(false);
-	let handle = $state('');
-
-	async function editProfile() {
-		editProfileModalOpen = false;
-
-		let did = await resolveHandle({ handle });
-		let profile = await getProfile({ did });
-
-		if (!me.current?.profile) return;
-		me.current.profile.name = profile.handle;
-
-		if (profile.avatar) {
-			me.current.profile.imageUrl = profile.avatar;
-		}
-	}
 
 	let imageUrl = $derived.by(() => {
 		if (!me.current?.profile?.image) return;
@@ -97,10 +84,9 @@
 	>
 		<div class="flex w-full flex-col items-end justify-center gap-2">
 			<div class="mx-auto flex items-center gap-2">
-				<Avatar src={me.current?.profile.imageUrl} />
 				<Heading>
 					Hello,
-					<span class="font-bold">{me.current?.profile.name} </span>
+					<span class="font-bold">{me.current?.profile.name}</span>
 				</Heading>
 			</div>
 		</div>
@@ -195,13 +181,7 @@
 	</div>
 </div>
 
-<Modal bind:open={editProfileModalOpen}>
-	<form onsubmit={editProfile} class="flex flex-col gap-4">
-		<Subheading>Set user info from bluesky handle</Subheading>
-		<Input bind:value={handle} />
-		<Button type="submit">set</Button>
-	</form>
-</Modal>
+<EditProfileModal bind:open={editProfileModalOpen} />
 
 <CreateSpaceModal bind:open={createNewSpaceModalOpen} {createNewSpace} />
 
-- 
2.51.2