add message field to user profile pages

9 files changed, 90 insertions, 33 deletions

diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index 7ee774bf..f0b9768f 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -1,30 +1,30 @@
 <script>
 	import { colorTheme } from '$lib/store';
 	import { Icon } from '$comp';
+	import { runner } from '$lib/utils';
 
 	export let user;
 	export let size = 32;
 	export let disabled = false;
-	export let src = undefined;
 
 	$: s = size.toString();
 	$: link = user ? `/${user.username}` : '/';
+
+	let src =
+		'/api/public/' +
+		(user?.profile
+			? user.username + '-profile.webp'
+			: 'runners/' + runner(user?.pubkey || parseInt(Math.random() * 255).toString(16)));
 </script>
 
 <a href={link} class:pointer-events-none={disabled}>
 	<div
 		class="w-{s} h-{s} rounded-full border-4 border-white overflow-hidden bg-gradient-to-r {$colorTheme} flex justify-center items-center"
 	>
-		{#if user?.profile}
-			<img
-				src={`/api/public/${user.username}-profile.webp`}
-				class="w-full h-full object-cover object-center overflow-hidden"
-				alt={user.username}
-			/>
-		{:else if src}
-			<img {src} class="w-full h-full object-cover object-center overflow-hidden" alt="Avatar" />
-		{:else}
-			<Icon icon="logo-symbol-white" style="w-4/5" />
-		{/if}
+		<img
+			{src}
+			class="w-full h-full object-cover object-center overflow-hidden"
+			alt={user.username}
+		/>
 	</div>
 </a>
diff --git a/src/components/Feed.svelte b/src/components/Feed.svelte
index 973afa19..9f09630a 100644
--- a/src/components/Feed.svelte
+++ b/src/components/Feed.svelte
@@ -5,12 +5,18 @@
 	import { runner } from '$lib/utils';
 	export let events;
 
-	let distance = (d) => {
-		let diff = Math.round(Date.now() / 1000) - d;
-		return diff > 3600
-			? Math.round(diff / 3600) + 'd'
-			: diff > 60
-			? Math.round(diff / 60) + 'm'
+	let distance = (date) => {
+		let m = 60;
+		let h = 60 * m;
+		let d = 24 * h;
+
+		let diff = Math.round(Date.now() / 1000) - date;
+		return diff > d
+			? Math.round(diff / d) + 'd'
+			: diff > h
+			? Math.round(diff / h) + 'h'
+			: diff > m
+			? Math.round(diff / m) + 'm'
 			: diff > 2
 			? diff + 's'
 			: 'now';
@@ -24,20 +30,20 @@
 {#if browser}
 	<VirtualScroll data={events} key="id" let:data pageMode={true} estimateSize={200}>
 		<div class="flex border-b py-4 text-sm lg:text-lg text-secondary" :key={data.id}>
-			<a href={`/${data.pubkey}`}>
+			<a href={`/${data.user.anon ? data.user.pubkey : data.user.username}`}>
 				<div class="mb-auto mr-2">
 					<div class="md:hidden">
-						<Avatar size={12} src={`/api/public/runners/${runner(data.pubkey)}`} disabled={true} />
+						<Avatar size={12} user={data.user} disabled={true} />
 					</div>
 					<div class="hidden md:block">
-						<Avatar size={20} src={`/api/public/runners/${runner(data.pubkey)}`} disabled={true} />
+						<Avatar size={20} user={data.user} disabled={true} />
 					</div>
 				</div>
 			</a>
 
 			<div class="grow" style={`max-width: ${w - 100}px`}>
 				<div class="w-full flex pb-1 text-black">
-					<div>{data.pubkey.substr(0, 6)}</div>
+					<div>{data.user.username}</div>
 					<div class="text-secondary">&nbsp;{distance(data.seen)}</div>
 				</div>
 				<div class="break-words">
diff --git a/src/lib/socket.js b/src/lib/socket.js
index d43af082..4f5770d3 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -13,9 +13,11 @@ import {
 import { success, sat } from '$lib/utils';
 import { PUBLIC_SOCKET } from '$env/static/public';
 import { invalidate } from '$app/navigation';
+import { browser } from '$app/environment';
 
 let socket, token;
-let events = get($events);
+let le = browser && localStorage.getItem('events');
+let events = le && le !== 'undefined' ? JSON.parse(le) : {};
 delete events.q;
 events.q = Object.keys(events);
 
@@ -40,7 +42,11 @@ export const messages = (data) => ({
 		events[data.id] = data;
 		events.q.push(data.id);
 		$events.set(events);
-		if (events.q.length > 500) delete events[events.q.shift()];
+		while (events.q.length > 10000) delete events[events.q.shift()];
+		localStorage.setItem(
+			'events',
+			JSON.stringify(events.q.slice(-100).reduce((a, b) => (a = { ...a, [b]: events[b] }), {}))
+		);
 	},
 
 	rate() {
diff --git a/src/lib/store.js b/src/lib/store.js
index 34e8dcca..1a1a88c2 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -54,5 +54,5 @@ export const last = writable();
 export const request = writable();
 export const invoice = writable();
 export const txns = persistLocal('transactions', []);
-export const events = persistLocal('events', {});
+export const events = writable({});
 export const password = writable();
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 14646ad0..82d5b9cf 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -11,7 +11,7 @@ export function scroll(section) {
 
 const base = browser ? '' : PUBLIC_COINOS_URL;
 export const runner = (k) => {
-	return Math.round(((parseInt(k[0], 16) - 1) / 15) * 7) + 1 + '.webp';
+	return Math.ceil((parseInt(k.substr(0, 2), 16) / 256) * 20) + '.webp';
 };
 
 export const g = (url, fetch, headers) =>
diff --git a/src/routes/(app)/[username]/+layout.server.js b/src/routes/(app)/[username]/+layout.server.js
index a907f7de..f5bf338e 100644
--- a/src/routes/(app)/[username]/+layout.server.js
+++ b/src/routes/(app)/[username]/+layout.server.js
@@ -5,7 +5,7 @@ export let load = async ({ params: { username } }) => {
 	try {
 		return { subject: await get(`/users/${username}`) };
 	} catch (e) {
-		if (username.length === 64) return { subject: { username } };
+		if (username.length === 64) return { subject: { username, pubkey: username } };
 		throw error(500, 'Unable to retrieve user account data');
 	}
 };
diff --git a/src/routes/(app)/[username]/+page.server.js b/src/routes/(app)/[username]/+page.server.js
index 547f754f..442b4eb5 100644
--- a/src/routes/(app)/[username]/+page.server.js
+++ b/src/routes/(app)/[username]/+page.server.js
@@ -2,10 +2,9 @@ import { get } from '$lib/utils';
 import Qr from 'qrcode-base64';
 
 export async function load({ params, parent, url }) {
-	let { user } = await parent();
-	let pubkey;
-	if (user) ({ pubkey } = user);
-	else pubkey = params.username;
+	let { subject } = await parent();
+	let { pubkey } = subject;
+	if (!pubkey) pubkey = params.username;
 
 	let { username } = params;
 	let text = `${encodeURI(username)}@${url.hostname}`;
@@ -18,5 +17,10 @@ export async function load({ params, parent, url }) {
 		console.log(e);
 	}
 
+	events.map((e) => {
+		e.seen = e.created_at;
+		e.user = subject;
+	});
+
 	return { events, src, text };
 }
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 837257ef..22e40a9c 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -116,7 +116,7 @@
 				<input
 					name="message"
 					bind:value={message}
-					placeholder="What's on your mind?"
+					placeholder="What's happening?"
 					class="w-full my-5 max-w-lg mx-auto"
 				/>
 			</form>
@@ -126,7 +126,7 @@
 			{#if events.length}
 				<Feed {events} />
 			{:else}
-				<div class="text-center">You haven't posted anything yet</div>
+        <div class="text-center text-2xl mt-20">Nothing here yet. Post your first <a href="https://github.com/nostr-protocol/nostr#nostr---notes-and-other-stuff-transmitted-by-relays" class="underline">nostr</a> note!</div>
 			{/if}
 		</div>
 	</div>
diff --git a/src/routes/(app)/[username]/message/+page.svelte b/src/routes/(app)/[username]/message/+page.svelte
new file mode 100644
index 00000000..c8a57b79
--- /dev/null
+++ b/src/routes/(app)/[username]/message/+page.svelte
@@ -0,0 +1,41 @@
+<script>
+	import { t } from '$lib/translations';
+	import { enhance } from '$app/forms';
+	import { Icon } from '$comp';
+	import { back } from '$lib/utils';
+
+	export let data;
+	export let form;
+
+	let { subject, user } = data;
+</script>
+
+<button class="ml-5 md:ml-20 mt-10 hover:opacity-80" on:click={back}>
+	<Icon icon="arrow-left" style="w-10" />
+</button>
+
+<div class="container max-w-lg px-4 mx-auto mt-10 space-y-5">
+	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
+		{$t('transactions.sendMessage')}
+	</h1>
+
+	<form action="?/create" method="POST" use:enhance class="space-y-5">
+		<input type="hidden" name="requester_id" value={user.id} />
+		<input type="hidden" name="recipient" value={subject.username} />
+
+		<textarea
+			name="memo"
+			placeholder={$t('transactions.sendMessage')}
+			class="w-full p-4 border rounded-xl h-48"
+		/>
+
+		<div class="w-full flex">
+			<button
+				type="submit"
+				class="bg-black text-white border rounded-full px-6 py-2 font-bold mx-auto"
+			>
+				{$t('transactions.submit')}
+			</button>
+		</div>
+	</form>
+</div>