event route and reaction ui

5 files changed, 110 insertions, 49 deletions

diff --git a/src/components/Event.svelte b/src/components/Event.svelte
new file mode 100644
index 00000000..704a0636
--- /dev/null
+++ b/src/components/Event.svelte
@@ -0,0 +1,84 @@
+<script>
+  import { Avatar, Icon } from "$comp";
+  export let event;
+
+  let { id, user, seen, content } = event;
+
+	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';
+	};
+
+	let w;
+</script>
+
+<svelte:window bind:innerWidth={w} />
+
+<div class="flex text-sm lg:text-base text-secondary hover:bg-gray-100 px-4 py-3" :key={id}>
+	<a href={`/${user.pubkey}`}>
+		<div class="mb-auto mr-2">
+			<div class="md:hidden">
+				<Avatar size={12} user={user} disabled={true} />
+			</div>
+			<div class="hidden md:block">
+				<Avatar size={20} user={user} disabled={true} />
+			</div>
+		</div>
+	</a>
+
+	<div class="grow" style={`max-width: ${w - 100}px`}>
+		<div class="w-full flex pb-1 text-black pt-1">
+			<div>
+				{user.display_name || ''}
+				<span class="text-secondary">@{user.username}</span>
+			</div>
+			<div class="text-secondary">&nbsp;{distance(seen)}</div>
+		</div>
+		<div class="break-words text-black">
+			{content}
+		</div>
+
+		<div class="flex justify-between text-sm text-secondary pt-3">
+			<div class="flex group">
+				<Icon
+					icon="party"
+					style="mr-1 w-10 my-auto opacity-50 group-hover:opacity-100 group-hover:bg-white rounded-full p-2"
+				/>
+				<div class="my-auto group-hover:text-black">444</div>
+			</div>
+			<div class="flex group">
+				<Icon
+					icon="support"
+					style="mr-1 w-10 my-auto opacity-50 group-hover:opacity-100 group-hover:bg-white rounded-full p-2"
+				/>
+				<div class="my-auto group-hover:text-black">1072</div>
+			</div>
+			<div class="flex group">
+				<Icon
+					icon="smile"
+					style="mr-1 w-10 my-auto opacity-50 group-hover:opacity-100 group-hover:bg-white rounded-full p-2"
+				/>
+				<div class="my-auto group-hover:text-black">26</div>
+			</div>
+			<div class="flex group">
+				<Icon
+					icon="bolt"
+					style="mr-1 h-10 my-auto opacity-50 group-hover:opacity-100 group-hover:bg-white rounded-full p-2"
+				/>
+				<div class="my-auto group-hover:text-black">4</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/components/Feed.svelte b/src/components/Feed.svelte
index d969f8dd..a552be67 100644
--- a/src/components/Feed.svelte
+++ b/src/components/Feed.svelte
@@ -1,11 +1,10 @@
 <script>
 	import { t } from '$lib/translations';
 	import { onMount } from 'svelte';
-	import { Avatar } from '$comp';
+	import { Event } from '$comp';
 	import { browser } from '$app/environment';
 	import VirtualScroll from 'svelte-virtual-scroll-list';
-	import { enhance } from '$app/forms';
-	import { post, punk, failure } from '$lib/utils';
+	import { failure } from '$lib/utils';
 	import { sign, send } from '$lib/nostr';
 
 	export let events;
@@ -39,32 +38,11 @@
 		}
 	};
 
-	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';
-	};
-
-	let w;
-
 	$: sorted = Object.values(events)
 		.filter((ev) => ev?.pubkey && ev?.kind === 1)
 		.sort((a, b) => b.seen - a.seen);
 </script>
 
-<svelte:window bind:innerWidth={w} />
-
 {#if user}
 	<form on:submit|preventDefault={submit} class="flex justify-center gap-4 max-w-2xl mx-auto">
 		<div class="grow">
@@ -82,31 +60,9 @@
 {#if browser}
 	{#if sorted.length}
 		<VirtualScroll data={sorted} key="id" let:data pageMode={true} estimateSize={200}>
-			<div class="flex py-4 text-sm lg:text-lg text-secondary" :key={data.id}>
-				<a href={`/${data.user.pubkey}`}>
-					<div class="mb-auto mr-2">
-						<div class="md:hidden">
-							<Avatar size={12} user={data.user} disabled={true} />
-						</div>
-						<div class="hidden md:block">
-							<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.user.display_name || ''}
-							<span class="text-secondary">@{data.user.username}</span>
-						</div>
-						<div class="text-secondary">&nbsp;{distance(data.seen)}</div>
-					</div>
-					<div class="break-words">
-						{data.content}
-					</div>
-				</div>
-			</div>
+      <a href={`/${data.user.pubkey}/event/${data.id}`}>
+        <Event event={data} />
+			</a>
 		</VirtualScroll>
 	{:else}
 		<div class="flex w-full">
diff --git a/src/components/index.js b/src/components/index.js
index b0802c25..3b21f96d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Event } from './Event.svelte';
 export { default as Password } from './Password.svelte';
 export { default as Feed } from './Feed.svelte';
 export { default as Invoice } from './Invoice.svelte';
diff --git a/src/routes/(app)/[username]/(profile)/event/[id]/+page.server.js b/src/routes/(app)/[username]/(profile)/event/[id]/+page.server.js
new file mode 100644
index 00000000..f31b4902
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/event/[id]/+page.server.js
@@ -0,0 +1,13 @@
+import { get } from '$lib/utils';
+import { error } from '@sveltejs/kit';
+
+export async function load({ params: { id } }) {
+	try {
+		let event = await get(`/event/${id}`);
+		if (!event) throw error(500, 'Event not found');
+	return { event };
+	} catch (e) {
+		throw error(500, e.message);
+	}
+
+}
diff --git a/src/routes/(app)/[username]/(profile)/event/[id]/+page.svelte b/src/routes/(app)/[username]/(profile)/event/[id]/+page.svelte
new file mode 100644
index 00000000..1347947f
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/event/[id]/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { Event } from "$comp";
+  export let data;
+  let { event } = data;
+</script>
+
+<Event {event} />