forked from coracle/flotilla
86 lines
2.7 KiB
Svelte
86 lines
2.7 KiB
Svelte
<style>
|
|
.chat-item:hover {
|
|
background-color: var(--cl-bg-alt);
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import {onMount} from "svelte"
|
|
import {page} from "$app/stores"
|
|
import {remove, uniq, formatTimestamp} from "@welshman/lib"
|
|
import type {TrustedEvent} from "@welshman/util"
|
|
import {pubkey, loadMessagingRelayList} from "@welshman/app"
|
|
import {fade} from "@lib/transition"
|
|
import Button from "@lib/components2/Button.svelte"
|
|
import ProfileName from "@app/components/ProfileName.svelte"
|
|
import ProfileCircle from "@app/components/ProfileCircle.svelte"
|
|
import ProfileCircles from "@app/components/ProfileCircles.svelte"
|
|
import {makeChatPath, goToChat} from "@app/routes"
|
|
import {notifications} from "@app/notifications"
|
|
|
|
interface Props {
|
|
id: string
|
|
pubkeys: string[]
|
|
messages: TrustedEvent[]
|
|
[key: string]: any
|
|
}
|
|
|
|
const {...props}: Props = $props()
|
|
|
|
const others = uniq(remove($pubkey!, props.pubkeys))
|
|
const active = $derived($page.params.chat === props.id)
|
|
const path = makeChatPath(props.pubkeys)
|
|
const openChat = () => goToChat(props.pubkeys)
|
|
|
|
onMount(() => {
|
|
for (const pk of others) {
|
|
loadMessagingRelayList(pk)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<Button class="flex flex-col justify-start gap-1 w-full" onclick={openChat}>
|
|
<div
|
|
class="chat-item cursor-pointer cl-border-t px-3 py-2 transition-colors {props.class}"
|
|
class:cl-surface-alt={active}>
|
|
<div class="flex flex-col justify-start gap-1">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="flex min-w-0 items-center gap-2">
|
|
{#if others.length === 0}
|
|
<ProfileCircle pubkey={$pubkey!} size={5} />
|
|
Note to self
|
|
{:else if others.length === 1}
|
|
<ProfileCircle pubkey={others[0]} size={5} />
|
|
<ProfileName pubkey={others[0]} />
|
|
{:else}
|
|
<ProfileCircles pubkeys={others} size={5} />
|
|
<p class="overflow-hidden text-ellipsis whitespace-nowrap">
|
|
<ProfileName pubkey={others[0]} />
|
|
and {others.length - 1}
|
|
{others.length > 2 ? "others" : "other"}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
{#if !active && $notifications.has(path)}
|
|
<div
|
|
class="h-2 w-2 rounded-full"
|
|
style="background-color: var(--cl-primary);"
|
|
transition:fade>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
|
|
<span class="cl-text-muted">
|
|
{#if props.messages[0].pubkey === $pubkey}
|
|
You:
|
|
{/if}
|
|
</span>
|
|
{props.messages[0].content}
|
|
</p>
|
|
<p class="text-xs cl-text-muted">
|
|
{formatTimestamp(props.messages[0].created_at)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Button>
|