Generalize goToMessage

This commit is contained in:
Jon Staab
2025-06-05 10:55:16 -07:00
parent d8b87db784
commit 8e28ff13e9
4 changed files with 97 additions and 85 deletions
+22 -16
View File
@@ -10,6 +10,7 @@
import ProfileCircle from "@app/components/ProfileCircle.svelte"
import ProfileCircles from "@app/components/ProfileCircles.svelte"
import {deriveEventsForUrl} from "@app/state"
import {goToEvent} from "@app/routes"
type Props = {
url: string
@@ -80,7 +81,7 @@
</div>
{:else}
{#each $conversations.slice(0, limit) as { room, events, latest, earliest, participants } (latest.id)}
<div class="card2 bg-alt">
<Button class="card2 bg-alt" onclick={() => goToEvent(earliest)}>
<div class="flex flex-col gap-3">
<div class="flex items-start gap-3">
<ProfileCircle pubkey={earliest.pubkey} size={10} />
@@ -94,30 +95,35 @@
</div>
</div>
<div class="ml-13 flex items-center justify-between">
<div class="flex items-center gap-4">
<span class="flex items-center gap-2 text-sm opacity-70">
<Icon icon="alt-arrow-left" size={4} />
<div class="flex gap-1">
<Icon icon="alt-arrow-left" />
<span class="text-sm opacity-70">
{events.length} messages
</span>
<div class="flex -space-x-2">
<ProfileCircles pubkeys={participants} size={6} />
</div>
</div>
<span class="text-sm opacity-50">
{formatTimestamp(latest.created_at)}
</span>
<div class="flex gap-2">
<ProfileCircles pubkeys={participants} size={6} />
<span class="text-sm opacity-70">
{participants.length} participants
</span>
</div>
</div>
<div class="card2 bg-alt">
<Button class="card2 bg-alt" onclick={() => goToEvent(latest)}>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-2 text-sm opacity-70">
<ProfileCircle pubkey={latest.pubkey} size={5} />
<span class="font-medium">Latest reply:</span>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-sm opacity-70">
<ProfileCircle pubkey={latest.pubkey} size={5} />
<span class="font-medium">Latest reply:</span>
</div>
<span class="text-xs opacity-50">
{formatTimestamp(latest.created_at)}
</span>
</div>
<Content minimalQuote minLength={100} maxLength={200} event={latest} />
</div>
</div>
</Button>
</div>
</div>
</Button>
{/each}
{#if $conversations.length > limit}
<Button class="btn btn-primary" onclick={viewMore}>