new profile page

4 files changed, 66 insertions, 97 deletions

diff --git a/src/routes/(app)/[username]/+layout.server.js b/src/routes/(app)/[username]/+layout.server.js
index a352fe45..035536aa 100644
--- a/src/routes/(app)/[username]/+layout.server.js
+++ b/src/routes/(app)/[username]/+layout.server.js
@@ -5,6 +5,7 @@ export let load = async ({ params: { username } }) => {
 	try {
 		return { subject: await get(`/users/${username}`) };
 	} catch (e) {
+    if (username.length === 64) return { subject: { 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 1d07a1db..25835d8a 100644
--- a/src/routes/(app)/[username]/+page.server.js
+++ b/src/routes/(app)/[username]/+page.server.js
@@ -1,7 +1,18 @@
+import { get } from '$lib/utils';
 import Qr from 'qrcode-base64';
 
 export async function load({ params, url }) {
-	let text = `${encodeURI(params.username)}@${url.hostname}`;
+	let { username } = params;
+	let text = `${encodeURI(username)}@${url.hostname}`;
 	let src = Qr.drawImg(text, { size: 300 });
-	return { src, text };
+	let events = [];
+  console.log("EV", events)
+
+	try {
+		events = await get(`/${username}/events`);
+	} catch (e) {
+		console.log(e);
+	}
+
+	return { events, src, text };
 }
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 42e3dd3a..e8cd2d10 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -1,83 +1,78 @@
 <script>
-	import { browser } from '$app/environment';
-	import { onMount } from 'svelte';
-	import { Icon, PageNotFound } from '$comp';
-	import { copy } from '$lib/utils';
+	import { Feed, Icon, PageNotFound } from '$comp';
 	import { t } from '$lib/translations';
 	export let data;
 
-	let { user, subject, src, text } = data;
+	let { events, user, subject, src, text } = data;
 	let followed = false;
+
+	let { username: n } = subject;
+	$: username = n.length > 60 ? n.substr(0, 6) : n;
 </script>
 
-<div class="container mx-auto w-full px-4 mb-4 flex flex-wrap">
-	<div class="w-[240px] pt-20 space-y-5 lg:absolute left-20 mx-auto">
-		<h1 class="text-3xl font-bold text-center mx-auto lg:text-left">{subject.username}</h1>
+<div class="container mx-auto w-full px-4 mb-4 flex flex-wrap md:flex-nowrap">
+	<div class="hidden lg:block w-[240px] md:mr-10" />
+	<div class="w-[240px] lg:absolute pt-20 space-y-5 left-20 mx-auto md:mr-10">
+		<h1 class="text-3xl font-bold text-center mx-auto lg:text-left">{username}</h1>
 
 		<div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
 		</div>
 
 		<div class="flex flex-wrap gap-2 w-full">
-			<div class="w-full flex">
-				<a href={`/${subject.username}/receive`} class="mx-auto">
-					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
-						<div class="mx-auto flex">
-							<div style="mr-1">⚡️</div>
-							<div>{$t('user.lightning')} {$t('user.invoice')}</div>
-						</div>
-					</button>
-				</a>
-			</div>
-
-			<div class="w-full flex">
-				<a href={`/${subject.username}/receive/bitcoin`} class="mx-auto">
-					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
-						<div class="mx-auto flex">
-							<img src="/images/bitcoin.svg" class="w-5 my-auto mr-1" />
-							<div>{$t('user.bitcoin')} {$t('user.invoice')}</div>
-						</div>
-					</button>
-				</a>
-			</div>
+			{#if subject.username.length < 60}
+				<div class="w-full flex">
+					<a href={`/${subject.username}/receive`} class="mx-auto">
+						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+							<div class="mx-auto flex">
+								<div style="mr-1">⚡️</div>
+								<div>{$t('user.lightning')} {$t('user.invoice')}</div>
+							</div>
+						</button>
+					</a>
+				</div>
 
-			{#if user?.username !== subject.username}
 				<div class="w-full flex">
-					<a href={`/${subject.username}/request`} class="mx-auto">
+					<a href={`/${subject.username}/receive/bitcoin`} class="mx-auto">
 						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
 							<div class="mx-auto flex">
-								<Icon icon="support" style="mr-1" />
-								<div>{$t('transactions.requestAnInvoice')}</div>
+								<img src="/images/bitcoin.svg" class="w-5 my-auto mr-1" />
+								<div>{$t('user.bitcoin')} {$t('user.invoice')}</div>
 							</div>
 						</button>
 					</a>
 				</div>
+
+				{#if user?.username !== subject.username}
+					<div class="w-full flex">
+						<a href={`/${subject.username}/request`} class="mx-auto">
+							<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+								<div class="mx-auto flex">
+									<Icon icon="support" style="mr-1" />
+									<div>{$t('transactions.requestAnInvoice')}</div>
+								</div>
+							</button>
+						</a>
+					</div>
+				{/if}
+      {:else}
+					<div class="w-full flex">
+						<a href={`/${subject.username}/request`} class="mx-auto">
+							<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+								<div class="mx-auto flex">
+									<Icon icon="support" style="mr-1" />
+									<div>{$t('transactions.sendMessage')}</div>
+								</div>
+							</button>
+						</a>
+					</div>
 			{/if}
 		</div>
 	</div>
 
-	<div class="w-full flex">
-		<div class="space-y-5 mt-5 lg:pt-20 mx-auto max-w-lg">
-			<div class="border-2 rounded-[20%] w-[380px] py-6 mx-auto">
-				<img {src} class="mx-auto" on:click={() => copy(text)} alt="Lightning address" />
-			</div>
-
-			<div class="bg-primary font-semibold rounded-3xl text-sm p-3 flex">
-				<div class="my-auto font-semibold text-lg w-full text-center">{text}</div>
-				<button class="ml-auto hover:opacity-80" on:click={() => copy(text)}>
-					<Icon icon="copy" />
-				</button>
-			</div>
-
-			{#if user?.username === subject.username}
-				<p class="text-secondary mb-1">
-					{$t('user.this')}
-					<a href="https://lightningaddress.com" class="underline" target="_blank" rel="noreferrer"
-						>{$t('user.lightningAddress')}</a
-					>
-					{$t('user.likeAnEmail')}
-				</p>
-			{/if}
+	<div class="w-full flex md:pt-12 lg:pt-0">
+		<div class="mx-auto space-y-5 mt-5 lg:max-w-lg xl:max-w-2xl">
+			<Feed {events} />
 		</div>
 	</div>
 </div>
diff --git a/src/routes/(app)/feed/+page.svelte b/src/routes/(app)/feed/+page.svelte
index 3269e0d2..2bbadc64 100644
--- a/src/routes/(app)/feed/+page.svelte
+++ b/src/routes/(app)/feed/+page.svelte
@@ -1,15 +1,9 @@
 <script>
-	import { fade } from 'svelte/transition';
-	import { Avatar, Icon } from '$comp';
-	import { t } from '$lib/translations';
+	import { Feed } from '$comp';
 	import { events } from '$lib/store';
-	import VirtualScroll from 'svelte-virtual-scroll-list';
-	import { browser } from '$app/environment';
-	import runners from '$lib/runners';
 
 	export let data;
 	let { user } = data;
-	let runner = () => runners[Math.floor(Math.random() * runners.length)];
 
 	$: length = $events?.q?.length;
 	$: sorted = Object.values($events)
@@ -17,44 +11,12 @@
 		.sort((a, b) => b.seen - a.seen);
 
 	let w;
-
-	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'
-      : diff > 2 ? diff + 's' : 'now';
-	};
 </script>
 
 <svelte:window bind:innerWidth={w} />
 
 <div class="mb-20">
 	<div class="container w-full mx-auto text-lg px-4 md:max-w-2xl space-y-5">
-		{#if browser}
-			<VirtualScroll data={sorted} key="id" let:data pageMode={true} estimateSize={200}>
-				<div class="flex border-b py-4 text-sm text-secondary" :key={data.id} use:fade>
-					<div class="mb-auto mr-2">
-						<div class="md:hidden">
-							<Avatar size={12} src={`/api/public/runners/${runner()}`} />
-						</div>
-						<div class="hidden md:block">
-							<Avatar size={20} src={`/api/public/runners/${runner()}`} />
-						</div>
-					</div>
-
-					<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 class="text-secondary">&nbsp;{distance(data.seen)}</div>
-						</div>
-						<div class="break-words">
-							{data.content}
-						</div>
-					</div>
-				</div>
-			</VirtualScroll>
-		{/if}
+    <Feed events={sorted} />
 	</div>
 </div>