coracle/flotilla
1
3
Fork 9
Code Issues 32 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

Rough out chat

Browse Source
This commit is contained in:
Jon Staab
2024-10-08 11:39:16 -07:00
parent 7ffd02b736
commit 8698dcc359
59 changed files with 833 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/commands.ts
+68 -24
View File
@@ -1,9 +1,24 @@
import {uniqBy, sleep, chunk, equals, nthNe, choice, append} from "@welshman/lib"
import {DELETE, PROFILE, INBOX_RELAYS, RELAYS, MUTES, FOLLOWS, REACTION, isSignedEvent, getPubkeyTagValues, createEvent, displayProfile, normalizeRelayUrl} from "@welshman/util"
import type {TrustedEvent} from "@welshman/util"
import {get} from "svelte/store"
import {ctx, uniqBy, uniq, sleep, chunk, equals, choice, append} from "@welshman/lib"
import {
DELETE,
PROFILE,
INBOX_RELAYS,
RELAYS,
MUTES,
FOLLOWS,
REACTION,
isSignedEvent,
createEvent,
displayProfile,
normalizeRelayUrl,
} from "@welshman/util"
import type {TrustedEvent, EventTemplate} from "@welshman/util"
import type {SubscribeRequestWithHandlers} from "@welshman/net"
import {Nip59, stamp} from "@welshman/signer"
import {
pubkey,
signer,
repository,
makeThunk,
publishThunk,
@@ -19,7 +34,7 @@ import {
tagPubkey,
tagReactionTo,
getRelayUrls,
getInboxRelaySelections,
userInboxRelaySelections,
} from "@welshman/app"
import {tagRoom, MEMBERSHIPS, INDEXER_RELAYS} from "@app/state"
@@ -157,7 +172,7 @@ export const setRelayPolicy = (url: string, read: boolean, write: boolean) =>
})
export const setInboxRelayPolicy = (url: string, enabled: boolean) => {
const urls = getRelayUrls(getInboxRelaySelections(pubkey.get()!))
const urls = getRelayUrls(get(userInboxRelaySelections))
// Only update inbox policies if they already exist or we're adding them
if (enabled || urls.includes(url)) {
@@ -179,7 +194,7 @@ export const joinRelay = async (url: string, claim?: string) => {
makeThunk({
event: createEvent(28934, {tags: [["claim", claim]]}),
relays: [url],
})
}),
)
}
@@ -189,27 +204,56 @@ export const joinRelay = async (url: string, claim?: string) => {
// Actions
export const publishReaction = ({relays, event, content, tags = []}: {
relays: string[]
event: TrustedEvent,
content: string,
tags?: string[][]
export const sendWrapped = async ({
template,
pubkeys,
}: {
template: EventTemplate
pubkeys: string[]
}) => {
const reaction = createEvent(REACTION, {
const nip59 = Nip59.fromSigner(signer.get()!)
await Promise.all(
uniq(pubkeys).map(async recipient => {
const rumor = await nip59.wrap(recipient, stamp(template))
const thunk = makeThunk({
event: rumor.wrap,
relays: ctx.app.router.PublishMessage(recipient).getUrls(),
})
return publishThunk(thunk)
}),
)
}
export const makeReaction = ({
event,
content,
tags = [],
}: {
event: TrustedEvent
content: string
tags?: string[][]
}) =>
createEvent(REACTION, {
content,
tags: [
...tags,
...tagReactionTo(event),
],
tags: [...tags, ...tagReactionTo(event)],
})
publishThunk(makeThunk({event: reaction, relays}))
}
export const publishReaction = ({
relays,
event,
content,
tags = [],
}: {
relays: string[]
event: TrustedEvent
content: string
tags?: string[][]
}) => publishThunk(makeThunk({event: makeReaction({event, content, tags}), relays}))
export const publishDelete = ({relays, event}: {relays: string[], event: TrustedEvent}) => {
const deleteEvent = createEvent(DELETE, {
tags: [["k", String(event.kind)], ...tagEvent(event)],
})
export const makeDelete = ({event}: {event: TrustedEvent}) =>
createEvent(DELETE, {tags: [["k", String(event.kind)], ...tagEvent(event)]})
publishThunk(makeThunk({event: deleteEvent, relays}))
}
export const publishDelete = ({relays, event}: {relays: string[]; event: TrustedEvent}) =>
publishThunk(makeThunk({event: makeDelete({event}), relays}))
src/app/components/ChannelCompose.svelte
+3 -4
View File
@@ -3,12 +3,9 @@
import type {Readable} from "svelte/store"
import {writable} from "svelte/store"
import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
import {createEvent} from "@welshman/util"
import {publishThunk, makeThunk} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import {getEditorOptions, getEditorTags, addFile} from "@lib/editor"
import {MESSAGE} from "@app/state"
import {getPubkeyHints} from "@app/commands"
export let onSubmit
@@ -27,7 +24,9 @@
}
onMount(() => {
editor = createEditor(getEditorOptions({submit, loading, getPubkeyHints, submitOnEnter: true, autofocus: true}))
editor = createEditor(
getEditorOptions({submit, loading, getPubkeyHints, submitOnEnter: true, autofocus: true}),
)
})
</script>
src/app/components/ChannelMessage.svelte
+9 -40
View File
@@ -1,9 +1,4 @@
<script lang="ts">
import {onMount} from "svelte"
import type {SvelteComponent} from "svelte"
import type {NativeEmoji} from 'emoji-picker-element/shared'
import twColors from "tailwindcss/colors"
import type {Readable} from "svelte/store"
import {readable, derived} from "svelte/store"
import {hash, ellipsize, uniqBy, groupBy, now} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
@@ -14,24 +9,19 @@
deriveProfile,
deriveProfileDisplay,
formatTimestampAsTime,
tagReactionTo,
tagEvent,
makeThunk,
publishThunk,
pubkey,
} from "@welshman/app"
import type {PublishStatusData} from "@welshman/app"
import {REACTION, DELETE, ZAP_RESPONSE, createEvent, displayRelayUrl, getAncestorTags} from "@welshman/util"
import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
import {repository} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import Avatar from "@lib/components/Avatar.svelte"
import Content from "@app/components/Content.svelte"
import ChannelThread from '@app/components/ChannelThread.svelte'
import ChannelThread from "@app/components/ChannelThread.svelte"
import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
import {tagRoom, REPLY, deriveEvent, displayReaction} from "@app/state"
import {colors, tagRoom, deriveEvent, displayReaction} from "@app/state"
import {publishDelete, publishReaction} from "@app/commands"
import {pushModal} from '@app/modal'
import {pushModal} from "@app/modal"
export let url
export let room
@@ -39,28 +29,6 @@
export let showPubkey = false
export let hideParent = false
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]],
]
const profile = deriveProfile(event.pubkey)
const profileDisplay = deriveProfileDisplay(event.pubkey)
const reactions = deriveEvents(repository, {filters: [{kinds: [REACTION], "#e": [event.id]}]})
@@ -96,8 +64,6 @@
}
}
let drawer: SvelteComponent
$: rootPubkey = $rootEvent?.pubkey || rootTag?.[4]
$: rootProfile = deriveProfile(rootPubkey || "")
$: rootProfileDisplay = deriveProfileDisplay(rootPubkey || "")
@@ -107,7 +73,10 @@
!isPending && !isPublished && findStatus($ps, [PublishStatus.Failure, PublishStatus.Timeout])
</script>
<button type="button" on:click={openThread} class="group relative flex flex-col gap-1 p-2 transition-colors hover:bg-base-300 text-left w-full">
<button
type="button"
on:click={openThread}
class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors hover:bg-base-300">
{#if $rootEvent && !hideParent}
<div class="flex items-center gap-1 pl-12 text-xs">
<Icon icon="square-share-line" size={3} />
@@ -154,7 +123,7 @@
</div>
{#if $reactions.length > 0 || $zaps.length > 0}
<div class="ml-12 text-xs">
{#each groupBy(e => e.content, uniqBy(e => e.pubkey + e.content, $reactions)).entries() as [content, events]}
{#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
src/app/components/ChannelMessageEmojiButton.svelte
+6 -7
View File
@@ -1,13 +1,13 @@
<script lang="ts">
import tippy, {type Instance} from "tippy.js"
import type {NativeEmoji} from 'emoji-picker-element/shared'
import {between} from '@welshman/lib'
import {type Instance} from "tippy.js"
import type {NativeEmoji} from "emoji-picker-element/shared"
import {between} from "@welshman/lib"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import Tippy from "@lib/components/Tippy.svelte"
import EmojiPicker from "@lib/components/EmojiPicker.svelte"
import {tagRoom} from '@app/state'
import {publishReaction} from '@app/commands'
import {tagRoom} from "@app/state"
import {publishReaction} from "@app/commands"
export let url, room, event
@@ -48,6 +48,5 @@
params={{
trigger: "manual",
interactive: true,
}}
/>
}} />
</div>
src/app/components/ChannelThread.svelte
+14 -14
View File
@@ -1,17 +1,17 @@
<script lang="ts">
import {sortBy, append, range} from '@welshman/lib'
import {createEvent} from '@welshman/util'
import type {EventContent, TrustedEvent} from '@welshman/util'
import {repository, makeThunk, publishThunk} from '@welshman/app'
import {deriveEvents} from '@welshman/store'
import ChannelMessage from '@app/components/ChannelMessage.svelte'
import ChannelCompose from '@app/components/ChannelCompose.svelte'
import {tagRoom, REPLY} from '@app/state'
import {sortBy, append} from "@welshman/lib"
import {createEvent} from "@welshman/util"
import type {EventContent, TrustedEvent} from "@welshman/util"
import {repository, makeThunk, publishThunk} from "@welshman/app"
import {deriveEvents} from "@welshman/store"
import ChannelMessage from "@app/components/ChannelMessage.svelte"
import ChannelCompose from "@app/components/ChannelCompose.svelte"
import {tagRoom, REPLY} from "@app/state"
export let url, room, event: TrustedEvent
const replies = deriveEvents(repository, {
filters: [{kinds: [REPLY], '#E': [event.id]}],
filters: [{kinds: [REPLY], "#E": [event.id]}],
})
const onSubmit = ({content, tags}: EventContent) => {
@@ -30,11 +30,11 @@
}
if (seenRoots.size === 0) {
tags.push(['K', String(event.kind)])
tags.push(['E', event.id])
tags.push(["K", String(event.kind)])
tags.push(["E", event.id])
} else {
tags.push(['k', String(event.kind)])
tags.push(['e', event.id])
tags.push(["k", String(event.kind)])
tags.push(["e", event.id])
}
const reply = createEvent(REPLY, {content, tags: append(tagRoom(room, url), tags)})
@@ -43,7 +43,7 @@
}
</script>
<div class="fixed flex flex-col max-h-screen w-full gap-2">
<div class="fixed flex max-h-screen w-full flex-col gap-2">
<div class="overflow-auto pt-3">
<ChannelMessage {url} {room} {event} showPubkey />
{#each sortBy(e => e.created_at, $replies) as reply (reply.id)}
src/app/components/ChatMessage.svelte
+114
View File
@@ -0,0 +1,114 @@
<script lang="ts">
import {derived} from "svelte/store"
import {hash, uniqBy, groupBy, now} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {deriveEvents} from "@welshman/store"
import {PublishStatus} from "@welshman/net"
import {
publishStatusData,
deriveProfile,
deriveProfileDisplay,
formatTimestampAsTime,
pubkey,
} from "@welshman/app"
import type {PublishStatusData} from "@welshman/app"
import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
import {repository} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Avatar from "@lib/components/Avatar.svelte"
import Content from "@app/components/Content.svelte"
import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
import {colors, displayReaction} from "@app/state"
import {makeDelete, makeReaction, sendWrapped} from "@app/commands"
export let event: TrustedEvent
export let pubkeys: string[]
export let showPubkey = false
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 [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
const ps = derived(publishStatusData, $m => Object.values($m[event.id] || {}))
const findStatus = ($ps: PublishStatusData[], statuses: PublishStatus[]) =>
$ps.find(({status}) => statuses.includes(status))
const onReactionClick = async (content: string, events: TrustedEvent[]) => {
const reaction = events.find(e => e.pubkey === $pubkey)
const template = reaction ? makeDelete({event}) : makeReaction({event, content})
await sendWrapped({template, pubkeys})
}
$: isPublished = findStatus($ps, [PublishStatus.Success])
$: isPending = findStatus($ps, [PublishStatus.Pending]) && event.created_at > now() - 30
$: failure =
!isPending && !isPublished && findStatus($ps, [PublishStatus.Failure, PublishStatus.Timeout])
</script>
<button
type="button"
class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors hover:bg-base-300">
<div class="flex gap-2">
{#if showPubkey}
<Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
{:else}
<div class="w-10 min-w-10 max-w-10" />
{/if}
<div class="-mt-1 flex-grow pr-1">
{#if showPubkey}
<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}
<div class="text-sm">
<Content showEntire {event} />
{#if isPending}
<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="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>
</span>
{/if}
</div>
</div>
</div>
{#if $reactions.length > 0 || $zaps.length > 0}
<div class="ml-12 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}
<button
class="join absolute -top-2 right-0 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100"
on:click|stopPropagation>
<ChatMessageEmojiButton {event} {pubkeys} />
<button class="btn join-item btn-xs">
<Icon icon="menu-dots" size={4} />
</button>
</button>
</button>
src/app/components/ChatMessageEmojiButton.svelte
+62
View File
@@ -0,0 +1,62 @@
<script lang="ts">
import {type Instance} from "tippy.js"
import type {NativeEmoji} from "emoji-picker-element/shared"
import {ctx, uniq, between} from "@welshman/lib"
import {Nip59} from "@welshman/signer"
import type {TrustedEvent} from "@welshman/util"
import {makeThunk, signer, publishThunk} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import Tippy from "@lib/components/Tippy.svelte"
import EmojiPicker from "@lib/components/EmojiPicker.svelte"
import {makeReaction} from "@app/commands"
export let event: TrustedEvent
export let pubkeys: string[]
const open = () => popover.show()
const onClick = async (emoji: NativeEmoji) => {
const template = makeReaction({event, content: emoji.unicode})
const nip59 = Nip59.fromSigner($signer!)
for (const recipient of uniq(pubkeys)) {
const rumor = await nip59.wrap(recipient, template)
publishThunk(
makeThunk({
event: rumor.wrap,
relays: ctx.app.router.PublishMessage(recipient).getUrls(),
}),
)
}
popover.hide()
}
const onMouseMove = ({clientX, clientY}: any) => {
const {x, y, width, height} = popover.popper.getBoundingClientRect()
if (!between([x, x + width], clientX) || !between([y, y + height + 30], clientY)) {
popover.hide()
}
}
let popover: Instance
</script>
<svelte:document on:mousemove={onMouseMove} />
<div class="flex">
<Button class="btn join-item btn-xs" on:click={open}>
<Icon icon="smile-circle" size={4} />
</Button>
<Tippy
bind:popover
component={EmojiPicker}
props={{onClick}}
params={{
trigger: "manual",
interactive: true,
}} />
</div>
src/app/components/ChatStart.svelte
+1 -5
View File
@@ -1,8 +1,6 @@
<script lang="ts">
import {goto} from "$app/navigation"
import {displayRelayUrl} from "@welshman/util"
import Field from "@lib/components/Field.svelte"
import Spinner from "@lib/components/Spinner.svelte"
import Button from "@lib/components/Button.svelte"
import Icon from "@lib/components/Icon.svelte"
import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
@@ -19,9 +17,7 @@
<form class="column gap-4" on:submit|preventDefault={onSubmit}>
<h1 class="heading">Start a Chat</h1>
<p class="text-center">
Create an encrypted chat room for private conversations.
</p>
<p class="text-center">Create an encrypted chat room for private conversations.</p>
<Field>
<p slot="label">Members</p>
<div slot="input">
src/app/components/Content.svelte
+11 -13
View File
@@ -16,16 +16,16 @@
isAddress,
isNewline,
} from "@welshman/content"
import Link from '@lib/components/Link.svelte'
import ContentToken from '@app/components/ContentToken.svelte'
import ContentCode from '@app/components/ContentCode.svelte'
import ContentLinkInline from '@app/components/ContentLinkInline.svelte'
import ContentLinkBlock from '@app/components/ContentLinkBlock.svelte'
import ContentNewline from '@app/components/ContentNewline.svelte'
import ContentQuote from '@app/components/ContentQuote.svelte'
import ContentTopic from '@app/components/ContentTopic.svelte'
import ContentMention from '@app/components/ContentMention.svelte'
import {entityLink} from '@app/state'
import Link from "@lib/components/Link.svelte"
import ContentToken from "@app/components/ContentToken.svelte"
import ContentCode from "@app/components/ContentCode.svelte"
import ContentLinkInline from "@app/components/ContentLinkInline.svelte"
import ContentLinkBlock from "@app/components/ContentLinkBlock.svelte"
import ContentNewline from "@app/components/ContentNewline.svelte"
import ContentQuote from "@app/components/ContentQuote.svelte"
import ContentTopic from "@app/components/ContentTopic.svelte"
import ContentMention from "@app/components/ContentMention.svelte"
import {entityLink} from "@app/state"
export let event
export let minLength = 500
@@ -50,8 +50,6 @@
return false
}
const isStartAndEnd = (i: number) => Boolean(isBoundary(i - 1) && isBoundary(i + 1))
const isStartOrEnd = (i: number) => Boolean(isBoundary(i - 1) || isBoundary(i + 1))
const isBlock = (i: number) => {
@@ -115,7 +113,7 @@
{/each}
</div>
{#if ellipsize}
<div class="z-feature relative flex justify-center bg-gradient-to-t from-base-100 pt-12 -m-6">
<div class="relative z-feature -m-6 flex justify-center bg-gradient-to-t from-base-100 pt-12">
<button type="button" class="btn" on:click|stopPropagation|preventDefault={expand}>
See more
</button>
src/app/components/ContentLinkBlock.svelte
+3 -6
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import {ellipsize, displayUrl, postJson} from "@welshman/lib"
import {ellipsize, postJson} from "@welshman/lib"
import {dufflepud, imgproxy} from "@app/state"
import Link from "@lib/components/Link.svelte"
@@ -22,16 +22,13 @@
external
href={url}
style="background-color: rgba(15, 15, 14, 0.5)"
class="relative flex w-full flex-grow flex-col overflow-hidden rounded-xl my-2">
class="relative my-2 flex w-full flex-grow flex-col overflow-hidden rounded-xl">
{#if url.match(/\.(mov|webm|mp4)$/)}
<video controls src={url} class="max-h-96 object-contain object-center">
<track kind="captions" />
</video>
{:else if url.match(/\.(jpe?g|png|gif|webp)$/)}
<img
alt="Link preview"
src={imgproxy(url)}
class="object-cover object-center max-h-96" />
<img alt="Link preview" src={imgproxy(url)} class="max-h-96 object-cover object-center" />
{:else}
{#await loadPreview()}
<div class="center my-12 w-full">
src/app/components/ContentMention.svelte
+2 -2
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import {nip19} from 'nostr-tools'
import {nip19} from "nostr-tools"
import {displayProfile} from "@welshman/util"
import {deriveProfile} from "@welshman/app"
import Link from "@lib/components/Link.svelte"
import {entityLink} from '@app/state'
import {entityLink} from "@app/state"
export let value
src/app/components/ContentQuote.svelte
+4 -7
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import {getAddress, Address} from "@welshman/util"
import {Address} from "@welshman/util"
import Spinner from "@lib/components/Spinner.svelte"
import NoteCard from "@app/components/NoteCard.svelte"
import {deriveEvent} from "@app/state"
@@ -12,18 +12,15 @@
const event = deriveEvent(idOrAddress, relays)
let element: Element
$: address = $event ? getAddress($event) : ""
$: isGroup = address.match(/^(34550|35834):/)
</script>
<button class="block text-left my-2 max-w-full" bind:this={element} on:click|stopPropagation>
<button class="my-2 block max-w-full text-left" bind:this={element} on:click|stopPropagation>
{#if $event}
<NoteCard event={$event} class="p-4 rounded-box bg-alt">
<NoteCard event={$event} class="bg-alt rounded-box p-4">
<slot name="note-content" event={$event} {depth} />
</NoteCard>
{:else}
<div class="p-4 rounded-box">
<div class="rounded-box p-4">
<Spinner loading>Loading event...</Spinner>
</div>
{/if}
src/app/components/ContentToken.svelte
-3
View File
@@ -1,7 +1,4 @@
<script lang="ts">
import cx from "classnames"
import type {NodeViewProps} from "@tiptap/core"
import {NodeViewWrapper} from "svelte-tiptap"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import {clip} from "@app/toast"
src/app/components/InfoHandle.svelte
+9 -4
View File
@@ -8,13 +8,18 @@
<h1 class="heading">What is a nostr address?</h1>
</div>
<p>
Flotilla hosts spaces on the <Link external href="https://nostr.com/" class="underline">Nostr protocol</Link>.
Nostr uses "nostr addresses" to make it easier for people to find you, without having to
Flotilla hosts spaces on the <Link external href="https://nostr.com/" class="underline"
>Nostr protocol</Link
>. Nostr uses "nostr addresses" to make it easier for people to find you, without having to
memorize your public key (your user id).
</p>
<p>
There are several providers of nostr addresses, including several clients. You can find a
list and more information on <Link external href="https://nostr.how/en/guides/get-verified" class="underline">nostr.how</Link>.
There are several providers of nostr addresses, including several clients. You can find a list
and more information on <Link
external
href="https://nostr.how/en/guides/get-verified"
class="underline">nostr.how</Link
>.
</p>
<Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
</div>
src/app/components/InfoRelay.svelte
+5 -3
View File
@@ -8,9 +8,11 @@
<h1 class="heading">What is a relay?</h1>
</div>
<p>
Flotilla hosts spaces on the <Link external href="https://nostr.com/" class="underline">Nostr protocol</Link>.
Nostr uses "relays" to host data, which are special-purpose servers that speak nostr's language.
This means that anyone can host their own data, making the web more decentralized and resilient.
Flotilla hosts spaces on the <Link external href="https://nostr.com/" class="underline"
>Nostr protocol</Link
>. Nostr uses "relays" to host data, which are special-purpose servers that speak nostr's
language. This means that anyone can host their own data, making the web more decentralized and
resilient.
</p>
<p>
Different relays have different policies for access control and content retention. Be sure to
src/app/components/NoteCard.svelte
+3 -5
View File
@@ -1,12 +1,10 @@
<script lang="ts">
import {nip19} from 'nostr-tools'
import {nip19} from "nostr-tools"
import {ctx} from "@welshman/lib"
import {displayPubkey} from "@welshman/util"
import {deriveProfile, deriveProfileDisplay, formatTimestamp} from "@welshman/app"
import {formatTimestamp} from "@welshman/app"
import Link from "@lib/components/Link.svelte"
import Avatar from "@lib/components/Avatar.svelte"
import Profile from "@app/components/Profile.svelte"
import {entityLink} from '@app/state'
import {entityLink} from "@app/state"
export let event
src/app/components/PeopleItem.svelte
+21 -12
View File
@@ -1,16 +1,23 @@
<script lang="ts">
import {onMount} from 'svelte'
import {nip19} from 'nostr-tools'
import {ago, append, first, sortBy, max, WEEK, ctx} from '@welshman/lib'
import {NOTE, getAncestorTags, getListValues} from '@welshman/util'
import type {Filter} from '@welshman/util'
import {deriveEvents} from '@welshman/store'
import {repository, load, loadRelaySelections, userFollows, formatTimestamp, formatTimestampRelative} from '@welshman/app'
import Link from '@lib/components/Link.svelte'
import {onMount} from "svelte"
import {nip19} from "nostr-tools"
import {ago, append, first, sortBy, WEEK, ctx} from "@welshman/lib"
import {NOTE, getAncestorTags, getListTags, getPubkeyTagValues} from "@welshman/util"
import type {Filter} from "@welshman/util"
import {deriveEvents} from "@welshman/store"
import {
repository,
load,
loadRelaySelections,
userFollows,
formatTimestamp,
formatTimestampRelative,
} from "@welshman/app"
import Link from "@lib/components/Link.svelte"
import Profile from "@app/components/Profile.svelte"
import ProfileInfo from "@app/components/ProfileInfo.svelte"
import Content from "@app/components/Content.svelte"
import {entityLink} from '@app/state'
import {entityLink} from "@app/state"
export let pubkey
@@ -38,16 +45,18 @@
{@const event = first(sortBy(e => -e.created_at, roots))}
{@const relays = ctx.app.router.Event(event).getUrls()}
{@const nevent = nip19.neventEncode({id: event.id, relays})}
{@const following = getListValues("p", $userFollows).includes(pubkey)}
{@const following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)}
<div class="divider" />
<Link external class="chat chat-start" href={entityLink(nevent)}>
<div class="chat-bubble">
<Content hideMedia={!following} {event} />
<p class="text-xs text-right">{formatTimestamp(event.created_at)}</p>
<p class="text-right text-xs">{formatTimestamp(event.created_at)}</p>
</div>
</Link>
<div class="flex gap-2">
<div class="badge badge-neutral">{roots.length} recent {roots.length === 1 ? 'note' : 'notes'}</div>
<div class="badge badge-neutral">
{roots.length} recent {roots.length === 1 ? "note" : "notes"}
</div>
<div class="badge badge-neutral">Last posted {formatTimestampRelative(event.created_at)}</div>
</div>
{/if}
src/app/components/PrimaryNav.svelte
-1
View File
@@ -11,7 +11,6 @@
import {quintOut} from "svelte/easing"
import {displayRelayUrl} from "@welshman/util"
import {userProfile} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Avatar from "@lib/components/Avatar.svelte"
import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
import SpaceAdd from "@app/components/SpaceAdd.svelte"
src/app/components/Profile.svelte
+17 -11
View File
@@ -1,12 +1,18 @@
<script lang="ts">
import {nip19} from 'nostr-tools'
import {derived} from 'svelte/store'
import {displayPubkey, getListValues} from "@welshman/util"
import {userFollows, deriveUserWotScore, deriveProfile, deriveHandleForPubkey, displayHandle, deriveProfileDisplay, formatTimestamp, getUserWotScore, followsByPubkey} from "@welshman/app"
import {nip19} from "nostr-tools"
import {displayPubkey, getPubkeyTagValues, getListTags} from "@welshman/util"
import {
userFollows,
deriveUserWotScore,
deriveProfile,
deriveHandleForPubkey,
displayHandle,
deriveProfileDisplay,
} from "@welshman/app"
import Link from "@lib/components/Link.svelte"
import Avatar from "@lib/components/Avatar.svelte"
import WotScore from "@lib/components/WotScore.svelte"
import {entityLink} from '@app/state'
import {entityLink} from "@app/state"
export let pubkey
@@ -16,21 +22,21 @@
const handle = deriveHandleForPubkey(pubkey)
const score = deriveUserWotScore(pubkey)
$: following = getListValues("p", $userFollows).includes(pubkey)
$: following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)
</script>
<div class="flex gap-3 max-w-full">
<div class="flex max-w-full gap-3">
<Link external href={entityLink(npub)} class="py-1">
<Avatar src={$profile?.picture} size={10} />
</Link>
<div class="flex flex-col min-w-0">
<div class="flex gap-2 items-center">
<Link external class="text-bold text-ellipsis overflow-hidden" href={entityLink(npub)}>
<div class="flex min-w-0 flex-col">
<div class="flex items-center gap-2">
<Link external class="text-bold overflow-hidden text-ellipsis" href={entityLink(npub)}>
{$profileDisplay}
</Link>
<WotScore score={$score} active={following} />
</div>
<div class="text-sm opacity-75 text-ellipsis overflow-hidden">
<div class="overflow-hidden text-ellipsis text-sm opacity-75">
{$handle ? displayHandle($handle) : displayPubkey(pubkey)}
</div>
</div>
src/app/components/ProfileCircle.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import {deriveProfile} from '@welshman/app'
import Avatar from '@lib/components/Avatar.svelte'
import {deriveProfile} from "@welshman/app"
import Avatar from "@lib/components/Avatar.svelte"
export let pubkey
src/app/components/ProfileCircles.svelte
+1 -2
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import {deriveProfile} from '@welshman/app'
import ProfileCircle from "@app/components/ProfileCircle.svelte"
export let pubkeys
@@ -8,7 +7,7 @@
<div class="flex pr-3">
{#each pubkeys.slice(0, 15) as pubkey (pubkey)}
<div class="z-feature -mr-3 inline-block">
<ProfileCircle class="w-8 h-8" {pubkey} {...$$props} />
<ProfileCircle class="h-8 w-8" {pubkey} {...$$props} />
</div>
{/each}
</div>
src/app/components/ProfileMultiSelect.svelte
+23 -23
View File
@@ -1,21 +1,17 @@
<script lang="ts">
import {nip19} from 'nostr-tools'
import type {SvelteComponent} from 'svelte'
import tippy, {type Instance} from "tippy.js"
import {append, always, remove, uniq} from '@welshman/lib'
import {getListValues, MUTES} from '@welshman/util'
import {userMutes, profileSearch, tagPubkey} from '@welshman/app'
import Icon from '@lib/components/Icon.svelte'
import Field from '@lib/components/Field.svelte'
import Tippy from '@lib/components/Tippy.svelte'
import Link from '@lib/components/Link.svelte'
import Button from '@lib/components/Button.svelte'
import Suggestions from '@lib/editor/Suggestions.svelte'
import SuggestionProfile from '@lib/editor/SuggestionProfile.svelte'
import Name from '@app/components/Name.svelte'
import {entityLink} from '@app/state'
import {updateList} from '@app/commands'
import {pushToast} from '@app/toast'
import {nip19} from "nostr-tools"
import type {SvelteComponent} from "svelte"
import {type Instance} from "tippy.js"
import {append, remove, uniq} from "@welshman/lib"
import {profileSearch} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Tippy from "@lib/components/Tippy.svelte"
import Link from "@lib/components/Link.svelte"
import Button from "@lib/components/Button.svelte"
import Suggestions from "@lib/editor/Suggestions.svelte"
import SuggestionProfile from "@lib/editor/SuggestionProfile.svelte"
import Name from "@app/components/Name.svelte"
import {entityLink} from "@app/state"
export let value: string[]
@@ -52,7 +48,7 @@
<div class="flex flex-col gap-2">
<div>
{#each value as pubkey (pubkey)}
<div class="badge badge-neutral mr-1 flex-inline gap-1">
<div class="flex-inline badge badge-neutral mr-1 gap-1">
<Button class="flex items-center" on:click={() => removePubkey(pubkey)}>
<Icon icon="close-circle" size={4} class="-ml-1 mt-px" />
</Button>
@@ -64,7 +60,12 @@
</div>
<label class="input input-bordered flex w-full items-center gap-2" bind:this={input}>
<Icon icon="magnifer" />
<input class="grow" type="text" placeholder="Search for profiles..." bind:value={term} on:keydown={onKeyDown} />
<input
class="grow"
type="text"
placeholder="Search for profiles..."
bind:value={term}
on:keydown={onKeyDown} />
</label>
<Tippy
bind:popover
@@ -75,14 +76,13 @@
select: selectPubkey,
search: profileSearch,
component: SuggestionProfile,
class: 'rounded-box',
class: "rounded-box",
style: `left: 4px; width: ${input?.clientWidth + 12}px`,
}}
params={{
trigger: "manual",
interactive: true,
maxWidth: 'none',
maxWidth: "none",
getReferenceClientRect: () => input.getBoundingClientRect(),
}}
/>
}} />
</div>
src/app/components/RelayAdd.svelte
+7 -4
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import {onMount} from 'svelte'
import type {Readable} from 'svelte/store'
import {onMount} from "svelte"
import type {Readable} from "svelte/store"
import {relaySearch} from "@welshman/app"
import {createScroller} from "@lib/html"
import Icon from "@lib/components/Icon.svelte"
@@ -19,7 +19,7 @@
const sub = discoverRelays()
const scroller = createScroller({
delay: 300,
element: element.closest('.modal-box')!,
element: element.closest(".modal-box")!,
onScroll: () => {
limit += 20
},
@@ -37,7 +37,10 @@
<Icon icon="magnifer" />
<input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
</label>
{#each $relaySearch.searchValues(term).filter(url => !$relays.includes(url)).slice(0, limit) as url (url)}
{#each $relaySearch
.searchValues(term)
.filter(url => !$relays.includes(url))
.slice(0, limit) as url (url)}
<RelayItem {url}>
<Button class="btn btn-outline btn-sm flex items-center" on:click={() => addRelay(url)}>
<Icon icon="add-circle" />
src/app/components/RelayItem.svelte
+8 -5
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte"
import {displayUrl} from '@welshman/lib'
import {displayRelayUrl} from '@welshman/util'
import {deriveRelay} from '@welshman/app'
import {displayUrl} from "@welshman/lib"
import {displayRelayUrl} from "@welshman/util"
import {deriveRelay} from "@welshman/app"
export let url
@@ -30,11 +30,14 @@
&bull;
{/if}
{#if $relay?.profile?.supported_nips}
<span class="cursor-pointer underline tooltip" data-tip="NIPs supported: {$relay.profile.supported_nips.join(", ")}">
<span
class="tooltip cursor-pointer underline"
data-tip="NIPs supported: {$relay.profile.supported_nips.join(', ')}">
{$relay.profile.supported_nips.length} NIPs
</span>
&bull;
{/if}
Connected {connections} {connections === 1 ? 'time' : 'times'}
Connected {connections}
{connections === 1 ? "time" : "times"}
</span>
</div>
src/app/components/SpaceAdd.svelte
-1
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import Button from "@lib/components/Button.svelte"
import CardButton from "@lib/components/CardButton.svelte"
import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
src/app/components/ThreadItem.svelte
+4 -4
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import {nip19} from 'nostr-tools'
import {ctx} from '@welshman/lib'
import {nip19} from "nostr-tools"
import {ctx} from "@welshman/lib"
import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte"
import Content from "@app/components/Content.svelte"
import NoteCard from "@app/components/NoteCard.svelte"
import {entityLink} from '@app/state'
import {entityLink} from "@app/state"
export let root
export let replies
@@ -22,7 +22,7 @@
</NoteCard>
<Link
href={entityLink(nevent)}
class="flex items-center gap-2 btn btn-neutral -mt-6 mr-4 rounded-full">
class="btn btn-neutral -mt-6 mr-4 flex items-center gap-2 rounded-full">
<Icon icon="chat-round" />
<span>{replies.length}</span>
</Link>
src/app/modal.ts
+5 -1
View File
@@ -10,7 +10,11 @@ export type ModalOptions = {
drawer?: boolean
}
export const pushModal = (component: ComponentType, props: Record<string, any> = {}, options: ModalOptions = {}) => {
export const pushModal = (
component: ComponentType,
props: Record<string, any> = {},
options: ModalOptions = {},
) => {
const id = randomId()
// TODO: fix memory leak here by listening to history somehow
src/app/state.ts
+64 -28
View File
@@ -1,7 +1,20 @@
import {nip19} from "nostr-tools"
import twColors from "tailwindcss/colors"
import {get, derived} from "svelte/store"
import type {Maybe} from "@welshman/lib"
import {setContext, remove, assoc, sortBy, sort, uniq, partition, nth, max, pushToMapKey, nthEq} from "@welshman/lib"
import {
setContext,
remove,
assoc,
sortBy,
sort,
uniq,
partition,
nth,
max,
pushToMapKey,
nthEq,
} from "@welshman/lib"
import {
getIdFilters,
NOTE,
@@ -29,7 +42,6 @@ import {
subscribe,
collection,
loadRelay,
loadProfile,
profilesByPubkey,
getDefaultAppContext,
getDefaultNetContext,
@@ -69,7 +81,29 @@ export const IMGPROXY_URL = "https://imgproxy.coracle.social"
export const REACTION_KINDS = [REACTION, ZAP_RESPONSE]
export const dufflepud = (path: string) => DUFFLEPUD_URL + '/' + path
export 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]],
]
export const dufflepud = (path: string) => DUFFLEPUD_URL + "/" + path
export const imgproxy = (url: string, {w = 640, h = 1024} = {}) => {
if (!url || url.match("gif$")) {
@@ -153,7 +187,7 @@ setContext({
}),
})
repository.on('update', ({added}) => {
repository.on("update", ({added}) => {
for (const event of added) {
ensureUnwrapped(event)
}
@@ -310,33 +344,36 @@ export const makeChatId = (pubkeys: string[]) => sort(uniq(pubkeys)).join(",")
export const splitChatId = (id: string) => id.split(",")
export const chats = derived([pubkey, chatMessages, profilesByPubkey], ([$pubkey, $messages, $profilesByPubkey]) => {
const messagesByChatId = new Map<string, TrustedEvent[]>()
export const chats = derived(
[pubkey, chatMessages, profilesByPubkey],
([$pubkey, $messages, $profilesByPubkey]) => {
const messagesByChatId = new Map<string, TrustedEvent[]>()
for (const message of $messages) {
const chatId = makeChatId(getPubkeyTagValues(message.tags))
for (const message of $messages) {
const chatId = makeChatId(getPubkeyTagValues(message.tags))
pushToMapKey(messagesByChatId, chatId, message)
}
pushToMapKey(messagesByChatId, chatId, message)
}
return sortBy(
c => -c.last_activity,
Array.from(messagesByChatId.entries()).map(([id, events]): Chat => {
const pubkeys = splitChatId(id)
const messages = sortBy(e => -e.created_at, events)
const last_activity = messages[0].created_at
const search_text = remove($pubkey as string, pubkeys)
.map(pubkey => {
const profile = $profilesByPubkey.get(pubkey)
return sortBy(
c => -c.last_activity,
Array.from(messagesByChatId.entries()).map(([id, events]): Chat => {
const pubkeys = splitChatId(id)
const messages = sortBy(e => -e.created_at, events)
const last_activity = messages[0].created_at
const search_text = remove($pubkey as string, pubkeys)
.map(pubkey => {
const profile = $profilesByPubkey.get(pubkey)
return profile ? displayProfile(profile) : ""
})
.join(' ')
return profile ? displayProfile(profile) : ""
})
.join(" ")
return {id, pubkeys, messages, last_activity, search_text}
})
)
})
return {id, pubkeys, messages, last_activity, search_text}
}),
)
},
)
export const {
indexStore: chatsById,
@@ -348,13 +385,12 @@ export const {
getKey: chat => chat.id,
load: async (id: string, request: Partial<SubscribeRequestWithHandlers> = {}) => {
const $pubkey = pubkey.get()
const [url, room] = splitChatId(id)
const chat = get(chatsById).get(id)
const timestamps = chat?.messages.map(e => e.created_at) || []
const since = Math.max(0, max(timestamps) - 3600)
if ($pubkey) {
await load({...request, filters: [{kinds: [WRAP], '#p': [$pubkey], since}]})
await load({...request, filters: [{kinds: [WRAP], "#p": [$pubkey], since}]})
}
},
})