message styles

3 files changed, 58 insertions, 31 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index bc19a9df..4d4f3b13 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -4,6 +4,7 @@
 	import { t } from '$lib/translations';
 	import { f, sat, sats } from '$lib/utils';
 	import { sign, send, encrypt, decrypt } from '$lib/nostr';
+	import { event as e, password } from '$lib/store';
 	import { browser } from '$app/environment';
 
 	export let data;
@@ -13,8 +14,25 @@
 	let latest = [];
 	let i = 0;
 
-	onMount(async () => {
-		if (!browser) return;
+	e.subscribe(async (event) => {
+		if (event?.recipient.id === user.id && !~latest.findIndex((m) => m.id === event.id)) {
+			event.content = await decrypt({ event, user });
+
+			let i = latest.findIndex((m) => m.pubkey === event.pubkey);
+
+			if (~i) latest.splice(i, 1);
+			else latest.pop();
+
+			console.log(latest);
+			latest.unshift(event);
+
+			latest = latest;
+		}
+	});
+
+	$: initialize($password);
+	let initialize = async (p) => {
+		if (!p) return;
 		while (latest.length < 3 && i < messages.length) {
 			let event = messages[i];
 			let k = event.author.id === user.id ? event.recipient.pubkey : event.author.pubkey;
@@ -27,7 +45,7 @@
 		}
 
 		latest = latest;
-	});
+	};
 </script>
 
 <div class="space-y-8">
diff --git a/src/routes/(app)/[username]/messages/+page.svelte b/src/routes/(app)/[username]/messages/+page.svelte
index f8f64aea..397d07ac 100644
--- a/src/routes/(app)/[username]/messages/+page.svelte
+++ b/src/routes/(app)/[username]/messages/+page.svelte
@@ -2,7 +2,7 @@
 	import { browser } from '$app/environment';
 	import { t } from '$lib/translations';
 	import { format, parseISO } from 'date-fns';
-	import { scale } from 'svelte/transition';
+	import { scale, fade } from 'svelte/transition';
 	import { enhance } from '$app/forms';
 	import { Avatar, Icon } from '$comp';
 	import { back, fail, focus } from '$lib/utils';
@@ -14,18 +14,24 @@
 	export let data;
 
 	let { messages, subject, user } = data;
-	let input, pane, ready;
+	let input, pane;
 
 	$: initialize($password);
 	let initialize = async (p) => {
 		if (!p) return;
-		ready = true;
+		await Promise.all(
+			messages.map(async (event) => (event.message = await decrypt({ event, user })))
+		);
+
+		messages = messages;
 		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
 	};
 
-	e.subscribe((ev) => {
-		if (ev?.recipient.id === user.id && !~messages.findIndex((m) => m.id === ev.id)) {
-			messages.push(ev);
+	e.subscribe(async (event) => {
+		let found = ~messages.findIndex((m) => m.id === event?.id);
+		if (event?.recipient.id === user.id && !found) {
+			event.message = await decrypt({ event, user });
+			messages.push(event);
 			messages = messages;
 			tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
 		}
@@ -58,6 +64,7 @@
 
 			sent = true;
 		} catch (e) {
+			console.log(e);
 			fail('Failed to send message');
 		}
 
@@ -67,38 +74,40 @@
 </script>
 
 <div class="container max-w-xl mx-auto px-4">
-	{#if messages.length && ready}
-		<div
-			class="max-h-[calc(40vh)] overflow-y-scroll scrollbar-thin scrollbar-thumb-[#F2F6FC] scrollbar-track-white pr-8"
-			bind:this={pane}
-		>
-			{#each messages as event}
-				{@const ours = event.pubkey === user.pubkey}
-				{@const theirs = !ours}
-				<div class="flex gap-2" class:flex-row-reverse={theirs} class:justify-end={theirs}>
+	<div
+		class="h-[40vh] max-h-[40vh] overflow-y-scroll scrollbar-thin scrollbar-thumb-[#F2F6FC] scrollbar-track-white pr-8"
+		bind:this={pane}
+	>
+		{#each messages as { id, author, message, created_at, pubkey }}
+			{@const ours = pubkey === user.pubkey}
+			{@const theirs = !ours}
+
+			{#if message}
+				<div
+					class="flex gap-2"
+					class:flex-row-reverse={theirs}
+					class:justify-end={theirs}
+					in:fade={{ duration: 150 }}
+				>
 					<div
 						class="rounded-2xl px-4 py-2 max-w-[300px] mb-1 text-lg"
 						class:ours
 						class:theirs
-						:key={event.id}
+						:key={id}
 					>
-						{#await decrypt({ event, user })}
-							-
-						{:then message}
-							{message}
-						{/await}
+						{message}
 					</div>
 					<div class="mt-auto">
-						<Avatar user={event.author} size={'12'} />
+						<Avatar user={author} size={'12'} />
 					</div>
 				</div>
 				<div class="text-sm text-gray-400 mb-6" class:text-right={ours}>
-					{format(new Date(event.created_at * 1000), 'MMM d')},
-					{format(new Date(event.created_at * 1000), 'h:mm aa')}
+					{format(new Date(created_at * 1000), 'MMM d')},
+					{format(new Date(created_at * 1000), 'h:mm aa')}
 				</div>
-			{/each}
-		</div>
-	{/if}
+			{/if}
+		{/each}
+	</div>
 
 	<form method="POST" class="space-y-5" on:submit|preventDefault={submit}>
 		<input type="hidden" name="requester_id" value={user.id} />
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 5a376f9f..5f37cad5 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -99,7 +99,7 @@
 			<div>
 				{#each contacts as c}
 					<a href={`/send/${c.username}`}>
-						<div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
+						<div class="border-b p-2 last:border-b-0 hover:bg-gray-100 rounded-2xl">
 							<div class="flex">
 								<div>
 									<div class="flex">