110 lines
3.2 KiB
Svelte
110 lines
3.2 KiB
Svelte
<script lang="ts" context="module">
|
|
type Element = {
|
|
id: string
|
|
type: "date" | "note"
|
|
value: string | TrustedEvent
|
|
showPubkey: boolean
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import {page} from "$app/stores"
|
|
import {sortBy} from "@welshman/lib"
|
|
import type {TrustedEvent} from "@welshman/util"
|
|
import {formatTimestampAsDate} from "@welshman/app"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import Spinner from "@lib/components/Spinner.svelte"
|
|
import Divider from "@lib/components/Divider.svelte"
|
|
import ChatMessage from "@app/components/ChatMessage.svelte"
|
|
import ChatCompose from "@app/components/ChatCompose.svelte"
|
|
import {userMembership, decodeNRelay, makeChatId, deriveChat, GENERAL} from "@app/state"
|
|
import {addRoomMembership, removeRoomMembership} from "@app/commands"
|
|
|
|
const {nrelay, room = GENERAL} = $page.params
|
|
const url = decodeNRelay(nrelay)
|
|
const chat = deriveChat(makeChatId(url, room))
|
|
|
|
const assertEvent = (e: any) => e as TrustedEvent
|
|
|
|
let loading = true
|
|
let elements: Element[] = []
|
|
|
|
$: membership = $userMembership?.roomsByUrl.get(url) || []
|
|
|
|
$: {
|
|
elements = []
|
|
|
|
let previousDate
|
|
let previousPubkey
|
|
|
|
for (const {event} of sortBy(m => m.event.created_at, $chat?.messages || [])) {
|
|
const {id, pubkey, created_at} = event
|
|
const date = formatTimestampAsDate(created_at)
|
|
|
|
if (date !== previousDate) {
|
|
elements.push({type: "date", value: date, id: date, showPubkey: false})
|
|
}
|
|
|
|
elements.push({
|
|
id,
|
|
type: "note",
|
|
value: event,
|
|
showPubkey: date !== previousDate || previousPubkey !== pubkey,
|
|
})
|
|
|
|
previousDate = date
|
|
previousPubkey = pubkey
|
|
}
|
|
|
|
elements.reverse()
|
|
}
|
|
|
|
setTimeout(() => {
|
|
loading = false
|
|
}, 3000)
|
|
</script>
|
|
|
|
<div class="relative flex h-screen flex-col">
|
|
<div class="relative z-feature mx-2 rounded-xl pt-4">
|
|
<div
|
|
class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
|
|
<div class="flex items-center gap-2">
|
|
<Icon icon="hashtag" />
|
|
<strong>{room || "General"}</strong>
|
|
</div>
|
|
{#if room}
|
|
{#if membership.includes(room)}
|
|
<Button class="btn btn-neutral btn-sm" on:click={() => removeRoomMembership(url, room)}>
|
|
<Icon icon="arrows-a-logout-2" />
|
|
Leave Room
|
|
</Button>
|
|
{:else}
|
|
<Button class="btn btn-neutral btn-sm" on:click={() => addRoomMembership(url, room)}>
|
|
<Icon icon="login-2" />
|
|
Join Room
|
|
</Button>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">
|
|
{#each elements as { type, id, value, showPubkey } (id)}
|
|
{#if type === "date"}
|
|
<Divider>{value}</Divider>
|
|
{:else}
|
|
<ChatMessage event={assertEvent(value)} {showPubkey} />
|
|
{/if}
|
|
{/each}
|
|
<p class="flex h-10 items-center justify-center py-20">
|
|
<Spinner {loading}>
|
|
{#if loading}
|
|
Looking for messages...
|
|
{:else}
|
|
End of message history
|
|
{/if}
|
|
</Spinner>
|
|
</p>
|
|
</div>
|
|
<ChatCompose {url} {room} />
|
|
</div>
|