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

Improve join/leave, publish messages

Browse Source
This commit is contained in:
Jon Staab
2024-08-23 13:33:36 -07:00
parent d6fa0a85bc
commit f12e7ef77c
24 changed files with 412 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/GroupCompose.svelte
+44 -27
View File
@@ -1,9 +1,17 @@
<script lang="ts">
import {onMount} from 'svelte'
import type {Readable} from 'svelte/store'
import {nprofileEncode} from 'nostr-tools/nip19'
import {createEditor, type Editor, EditorContent, SvelteNodeViewRenderer} from 'svelte-tiptap'
import {Extension} from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import Code from '@tiptap/extension-code'
import CodeBlock from '@tiptap/extension-code-block'
import Document from '@tiptap/extension-document'
import Dropcursor from '@tiptap/extension-dropcursor'
import Gapcursor from '@tiptap/extension-gapcursor'
import History from '@tiptap/extension-history'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import HardBreakExtension from '@tiptap/extension-hard-break'
import {Bolt11Extension, NProfileExtension, NEventExtension, NAddrExtension, ImageExtension, VideoExtension, FileUploadExtension} from 'nostr-editor'
import type {StampedEvent} from '@welshman/util'
@@ -21,8 +29,11 @@
import GroupComposeSuggestions from '@app/components/GroupComposeSuggestions.svelte'
import GroupComposeTopicSuggestion from '@app/components/GroupComposeTopicSuggestion.svelte'
import GroupComposeProfileSuggestion from '@app/components/GroupComposeProfileSuggestion.svelte'
import {signer} from '@app/base'
import {searchProfiles, searchTopics, displayProfileByPubkey} from '@app/state'
import {signer, INDEXER_RELAYS} from '@app/base'
import {searchProfiles, publishThunk, makeThunk, searchTopics, userRelayUrlsByNom, getWriteRelayUrls, displayProfileByPubkey, getRelaySelectionsByPubkey} from '@app/state'
import {getPubkeyHints, makeMention, makeIMeta} from '@app/commands'
export let nom
let editor: Readable<Editor>
let uploading = false
@@ -34,31 +45,36 @@
const uploadFiles = () => $editor.chain().uploadFiles().run()
const sendMessage = () => {
console.log($editor.getJSON())
$editor.chain().clearContent().run()
createEvent(CHAT_MESSAGE, {
content: '',
tags: [],
const sendMessage = async () => {
const json = $editor.getJSON()
const relays = $userRelayUrlsByNom.get(nom)
const event = createEvent(CHAT_MESSAGE, {
content: $editor.getText(),
tags: [
["h", nom],
...findNodes(TopicExtension.name, json).map(t => ["t", t.attrs!.name.toLowerCase()]),
...findNodes(NProfileExtension.name, json).map(m => makeMention(m.attrs!.pubkey, m.attrs!.relays)),
...findNodes(ImageExtension.name, json).map(({attrs: {src, sha256: x}}: any) => makeIMeta(src, {x, ox: x})),
],
})
publishThunk(makeThunk({event, relays}))
$editor.chain().clearContent().run()
}
onMount(() => {
editor = createEditor({
autofocus: true,
extensions: [
StarterKit.configure({
blockquote: false,
bold: false,
bulletList: false,
heading: false,
horizontalRule: false,
italic: false,
listItem: false,
orderedList: false,
strike: false,
hardBreak: false,
}),
Code,
CodeBlock,
Document,
Dropcursor,
Gapcursor,
History,
Paragraph,
Text,
HardBreakExtension.extend({
addKeyboardShortcuts() {
return {
@@ -79,7 +95,7 @@
LinkExtension.extend({
addNodeView: () => SvelteNodeViewRenderer(GroupComposeLink),
}),
Bolt11Extension.extend({addNodeView: () => SvelteNodeViewRenderer(GroupComposeBolt11)}),
Bolt11Extension.extend(asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeBolt11)})),
NProfileExtension.extend({
addNodeView: () => SvelteNodeViewRenderer(GroupComposeMention),
addProseMirrorPlugins() {
@@ -89,7 +105,12 @@
name: 'nprofile',
editor: this.editor,
search: searchProfiles,
select: (pubkey: string, props: any) => props.command({pubkey}),
select: (pubkey: string, props: any) => {
const relays = getPubkeyHints(pubkey)
const nprofile = nprofileEncode({pubkey, relays})
return props.command({pubkey, nprofile, relays})
},
suggestionComponent: GroupComposeProfileSuggestion,
suggestionsComponent: GroupComposeSuggestions,
}),
@@ -135,11 +156,7 @@
}),
],
content: '',
onUpdate: () => {
// console.log('update', $editor.getJSON(), $editor.getText())
},
})
console.log($editor)
})
</script>
src/app/components/GroupComposeBolt11.svelte
+12 -2
View File
@@ -1,10 +1,20 @@
<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'
export let node: NodeViewProps['node']
export let selected: NodeViewProps['selected']
const copy = () => clip(node.attrs.lnbc)
</script>
<NodeViewWrapper class="inline link-content">
{node.attrs.lnbc.slice(0, 16)}...
<NodeViewWrapper class="inline">
<Button on:click={copy} class={cx("link-content", {'link-content-selected': selected})}>
<Icon icon="bolt" size={3} class="inline-block translate-y-px" />
{node.attrs.lnbc.slice(0, 16)}...
</Button>
</NodeViewWrapper>
src/app/components/GroupComposeMention.svelte
+4 -1
View File
@@ -7,10 +7,13 @@
import {deriveProfile} from '@app/state'
export let node: NodeViewProps['node']
export let selected: NodeViewProps['selected']
$: profile = deriveProfile(node.attrs.pubkey, node.attrs.relays)
</script>
<NodeViewWrapper class="inline">
<span class="text-primary">@</span><Link external href="https://njump.me/{node.attrs.nprofile}">{displayProfile($profile)}</Link>
<Link external href="https://njump.me/{node.attrs.nprofile}" class={cx("link-content", {'link-content-selected': selected})}>
@{displayProfile($profile)}
</Link>
</NodeViewWrapper>
src/app/components/GroupComposeTopic.svelte
+7 -2
View File
@@ -1,10 +1,15 @@
<script lang="ts">
import cx from 'classnames'
import type {NodeViewProps} from '@tiptap/core'
import {NodeViewWrapper} from 'svelte-tiptap'
import Link from '@lib/components/Link.svelte'
export let node: NodeViewProps['node']
export let selected: NodeViewProps['selected']
</script>
<NodeViewWrapper class="inline text-primary">
#<span class="underline">{node.attrs.name}</span>
<NodeViewWrapper class="inline">
<Link external href="https://coracle.social/topics/{node.attrs.name.toLowerCase()}" class={cx("link-content", {'link-content-selected': selected})}>
#{node.attrs.name}
</Link>
</NodeViewWrapper>
src/app/components/GroupNote.svelte
+30 -6
View File
@@ -1,13 +1,15 @@
<script lang="ts">
import twColors from "tailwindcss/colors"
import {readable} from "svelte/store"
import {readable, derived} from "svelte/store"
import {hash} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {GROUP_REPLY, getAncestorTags, displayPubkey} from "@welshman/util"
import {fly} from "@lib/transition"
import {PublishStatus} from "@welshman/net"
import {GROUP_REPLY, displayRelayUrl, getAncestorTags, displayPubkey} from "@welshman/util"
import {fly, fade} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte"
import Avatar from "@lib/components/Avatar.svelte"
import {deriveProfile, deriveProfileDisplay, deriveEvent} from "@app/state"
import type {PublishStatusData} from "@app/state"
import {deriveProfile, deriveProfileDisplay, deriveEvent, publishStatusData} from "@app/state"
export let event: TrustedEvent
export let showPubkey: boolean
@@ -41,10 +43,17 @@
const parentHints = [replies[0]?.[2]].filter(Boolean)
const parentEvent = parentId ? deriveEvent(parentId, parentHints) : readable(null)
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))
$: parentPubkey = $parentEvent?.pubkey || replies[0]?.[4]
$: parentProfile = deriveProfile(parentPubkey)
$: parentProfileDisplay = deriveProfileDisplay(parentPubkey)
$: isPublished = findStatus($ps, [PublishStatus.Success])
$: isPending = findStatus($ps, [PublishStatus.Pending])
$: 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">
@@ -65,13 +74,28 @@
{#if showPubkey}
<Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
{:else}
<div class="w-10" />
<div class="min-w-10 max-w-10 w-10" />
{/if}
<div class="-mt-1">
{#if showPubkey}
<strong class="text-sm" style="color: {colorValue}" data-color={colorName}>{$profileDisplay}</strong>
{/if}
<p class="text-sm">{event.content}</p>
<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="opacity-50">Sending...</span>
</span>
{:else if failure}
<span
class="ml-1 flex-inline gap-1 tooltip cursor-pointer"
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}
</p>
</div>
</div>
<div
src/app/components/InfoNip29.svelte
+12 -8
View File
@@ -1,7 +1,9 @@
<script lang="ts">
import {displayRelayUrl} from '@welshman/util'
import Button from "@lib/components/Button.svelte"
import Link from "@lib/components/Link.svelte"
import Icon from "@lib/components/Icon.svelte"
import {DEFAULT_RELAYS} from "@app/base"
import {clip} from "@app/toast"
</script>
@@ -21,14 +23,16 @@
>. If you do decide to join someone else's, make sure to follow their directions for registering
as a user.
</p>
<div class="alert !flex items-center justify-between">
<div class="flex items-center gap-2">
<Icon icon="remote-controller-minimalistic" />
groups.fiatjaf.com
{#each DEFAULT_RELAYS as url}
<div class="alert !flex items-center justify-between">
<div class="flex items-center gap-2">
<Icon icon="remote-controller-minimalistic" />
{displayRelayUrl(url)}
</div>
<Button on:click={() => clip(url)}>
<Icon icon="copy" />
</Button>
</div>
<Button on:click={() => clip("groups.fiatjaf.com")}>
<Icon icon="copy" />
</Button>
</div>
{/each}
<Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
</div>
src/app/components/PrimaryNav.svelte
+6 -3
View File
@@ -52,9 +52,12 @@
{#each $userGroupsByNom.entries() as [nom, qualifiedGroups] (nom)}
{@const qualifiedGroup = qualifiedGroups[0]}
<PrimaryNavItem title={displayGroup(qualifiedGroup?.group)} href="/spaces/{nom}">
<div class="w-10 rounded-full border border-solid border-base-300">
<img alt={displayGroup(qualifiedGroup?.group)} src={qualifiedGroup?.group.picture} />
</div>
<Avatar
icon="ghost"
class="!h-10 !w-10 border border-solid border-base-300"
alt={displayGroup(qualifiedGroup?.group)}
src={qualifiedGroup?.group.picture}
size={7} />
</PrimaryNavItem>
{/each}
<PrimaryNavItem title="Add Space" on:click={addSpace}>
src/app/components/SpaceJoin.svelte
+24 -6
View File
@@ -1,14 +1,17 @@
<script lang="ts">
import {append, remove} from "@welshman/lib"
import {displayRelayUrl} from "@welshman/util"
import {PublishStatus} from "@welshman/net"
import {goto} from "$app/navigation"
import Spinner from "@lib/components/Spinner.svelte"
import Button from "@lib/components/Button.svelte"
import Icon from "@lib/components/Icon.svelte"
import InfoNip29 from "@app/components/InfoNip29.svelte"
import {pushModal} from "@app/modal"
import {pushModal, clearModal} from "@app/modal"
import {pushToast} from "@app/toast"
import type {PublishStatusData} from "@app/state"
import {deriveGroup, displayGroup, relayUrlsByNom} from "@app/state"
import {addGroupMemberships} from "@app/commands"
import {sendJoinRequest, addGroupMemberships} from "@app/commands"
export let nom
@@ -22,20 +25,35 @@
: append(e.target.value, urls)
}
const tryJoin = async () => {
for (const url of urls) {
const {status, message} = await sendJoinRequest(nom, url)
if (status !== PublishStatus.Success) {
return pushToast({
theme: 'error',
message: `Failed to join relay: ${message || status}`,
})
}
}
await addGroupMemberships(urls.map(url => ["group", nom, url]))
clearModal()
}
const join = async () => {
loading = true
try {
await addGroupMemberships(urls.map(url => ["group", nom, url]))
await tryJoin()
} finally {
loading = false
}
goto(`/spaces/${nom}`)
}
let urls: string[] = $relayUrlsByNom.get(nom) || []
let loading = false
let urls: string[] = $relayUrlsByNom.get(nom) || []
$: hasUrls = urls.length > 0
$: urlOptions = $relayUrlsByNom.get(nom)?.toSorted() || []
src/app/components/Toast.svelte
+3 -1
View File
@@ -4,12 +4,14 @@
</script>
{#if $toast}
{@const theme = $toast.theme || "info"}
{#key $toast.id}
<div transition:fly class="toast z-toast">
<div
role="alert"
class="alert flex justify-center"
class:alert-error={$toast.theme === "error"}>
class:alert-info={theme === "info"}
class:alert-error={theme === "error"}>
{$toast.message}
</div>
</div>