add message field to user profile pages

2 files changed, 28 insertions, 22 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">