forked from coracle/flotilla
Add key signup, improve message listening
This commit is contained in:
Jon Staab
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import {derived} from "svelte/store"
|
||||
import {type Instance} from "tippy.js"
|
||||
import {hash, uniqBy, groupBy, now} from "@welshman/lib"
|
||||
import {hash, sleep, uniqBy, groupBy, now} from "@welshman/lib"
|
||||
import type {TrustedEvent} from "@welshman/util"
|
||||
import {deriveEvents, throttled} from "@welshman/store"
|
||||
import {
|
||||
@@ -12,8 +12,10 @@
|
||||
} from "@welshman/app"
|
||||
import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
|
||||
import {repository} from "@welshman/app"
|
||||
import {slideAndFade} from "@lib/transition"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Tippy from "@lib/components/Tippy.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"
|
||||
@@ -54,74 +56,77 @@
|
||||
let popoverIsVisible = false
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="group chat flex items-center justify-end gap-1"
|
||||
class:chat-start={event.pubkey !== $pubkey}
|
||||
class:flex-row-reverse={event.pubkey !== $pubkey}
|
||||
class:chat-end={event.pubkey === $pubkey}>
|
||||
<Tippy
|
||||
bind:popover
|
||||
component={ChatMessageMenu}
|
||||
props={{event, pubkeys, popover}}
|
||||
params={{
|
||||
interactive: true,
|
||||
trigger: "manual",
|
||||
onShow() {
|
||||
popoverIsVisible = true
|
||||
},
|
||||
onHidden() {
|
||||
popoverIsVisible = false
|
||||
},
|
||||
}}>
|
||||
<Button class="opacity-0 transition-all group-hover:opacity-100" on:click={togglePopover}>
|
||||
<Icon icon="menu-dots" size={4} />
|
||||
</Button>
|
||||
</Tippy>
|
||||
<div class="flex flex-col">
|
||||
<div class="chat-bubble mx-1 max-w-sm">
|
||||
<div class="flex w-full items-start gap-2">
|
||||
{#if showPubkey}
|
||||
<Button on:click={showProfile}>
|
||||
<Avatar
|
||||
src={$profile?.picture}
|
||||
class="border border-solid border-base-content"
|
||||
size={8} />
|
||||
</Button>
|
||||
{/if}
|
||||
<div class="-mt-1 flex-grow pr-1">
|
||||
<Delay>
|
||||
<div
|
||||
in:slideAndFade
|
||||
class="group chat flex items-center justify-end gap-1"
|
||||
class:chat-start={event.pubkey !== $pubkey}
|
||||
class:flex-row-reverse={event.pubkey !== $pubkey}
|
||||
class:chat-end={event.pubkey === $pubkey}>
|
||||
<Tippy
|
||||
bind:popover
|
||||
component={ChatMessageMenu}
|
||||
props={{event, pubkeys, popover}}
|
||||
params={{
|
||||
interactive: true,
|
||||
trigger: "manual",
|
||||
onShow() {
|
||||
popoverIsVisible = true
|
||||
},
|
||||
onHidden() {
|
||||
popoverIsVisible = false
|
||||
},
|
||||
}}>
|
||||
<Button class="opacity-0 transition-all group-hover:opacity-100" on:click={togglePopover}>
|
||||
<Icon icon="menu-dots" size={4} />
|
||||
</Button>
|
||||
</Tippy>
|
||||
<div class="flex flex-col">
|
||||
<div class="chat-bubble mx-1 max-w-sm">
|
||||
<div class="flex w-full items-start gap-2">
|
||||
{#if showPubkey}
|
||||
<div class="flex items-center gap-2">
|
||||
<Button class="text-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
|
||||
{$profileDisplay}
|
||||
</Button>
|
||||
<span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
|
||||
</div>
|
||||
<Button on:click={showProfile}>
|
||||
<Avatar
|
||||
src={$profile?.picture}
|
||||
class="border border-solid border-base-content"
|
||||
size={8} />
|
||||
</Button>
|
||||
{/if}
|
||||
<div class="text-sm">
|
||||
<Content showEntire {event} />
|
||||
<div class="-mt-1 flex-grow pr-1">
|
||||
{#if showPubkey}
|
||||
<div class="flex items-center gap-2">
|
||||
<Button class="font-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
|
||||
{$profileDisplay}
|
||||
</Button>
|
||||
<span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="text-sm">
|
||||
<Content showEntire {event} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if $reactions.length > 0 || $zaps.length > 0}
|
||||
<div class="relative z-feature -mt-4 flex justify-end text-xs">
|
||||
{#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 mr-2 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}
|
||||
</div>
|
||||
{#if $reactions.length > 0 || $zaps.length > 0}
|
||||
<div class="relative z-feature -mt-4 flex justify-end text-xs">
|
||||
{#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 mr-2 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}
|
||||
</div>
|
||||
</div>
|
||||
</Delay>
|
||||
|
||||
Reference in New Issue
Block a user