coracle/flotilla
1
6
Fork 24
Code Issues 43 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

Pull latest commits from dev on Github repo #71

Closed
mplorentz wants to merge 20 commits from andotherstuff-dev into dev
pull from: andotherstuff-dev
merge into: coracle:dev
Conversation 1 Commits 20 Files Changed 38
+984 -457
38 changed files with 984 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
+2 -1
View File
@@ -157,7 +157,7 @@ src/
- Derive all other data inside the component from identifiers
- Example: Don't pass `members` prop, derive it from `h` inside component
**Code Style:**
**CRITICAL Code Style Guidelines:**
- **No `null`** - only use `undefined`
- Svelte 5 runes (`$state`, `$derived`, `$effect`) only in UI components
@@ -168,6 +168,7 @@ src/
- When dynamically building classes, use `cx` from `classnames` rather than embedded ternaries or svelte 4's old `class:` syntax.
- When creating forms, use `FieldInline` or `Field` instead of custom elements/tailwindcss
- Do not define svelte event handlers inline, instead name them and put them in the script section of templates
- Avoid using `as`, except where necessary. Instead, annotate function parameters, and ensure upstream values are typed correctly.
## Common Tasks
README.md
+1 -1
View File
@@ -20,7 +20,7 @@ If you're deploying a custom version of flotilla, be sure to remove the `plausib
## Development
See [./CONTRIBUTING.md](CONTRIBUTING.md).
See [CONTRIBUTING.md](AGENTS.md).
## Deployment
ios/App/App.xcodeproj/project.pbxproj
+2 -2
View File
@@ -358,7 +358,7 @@
CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 30;
CURRENT_PROJECT_VERSION = 31;
DEVELOPMENT_TEAM = S26U9DYW3A;
INFOPLIST_FILE = App/Info.plist;
INFOPLIST_KEY_CFBundleDisplayName = "Flotilla Chat";
@@ -385,7 +385,7 @@
CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 30;
CURRENT_PROJECT_VERSION = 31;
DEVELOPMENT_TEAM = S26U9DYW3A;
INFOPLIST_FILE = App/Info.plist;
INFOPLIST_KEY_CFBundleDisplayName = "Flotilla Chat";
package.json
+1 -1
View File
@@ -70,7 +70,7 @@
"@welshman/signer": "^0.8.4",
"@welshman/store": "^0.8.4",
"@welshman/util": "^0.8.4",
"compressorjs": "^1.2.1",
"compressorjs-next": "^1.1.2",
"daisyui": "^4.12.24",
"date-picker-svelte": "^2.17.0",
"dotenv": "^16.6.1",
pnpm-lock.yaml
Generated
+6 -20
View File
@@ -110,9 +110,9 @@ importers:
'@welshman/util':
specifier: ^0.8.4
version: 0.8.4(@noble/curves@1.9.7)(@welshman/lib@0.8.4)(nostr-tools@2.20.0(typescript@5.9.3))
compressorjs:
specifier: ^1.2.1
version: 1.2.1
compressorjs-next:
specifier: ^1.1.2
version: 1.1.2
daisyui:
specifier: ^4.12.24
version: 4.12.24(postcss@8.5.6)
@@ -2048,9 +2048,6 @@ packages:
resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
engines: {node: '>=8'}
blueimp-canvas-to-blob@3.29.0:
resolution: {integrity: sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg==}
boolbase@1.0.0:
resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
@@ -2211,8 +2208,8 @@ packages:
compare-func@2.0.0:
resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
compressorjs@1.2.1:
resolution: {integrity: sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==}
compressorjs-next@1.1.2:
resolution: {integrity: sha512-5nwrVCR3+kSd4cwIzQEB72W4d+uHQ9so8U2C+WBr74DFoG34FM9CXoNZMsCnCTUDhmDKJ/3aI4Di1+QKF8LFow==}
concat-map@0.0.1:
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
@@ -3001,10 +2998,6 @@ packages:
resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
engines: {node: '>=8'}
is-blob@2.1.0:
resolution: {integrity: sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==}
engines: {node: '>=6'}
is-boolean-object@1.2.2:
resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
engines: {node: '>= 0.4'}
@@ -6909,8 +6902,6 @@ snapshots:
binary-extensions@2.3.0: {}
blueimp-canvas-to-blob@3.29.0: {}
boolbase@1.0.0: {}
bplist-creator@0.1.0:
@@ -7073,10 +7064,7 @@ snapshots:
array-ify: 1.0.0
dot-prop: 5.3.0
compressorjs@1.2.1:
dependencies:
blueimp-canvas-to-blob: 3.29.0
is-blob: 2.1.0
compressorjs-next@1.1.2: {}
concat-map@0.0.1: {}
@@ -8004,8 +7992,6 @@ snapshots:
dependencies:
binary-extensions: 2.3.0
is-blob@2.1.0: {}
is-boolean-object@1.2.2:
dependencies:
call-bound: 1.0.4
src/app.css
+5 -1
View File
@@ -402,6 +402,10 @@ progress[value]::-webkit-progress-value {
@apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)];
}
.ct {
@apply top-[calc(var(--sait)+5rem)] md:top-[calc(var(--sait)+3rem)];
}
/* Keyboard open state adjustments */
body.keyboard-open .cb {
@@ -419,5 +423,5 @@ body.keyboard-open .hide-on-keyboard {
}
.chat__scroll-down {
@apply fixed bottom-28 right-4 z-feature md:bottom-16;
@apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
}
src/app/components/ContentLinkBlock.svelte
+5 -4
View File
@@ -1,12 +1,12 @@
<script lang="ts">
import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
import {isRelayUrl} from "@welshman/util"
import {isRelayUrl, getTagValue} from "@welshman/util"
import {preventDefault, stopPropagation} from "@lib/html"
import Link from "@lib/components/Link.svelte"
import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
import {pushModal} from "@app/util/modal"
import {dufflepud, PLATFORM_URL} from "@app/core/state"
import {dufflepud, PLATFORM_URL, IMAGE_CONTENT_TYPES, VIDEO_CONTENT_TYPES} from "@app/core/state"
import {makeSpacePath} from "@app/util/routes"
const {value, event} = $props()
@@ -14,6 +14,7 @@
let hideImage = $state(false)
const url = value.url.toString()
const fileType = getTagValue("file-type", event.tags) || ""
const [href, external] = call(() => {
if (isRelayUrl(url)) return [makeSpacePath(url), false]
if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
@@ -40,11 +41,11 @@
<Link {external} {href} class="my-2 block">
<div class="overflow-hidden rounded-box">
{#if url.match(/\.(mov|webm|mp4)$/)}
{#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
<video controls src={url} class="max-h-96 rounded-box object-contain object-center">
<track kind="captions" />
</video>
{:else if url.match(/\.(jpe?g|png|gif|webp)$/)}
{:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
<button type="button" onclick={stopPropagation(preventDefault(expand))}>
<ContentLinkBlockImage {value} {event} class="m-auto max-h-96 rounded-box" />
</button>
src/app/components/ContentLinkInline.svelte
+4 -3
View File
@@ -1,18 +1,19 @@
<script lang="ts">
import {call, displayUrl} from "@welshman/lib"
import {isRelayUrl} from "@welshman/util"
import {isRelayUrl, getTagValue} from "@welshman/util"
import {preventDefault, stopPropagation} from "@lib/html"
import LinkRound from "@assets/icons/link-round.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte"
import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
import {pushModal} from "@app/util/modal"
import {PLATFORM_URL} from "@app/core/state"
import {PLATFORM_URL, IMAGE_CONTENT_TYPES} from "@app/core/state"
import {makeSpacePath} from "@app/util/routes"
const {value, event} = $props()
const url = value.url.toString()
const fileType = getTagValue("file-type", event.tags) || ""
const [href, external] = call(() => {
if (isRelayUrl(url)) return [makeSpacePath(url), false]
if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
@@ -23,7 +24,7 @@
const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
</script>
{#if url.match(/\.(jpe?g|png|gif|webp)$/)}
{#if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
<!-- Use a real link so people can copy the href -->
<a
href={url}
src/app/components/MenuSettings.svelte
+16 -13
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import {Capacitor} from "@capacitor/core"
import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
import Server from "@assets/icons/server.svg?dataurl"
import Moon from "@assets/icons/moon.svg?dataurl"
@@ -52,19 +53,21 @@
{/snippet}
</CardButton>
</Link>
<Link replaceState href="/settings/wallet">
<CardButton class="btn-neutral">
{#snippet icon()}
<div><Icon icon={Wallet} size={7} /></div>
{/snippet}
{#snippet title()}
<div>Wallet</div>
{/snippet}
{#snippet info()}
<div>Connect a bitcoin wallet for sending social tips</div>
{/snippet}
</CardButton>
</Link>
{#if Capacitor.getPlatform() !== "ios"}
<Link replaceState href="/settings/wallet">
<CardButton class="btn-neutral">
{#snippet icon()}
<div><Icon icon={Wallet} size={7} /></div>
{/snippet}
{#snippet title()}
<div>Wallet</div>
{/snippet}
{#snippet info()}
<div>Connect a bitcoin wallet for sending social tips</div>
{/snippet}
</CardButton>
</Link>
{/if}
<Link replaceState href="/settings/relays">
<CardButton class="btn-neutral">
{#snippet icon()}
src/app/components/NoteItem.svelte
+8 -5
View File
@@ -2,6 +2,7 @@
import type {Snippet} from "svelte"
import type {NativeEmoji} from "emoji-picker-element/shared"
import type {TrustedEvent, EventContent} from "@welshman/util"
import {Router} from "@welshman/router"
import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import EmojiButton from "@lib/components/EmojiButton.svelte"
@@ -11,26 +12,28 @@
import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
type Props = {
url: string
event: TrustedEvent
children?: Snippet
url?: string
}
const {url, event, children}: Props = $props()
const shouldProtect = canEnforceNip70(url)
const relays = url ? [url] : Router.get().Event(event).getUrls()
const shouldProtect = url ? canEnforceNip70(url) : Promise.resolve(false)
const deleteReaction = async (event: TrustedEvent) =>
publishDelete({relays: [url], event, protect: await shouldProtect})
publishDelete({relays, event, protect: await shouldProtect})
const createReaction = async (template: EventContent) =>
publishReaction({...template, event, relays: [url], protect: await shouldProtect})
publishReaction({...template, event, relays, protect: await shouldProtect})
const onEmoji = async (emoji: NativeEmoji) =>
publishReaction({
event,
relays,
content: emoji.unicode,
relays: [url],
protect: await shouldProtect,
})
</script>
src/app/components/ProfileDetail.svelte
+35 -7
View File
@@ -15,6 +15,7 @@
import Letter from "@assets/icons/letter-opened.svg?dataurl"
import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
import Restart from "@assets/icons/restart.svg?dataurl"
import {fly} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte"
import ImageIcon from "@lib/components/ImageIcon.svelte"
@@ -30,7 +31,7 @@
import EventInfo from "@app/components/EventInfo.svelte"
import ProfileBadges from "@app/components/ProfileBadges.svelte"
import ChatEnable from "@app/components/ChatEnable.svelte"
import {pubkeyLink, deriveUserIsSpaceAdmin} from "@app/core/state"
import {pubkeyLink, deriveUserIsSpaceAdmin, deriveSpaceBannedPubkeyItems} from "@app/core/state"
import {pushModal} from "@app/util/modal"
import {pushToast} from "@app/util/toast"
import {makeChatPath} from "@app/util/routes"
@@ -46,6 +47,10 @@
const userIsAdmin = deriveUserIsSpaceAdmin(url)
const bannedPubkeys = url ? deriveSpaceBannedPubkeyItems(url) : undefined
const isBanned = $derived($bannedPubkeys?.some(item => item.pubkey === pubkey) ?? false)
const back = () => history.back()
const chatPath = makeChatPath([pubkey])
@@ -81,6 +86,20 @@
},
})
const restoreMember = async () => {
const {error} = await manageRelay(url!, {
method: ManagementMethod.AllowPubkey,
params: [pubkey],
})
if (error) {
pushToast({theme: "error", message: error})
} else {
pushToast({message: "User has successfully been restored!"})
back()
}
}
let showMenu = $state(false)
onMount(() => {
@@ -112,12 +131,21 @@
</li>
{/if}
{#if $userIsAdmin}
<li>
<Button class="text-error" onclick={banMember}>
<Icon icon={MinusCircle} />
Ban User
</Button>
</li>
{#if isBanned}
<li>
<Button onclick={restoreMember}>
<Icon icon={Restart} />
Restore User
</Button>
</li>
{:else}
<li>
<Button class="text-error" onclick={banMember}>
<Icon icon={MinusCircle} />
Ban User
</Button>
</li>
{/if}
{/if}
</ul>
</Popover>
src/app/components/ReactionSummary.svelte
+2 -2
View File
@@ -140,7 +140,7 @@
data-tip={tooltip}
class={cx(
reactionClass,
"flex-inline btn btn-outline btn-neutral btn-xs flex items-center gap-1 rounded-full text-xs font-normal",
"flex-inline btn btn-outline btn-neutral btn-xs flex items-center gap-1 rounded-full text-xs font-normal bg-alt",
{
tooltip: !noTooltip && !isMobile,
"border-neutral-content/20": !isOwn,
@@ -162,7 +162,7 @@
data-tip={tooltip}
class={cx(
reactionClass,
"flex-inline btn btn-outline btn-neutral btn-xs gap-1 rounded-full font-normal",
"flex-inline btn btn-outline btn-neutral btn-xs gap-1 rounded-full font-normal bg-alt",
{
tooltip: !noTooltip && !isMobile,
"border-neutral-content/20": !isOwn,
src/app/components/ReportDetails.svelte
+1 -3
View File
@@ -40,9 +40,7 @@
<ModalSubtitle>All reports for this event are shown below.</ModalSubtitle>
</ModalHeader>
{#each $reports.values() as report (report.id)}
<div class="card2 card2-sm bg-alt">
<ReportItem {url} event={report} {onDelete} />
</div>
<ReportItem {url} event={report} {onDelete} />
{/each}
</ModalBody>
<ModalFooter>
src/app/components/ReportItem.svelte
+3 -15
View File
@@ -3,14 +3,12 @@
import {getTag, getIdFilters} from "@welshman/util"
import {load, LOCAL_RELAY_URL} from "@welshman/net"
import type {TrustedEvent} from "@welshman/util"
import {pubkey} from "@welshman/app"
import Button from "@lib/components/Button.svelte"
import Profile from "@app/components/Profile.svelte"
import ProfileName from "@app/components/ProfileName.svelte"
import ProfileDetail from "@app/components/ProfileDetail.svelte"
import NoteContent from "@app/components/NoteContent.svelte"
import ReportMenu from "@app/components/ReportMenu.svelte"
import {publishDelete, canEnforceNip70} from "@app/core/commands"
import {pushModal} from "@app/util/modal"
import {goToEvent} from "@app/util/routes"
@@ -25,7 +23,6 @@
const etag = getTag("e", event.tags)
const ptag = getTag("p", event.tags)
const reason = etag?.[2] || ptag?.[2]
const shouldProtect = canEnforceNip70(url)
const onClick = (e: Event, event: TrustedEvent) => {
// @ts-ignore
@@ -35,17 +32,12 @@
goToEvent(event)
}
}
const deleteReport = async () => {
publishDelete({event, relays: [url], protect: await shouldProtect})
onDelete?.()
}
</script>
<div class="column gap-4">
<div class="column gap-4 card2 card2-sm bg-alt">
<div class="flex justify-between">
<div>
<Profile pubkey={event.pubkey} {url} avatarSize={5} />
<ProfileName pubkey={event.pubkey} {url} />
<span>
Reported this event
{#if reason}
@@ -53,11 +45,7 @@
{/if}
</span>
</div>
{#if event.pubkey === $pubkey}
<Button class="btn-default btn" onclick={deleteReport}>Delete Report</Button>
{:else}
<ReportMenu {url} {event} />
{/if}
<ReportMenu {url} {event} {onDelete} />
</div>
{#if event.content}
<div class="border-l-2 border-primary pl-3">
src/app/components/ReportMenu.svelte
+44 -19
View File
@@ -1,26 +1,32 @@
<script lang="ts">
import {getTag, ManagementMethod} from "@welshman/util"
import type {TrustedEvent} from "@welshman/util"
import {manageRelay, repository, displayProfileByPubkey} from "@welshman/app"
import {pubkey, manageRelay, repository, displayProfileByPubkey} from "@welshman/app"
import InboxOut from "@assets/icons/inbox-out.svg?dataurl"
import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
import Close from "@assets/icons/close.svg?dataurl"
import {fly} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte"
import Popover from "@lib/components/Popover.svelte"
import Button from "@lib/components/Button.svelte"
import Confirm from "@lib/components/Confirm.svelte"
import {deriveUserIsSpaceAdmin} from "@app/core/state"
import {publishDelete, canEnforceNip70} from "@app/core/commands"
import {pushToast} from "@app/util/toast"
import {pushModal} from "@app/util/modal"
type Props = {
url: string
event: TrustedEvent
onDelete?: () => void
}
const {url, event}: Props = $props()
const {url, event, onDelete}: Props = $props()
const shouldProtect = canEnforceNip70(url)
const userIsAdmin = deriveUserIsSpaceAdmin(url)
const etag = getTag("e", event.tags)
const ptag = getTag("p", event.tags)
@@ -32,6 +38,11 @@
isOpen = false
}
const deleteReport = async () => {
publishDelete({event, relays: [url], protect: await shouldProtect})
onDelete?.()
}
const dismissReport = async () => {
const {error} = await manageRelay(url, {
method: ManagementMethod.BanEvent,
@@ -43,7 +54,7 @@
} else {
pushToast({message: "Content has successfully been deleted!"})
repository.removeEvent(event.id)
history.back()
onDelete?.()
}
}
@@ -51,7 +62,7 @@
const [_, id, reason = ""] = etag!
pushModal(Confirm, {
title: `Delete Content`,
title: `Remove Content`,
message: `Are you sure you want to delete this content from the space?`,
confirm: async () => {
const {error} = await manageRelay(url, {
@@ -63,15 +74,17 @@
pushToast({theme: "error", message: error})
} else {
pushToast({message: "Content has successfully been deleted!"})
repository.removeEvent(event.id)
repository.removeEvent(id)
history.back()
setTimeout(() => onDelete?.())
}
},
})
}
const banMember = () => {
const [pubkey, reason = ""] = ptag!
const [_, pubkey, reason = ""] = ptag!
pushModal(Confirm, {
title: "Ban User",
@@ -86,7 +99,9 @@
pushToast({theme: "error", message: error})
} else {
pushToast({message: "User has successfully been banned!"})
repository.removeEvent(event.id)
history.back()
setTimeout(() => onDelete?.())
}
},
})
@@ -104,27 +119,37 @@
<ul
transition:fly
class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
<li>
<Button onclick={dismissReport}>
<Icon icon={InboxOut} />
Dismiss Report
</Button>
</li>
{#if etag}
{#if event.pubkey === $pubkey}
<li>
<Button class="text-error" onclick={banContent}>
<Icon icon={TrashBin2} />
Remove Content
<Button onclick={deleteReport}>
<Icon icon={Close} />
Delete Report
</Button>
</li>
{/if}
{#if ptag}
{#if $userIsAdmin}
<li>
<Button class="text-error" onclick={banMember}>
<Icon icon={MinusCircle} />
Ban User
<Button onclick={dismissReport}>
<Icon icon={InboxOut} />
Dismiss Report
</Button>
</li>
{#if etag}
<li>
<Button class="text-error" onclick={banContent}>
<Icon icon={TrashBin2} />
Remove Content
</Button>
</li>
{/if}
{#if ptag}
<li>
<Button class="text-error" onclick={banMember}>
<Icon icon={MinusCircle} />
Ban User
</Button>
</li>
{/if}
{/if}
</ul>
</Popover>
src/app/components/RoomDetail.svelte
+5 -4
View File
@@ -11,6 +11,7 @@
import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
import EyeClosed from "@assets/icons/eye-closed.svg?dataurl"
import Eye from "@assets/icons/eye.svg?dataurl"
import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
import Lock from "@assets/icons/lock.svg?dataurl"
import Microphone from "@assets/icons/microphone.svg?dataurl"
@@ -198,6 +199,9 @@
{/if}
</div>
</div>
{#if $room?.about}
<p>{$room.about}</p>
{/if}
<div class="flex flex-col gap-2 card2 card2-sm bg-alt">
<strong class="text-lg">Room Permissions</strong>
<div class="flex gap-2 flex-wrap">
@@ -233,14 +237,11 @@
<Button
class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
data-tip="This room has no additional access controls.">
<Icon size={4} icon={MinusCircle} /> Public
<Icon size={4} icon={Eye} /> Public
</Button>
{/if}
</div>
</div>
{#if $room?.about}
<p>{$room.about}</p>
{/if}
{#if $members.length > 0}
<div class="card2 card2-sm bg-alt flex items-center justify-between gap-4">
<div class="flex items-center gap-4">
src/app/components/RoomItemMenuButton.svelte
+1 -1
View File
@@ -17,7 +17,7 @@
if (popover) {
const {x, y, width, height} = popover.popper.getBoundingClientRect()
if (!between([x, x + width], clientX) || !between([y, y + height + 30], clientY)) {
if (!between([x, x + width], clientX) || !between([y - 50, y + height + 50], clientY)) {
popover.hide()
}
}
src/app/components/SpaceEdit.svelte
+4 -4
View File
@@ -172,12 +172,12 @@
</FieldInline>
<FieldInline>
{#snippet label()}
<p>Description</p>
<p class="flex flex-col items-start h-full">Description</p>
{/snippet}
{#snippet input()}
<label class="input input-bordered flex w-full items-center gap-2">
<input bind:value={values.description} class="grow" type="text" />
</label>
<textarea
bind:value={values.description}
class="min-h-24 textarea textarea-bordered flex w-full"></textarea>
{/snippet}
</FieldInline>
</ModalBody>
src/app/components/SpaceMenuButton.svelte
+1 -1
View File
@@ -13,7 +13,7 @@
const openMenu = () => pushDrawer(SpaceMenu, {url})
</script>
<Button onclick={openMenu} class="btn btn-neutral btn-sm relative md:hidden">
<Button onclick={openMenu} class="btn btn-neutral btn-sm relative md:hidden btn-square">
<Icon icon={MenuDots} />
{#if $status.theme !== "success"}
<div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-{$status.theme}"></div>
src/app/components/SpaceReports.svelte
+7 -1
View File
@@ -22,6 +22,12 @@
const reports = deriveEventsForUrl(url, [{kinds: [REPORT]}])
const back = () => history.back()
const onDelete = () => {
if ($reports.length === 0) {
back()
}
}
</script>
<Modal>
@@ -32,7 +38,7 @@
</ModalHeader>
<div class="flex flex-col gap-2">
{#each $reports as event (event.id)}
<ReportItem {url} {event} />
<ReportItem {url} {event} {onDelete} />
{:else}
<p class="py-12 text-center">No reports found.</p>
{/each}
src/app/components/SpaceSearch.svelte
+167
View File
@@ -0,0 +1,167 @@
<script lang="ts">
import {tick} from "svelte"
import {createSearch} from "@welshman/app"
import {formatTimestampAsDate, groupBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {MESSAGE} from "@welshman/util"
import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
import Magnifier from "@assets/icons/magnifier.svg?dataurl"
import {fly} from "@lib/transition"
import Button from "@lib/components/Button.svelte"
import Icon from "@lib/components/Icon.svelte"
import {deriveEventsForUrl} from "@app/core/state"
import {goToEvent} from "@app/util/routes"
type Props = {
url: string
h?: string
}
const {url, h}: Props = $props()
const spaceMessages = deriveEventsForUrl(
url,
h ? [{kinds: [MESSAGE], "#h": [h]}] : [{kinds: [MESSAGE]}],
)
let term = $state("")
let show = $state(false)
let input: HTMLInputElement | undefined = $state()
const open = () => {
show = true
tick().then(() => input?.focus())
}
const close = () => {
show = false
}
const clear = () => {
term = ""
show = false
}
const onInput = () => {
show = true
}
const searchIndex = $derived.by(() =>
createSearch($spaceMessages, {
getValue: event => event.id,
fuseOptions: {keys: ["content"]},
}),
)
const results = $derived(term ? searchIndex.searchOptions(term) : [])
const eventsByAge = $derived(groupBy(e => getAgeSection(e.created_at), results))
const getAgeSection = (createdAt: number) => {
const age = now() - createdAt
if (age <= DAY) {
return "day"
}
if (age <= WEEK) {
return "week"
}
return "older"
}
const getAgeLabel = (createdAt: number) => {
const age = now() - createdAt
if (age < MINUTE) {
return "Just now"
}
if (age < HOUR) {
return `${Math.floor(age / MINUTE)}m ago`
}
if (age < DAY) {
return `${Math.floor(age / HOUR)}h ago`
}
return `${Math.floor(age / DAY)}d ago`
}
const onRoomSearchResultClick = (event: TrustedEvent) => {
close()
goToEvent(event, {keepFocus: true})
}
</script>
<div>
<button class="btn btn-neutral btn-sm btn-square" aria-label="Search" onclick={open}>
<Icon size={4} icon={Magnifier} />
</button>
{#if show}
<button class="fixed inset-0 z-feature" aria-label="Close search" onclick={close}></button>
<div class="fixed cw top-0 right-0 z-feature p-2">
<div
class="card2 card2-sm bg-alt flex flex-col gap-2 shadow-md"
transition:fly={{y: -40, duration: 150}}>
<div class="flex justify-between">
<strong>Search</strong>
<Button onclick={clear}>
<Icon icon={CloseCircle} />
</Button>
</div>
<label class="input input-sm input-bordered flex w-full items-center gap-2">
<Icon size={4} icon={Magnifier} />
<input
bind:this={input}
bind:value={term}
class="min-w-0 grow"
type="text"
placeholder={h ? "Search this room..." : "Search this space..."}
oninput={onInput} />
</label>
<div class="max-h-[65vh] overflow-y-auto">
{#if !term}
<p class="text-sm opacity-70">
{h ? "Search for messages in this room." : "Search for messages across this space."}
</p>
{:else if eventsByAge.size === 0}
<p class="text-sm opacity-70">No results found.</p>
{:else}
<div class="col-2">
{#each eventsByAge as [key, events] (key)}
<div class="col-2">
<p class="text-xs uppercase tracking-wide opacity-60">
{#if key === "day"}
Last 24 Hours
{:else if key === "week"}
Last 7 Days
{:else}
Older
{/if}
</p>
<div class="col-2">
{#each events as event (event.id)}
<button
class="card2 bg-alt card2-sm col-2 transition-colors hover:bg-base-200 text-left"
onclick={() => onRoomSearchResultClick(event)}>
<p class="line-clamp-2 text-sm">
{event.content.trim() || "(No text content)"}
</p>
<div class="row-2 text-xs opacity-70">
<span>{getAgeLabel(event.created_at)}</span>
<span>{formatTimestampAsDate(event.created_at)}</span>
</div>
</button>
{/each}
</div>
</div>
{/each}
</div>
{/if}
</div>
</div>
</div>
{/if}
</div>
src/app/components/ThunkStatusDetail.svelte
+2 -1
View File
@@ -2,6 +2,7 @@
import {PublishStatus} from "@welshman/net"
import {displayRelayUrl} from "@welshman/util"
import Button from "@lib/components/Button.svelte"
import {addPeriod} from "@lib/util"
interface Props {
url: string
@@ -25,7 +26,7 @@
<div class="card2 bg-alt col-2 shadow-lg">
<p>
Failed to publish to {displayRelayUrl(url)}: {message}.
Failed to publish to {displayRelayUrl(url)}: {addPeriod(message)}
</p>
<Button class="link" onclick={retry}>Retry</Button>
</div>
src/app/core/requests.ts
+126 -64
View File
@@ -1,5 +1,6 @@
import {get, writable} from "svelte/store"
import {
call,
uniq,
int,
YEAR,
@@ -8,6 +9,7 @@ import {
sortBy,
now,
on,
between,
isDefined,
filterVals,
fromPairs,
@@ -22,9 +24,8 @@ import {
getRelaysFromList,
} from "@welshman/util"
import type {TrustedEvent, Filter, List} from "@welshman/util"
import {feedFromFilters, makeRelayFeed, makeIntersectionFeed} from "@welshman/feeds"
import {load, request} from "@welshman/net"
import {repository, makeFeedController, loadRelay, tracker} from "@welshman/app"
import {repository, loadRelay, tracker} from "@welshman/app"
import {createScroller} from "@lib/html"
import {daysBetween} from "@lib/util"
import {getEventsForUrl} from "@app/core/state"
@@ -35,82 +36,131 @@ export const makeFeed = ({
url,
filters,
element,
onExhausted,
onBackwardExhausted,
onForwardExhausted,
at = now(),
}: {
url: string
filters: Filter[]
element: HTMLElement
onExhausted?: () => void
onBackwardExhausted?: () => void
onForwardExhausted?: () => void
at?: number
}) => {
const seen = new Set<string>()
const interval = int(DAY)
const controller = new AbortController()
const buffer = writable<TrustedEvent[]>([])
const events = writable<TrustedEvent[]>([])
let buffer: TrustedEvent[] = []
let backwardWindow = [at - interval, at]
let forwardWindow = [at, at + interval]
const insertEvent = (event: TrustedEvent) => {
let handled = false
if (seen.has(event.id)) {
return
}
if (between([backwardWindow[0], forwardWindow[1]], event.created_at)) {
const $events = get(events)
events.update($events => {
for (let i = 0; i < $events.length; i++) {
if ($events[i].id === event.id) return $events
if ($events[i].created_at < event.created_at) {
if ($events[i].created_at > event.created_at) {
events.set(insertAt(i, event, $events))
handled = true
return insertAt(i, event, $events)
break
}
}
return $events
})
if (!handled) {
buffer.update($buffer => {
for (let i = 0; i < $buffer.length; i++) {
if ($buffer[i].id === event.id) return $buffer
if ($buffer[i].created_at < event.created_at) return insertAt(i, event, $buffer)
if (!handled) {
events.set([...$events, event])
}
} else {
for (let i = 0; i < buffer.length; i++) {
if (buffer[i].created_at > event.created_at) {
buffer.splice(i, 0, event)
handled = true
break
}
}
return [...$buffer, event]
})
if (!handled) {
buffer.push(event)
}
}
seen.add(event.id)
}
const unsubscribe = on(repository, "update", ({added, removed}) => {
if (removed.size > 0) {
buffer.update($buffer => $buffer.filter(e => !removed.has(e.id)))
events.update($events => $events.filter(e => !removed.has(e.id)))
}
for (const event of added) {
if (matchFilters(filters, event) && tracker.getRelays(event.id).has(url)) {
insertEvent(event)
const unsubscribers = [
on(repository, "update", ({added, removed}) => {
if (removed.size > 0) {
buffer = buffer.filter(e => !removed.has(e.id))
events.update($events => $events.filter(e => !removed.has(e.id)))
}
}
})
const ctrl = makeFeedController({
useWindowing: true,
signal: controller.signal,
feed: makeIntersectionFeed(makeRelayFeed(url), feedFromFilters(filters)),
onExhausted,
})
for (const event of added) {
if (matchFilters(filters, event) && tracker.getRelays(event.id).has(url)) {
insertEvent(event)
}
}
}),
on(tracker, "add", (id: string, trackerUrl: string) => {
if (trackerUrl === url) {
const event = repository.getEvent(id)
const scroller = createScroller({
if (event && matchFilters(filters, event)) {
insertEvent(event)
}
}
}),
]
const loadTimeframe = (since: number, until: number) => {
request({
relays: [url],
autoClose: true,
signal: controller.signal,
filters: filters.map(filter => ({...filter, since, until})),
})
}
const backwardScroller = createScroller({
element,
delay: 300,
threshold: 10_000,
onScroll: async () => {
const $buffer = get(buffer)
threshold: 5000,
onScroll: () => {
const [since, until] = backwardWindow
events.update($events => [...$events, ...$buffer.splice(0, 30)])
backwardWindow = [since - interval, since]
if ($buffer.length < 100) {
ctrl.load(100)
for (const event of buffer.splice(0)) {
insertEvent(event)
}
if (until > now() - int(2, YEAR)) {
loadTimeframe(since, until)
} else if (!buffer.some(e => e.created_at < at)) {
backwardScroller.stop()
onBackwardExhausted?.()
}
},
})
const forwardScroller = createScroller({
element,
reverse: true,
delay: 300,
threshold: 5000,
onScroll: () => {
const [since, until] = forwardWindow
forwardWindow = [until, until + interval]
for (const event of buffer.splice(0)) {
insertEvent(event)
}
if (until < now()) {
loadTimeframe(since, until)
} else if (!buffer.some(e => e.created_at > at)) {
forwardScroller.stop()
onForwardExhausted?.()
}
},
})
@@ -122,9 +172,10 @@ export const makeFeed = ({
return {
events,
cleanup: () => {
unsubscribe()
scroller.stop()
controller.abort()
forwardScroller.stop()
backwardScroller.stop()
unsubscribers.forEach(call)
},
}
}
@@ -169,17 +220,28 @@ export const makeCalendarFeed = ({
})
}
const unsubscribe = on(repository, "update", ({added, removed}) => {
if (removed.size > 0) {
events.update($events => $events.filter(e => !removed.has(e.id)))
}
for (const event of added) {
if (matchFilters(filters, event)) {
insertEvent(event)
const unsubscribers = [
on(repository, "update", ({added, removed}) => {
if (removed.size > 0) {
events.update($events => $events.filter(e => !removed.has(e.id)))
}
}
})
for (const event of added) {
if (matchFilters(filters, event)) {
insertEvent(event)
}
}
}),
on(tracker, "add", (id: string, trackerUrl: string) => {
if (trackerUrl === url) {
const event = repository.getEvent(id)
if (event && matchFilters(filters, event)) {
insertEvent(event)
}
}
}),
]
const loadTimeframe = (since: number, until: number) => {
const hashes = daysBetween(since, until).map(String)
@@ -234,10 +296,10 @@ export const makeCalendarFeed = ({
return {
events,
cleanup: () => {
backwardScroller.stop()
forwardScroller.stop()
controller.abort()
unsubscribe()
forwardScroller.stop()
backwardScroller.stop()
unsubscribers.forEach(call)
},
}
}
src/app/core/state.ts
+21 -2
View File
@@ -50,9 +50,12 @@ import {
makeDeriveItem,
deriveItemsByKey,
deriveDeduplicated,
deriveEventsById,
deriveEventsByIdByUrl,
deriveEventsByIdForUrl,
getEventsByIdForUrl,
deriveEventsAsc,
deriveEventsDesc,
} from "@welshman/store"
import {
APP_DATA,
@@ -126,6 +129,10 @@ export const ROOM = "h"
export const PROTECTED = ["-"]
export const IMAGE_CONTENT_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"]
export const VIDEO_CONTENT_TYPES = ["video/quicktime", "video/webm", "video/mp4"]
export const ENABLE_ZAPS = Capacitor.getPlatform() != "ios"
export const PUSH_SERVER = import.meta.env.VITE_PUSH_SERVER
@@ -229,12 +236,21 @@ export const deriveEvent = makeDeriveEvent({
onDerive: (filters: Filter[], relays: string[]) => load({filters, relays}),
})
export const deriveEvents = (filters: Filter[] = [{}]) =>
deriveEventsDesc(deriveEventsById({repository, filters}))
export const getEventsForUrl = (url: string, filters: Filter[] = [{}]) =>
getEventsByIdForUrl({url, tracker, repository, filters}).values()
export const deriveEventsForUrl = (url: string, filters: Filter[] = [{}]) =>
deriveArray(deriveEventsByIdForUrl({url, tracker, repository, filters}))
export const deriveEventsForUrlAsc = (url: string, filters: Filter[] = [{}]) =>
deriveEventsAsc(deriveEventsByIdForUrl({url, tracker, repository, filters}))
export const deriveEventsForUrlDesc = (url: string, filters: Filter[] = [{}]) =>
deriveEventsDesc(deriveEventsByIdForUrl({url, tracker, repository, filters}))
export const deriveLatestEventForUrl = (url: string, filters: Filter[] = [{}]) =>
deriveDeduplicated(deriveEventsByIdForUrl({url, tracker, repository, filters}), $eventsById =>
first(sortEventsDesc($eventsById.values())),
@@ -434,7 +450,10 @@ export const chatsById = call(() => {
const pubkeys = getChatPubkeysFromEvent(event)
const id = makeChatId(pubkeys)
const chat = chatsById.get(id)
const messages = sortBy(e => -e.created_at, append(event, chat?.messages || []))
const messages = sortBy(
e => -e.created_at,
uniqBy(e => e.id, append(event, chat?.messages || [])),
)
const last_activity = Math.max(chat?.last_activity || 0, event.created_at)
const updatedChat = addSearchText({id, pubkeys, messages, last_activity})
@@ -463,7 +482,7 @@ export const chatsById = call(() => {
}
}
addEvents(repository.query([{kinds: [DIRECT_MESSAGE, PROFILE]}]))
addEvents(repository.query([{kinds: [...DM_KINDS, PROFILE]}]))
const unsubscribers = [
on(repository, "update", ({added}: RepositoryUpdate) => addEvents(added)),
src/app/editor/index.ts
+2 -1
View File
@@ -15,6 +15,7 @@ import {
} from "@welshman/app"
import type {FileAttributes} from "@welshman/editor"
import {Editor, MentionSuggestion, WelshmanExtension, editorProps} from "@welshman/editor"
import {escapeHtml} from "@lib/html"
import {makeMentionNodeView} from "@app/editor/MentionNodeView"
import ProfileSuggestion from "@app/editor/ProfileSuggestion.svelte"
import {uploadFile} from "@app/core/commands"
@@ -82,7 +83,7 @@ export const makeEditor = async ({
)
return new Editor({
content,
content: escapeHtml(content),
autofocus,
editorProps,
element: document.createElement("div"),
src/app/util/routes.ts
+39 -16
View File
@@ -2,16 +2,14 @@ import type {Page} from "@sveltejs/kit"
import {get} from "svelte/store"
import * as nip19 from "nostr-tools/nip19"
import {goto} from "$app/navigation"
import {nthEq, sleep} from "@welshman/lib"
import {page} from "$app/stores"
import {nthEq} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {getAddress} from "@welshman/util"
import {tracker, loadRelay} from "@welshman/app"
import {scrollToEvent} from "@lib/html"
import {identity} from "@welshman/lib"
import {
getTagValue,
DIRECT_MESSAGE,
DIRECT_MESSAGE_FILE,
MESSAGE,
THREAD,
CLASSIFIED,
@@ -26,6 +24,7 @@ import {
encodeRelay,
userSpaceUrls,
hasNip29,
DM_KINDS,
ROOM,
} from "@app/core/state"
import {lastPageBySpaceUrl} from "@app/util/history"
@@ -63,6 +62,14 @@ export const makeRoomPath = (url: string, h: string) => `/spaces/${encodeRelay(u
export const makeSpaceChatPath = (url: string) => makeRoomPath(url, "chat")
export const makeMessagePath = (url: string, event: TrustedEvent) => {
const h = getTagValue(ROOM, event.tags)
const path = h ? makeRoomPath(url, h) : makeSpaceChatPath(url)
const qp = new URLSearchParams({at: String(event.created_at)})
return path + "?" + qp.toString()
}
export const makeGoalPath = (url: string, id?: string) => makeSpacePath(url, "goals", id)
export const makeThreadPath = (url: string, id?: string) => makeSpacePath(url, "threads", id)
@@ -93,27 +100,43 @@ export const getPrimaryNavItemIndex = ($page: Page) => {
}
}
export const goToEvent = async (event: TrustedEvent, options: Record<string, any> = {}) => {
export const scrollToEvent = (id: string) => {
const element = document.querySelector(`[data-event="${id}"]`) as any
if (element) {
element.scrollIntoView({behavior: "smooth", block: "center"})
element.style = "filter: brightness(1.5); transition-property: all; transition-duration: 400ms;"
setTimeout(() => {
element.style = "transition-property: all; transition-duration: 300ms;"
}, 800)
setTimeout(() => {
element.style = ""
}, 800 + 400)
}
return Boolean(element)
}
export const goToEvent = (event: TrustedEvent, options: Record<string, any> = {}) => {
const urls = Array.from(tracker.getRelays(event.id))
const path = await getEventPath(event, urls)
const path = getEventPath(event, urls)
if (path.includes("://")) {
window.open(path)
} else {
goto(path, options)
} else if (!scrollToEvent(event.id)) {
const replaceState = path.replace(/\?.*$/, "") === get(page).url.pathname
await sleep(300)
await scrollToEvent(event.id)
goto(path, {replaceState, ...options})
}
}
export const getEventPath = async (event: TrustedEvent, urls: string[]) => {
if (event.kind === DIRECT_MESSAGE || event.kind === DIRECT_MESSAGE_FILE) {
export const getEventPath = (event: TrustedEvent, urls: string[]) => {
if (DM_KINDS.includes(event.kind)) {
return makeChatPath([event.pubkey, ...getPubkeyTagValues(event.tags)])
}
const h = getTagValue(ROOM, event.tags)
if (urls.length > 0) {
const url = urls[0]
@@ -134,7 +157,7 @@ export const getEventPath = async (event: TrustedEvent, urls: string[]) => {
}
if (event.kind === MESSAGE) {
return h ? makeRoomPath(url, h) : makeSpacePath(url, "chat")
return makeMessagePath(url, event)
}
const address = event.tags.find(nthEq(0, "A"))?.[1]
@@ -151,7 +174,7 @@ export const getEventPath = async (event: TrustedEvent, urls: string[]) => {
}
if (parseInt(kind) === MESSAGE) {
return h ? makeRoomPath(url, h) : makeSpacePath(url, "chat")
return makeMessagePath(url, event)
}
}
src/lib/components/PageContent.svelte
+7 -5
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import cx from "classnames"
import type {Snippet} from "svelte"
interface Props {
@@ -8,12 +9,13 @@
}
let {children, element = $bindable(), ...props}: Props = $props()
const className = cx(
props.class,
"scroll-container cw cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
)
</script>
<div
{...props}
bind:this={element}
data-component="PageContent"
class="scroll-container cw cb fixed top-[calc(var(--sait)+5rem)] md:top-[calc(var(--sait)+3rem)] z-feature overflow-y-auto overflow-x-hidden {props.class}">
<div {...props} bind:this={element} data-component="PageContent" class={className}>
{@render children?.()}
</div>
src/lib/html.ts
+16 -41
View File
@@ -1,4 +1,4 @@
import {sleep, last, randomId} from "@welshman/lib"
import {sleep, randomId} from "@welshman/lib"
export {preventDefault, stopPropagation} from "svelte/legacy"
export const copyToClipboard = (text: string) => {
@@ -47,9 +47,12 @@ export const createScroller = ({
if (container) {
// While we have empty space, fill it
const {scrollY, innerHeight} = window
const {scrollHeight, scrollTop} = container
const {scrollHeight, scrollTop, clientHeight} = container
const viewHeight = clientHeight || innerHeight
const offset = Math.abs(scrollTop || scrollY)
const shouldLoad = offset + innerHeight + threshold > scrollHeight
const shouldLoad = reverse
? offset < threshold
: offset + viewHeight + threshold > scrollHeight
// Only trigger loading the first time we reach the threshold
if (shouldLoad) {
@@ -100,53 +103,17 @@ export const isIntersecting = async (element: Element) =>
observer.observe(element)
})
export const scrollToEvent = async (id: string, attempts = 3): Promise<boolean> => {
const element = document.querySelector(`[data-event="${id}"]`) as any
const elements = Array.from(document.querySelectorAll("[data-event]"))
if (element) {
element.scrollIntoView({behavior: "smooth", block: "center"})
element.style = "filter: brightness(1.5); transition-property: all; transition-duration: 400ms;"
setTimeout(() => {
element.style = "transition-property: all; transition-duration: 300ms;"
}, 800)
setTimeout(() => {
element.style = ""
}, 800 + 400)
return true
} else if (elements.length > 0) {
const lastElement = last(elements)
if (lastElement && !isIntersecting(lastElement)) {
lastElement.scrollIntoView({behavior: "smooth", block: "center"})
}
await sleep(300)
if (attempts > 0) {
return scrollToEvent(id, attempts - 1)
} else {
return false
}
}
return false
}
export const compressFile = async (
file: File | Blob,
options: Record<string, any> = {},
): Promise<File> => {
const {default: Compressor} = await import("compressorjs")
const {default: Compressor} = await import("compressorjs-next")
return new Promise<File>((resolve, _reject) => {
new Compressor(file, {
maxWidth: 2048,
maxHeight: 2048,
convertSize: 10 * 1024 * 1024,
convertTypes: ["image/png"],
...options,
success: result => resolve(result as File),
error: e => {
@@ -164,3 +131,11 @@ export const compressFile = async (
})
})
}
export const escapeHtml = (html: string) => {
const element = document.createElement("div")
element.innerText = html
return element.innerHTML
}
src/lib/util.ts
+2
View File
@@ -26,3 +26,5 @@ export const buildUrl = (base: string | URL, ...pathname: string[]) => {
return url.toString()
}
export const addPeriod = (s: string) => (s + ".").replace(/\.+$/, ".")
src/routes/home/+page.svelte
+193 -66
View File
@@ -1,77 +1,204 @@
<script lang="ts">
import {onMount} from "svelte"
import {goto} from "$app/navigation"
import {shouldUnwrap} from "@welshman/app"
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
import Compass from "@assets/icons/compass.svg?dataurl"
import ChatRound from "@assets/icons/chat-round.svg?dataurl"
import {derived, writable} from "svelte/store"
import {batch, call, sortBy, uniqBy} from "@welshman/lib"
import {
NOTE,
MESSAGE,
THREAD,
CLASSIFIED,
ZAP_GOAL,
EVENT_TIME,
COMMENT,
getTagValue,
getTagValues,
getIdAndAddress,
} from "@welshman/util"
import type {TrustedEvent} from "@welshman/util"
import {
makeKindFeed,
makeRelayFeed,
makeScopeFeed,
makeIntersectionFeed,
makeUnionFeed,
Scope,
} from "@welshman/feeds"
import {repository, tracker, makeFeedController, loadUserFollowList} from "@welshman/app"
import History from "@assets/icons/history.svg?dataurl"
import {createScroller} from "@lib/html"
import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte"
import Button from "@lib/components/Button.svelte"
import CardButton from "@lib/components/CardButton.svelte"
import SpaceAdd from "@app/components/SpaceAdd.svelte"
import ChatEnable from "@app/components/ChatEnable.svelte"
import {pushModal} from "@app/util/modal"
import {goToSpace} from "@app/util/routes"
import {PLATFORM_NAME, PLATFORM_RELAYS} from "@app/core/state"
import PageBar from "@lib/components/PageBar.svelte"
import PageContent from "@lib/components/PageContent.svelte"
import NoteItem from "@app/components/NoteItem.svelte"
import ThreadItem from "@app/components/ThreadItem.svelte"
import ClassifiedItem from "@app/components/ClassifiedItem.svelte"
import GoalItem from "@app/components/GoalItem.svelte"
import CalendarEventItem from "@app/components/CalendarEventItem.svelte"
import RecentConversation from "@app/components/RecentConversation.svelte"
import {makeRoomId, userSpaceUrls, loadUserGroupList, CONTENT_KINDS} from "@app/core/state"
const addSpace = () => pushModal(SpaceAdd)
type Activity = {
type: "message" | "content"
event: TrustedEvent
timestamp: number
count: number
url: string
}
const openChat = () => ($shouldUnwrap ? goto("/chat") : pushModal(ChatEnable, {next: "/chat"}))
const controller = new AbortController()
const events = writable<TrustedEvent[]>([])
const limit = writable(0)
onMount(async () => {
if (PLATFORM_RELAYS.length > 0) {
goToSpace(PLATFORM_RELAYS[0])
const recentActivity = derived([events, limit], ([$events, $limit]) => {
const activity: Activity[] = []
const activityByRoom = new Map<string, Activity>()
const latestActivityByKey = new Map<string, number>()
for (const event of $events.slice(0, $limit)) {
if (event.kind === MESSAGE) {
const h = getTagValue("h", event.tags)
if (!h) continue
for (const url of tracker.getRelays(event.id)) {
const id = makeRoomId(url, h)
const item = activityByRoom.get(id)
if (!item) {
activityByRoom.set(id, {
type: "message",
event,
timestamp: event.created_at,
count: 1,
url,
})
} else if (item.timestamp < event.created_at) {
item.count++
item.event = event
item.timestamp = event.created_at
}
}
} else if (event.kind === COMMENT) {
for (const k of getTagValues(["E", "A"], event.tags)) {
latestActivityByKey.set(k, Math.max(latestActivityByKey.get(k) || 0, event.created_at))
}
} else {
for (const k of getIdAndAddress(event)) {
latestActivityByKey.set(k, Math.max(latestActivityByKey.get(k) || 0, event.created_at))
}
}
}
for (const item of activityByRoom.values()) {
activity.push(item)
}
for (const [address, timestamp] of latestActivityByKey.entries()) {
const event = repository.getEvent(address)
if (event) {
for (const url of tracker.getRelays(event.id)) {
activity.push({type: "content", event, timestamp, url, count: 1})
break
}
}
}
return sortBy(
a => -a.timestamp,
uniqBy(a => a.event.id, activity),
)
})
let loading = $state(true)
let element: Element | undefined = $state()
onMount(() => {
const promise = call(async () => {
await Promise.all([loadUserGroupList(), loadUserFollowList()])
const ctrl = makeFeedController({
useWindowing: true,
signal: controller.signal,
feed: makeUnionFeed(
makeIntersectionFeed(
makeRelayFeed(...$userSpaceUrls),
makeKindFeed(COMMENT, ...CONTENT_KINDS),
),
makeIntersectionFeed(makeScopeFeed(Scope.Follows), makeKindFeed(NOTE)),
),
onEvent: batch(100, (evts: TrustedEvent[]) => {
events.update($events => [...$events, ...evts])
}),
onExhausted: () => {
loading = false
},
})
const scroller = createScroller({
element: element!,
delay: 800,
threshold: 3000,
onScroll: async () => {
console.log("scroll")
limit.update($limit => {
if ($events.length - $limit < 50) {
ctrl.load(50)
}
return $limit + 10
})
},
})
return () => {
scroller.stop()
controller.abort()
}
})
return () => promise.then(call)
})
</script>
<div class="hero min-h-screen overflow-auto pb-8">
<div class="hero-content">
<div class="column content gap-4">
<h1 class="text-center text-5xl">Welcome to</h1>
<h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
<div class="col-3">
<Button onclick={addSpace}>
<CardButton class="btn-neutral">
{#snippet icon()}
<Icon icon={AddCircle} size={7} />
{/snippet}
{#snippet title()}
<div>Add a space</div>
{/snippet}
{#snippet info()}
<div>Use an invite link, or create your own space.</div>
{/snippet}
</CardButton>
</Button>
<Link href="/discover">
<CardButton class="btn-neutral">
{#snippet icon()}
<Icon icon={Compass} size={7} />
{/snippet}
{#snippet title()}
<div>Browse the network</div>
{/snippet}
{#snippet info()}
<div>Find communities on the nostr network.</div>
{/snippet}
</CardButton>
</Link>
<Button onclick={openChat}>
<CardButton class="btn-neutral">
{#snippet icon()}
<Icon icon={ChatRound} size={7} />
{/snippet}
{#snippet title()}
<div>Start a conversation</div>
{/snippet}
{#snippet info()}
<div>Use nostr's encrypted group chats to stay in touch.</div>
{/snippet}
</CardButton>
</Button>
</div>
<PageBar>
{#snippet icon()}
<div class="center">
<Icon icon={History} />
</div>
</div>
</div>
{/snippet}
{#snippet title()}
<strong>Recent Activity</strong>
{/snippet}
{#snippet action()}
<div class="row-2"></div>
{/snippet}
</PageBar>
<PageContent class="flex flex-col gap-2 p-2 pt-4" bind:element>
{#each $recentActivity as { type, event, url, count } (event.id)}
{#if type === "message"}
<RecentConversation {url} {event} {count} />
{:else if event.kind === THREAD}
<ThreadItem {url} {event} />
{:else if event.kind === CLASSIFIED}
<ClassifiedItem {url} {event} />
{:else if event.kind === ZAP_GOAL}
<GoalItem {url} {event} />
{:else if event.kind === EVENT_TIME}
<CalendarEventItem {url} {event} />
{:else}
<NoteItem {url} {event} />
{/if}
{:else}
{#if loading}
<div class="flex justify-center items-center py-20">
<span class="loading loading-spinner mr-3"></span>
Loading recent activity...
</div>
{:else}
<p class="flex flex-col items-center py-20 text-center">No recent activity found!</p>
{/if}
{/each}
</PageContent>
src/routes/settings/+layout.svelte
+2 -1
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import type {Snippet} from "svelte"
import {Capacitor} from "@capacitor/core"
import {fly} from "@lib/transition"
import UserCircle from "@assets/icons/user-circle.svg?dataurl"
import Wallet from "@assets/icons/wallet.svg?dataurl"
@@ -45,7 +46,7 @@
<Icon icon={Bell} /> Alerts
</SecondaryNavItem>
</div>
<div in:fly|local={{delay: 100}}>
<div in:fly|local={{delay: 100}} class:hidden={Capacitor.getPlatform() === "ios"}>
<SecondaryNavItem href="/settings/wallet">
<Icon icon={Wallet} /> Wallet
</SecondaryNavItem>
src/routes/settings/wallet/+page.svelte
+7 -11
View File
@@ -126,17 +126,13 @@
{/if}
</div>
</div>
<div
class="card2 bg-alt flex flex-col shadow-md"
class:gap-6={profileLightningAddress && walletLud16 && profile?.lud16 !== walletLud16}>
<div class="flex items-center justify-between">
<strong>Lightning Address</strong>
<div class="flex items-center gap-2">
<span class={profileLightningAddress ? "" : "text-warning"}>
{profileLightningAddress ? profileLightningAddress : "Not set"}
</span>
<Button class="btn btn-neutral btn-xs ml-3" onclick={updateReceivingAddress}>Update</Button>
</div>
<div class="card2 bg-alt flex flex-col shadow-md gap-6">
<strong>Lightning Address</strong>
<div class="flex justify-between items-center gap-2">
<span class={profileLightningAddress ? "" : "text-warning"}>
{profileLightningAddress ? profileLightningAddress : "Not set"}
</span>
<Button class="btn btn-neutral btn-xs ml-3" onclick={updateReceivingAddress}>Update</Button>
</div>
{#if profileLightningAddress && walletLud16 && profile?.lud16 !== walletLud16}
<div class="card2 bg-alt flex items-center gap-2 text-xs">
src/routes/spaces/[relay]/[h]/+layout.svelte
+7
View File
@@ -0,0 +1,7 @@
<script>
import {page} from "$app/stores"
</script>
{#key $page.url.searchParams.get("at")}
<slot />
{/key}
src/routes/spaces/[relay]/[h]/+page.svelte
+125 -79
View File
@@ -1,10 +1,12 @@
<script lang="ts">
import {onMount, tick} from "svelte"
import {readable} from "svelte/store"
import {onMount, onDestroy} from "svelte"
import {page} from "$app/stores"
import {goto} from "$app/navigation"
import type {Readable} from "svelte/store"
import type {MakeNonOptional} from "@welshman/lib"
import {pubkey, publishThunk, waitForThunkError, joinRoom, leaveRoom} from "@welshman/app"
import {now, int, formatTimestampAsDate, ago, MINUTE} from "@welshman/lib"
import type {MakeNonOptional} from "@welshman/lib"
import type {TrustedEvent, EventContent} from "@welshman/util"
import {
makeEvent,
@@ -13,44 +15,44 @@
ROOM_ADD_MEMBER,
ROOM_REMOVE_MEMBER,
} from "@welshman/util"
import {pubkey, publishThunk, waitForThunkError, joinRoom, leaveRoom} from "@welshman/app"
import {slide, fade, fly} from "@lib/transition"
import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
import Login2 from "@assets/icons/login-3.svg?dataurl"
import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
import Login2 from "@assets/icons/login-3.svg?dataurl"
import {slide, fade, fly} from "@lib/transition"
import Button from "@lib/components/Button.svelte"
import Spinner from "@lib/components/Spinner.svelte"
import Divider from "@lib/components/Divider.svelte"
import Icon from "@lib/components/Icon.svelte"
import PageBar from "@lib/components/PageBar.svelte"
import PageContent from "@lib/components/PageContent.svelte"
import Divider from "@lib/components/Divider.svelte"
import ThunkToast from "@app/components/ThunkToast.svelte"
import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
import RoomName from "@app/components/RoomName.svelte"
import Spinner from "@lib/components/Spinner.svelte"
import RoomCompose from "@app/components/RoomCompose.svelte"
import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
import RoomImage from "@app/components/RoomImage.svelte"
import RoomDetail from "@app/components/RoomDetail.svelte"
import RoomItem from "@app/components/RoomItem.svelte"
import RoomName from "@app/components/RoomName.svelte"
import SpaceSearch from "@app/components/SpaceSearch.svelte"
import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
import ThunkToast from "@app/components/ThunkToast.svelte"
import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
import RoomItemRemoveMember from "@src/app/components/RoomItemRemoveMember.svelte"
import RoomCompose from "@app/components/RoomCompose.svelte"
import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
import RoomItemRemoveMember from "@src/app/components/RoomItemRemoveMember.svelte"
import {canEnforceNip70, prependParent, publishDelete} from "@app/core/commands"
import {
decodeRelay,
deriveUserRoomMembershipStatus,
deriveRoom,
deriveUserRoomMembershipStatus,
MESSAGE_KINDS,
MembershipStatus,
PROTECTED,
MESSAGE_KINDS,
userSettingsValues,
} from "@app/core/state"
import {checked} from "@app/util/notifications"
import {canEnforceNip70, prependParent, publishDelete} from "@app/core/commands"
import {makeFeed} from "@app/core/requests"
import {popKey} from "@lib/implicit"
import {pushToast} from "@app/util/toast"
import {checked} from "@app/util/notifications"
import {pushModal} from "@app/util/modal"
import {pushToast} from "@app/util/toast"
const {h, relay} = $page.params as MakeNonOptional<typeof $page.params>
const mounted = now()
@@ -59,6 +61,7 @@
const room = deriveRoom(url, h)
const shouldProtect = canEnforceNip70(url)
const membershipStatus = deriveUserRoomMembershipStatus(url, h)
const at = $derived(parseInt($page.url.searchParams.get("at") || String(now())))
const showRoomDetail = () => pushModal(RoomDetail, {url, h})
@@ -110,55 +113,62 @@
}
const onSubmit = async ({content, tags}: EventContent) => {
tags.push(["h", h])
try {
tags.push(["h", h])
if (await shouldProtect) {
tags.push(PROTECTED)
}
if (await shouldProtect) {
tags.push(PROTECTED)
}
let template: EventContent & {created_at?: number} = {content, tags}
let template: EventContent & {created_at?: number} = {content, tags}
if (eventToEdit) {
// Delete previous message, to be republished with same timestamp
template.created_at = eventToEdit.created_at
publishDelete({
if (eventToEdit) {
// Don't do anything if message hasn't changed
if (eventToEdit.content === content) {
return
}
// Delete previous message, to be republished with same timestamp
template.created_at = eventToEdit.created_at
publishDelete({
relays: [url],
event: $state.snapshot(eventToEdit),
protect: await shouldProtect,
})
}
if (share) {
template = prependParent(share, template, url)
}
if (parent) {
template = prependParent(parent, template, url)
}
const thunk = publishThunk({
relays: [url],
event: $state.snapshot(eventToEdit),
protect: await shouldProtect,
event: makeEvent(MESSAGE, template),
delay: $userSettingsValues.send_delay,
})
if ($userSettingsValues.send_delay) {
pushToast({
timeout: 30_000,
children: {
component: ThunkToast,
props: {thunk},
},
})
}
} finally {
clearParent()
clearShare()
clearEventToEdit()
}
if (share) {
template = prependParent(share, template, url)
}
if (parent) {
template = prependParent(parent, template, url)
}
const thunk = publishThunk({
relays: [url],
event: makeEvent(MESSAGE, template),
delay: $userSettingsValues.send_delay,
})
if ($userSettingsValues.send_delay) {
pushToast({
timeout: 30_000,
children: {
component: ThunkToast,
props: {thunk},
},
})
}
clearParent()
clearShare()
clearEventToEdit()
}
const onScroll = () => {
showScrollButton = Math.abs(element?.scrollTop || 0) > 1500
const manageScrollPosition = () => {
showScrollButton = Boolean(at) || Math.abs(element?.scrollTop || 0) > 1500
const newMessages = document.getElementById("new-messages")
@@ -173,16 +183,47 @@
showFixedNewMessages = y < 0
}
}
if (!userHasScrolled && $page.url.searchParams.get("at")) {
const targetEvent = $events.find(event => event.created_at >= at)
if (targetEvent) {
const target = element?.querySelector(`[data-event="${targetEvent.id}"]`)
if (target instanceof HTMLElement) {
isProgrammaticScroll = true
target.scrollIntoView({block: "center"})
}
}
}
}
const onScroll = () => {
if (!isProgrammaticScroll) {
userHasScrolled = true
manageScrollPosition()
}
isProgrammaticScroll = false
}
const scrollToNewMessages = () =>
document.getElementById("new-messages")?.scrollIntoView({behavior: "smooth", block: "center"})
const scrollToBottom = () => element?.scrollTo({top: 0, behavior: "smooth"})
const scrollToBottom = () => {
if ($page.url.searchParams.get("at")) {
goto($page.url.pathname, {replaceState: true})
} else {
element?.scrollTo({top: 0, behavior: "smooth"})
}
}
let joining = $state(false)
let leaving = $state(false)
let loadingEvents = $state(true)
let userHasScrolled = $state(false)
let isProgrammaticScroll = $state(false)
let loadingBackward = $state(true)
let loadingForward = $state(true)
let share = $state(popKey<TrustedEvent | undefined>("share"))
let parent: TrustedEvent | undefined = $state()
let element: HTMLElement | undefined = $state()
@@ -213,7 +254,7 @@
const adjustedLastChecked =
lastChecked && lastUserEvent ? Math.max(lastUserEvent.created_at, lastChecked) : lastChecked
for (const event of $events.toReversed()) {
for (const event of $events) {
if (seen.has(event.id)) {
continue
}
@@ -255,7 +296,7 @@
elements.reverse()
setTimeout(onScroll, 100)
tick().then(manageScrollPosition)
return elements
})
@@ -264,11 +305,15 @@
cleanup?.()
const feed = makeFeed({
at,
url,
element: element!,
filters: [{kinds: [...MESSAGE_KINDS, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER], "#h": [h]}],
onExhausted: () => {
loadingEvents = false
onBackwardExhausted: () => {
loadingBackward = false
},
onForwardExhausted: () => {
loadingForward = false
},
})
@@ -308,17 +353,15 @@
observer.observe(chatCompose!)
observer.observe(dynamicPadding!)
start()
return () => {
cleanup()
observer.unobserve(chatCompose!)
observer.unobserve(dynamicPadding!)
}
})
onDestroy(() => {
cleanup?.()
})
</script>
<PageBar>
@@ -329,11 +372,9 @@
<RoomName {url} {h} />
{/snippet}
{#snippet action()}
<div class="row-2">
<Button
class="btn btn-neutral btn-sm tooltip tooltip-left"
data-tip="Room information"
onclick={showRoomDetail}>
<div class="row-2 items-center">
<SpaceSearch {url} {h} />
<Button class="btn btn-neutral btn-sm btn-square" onclick={showRoomDetail}>
<Icon size={4} icon={InfoCircle} />
</Button>
<SpaceMenuButton {url} />
@@ -367,6 +408,11 @@
</div>
</div>
{:else}
{#if loadingForward}
<p class="py-20 flex justify-center">
<Spinner loading={loadingForward}>Looking for messages...</Spinner>
</p>
{/if}
{#each elements as { type, id, value, showPubkey } (id)}
{#if type === "new-messages"}
<div
@@ -399,8 +445,8 @@
{/if}
{/each}
<p class="flex h-10 items-center justify-center py-20">
{#if loadingEvents}
<Spinner loading={loadingEvents}>Looking for messages...</Spinner>
{#if loadingBackward}
<Spinner loading={loadingBackward}>Looking for messages...</Spinner>
{:else}
<Spinner>End of message history</Spinner>
{/if}
src/routes/spaces/[relay]/chat/+page.svelte
+112 -59
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import {onMount} from "svelte"
import {onMount, tick} from "svelte"
import {page} from "$app/stores"
import {goto} from "$app/navigation"
import type {Readable} from "svelte/store"
import {readable} from "svelte/store"
import {now, int, formatTimestampAsDate, MINUTE, ago} from "@welshman/lib"
@@ -17,6 +18,7 @@
import PageContent from "@lib/components/PageContent.svelte"
import Divider from "@lib/components/Divider.svelte"
import ThunkToast from "@app/components/ThunkToast.svelte"
import SpaceSearch from "@app/components/SpaceSearch.svelte"
import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
import RoomItem from "@app/components/RoomItem.svelte"
import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
@@ -26,7 +28,7 @@
import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
import {userSettingsValues, decodeRelay, PROTECTED, MESSAGE_KINDS} from "@app/core/state"
import {prependParent, canEnforceNip70, publishDelete} from "@app/core/commands"
import {setChecked, checked} from "@app/util/notifications"
import {checked} from "@app/util/notifications"
import {pushToast} from "@app/util/toast"
import {makeFeed} from "@app/core/requests"
import {popKey} from "@lib/implicit"
@@ -35,6 +37,7 @@
const lastChecked = $checked[$page.url.pathname]
const url = decodeRelay($page.params.relay!)
const shouldProtect = canEnforceNip70(url)
const at = $derived(parseInt($page.url.searchParams.get("at") || String(now())))
const replyTo = (event: TrustedEvent) => {
parent = event
@@ -54,49 +57,56 @@
}
const onSubmit = async ({content, tags}: EventContent) => {
let template: EventContent & {created_at?: number} = {content, tags}
try {
let template: EventContent & {created_at?: number} = {content, tags}
if (eventToEdit) {
// Delete previous message, to be republished with same timestamp
template.created_at = eventToEdit.created_at
publishDelete({relays: [url], event: eventToEdit, protect: await shouldProtect})
}
if (eventToEdit) {
// Don't do anything if message hasn't changed
if (eventToEdit.content === content) {
return
}
if (await shouldProtect) {
tags.push(PROTECTED)
}
// Delete previous message, to be republished with same timestamp
template.created_at = eventToEdit.created_at
publishDelete({relays: [url], event: eventToEdit, protect: await shouldProtect})
}
if (share) {
template = prependParent(share, template, url)
}
if (await shouldProtect) {
tags.push(PROTECTED)
}
if (parent) {
template = prependParent(parent, template, url)
}
if (share) {
template = prependParent(share, template, url)
}
const thunk = publishThunk({
relays: [url],
event: makeEvent(MESSAGE, template),
delay: $userSettingsValues.send_delay,
})
if (parent) {
template = prependParent(parent, template, url)
}
if ($userSettingsValues.send_delay) {
pushToast({
timeout: 30_000,
children: {
component: ThunkToast,
props: {thunk},
},
const thunk = publishThunk({
relays: [url],
event: makeEvent(MESSAGE, template),
delay: $userSettingsValues.send_delay,
})
}
clearParent()
clearShare()
clearEventToEdit()
if ($userSettingsValues.send_delay) {
pushToast({
timeout: 30_000,
children: {
component: ThunkToast,
props: {thunk},
},
})
}
} finally {
clearParent()
clearShare()
clearEventToEdit()
}
}
const onScroll = () => {
showScrollButton = Math.abs(element?.scrollTop || 0) > 1500
const manageScrollPosition = () => {
showScrollButton = Boolean(at) || Math.abs(element?.scrollTop || 0) > 1500
const newMessages = document.getElementById("new-messages")
@@ -111,14 +121,45 @@
showFixedNewMessages = y < 0
}
}
if (!userHasScrolled && $page.url.searchParams.get("at")) {
const targetEvent = $events.find(event => event.created_at >= at)
if (targetEvent) {
const target = element?.querySelector(`[data-event="${targetEvent.id}"]`)
if (target instanceof HTMLElement) {
isProgrammaticScroll = true
target.scrollIntoView({block: "center"})
}
}
}
}
const onScroll = () => {
if (!isProgrammaticScroll) {
userHasScrolled = true
manageScrollPosition()
}
isProgrammaticScroll = false
}
const scrollToNewMessages = () =>
document.getElementById("new-messages")?.scrollIntoView({behavior: "smooth", block: "center"})
const scrollToBottom = () => element?.scrollTo({top: 0, behavior: "smooth"})
const scrollToBottom = () => {
if ($page.url.searchParams.get("at")) {
goto($page.url.pathname, {replaceState: true})
} else {
element?.scrollTo({top: 0, behavior: "smooth"})
}
}
let loadingEvents = $state(true)
let loadingBackward = $state(true)
let loadingForward = $state(true)
let userHasScrolled = $state(false)
let isProgrammaticScroll = $state(false)
let share = $state(popKey<TrustedEvent | undefined>("share"))
let parent: TrustedEvent | undefined = $state()
let element: HTMLElement | undefined = $state()
@@ -149,7 +190,7 @@
const adjustedLastChecked =
lastChecked && lastUserEvent ? Math.max(lastUserEvent.created_at, lastChecked) : lastChecked
for (const event of $events.toReversed()) {
for (const event of $events) {
if (seen.has(event.id)) {
continue
}
@@ -191,11 +232,31 @@
elements.reverse()
setTimeout(onScroll, 100)
tick().then(manageScrollPosition)
return elements
})
const start = () => {
cleanup?.()
const feed = makeFeed({
at,
url,
element: element!,
filters: [{kinds: [...MESSAGE_KINDS, RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER]}],
onBackwardExhausted: () => {
loadingBackward = false
},
onForwardExhausted: () => {
loadingForward = false
},
})
events = feed.events
cleanup = feed.cleanup
}
const onEscape = () => {
clearParent()
clearShare()
@@ -230,29 +291,13 @@
observer.observe(chatCompose!)
observer.observe(dynamicPadding!)
const feed = makeFeed({
url,
element: element!,
filters: [{kinds: [...MESSAGE_KINDS, RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER]}],
onExhausted: () => {
loadingEvents = false
},
})
events = feed.events
cleanup = feed.cleanup
start()
return () => {
cleanup()
controller.abort()
observer.unobserve(chatCompose!)
observer.unobserve(dynamicPadding!)
// Sveltekit calls onDestroy at the beginning of the page load for some reason
setTimeout(() => {
setChecked($page.url.pathname)
}, 800)
}
})
</script>
@@ -267,12 +312,20 @@
<strong>Chat</strong>
{/snippet}
{#snippet action()}
<SpaceMenuButton {url} />
<div class="row-2 items-center">
<SpaceSearch {url} />
<SpaceMenuButton {url} />
</div>
{/snippet}
</PageBar>
<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
<div bind:this={dynamicPadding}></div>
{#if loadingForward}
<p class="py-20 flex justify-center">
<Spinner loading={loadingForward}>Looking for messages...</Spinner>
</p>
{/if}
{#each elements as { type, id, value, showPubkey } (id)}
{#if type === "new-messages"}
<div
@@ -305,8 +358,8 @@
{/if}
{/each}
<p class="flex h-10 items-center justify-center py-20">
{#if loadingEvents}
<Spinner loading={loadingEvents}>Looking for messages...</Spinner>
{#if loadingBackward}
<Spinner loading={loadingBackward}>Looking for messages...</Spinner>
{:else}
<Spinner>End of message history</Spinner>
{/if}
src/routes/spaces/[relay]/classifieds/+page.svelte
+1 -1
View File
@@ -49,7 +49,7 @@
url,
element: element!,
filters: [{kinds: [CLASSIFIED]}, makeCommentFilter([CLASSIFIED])],
onExhausted: () => {
onBackwardExhausted: () => {
loading = false
},
})
src/routes/spaces/[relay]/goals/+page.svelte
+1 -1
View File
@@ -48,7 +48,7 @@
url,
element: element!,
filters: [{kinds: [ZAP_GOAL]}, makeCommentFilter([ZAP_GOAL])],
onExhausted: () => {
onBackwardExhausted: () => {
loading = false
},
})
src/routes/spaces/[relay]/threads/+page.svelte
+1 -1
View File
@@ -49,7 +49,7 @@
url,
element: element!,
filters: [{kinds: [THREAD]}, makeCommentFilter([THREAD])],
onExhausted: () => {
onBackwardExhausted: () => {
loading = false
},
})