fix avatars

9 files changed, 31 insertions, 16 deletions

diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index f0b9768f..bb88d243 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -1,20 +1,20 @@
 <script>
 	import { colorTheme } from '$lib/store';
 	import { Icon } from '$comp';
-	import { runner } from '$lib/utils';
+	import { punk } from '$lib/utils';
 
 	export let user;
 	export let size = 32;
 	export let disabled = false;
 
 	$: s = size.toString();
-	$: link = user ? `/${user.username}` : '/';
+	$: link = user.anon ? `/${user.pubkey}` : `/${user.username}`;
 
-	let src =
+	$: src =
 		'/api/public/' +
 		(user?.profile
 			? user.username + '-profile.webp'
-			: 'runners/' + runner(user?.pubkey || parseInt(Math.random() * 255).toString(16)));
+			: 'punks/' + punk(user?.pubkey || parseInt(Math.random() * 255).toString(16)));
 </script>
 
 <a href={link} class:pointer-events-none={disabled}>
diff --git a/src/components/Feed.svelte b/src/components/Feed.svelte
index 9f09630a..c00fd1c7 100644
--- a/src/components/Feed.svelte
+++ b/src/components/Feed.svelte
@@ -2,7 +2,7 @@
 	import { Avatar } from '$comp';
 	import { browser } from '$app/environment';
 	import VirtualScroll from 'svelte-virtual-scroll-list';
-	import { runner } from '$lib/utils';
+	import { punk } from '$lib/utils';
 	export let events;
 
 	let distance = (date) => {
diff --git a/src/lib/socket.js b/src/lib/socket.js
index 4f5770d3..5a4da262 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -18,8 +18,7 @@ import { browser } from '$app/environment';
 let socket, token;
 let le = browser && localStorage.getItem('events');
 let events = le && le !== 'undefined' ? JSON.parse(le) : {};
-delete events.q;
-events.q = Object.keys(events);
+let q = Object.keys(events);
 
 export const auth = () => token && send('login', token) && send('heartbeat');
 
@@ -40,12 +39,12 @@ export const messages = (data) => ({
 	event() {
 		data.seen = Math.round(Date.now() / 1000);
 		events[data.id] = data;
-		events.q.push(data.id);
+		q.push(data.id);
 		$events.set(events);
-		while (events.q.length > 10000) delete events[events.q.shift()];
+		while (q.length > 10000) delete events[q.shift()];
 		localStorage.setItem(
 			'events',
-			JSON.stringify(events.q.slice(-100).reduce((a, b) => (a = { ...a, [b]: events[b] }), {}))
+			JSON.stringify(q.slice(-100).reduce((a, b) => (a = { ...a, [b]: events[b] }), {}))
 		);
 	},
 
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 82d5b9cf..5ffc24e2 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -10,8 +10,8 @@ export function scroll(section) {
 }
 
 const base = browser ? '' : PUBLIC_COINOS_URL;
-export const runner = (k) => {
-	return Math.ceil((parseInt(k.substr(0, 2), 16) / 256) * 20) + '.webp';
+export const punk = (k) => {
+	return Math.floor((parseInt(k.substr(0, 2), 16) / 256) * 20) + 1 + '.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 f5bf338e..7823f7de 100644
--- a/src/routes/(app)/[username]/+layout.server.js
+++ b/src/routes/(app)/[username]/+layout.server.js
@@ -5,7 +5,8 @@ export let load = async ({ params: { username } }) => {
 	try {
 		return { subject: await get(`/users/${username}`) };
 	} catch (e) {
-		if (username.length === 64) return { subject: { username, pubkey: username } };
+		if (username.length === 64)
+			return { subject: { username: username.substr(0, 6), pubkey: username, anon: true } };
 		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 442b4eb5..e406253f 100644
--- a/src/routes/(app)/[username]/+page.server.js
+++ b/src/routes/(app)/[username]/+page.server.js
@@ -19,7 +19,6 @@ export async function load({ params, parent, url }) {
 
 	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 22e40a9c..b4f609a9 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -126,7 +126,12 @@
 			{#if events.length}
 				<Feed {events} />
 			{:else}
-        <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>
+				<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]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index 0b49a870..9c321472 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -6,6 +6,8 @@
 	import { rate, password, selectedRate } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
+	import { events } from '$lib/store';
+	import { Feed } from '$comp';
 
 	export let data;
 	$: ({ invoices, requests } = data);
@@ -55,6 +57,10 @@
 	$: btcPrice = f($selectedRate, user.currency);
 
 	$: accountBalanceBtc = user.account.balance / sats;
+
+	$: sorted = Object.values($events)
+		.filter((ev) => ev?.pubkey)
+		.sort((a, b) => b.seen - a.seen);
 </script>
 
 <div class="container px-4 max-w-md mx-auto mt-20 space-y-12 mb-8">
@@ -170,3 +176,9 @@
 		</div>
 	</div>
 </div>
+
+<div class="mb-20">
+	<div class="container w-full mx-auto text-lg px-4 md:max-w-2xl space-y-5">
+		<Feed events={sorted} />
+	</div>
+</div>
diff --git a/src/routes/(app)/feed/+page.svelte b/src/routes/(app)/feed/+page.svelte
index 2a92ff57..61f638e7 100644
--- a/src/routes/(app)/feed/+page.svelte
+++ b/src/routes/(app)/feed/+page.svelte
@@ -5,7 +5,6 @@
 	export let data;
 	let { user } = data;
 
-	$: length = $events?.q?.length;
 	$: sorted = Object.values($events)
 		.filter((ev) => ev?.pubkey)
 		.sort((a, b) => b.seen - a.seen);