Split HomeInboxItem into one component per conversation kind
This commit is contained in:
Coracle-Bot
hodlbod
parent
b1117d601a
commit
dc746ca93b
5 changed files with 158 additions and 66 deletions
|
|
@ -1,14 +1,7 @@
|
|||
<script lang="ts">
|
||||
import {formatTimestamp, remove, uniq} from "@welshman/lib"
|
||||
import Link from "@lib/components/Link.svelte"
|
||||
import ProfileCircle from "@app/components/ProfileCircle.svelte"
|
||||
import ProfileName from "@app/components/ProfileName.svelte"
|
||||
import RelayIcon from "@app/components/RelayIcon.svelte"
|
||||
import RelayName from "@app/components/RelayName.svelte"
|
||||
import RoomName from "@app/components/RoomName.svelte"
|
||||
import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
|
||||
import UnreadDot from "@app/components/UnreadDot.svelte"
|
||||
import {user} from "@app/core"
|
||||
import HomeInboxItemChat from "@app/components/HomeInboxItemChat.svelte"
|
||||
import HomeInboxItemRoom from "@app/components/HomeInboxItemRoom.svelte"
|
||||
import HomeInboxItemSpaceChat from "@app/components/HomeInboxItemSpaceChat.svelte"
|
||||
import type {Activity} from "@app/notifications"
|
||||
|
||||
type Props = {
|
||||
|
|
@ -16,61 +9,22 @@
|
|||
}
|
||||
|
||||
const {conversation}: Props = $props()
|
||||
|
||||
const path = $derived(conversation.path)
|
||||
const url = $derived(conversation.url)
|
||||
const h = $derived(conversation.h)
|
||||
const event = $derived(conversation.event)
|
||||
const others = $derived(uniq(remove($user.pubkey, conversation.pubkeys ?? [])))
|
||||
</script>
|
||||
|
||||
<Link href={path} class="card card-sm card-interactive flex items-center gap-3">
|
||||
{#if url}
|
||||
<RelayIcon {url} size={9} class="shrink-0" />
|
||||
{:else}
|
||||
<ProfileCircle pubkey={others[0] || $user.pubkey} size={9} class="shrink-0" />
|
||||
{/if}
|
||||
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
|
||||
<div class="flex min-w-0 items-baseline gap-2 text-sm">
|
||||
<strong class="truncate">
|
||||
{#if url}
|
||||
{#if h}
|
||||
<RoomName {url} {h} />
|
||||
{:else}
|
||||
Chat
|
||||
{/if}
|
||||
{:else if others.length === 0}
|
||||
Note to self
|
||||
{:else}
|
||||
<ProfileName pubkey={others[0]} />
|
||||
{#if others.length > 1}
|
||||
and {others.length - 1} {others.length > 2 ? "others" : "other"}
|
||||
{/if}
|
||||
{/if}
|
||||
</strong>
|
||||
<span class="truncate opacity-50">
|
||||
{#if url}
|
||||
<RelayName {url} />
|
||||
{:else}
|
||||
direct message
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex min-w-0 items-center gap-1 text-sm opacity-75">
|
||||
<span class="shrink-0">
|
||||
{#if event.pubkey === $user.pubkey}
|
||||
You:
|
||||
{:else}
|
||||
<ProfileName pubkey={event.pubkey} {url} />:
|
||||
{/if}
|
||||
</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<NoteContentMinimal {event} {url} singleLine />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-2 text-xs opacity-50">
|
||||
{formatTimestamp(event.created_at)}
|
||||
<UnreadDot {path} />
|
||||
</div>
|
||||
</Link>
|
||||
{#if conversation.url && conversation.h}
|
||||
<HomeInboxItemRoom
|
||||
path={conversation.path}
|
||||
url={conversation.url}
|
||||
h={conversation.h}
|
||||
event={conversation.event} />
|
||||
{:else if conversation.url}
|
||||
<HomeInboxItemSpaceChat
|
||||
path={conversation.path}
|
||||
url={conversation.url}
|
||||
event={conversation.event} />
|
||||
{:else}
|
||||
<HomeInboxItemChat
|
||||
path={conversation.path}
|
||||
pubkeys={conversation.pubkeys ?? []}
|
||||
event={conversation.event} />
|
||||
{/if}
|
||||
|
|
|
|||
47
src/app/components/HomeInboxItemCard.svelte
Normal file
47
src/app/components/HomeInboxItemCard.svelte
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<script lang="ts">
|
||||
import type {Snippet} from "svelte"
|
||||
import {formatTimestamp} from "@welshman/lib"
|
||||
import type {TrustedEvent} from "@welshman/util"
|
||||
import Link from "@lib/components/Link.svelte"
|
||||
import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
|
||||
import ProfileName from "@app/components/ProfileName.svelte"
|
||||
import UnreadDot from "@app/components/UnreadDot.svelte"
|
||||
import {user} from "@app/core"
|
||||
|
||||
type Props = {
|
||||
path: string
|
||||
event: TrustedEvent
|
||||
url?: string
|
||||
icon: Snippet
|
||||
title: Snippet
|
||||
subtitle: Snippet
|
||||
}
|
||||
|
||||
const {path, event, url, icon, title, subtitle}: Props = $props()
|
||||
</script>
|
||||
|
||||
<Link href={path} class="card card-sm card-interactive flex items-center gap-3">
|
||||
{@render icon()}
|
||||
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
|
||||
<div class="flex min-w-0 items-baseline gap-2 text-sm">
|
||||
<strong class="truncate">{@render title()}</strong>
|
||||
<span class="truncate opacity-50">{@render subtitle()}</span>
|
||||
</div>
|
||||
<div class="flex min-w-0 items-center gap-1 text-sm opacity-75">
|
||||
<span class="shrink-0">
|
||||
{#if event.pubkey === $user.pubkey}
|
||||
You:
|
||||
{:else}
|
||||
<ProfileName pubkey={event.pubkey} {url} />:
|
||||
{/if}
|
||||
</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<NoteContentMinimal {event} {url} singleLine />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-2 text-xs opacity-50">
|
||||
{formatTimestamp(event.created_at)}
|
||||
<UnreadDot {path} />
|
||||
</div>
|
||||
</Link>
|
||||
37
src/app/components/HomeInboxItemChat.svelte
Normal file
37
src/app/components/HomeInboxItemChat.svelte
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<script lang="ts">
|
||||
import {remove, uniq} from "@welshman/lib"
|
||||
import type {TrustedEvent} from "@welshman/util"
|
||||
import HomeInboxItemCard from "@app/components/HomeInboxItemCard.svelte"
|
||||
import ProfileCircle from "@app/components/ProfileCircle.svelte"
|
||||
import ProfileName from "@app/components/ProfileName.svelte"
|
||||
import {user} from "@app/core"
|
||||
|
||||
type Props = {
|
||||
path: string
|
||||
pubkeys: string[]
|
||||
event: TrustedEvent
|
||||
}
|
||||
|
||||
const {path, pubkeys, event}: Props = $props()
|
||||
|
||||
const others = $derived(uniq(remove($user.pubkey, pubkeys)))
|
||||
</script>
|
||||
|
||||
<HomeInboxItemCard {path} {event}>
|
||||
{#snippet icon()}
|
||||
<ProfileCircle pubkey={others[0] || $user.pubkey} size={9} class="shrink-0" />
|
||||
{/snippet}
|
||||
{#snippet title()}
|
||||
{#if others.length > 0}
|
||||
<ProfileName pubkey={others[0]} />
|
||||
{#if others.length > 1}
|
||||
and {others.length - 1} {others.length > 2 ? "others" : "other"}
|
||||
{/if}
|
||||
{:else}
|
||||
Note to self
|
||||
{/if}
|
||||
{/snippet}
|
||||
{#snippet subtitle()}
|
||||
direct message
|
||||
{/snippet}
|
||||
</HomeInboxItemCard>
|
||||
28
src/app/components/HomeInboxItemRoom.svelte
Normal file
28
src/app/components/HomeInboxItemRoom.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script lang="ts">
|
||||
import type {TrustedEvent} from "@welshman/util"
|
||||
import HomeInboxItemCard from "@app/components/HomeInboxItemCard.svelte"
|
||||
import RelayIcon from "@app/components/RelayIcon.svelte"
|
||||
import RelayName from "@app/components/RelayName.svelte"
|
||||
import RoomName from "@app/components/RoomName.svelte"
|
||||
|
||||
type Props = {
|
||||
path: string
|
||||
url: string
|
||||
h: string
|
||||
event: TrustedEvent
|
||||
}
|
||||
|
||||
const {path, url, h, event}: Props = $props()
|
||||
</script>
|
||||
|
||||
<HomeInboxItemCard {path} {url} {event}>
|
||||
{#snippet icon()}
|
||||
<RelayIcon {url} size={9} class="shrink-0" />
|
||||
{/snippet}
|
||||
{#snippet title()}
|
||||
<RoomName {url} {h} />
|
||||
{/snippet}
|
||||
{#snippet subtitle()}
|
||||
<RelayName {url} />
|
||||
{/snippet}
|
||||
</HomeInboxItemCard>
|
||||
26
src/app/components/HomeInboxItemSpaceChat.svelte
Normal file
26
src/app/components/HomeInboxItemSpaceChat.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script lang="ts">
|
||||
import type {TrustedEvent} from "@welshman/util"
|
||||
import HomeInboxItemCard from "@app/components/HomeInboxItemCard.svelte"
|
||||
import RelayIcon from "@app/components/RelayIcon.svelte"
|
||||
import RelayName from "@app/components/RelayName.svelte"
|
||||
|
||||
type Props = {
|
||||
path: string
|
||||
url: string
|
||||
event: TrustedEvent
|
||||
}
|
||||
|
||||
const {path, url, event}: Props = $props()
|
||||
</script>
|
||||
|
||||
<HomeInboxItemCard {path} {url} {event}>
|
||||
{#snippet icon()}
|
||||
<RelayIcon {url} size={9} class="shrink-0" />
|
||||
{/snippet}
|
||||
{#snippet title()}
|
||||
Chat
|
||||
{/snippet}
|
||||
{#snippet subtitle()}
|
||||
<RelayName {url} />
|
||||
{/snippet}
|
||||
</HomeInboxItemCard>
|
||||
Loading…
Reference in a new issue