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

Lint

Browse Source
This commit is contained in:
Jon Staab
2024-08-26 14:43:43 -07:00
parent 644c32dd09
commit 88318e9753
36 changed files with 370 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/GroupNote.svelte
+45 -37
View File
@@ -5,13 +5,19 @@
import type {TrustedEvent} from "@welshman/util"
import {deriveEvents} from "@welshman/store"
import {PublishStatus} from "@welshman/net"
import {GROUP_REPLY, REACTION, ZAP_RESPONSE, displayRelayUrl, getAncestorTags, displayPubkey} from "@welshman/util"
import {fly, fade} from "@lib/transition"
import {formatTimestampAsTime} from '@lib/util'
import {
GROUP_REPLY,
REACTION,
ZAP_RESPONSE,
displayRelayUrl,
getAncestorTags,
} from "@welshman/util"
import {fly} from "@lib/transition"
import {formatTimestampAsTime} from "@lib/util"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import Avatar from "@lib/components/Avatar.svelte"
import {repository} from '@app/base'
import {repository} from "@app/base"
import type {PublishStatusData} from "@app/state"
import {deriveProfile, deriveProfileDisplay, deriveEvent, publishStatusData} from "@app/state"
@@ -19,31 +25,31 @@
export let showPubkey: boolean
const colors = [
['amber', twColors.amber[600]],
['blue', twColors.blue[600]],
['cyan', twColors.cyan[600]],
['emerald', twColors.emerald[600]],
['fuchsia', twColors.fuchsia[600]],
['green', twColors.green[600]],
['indigo', twColors.indigo[600]],
['sky', twColors.sky[600]],
['lime', twColors.lime[600]],
['orange', twColors.orange[600]],
['pink', twColors.pink[600]],
['purple', twColors.purple[600]],
['red', twColors.red[600]],
['rose', twColors.rose[600]],
['sky', twColors.sky[600]],
['teal', twColors.teal[600]],
['violet', twColors.violet[600]],
['yellow', twColors.yellow[600]],
['zinc', twColors.zinc[600]],
["amber", twColors.amber[600]],
["blue", twColors.blue[600]],
["cyan", twColors.cyan[600]],
["emerald", twColors.emerald[600]],
["fuchsia", twColors.fuchsia[600]],
["green", twColors.green[600]],
["indigo", twColors.indigo[600]],
["sky", twColors.sky[600]],
["lime", twColors.lime[600]],
["orange", twColors.orange[600]],
["pink", twColors.pink[600]],
["purple", twColors.purple[600]],
["red", twColors.red[600]],
["rose", twColors.rose[600]],
["sky", twColors.sky[600]],
["teal", twColors.teal[600]],
["violet", twColors.violet[600]],
["yellow", twColors.yellow[600]],
["zinc", twColors.zinc[600]],
]
const profile = deriveProfile(event.pubkey)
const profileDisplay = deriveProfileDisplay(event.pubkey)
const reactions = deriveEvents(repository, {filters: [{kinds: [REACTION], '#e': [event.id]}]})
const zaps = deriveEvents(repository, {filters: [{kinds: [ZAP_RESPONSE], '#e': [event.id]}]})
const reactions = deriveEvents(repository, {filters: [{kinds: [REACTION], "#e": [event.id]}]})
const zaps = deriveEvents(repository, {filters: [{kinds: [ZAP_RESPONSE], "#e": [event.id]}]})
const {replies} = getAncestorTags(event.tags)
const parentId = replies[0]?.[1]
const parentHints = [replies[0]?.[2]].filter(Boolean)
@@ -52,8 +58,8 @@
const ps = derived(publishStatusData, $m => Object.values($m[event.id] || {}))
const displayReaction = (content: string) => {
if (content === '+') return "❤️"
if (content === '-') return "👎"
if (content === "+") return "❤️"
if (content === "-") return "👎"
return content
}
@@ -65,7 +71,8 @@
$: parentProfileDisplay = deriveProfileDisplay(parentPubkey)
$: isPublished = findStatus($ps, [PublishStatus.Success])
$: isPending = findStatus($ps, [PublishStatus.Pending]) && event.created_at > now() - 30
$: failure = !isPending && !isPublished && findStatus($ps, [PublishStatus.Failure, PublishStatus.Timeout])
$: failure =
!isPending && !isPublished && findStatus($ps, [PublishStatus.Failure, PublishStatus.Timeout])
</script>
<div in:fly class="group relative flex flex-col gap-1 p-2 transition-colors hover:bg-base-300">
@@ -86,25 +93,26 @@
{#if showPubkey}
<Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
{:else}
<div class="min-w-10 max-w-10 w-10" />
<div class="w-10 min-w-10 max-w-10" />
{/if}
<div class="-mt-1">
{#if showPubkey}
<div class="flex gap-2 items-center">
<strong class="text-sm" style="color: {colorValue}" data-color={colorName}>{$profileDisplay}</strong>
<span class="opacity-50 text-xs">{formatTimestampAsTime(event.created_at)}</span>
<div class="flex items-center gap-2">
<strong class="text-sm" style="color: {colorValue}" data-color={colorName}
>{$profileDisplay}</strong>
<span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
</div>
{/if}
<p class="text-sm">
{event.content}
{#if isPending}
<span class="ml-1 flex-inline gap-1">
<span class="loading loading-spinner h-3 w-3 mx-1 translate-y-px" />
<span class="flex-inline ml-1 gap-1">
<span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
<span class="opacity-50">Sending...</span>
</span>
{:else if failure}
<span
class="ml-1 flex-inline gap-1 tooltip cursor-pointer"
class="flex-inline tooltip ml-1 cursor-pointer gap-1"
data-tip="{failure.message} ({displayRelayUrl(failure.url)})">
<Icon icon="danger" class="translate-y-px" size={3} />
<span class="opacity-50">Failed to send!</span>
@@ -114,9 +122,9 @@
</div>
</div>
{#if $reactions.length > 0 || $zaps.length > 0}
<div class="text-xs ml-12">
<div class="ml-12 text-xs">
{#each groupBy(e => e.content, $reactions).entries() as [content, events]}
<Button class="btn btn-neutral btn-xs rounded-full mr-2 flex-inline gap-1">
<Button class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full">
<span>{displayReaction(content)}</span>
{#if events.length > 1}
<span>{events.length}</span>