diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Event.svelte | 84 | ||||
| -rw-r--r-- | src/components/Feed.svelte | 54 | ||||
| -rw-r--r-- | src/components/index.js | 1 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/(profile)/event/[id]/+page.server.js | 13 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/(profile)/event/[id]/+page.svelte | 7 |
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"> {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"> {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} /> |