sixside/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests Activity

Work on thread detail page

Browse Source
This commit is contained in:
Jon Staab
2024-10-23 14:20:24 -07:00
parent 8d0c016621
commit 09028b69a4
15 changed files with 300 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/ChannelMessage.svelte
+8 -39
View File
@@ -1,29 +1,25 @@
<script lang="ts">
import {readable} from "svelte/store"
import {hash, uniqBy, groupBy} from "@welshman/lib"
import {hash} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {deriveEvents} from "@welshman/store"
import {deriveProfile, deriveProfileDisplay, formatTimestampAsTime, pubkey} from "@welshman/app"
import type {Thunk} from "@welshman/app"
import {REACTION} from "@welshman/util"
import {repository} from "@welshman/app"
import {slideAndFade, conditionalTransition} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte"
import Delay from "@lib/components/Delay.svelte"
import Avatar from "@lib/components/Avatar.svelte"
import Button from "@lib/components/Button.svelte"
import Content from "@app/components/Content.svelte"
import ThunkStatus from "@app/components/ThunkStatus.svelte"
import Reactions from "@app/components/Reactions.svelte"
import ProfileDetail from "@app/components/ProfileDetail.svelte"
import ChannelThread from "@app/components/ChannelThread.svelte"
import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
import {REPLY, colors, tagRoom, deriveEvent, displayReaction} from "@app/state"
import {colors, tagRoom, deriveEvent} from "@app/state"
import {publishDelete, publishReaction} from "@app/commands"
import {pushModal, pushDrawer} from "@app/modal"
import {pushDrawer} from "@app/modal"
export let url
export let room
export let url, room
export let event: TrustedEvent
export let thunk: Thunk
export let showPubkey = false
@@ -31,8 +27,6 @@
const profile = deriveProfile(event.pubkey)
const profileDisplay = deriveProfileDisplay(event.pubkey)
const reactions = deriveEvents(repository, {filters: [{kinds: [REACTION], "#e": [event.id]}]})
const replies = deriveEvents(repository, {filters: [{kinds: [REPLY], "#E": [event.id]}]})
const rootTag = event.tags.find(t => t[0].match(/^e$/i))
const rootId = rootTag?.[1]
const rootHints = [rootTag?.[2]].filter(Boolean) as string[]
@@ -46,7 +40,7 @@
const openThread = () => {
const root = $rootEvent || event
pushModal(ChannelThread, {url, room, event: root}, {drawer: true})
pushDrawer(ChannelThread, {url, room, event: root})
}
const onReactionClick = (content: string, events: TrustedEvent[]) => {
@@ -99,37 +93,12 @@
</div>
</div>
</div>
{#if $reactions.length > 0 || $replies.length > 0}
<div class="ml-12 flex flex-wrap gap-2 text-xs">
{#if $replies.length > 0 && !isThread}
<div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
<Icon icon="reply" />
{$replies.length}
</div>
{/if}
{#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
{@const isOwn = events.some(e => e.pubkey === $pubkey)}
{@const onClick = () => onReactionClick(content, events)}
<button
type="button"
class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full"
class:border={isOwn}
class:border-solid={isOwn}
class:border-primary={isOwn}
on:click|stopPropagation={onClick}>
<span>{displayReaction(content)}</span>
{#if events.length > 1}
<span>{events.length}</span>
{/if}
</button>
{/each}
</div>
{/if}
<Reactions {event} {onReactionClick} showReplies={!isThread} />
<button
class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100"
on:click|stopPropagation>
<ChannelMessageEmojiButton {url} {room} {event} />
<ChannelMessageMenuButton {url} {room} {event} />
<ChannelMessageMenuButton {url} {event} />
</button>
</button>
</Delay>