diff --git a/src/app/components/AppContainer.svelte b/src/app/components/AppContainer.svelte index 0a3dec1c..10c690be 100644 --- a/src/app/components/AppContainer.svelte +++ b/src/app/components/AppContainer.svelte @@ -1,4 +1,5 @@ -
+ diff --git a/src/app/components/ChatMessageEmojiButton.svelte b/src/app/components/ChatMessageEmojiButton.svelte index 7db1743d..7dedc63c 100644 --- a/src/app/components/ChatMessageEmojiButton.svelte +++ b/src/app/components/ChatMessageEmojiButton.svelte @@ -5,8 +5,12 @@ import EmojiButton from "@lib/components/EmojiButton.svelte" import {makeReaction, sendWrapped} from "@app/commands" - export let event: TrustedEvent - export let pubkeys: string[] + interface Props { + event: TrustedEvent + pubkeys: string[] + } + + let {event, pubkeys}: Props = $props() const onEmoji = (emoji: NativeEmoji) => sendWrapped({template: makeReaction({event, content: emoji.unicode}), pubkeys}) diff --git a/src/app/components/ChatMessageMenu.svelte b/src/app/components/ChatMessageMenu.svelte index db611b17..24106aff 100644 --- a/src/app/components/ChatMessageMenu.svelte +++ b/src/app/components/ChatMessageMenu.svelte @@ -5,10 +5,7 @@ import EventInfo from "@app/components/EventInfo.svelte" import {pushModal} from "@app/modal" - export let event - export let pubkeys - export let popover - export let replyTo + let {event, pubkeys, popover, replyTo} = $props() const reply = () => replyTo(event) diff --git a/src/app/components/ChatMessageMenuMobile.svelte b/src/app/components/ChatMessageMenuMobile.svelte index 690ca6da..7b4fa9dc 100644 --- a/src/app/components/ChatMessageMenuMobile.svelte +++ b/src/app/components/ChatMessageMenuMobile.svelte @@ -8,8 +8,7 @@ import {pushModal} from "@app/modal" import {clip} from "@app/toast" - export let event - export let pubkeys + let {event, pubkeys} = $props() const onEmoji = (emoji: NativeEmoji) => { history.back() diff --git a/src/app/components/ChatStart.svelte b/src/app/components/ChatStart.svelte index dceb715b..57803ed8 100644 --- a/src/app/components/ChatStart.svelte +++ b/src/app/components/ChatStart.svelte @@ -1,4 +1,6 @@ - + -
Start a Chat
-
Create an encrypted chat room for private conversations.
+ {#snippet title()} +
Start a Chat
+ {/snippet} + {#snippet info()} +
Create an encrypted chat room for private conversations.
+ {/snippet} -
- -
+ {#snippet input()} +
+ +
+ {/snippet} diff --git a/src/app/components/ContentCode.svelte b/src/app/components/ContentCode.svelte index 74fce43e..1b4447d7 100644 --- a/src/app/components/ContentCode.svelte +++ b/src/app/components/ContentCode.svelte @@ -1,6 +1,5 @@ + import {preventDefault, stopPropagation} from "svelte/legacy" + import {ellipsize, postJson} from "@welshman/lib" import {dufflepud, imgproxy} from "@app/state" import Link from "@lib/components/Link.svelte" import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte" import {pushModal} from "@app/modal" - export let value + let {value} = $props() const url = value.url.toString() @@ -29,7 +31,7 @@ {:else if url.match(/\.(jpe?g|png|gif|webp)$/)} - {:else} diff --git a/src/app/components/ContentLinkDetail.svelte b/src/app/components/ContentLinkDetail.svelte index cca4b87f..13185cfa 100644 --- a/src/app/components/ContentLinkDetail.svelte +++ b/src/app/components/ContentLinkDetail.svelte @@ -2,7 +2,7 @@ import Button from "@lib/components/Button.svelte" import {imgproxy} from "@app/state" - export let url + let {url} = $props() const back = () => history.back() diff --git a/src/app/components/ContentLinkInline.svelte b/src/app/components/ContentLinkInline.svelte index 7b8a491a..5f01f980 100644 --- a/src/app/components/ContentLinkInline.svelte +++ b/src/app/components/ContentLinkInline.svelte @@ -1,11 +1,13 @@ {#each value as _} diff --git a/src/app/components/ContentQuote.svelte b/src/app/components/ContentQuote.svelte index f825246b..10a01d06 100644 --- a/src/app/components/ContentQuote.svelte +++ b/src/app/components/ContentQuote.svelte @@ -10,11 +10,7 @@ import {deriveEvent, entityLink, ROOM} from "@app/state" import {makeThreadPath, makeRoomPath} from "@app/routes" - export let value - export let event - export let depth = 0 - export let relays: string[] = [] - export let minimal = false + let props = ({value, event, depth = 0, relays = [], minimal = false, ...restProps} = $props()) const {id, identifier, kind, pubkey, relays: relayHints = []} = value const idOrAddress = id || new Address(kind, pubkey, identifier).toString() @@ -100,7 +96,7 @@ - - + {/snippet} -
-
- Start - + {#snippet input()} +
+
+ Start + +
+
+ End + +
-
- End - -
-
+ {/snippet} -

Location (optional)

- + {#snippet label()} +

Location (optional)

+ {/snippet} + {#snippet input()} + + {/snippet} - + {#snippet label()} +

Event Link

+ {/snippet} + {#snippet input()} + + {/snippet} -

Author Pubkey

- + {#snippet label()} +

Author Pubkey

+ {/snippet} + {#snippet input()} + + {/snippet} 
{json}
diff --git a/src/app/components/EventItem.svelte b/src/app/components/EventItem.svelte index 390fecec..397bd4e0 100644 --- a/src/app/components/EventItem.svelte +++ b/src/app/components/EventItem.svelte @@ -3,14 +3,14 @@ import {formatTimestamp, formatTimestampAsDate, formatTimestampAsTime} from "@welshman/app" import Icon from "@lib/components/Icon.svelte" - export let event + let {event} = $props() - $: meta = fromPairs(event.tags) as Record - $: end = parseInt(meta.end) - $: start = parseInt(meta.start) - $: startDateDisplay = formatTimestampAsDate(start) - $: endDateDisplay = formatTimestampAsDate(end) - $: isSingleDay = startDateDisplay === endDateDisplay + let meta = $derived(fromPairs(event.tags) as Record) + let end = $derived(parseInt(meta.end)) + let start = $derived(parseInt(meta.start)) + let startDateDisplay = $derived(formatTimestampAsDate(start)) + let endDateDisplay = $derived(formatTimestampAsDate(end)) + let isSingleDay = $derived(startDateDisplay === endDateDisplay)
diff --git a/src/app/components/EventReport.svelte b/src/app/components/EventReport.svelte index 30440ea4..a2a1813f 100644 --- a/src/app/components/EventReport.svelte +++ b/src/app/components/EventReport.svelte @@ -1,4 +1,6 @@ - + -
Report Content
-
Flag inappropriate content.
+ {#snippet title()} +
Report Content
+ {/snippet} + {#snippet info()} +
Flag inappropriate content.
+ {/snippet} -

Reason*

- -

Please select a reason for your report.

+ {#snippet label()} +

Reason*

+ {/snippet} + {#snippet input()} + + {/snippet} + {#snippet info()} +

Please select a reason for your report.

+ {/snippet} -

Details

- -

Please provide any additional details relevant to your report.

+ {#snippet label()} +

Details

+ {/snippet} + {#snippet input()} + + {/snippet} + {#snippet info()} +

Please provide any additional details relevant to your report.

+ {/snippet}

diff --git a/src/app/components/LogIn.svelte b/src/app/components/LogIn.svelte index 915af9fb..2f2ba76b 100644 --- a/src/app/components/LogIn.svelte +++ b/src/app/components/LogIn.svelte @@ -70,10 +70,10 @@ const loginWithBunker = () => pushModal(LogInBunker) - let signers: any[] = [] - let loading: string | undefined + let signers: any[] = $state([]) + let loading: string | undefined = $state() - $: hasSigner = getNip07() || signers.length > 0 + let hasSigner = $derived(getNip07() || signers.length > 0) onMount(async () => { if (Capacitor.isNativePlatform()) { diff --git a/src/app/components/LogInBunker.svelte b/src/app/components/LogInBunker.svelte index c3dfd580..09070ea1 100644 --- a/src/app/components/LogInBunker.svelte +++ b/src/app/components/LogInBunker.svelte @@ -1,4 +1,6 @@ - + -

Log In
-
- Connect your signer by scanning the QR code below or pasting a bunker link. -
+ {#snippet title()} +
Log In
+ {/snippet} + {#snippet info()} +
Connect your signer by scanning the QR code below or pasting a bunker link.
+ {/snippet} {#if !loading && url}
@@ -134,15 +138,21 @@
{/if} -

Bunker Link*

- -

- A login link provided by a nostr signing app. - -

+ {#snippet label()} +

Bunker Link*

+ {/snippet} + {#snippet input()} + + {/snippet} + {#snippet info()} +

+ A login link provided by a nostr signing app. + +

+ {/snippet} {/if} diff --git a/src/app/components/MenuSpacesItem.svelte b/src/app/components/MenuSpacesItem.svelte index 44ad15a2..d64f5897 100644 --- a/src/app/components/MenuSpacesItem.svelte +++ b/src/app/components/MenuSpacesItem.svelte @@ -7,20 +7,26 @@ import {makeSpacePath} from "@app/routes" import {notifications} from "@app/notifications" - export let url + let {url} = $props() const path = makeSpacePath(url) -
-
- - {#if $notifications.has(path)} -
- {/if} -
-
+ {#snippet icon()} +
+ {/snippet} + {#snippet title()} +
+ + {#if $notifications.has(path)} +
+ {/if} +
+ {/snippet} + {#snippet info()} +
+ {/snippet} diff --git a/src/app/components/ModalContainer.svelte b/src/app/components/ModalContainer.svelte index 6dbebcfe..c3d48225 100644 --- a/src/app/components/ModalContainer.svelte +++ b/src/app/components/ModalContainer.svelte @@ -1,4 +1,6 @@ - + {#if hashIsValid && modal?.options?.drawer} {#key modal.id} - + {/key} {:else if hashIsValid && modal} {#key modal.id} - + {/key} {/if} diff --git a/src/app/components/NoteCard.svelte b/src/app/components/NoteCard.svelte index 1698217c..afad9955 100644 --- a/src/app/components/NoteCard.svelte +++ b/src/app/components/NoteCard.svelte @@ -11,9 +11,13 @@ import ProfileName from "@app/components/ProfileName.svelte" import {entityLink} from "@app/state" - export let event - export let minimal = false - export let hideProfile = false + interface Props { + event: TrustedEvent + minimal: boolean + hideProfile: boolean + } + + let {event, children, minimal = false, hideProfile = false, ...restProps} = $props() const relays = ctx.app.router.Event(event).getUrls() const nevent = nip19.neventEncode({id: event.id, relays}) @@ -25,7 +29,7 @@ let muted = getPubkeyTagValues(getListTags($userMutes)).includes(event.pubkey) -
+
{#if muted}
@@ -50,6 +54,6 @@ {formatTimestamp(event.created_at)}
- + {@render children()} {/if}
diff --git a/src/app/components/NoteItem.svelte b/src/app/components/NoteItem.svelte index 0c638c66..9150fb3f 100644 --- a/src/app/components/NoteItem.svelte +++ b/src/app/components/NoteItem.svelte @@ -9,8 +9,7 @@ import ReactionSummary from "@app/components/ReactionSummary.svelte" import {publishDelete, publishReaction} from "@app/commands" - export let url - export let event + let {url, event} = $props() const onReactionClick = (content: string, events: TrustedEvent[]) => { const reaction = events.find(e => e.pubkey === $pubkey) diff --git a/src/app/components/PasswordReset.svelte b/src/app/components/PasswordReset.svelte index c1fb406e..7e8b1d0d 100644 --- a/src/app/components/PasswordReset.svelte +++ b/src/app/components/PasswordReset.svelte @@ -1,4 +1,6 @@ - + -
Reset your password
+ {#snippet title()} +
Reset your password
+ {/snippet} -

Email Address

- + {#snippet label()} +

Email Address

+ {/snippet} + {#snippet input()} + + {/snippet} -

New Password

- + {#snippet label()} +

New Password

+ {/snippet} + {#snippet input()} + + {/snippet}
- +{@render children?.()}
diff --git a/src/app/components/PrimaryNavItemSpace.svelte b/src/app/components/PrimaryNavItemSpace.svelte index a0a90b5d..71c70895 100644 --- a/src/app/components/PrimaryNavItemSpace.svelte +++ b/src/app/components/PrimaryNavItemSpace.svelte @@ -5,7 +5,7 @@ import {makeSpacePath} from "@app/routes" import {notifications} from "@app/notifications" - export let url + let {url} = $props() const path = makeSpacePath(url) diff --git a/src/app/components/Profile.svelte b/src/app/components/Profile.svelte index 762cb811..25f8b8f2 100644 --- a/src/app/components/Profile.svelte +++ b/src/app/components/Profile.svelte @@ -15,7 +15,7 @@ import ProfileDetail from "@app/components/ProfileDetail.svelte" import {pushModal} from "@app/modal" - export let pubkey + let {pubkey} = $props() const profile = deriveProfile(pubkey) const profileDisplay = deriveProfileDisplay(pubkey) @@ -24,8 +24,9 @@ const openProfile = () => pushModal(ProfileDetail, {pubkey}) - $: following = - pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey) + let following = $derived( + pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey), + )
diff --git a/src/app/components/ProfileCircle.svelte b/src/app/components/ProfileCircle.svelte index 306ba366..19f902b8 100644 --- a/src/app/components/ProfileCircle.svelte +++ b/src/app/components/ProfileCircle.svelte @@ -2,9 +2,9 @@ import {deriveProfile} from "@welshman/app" import Avatar from "@lib/components/Avatar.svelte" - export let pubkey + let {...props} = $props() - const profile = deriveProfile(pubkey) + const profile = deriveProfile(props.pubkey) - + diff --git a/src/app/components/ProfileCircles.svelte b/src/app/components/ProfileCircles.svelte index effc6311..9ff313d6 100644 --- a/src/app/components/ProfileCircles.svelte +++ b/src/app/components/ProfileCircles.svelte @@ -1,13 +1,13 @@
- {#each pubkeys.slice(0, 15) as pubkey (pubkey)} + {#each props.pubkeys.slice(0, 15) as pubkey (pubkey)}
- +
{/each}
diff --git a/src/app/components/ProfileDetail.svelte b/src/app/components/ProfileDetail.svelte index 251c938a..a1c71984 100644 --- a/src/app/components/ProfileDetail.svelte +++ b/src/app/components/ProfileDetail.svelte @@ -22,7 +22,7 @@ import {pushModal} from "@app/modal" import {makeChatPath} from "@app/routes" - export let pubkey + let {pubkey} = $props() const profile = deriveProfile(pubkey) const profileDisplay = deriveProfileDisplay(pubkey) @@ -35,8 +35,9 @@ const openChat = () => ($canDecrypt ? goto(chatPath) : pushModal(ChatEnable, {next: chatPath})) - $: following = - pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey) + let following = $derived( + pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey), + )
diff --git a/src/app/components/ProfileEdit.svelte b/src/app/components/ProfileEdit.svelte index d818dc20..40dcc568 100644 --- a/src/app/components/ProfileEdit.svelte +++ b/src/app/components/ProfileEdit.svelte @@ -1,4 +1,6 @@ - +
-

Username

- + {#snippet label()} +

Username

+ {/snippet} + {#snippet input()} + + {/snippet} -

About You

- + {#snippet label()} +

About You

+ {/snippet} + {#snippet input()} + + {/snippet} -

Nostr Address

- -

- -

+ {#snippet label()} +

Nostr Address

+ {/snippet} + {#snippet input()} + + {/snippet} + {#snippet info()} +

+ +

+ {/snippet}
diff --git a/src/app/components/ProfileEject.svelte b/src/app/components/ProfileEject.svelte index dff2adb4..9a1b815b 100644 --- a/src/app/components/ProfileEject.svelte +++ b/src/app/components/ProfileEject.svelte @@ -42,14 +42,16 @@ window.location.href = "/" } - let password = "" - let success = false - let loading = false + let password = $state("") + let success = $state(false) + let loading = $state(false)
-
Export your keys
+ {#snippet title()} +
Export your keys
+ {/snippet}

Here's what the process looks like:

    @@ -74,11 +76,15 @@ {#if !success}
    -

    To confirm, please enter your password below:

    - + {#snippet label()} +

    To confirm, please enter your password below:

    + {/snippet} + {#snippet input()} + + {/snippet}
    {/if} diff --git a/src/app/components/ProfileFeed.svelte b/src/app/components/ProfileFeed.svelte index 3c851de2..40cefd09 100644 --- a/src/app/components/ProfileFeed.svelte +++ b/src/app/components/ProfileFeed.svelte @@ -10,10 +10,14 @@ import Spinner from "@lib/components/Spinner.svelte" import NoteItem from "@app/components/NoteItem.svelte" - export let url - export let pubkey - export let events: TrustedEvent[] = [] - export let hideLoading = false + interface Props { + url: any + pubkey: any + events?: TrustedEvent[] + hideLoading?: boolean + } + + let {url, pubkey, events = $bindable([]), hideLoading = false}: Props = $props() const ctrl = createFeedController({ useWindowing: true, @@ -28,12 +32,12 @@ }, }) - let element: Element + let element: Element | undefined = $state() let buffer: TrustedEvent[] = [] onMount(() => { const scroller = createScroller({ - element, + element: element!, delay: 300, threshold: 3000, onScroll: () => { diff --git a/src/app/components/ProfileInfo.svelte b/src/app/components/ProfileInfo.svelte index 1eac2186..23f2f3b2 100644 --- a/src/app/components/ProfileInfo.svelte +++ b/src/app/components/ProfileInfo.svelte @@ -2,7 +2,7 @@ import {deriveProfile} from "@welshman/app" import Content from "@app/components/Content.svelte" - export let pubkey + let {pubkey} = $props() const profile = deriveProfile(pubkey) diff --git a/src/app/components/ProfileList.svelte b/src/app/components/ProfileList.svelte index 03493627..e394e725 100644 --- a/src/app/components/ProfileList.svelte +++ b/src/app/components/ProfileList.svelte @@ -3,15 +3,23 @@ import ModalHeader from "@lib/components/ModalHeader.svelte" import Profile from "@app/components/Profile.svelte" - export let title - export let subtitle = "" - export let pubkeys + interface Props { + title: any + subtitle?: string + pubkeys: any + } + + let {title, subtitle = "", pubkeys}: Props = $props()
    -
    {title}
    -
    {subtitle}
    + {#snippet title()} +
    {title}
    + {/snippet} + {#snippet info()} +
    {subtitle}
    + {/snippet}     {#each pubkeys as pubkey (pubkey)}
    diff --git a/src/app/components/ProfileMultiSelect.svelte b/src/app/components/ProfileMultiSelect.svelte index 32aa4639..36d3159f 100644 --- a/src/app/components/ProfileMultiSelect.svelte +++ b/src/app/components/ProfileMultiSelect.svelte @@ -1,5 +1,5 @@
    @@ -64,14 +68,14 @@
    input.getBoundingClientRect(), + getReferenceClientRect: () => input!.getBoundingClientRect(), }} />
    diff --git a/src/app/components/ProfileName.svelte b/src/app/components/ProfileName.svelte index 08fdb89b..20aa589c 100644 --- a/src/app/components/ProfileName.svelte +++ b/src/app/components/ProfileName.svelte @@ -1,7 +1,7 @@ diff --git a/src/app/components/QRCode.svelte b/src/app/components/QRCode.svelte index 95500173..49d31f84 100644 --- a/src/app/components/QRCode.svelte +++ b/src/app/components/QRCode.svelte @@ -4,23 +4,25 @@ import Button from "@lib/components/Button.svelte" import {clip} from "@app/toast" - export let code + let {code} = $props() - let canvas: Element - let wrapper: Element - let scale = 0.1 - let height: number + let canvas: Element | undefined = $state() + let wrapper: Element | undefined = $state() + let scale = $state(0.1) + let height = $state(0) const copy = () => clip(code) onMount(() => { - QRCode.toCanvas(canvas, code) + if (canvas && wrapper) { + QRCode.toCanvas(canvas, code) - const wrapperRect = wrapper.getBoundingClientRect() - const canvasRect = canvas.getBoundingClientRect() + const wrapperRect = wrapper.getBoundingClientRect() + const canvasRect = canvas.getBoundingClientRect() - scale = wrapperRect.width / (canvasRect.width * 10) - height = canvasRect.width * 10 * scale + scale = wrapperRect.width / (canvasRect.width * 10) + height = canvasRect.width * 10 * scale + } }) diff --git a/src/app/components/ReactionSummary.svelte b/src/app/components/ReactionSummary.svelte index 528d2bc0..9f83f345 100644 --- a/src/app/components/ReactionSummary.svelte +++ b/src/app/components/ReactionSummary.svelte @@ -1,4 +1,6 @@ {#if $relay?.profile?.description} -

    {$relay?.profile.description}

    +

    {$relay?.profile.description}

    {/if} diff --git a/src/app/components/RelayItem.svelte b/src/app/components/RelayItem.svelte index 72efb56b..2653d178 100644 --- a/src/app/components/RelayItem.svelte +++ b/src/app/components/RelayItem.svelte @@ -5,11 +5,11 @@ import {displayRelayUrl} from "@welshman/util" import {deriveRelay} from "@welshman/app" - export let url + let {url, children} = $props() const relay = deriveRelay(url) - $: connections = $relay?.stats?.open_count || 0 + let connections = $derived($relay?.stats?.open_count || 0)
    @@ -18,7 +18,7 @@

    {displayRelayUrl(url)}

    - + {@render children?.()}
    {#if $relay?.profile?.description}

    {$relay?.profile.description}

    diff --git a/src/app/components/RelayName.svelte b/src/app/components/RelayName.svelte index 3d530340..178989ab 100644 --- a/src/app/components/RelayName.svelte +++ b/src/app/components/RelayName.svelte @@ -1,7 +1,7 @@ diff --git a/src/app/components/RoomCreate.svelte b/src/app/components/RoomCreate.svelte index c3106791..b9176d40 100644 --- a/src/app/components/RoomCreate.svelte +++ b/src/app/components/RoomCreate.svelte @@ -1,4 +1,6 @@ - + -
    Create a Room
    -
    - On {displayRelayUrl(url)} -
    + {#snippet title()} +
    Create a Room
    + {/snippet} + {#snippet info()} +
    + On {displayRelayUrl(url)} +
    + {/snippet}     -

    Room Name

    - + {#snippet label()} +

    Room Name

    + {/snippet} + {#snippet input()} + + {/snippet}
diff --git a/src/app/components/SpaceAuthError.svelte b/src/app/components/SpaceAuthError.svelte index 9b3959db..49bcbbac 100644 --- a/src/app/components/SpaceAuthError.svelte +++ b/src/app/components/SpaceAuthError.svelte @@ -1,4 +1,6 @@ - + -
Access Error
-
We couldn't connect you to this space.
+ {#snippet title()} +
Access Error
+ {/snippet} + {#snippet info()} +
We couldn't connect you to this space.
+ {/snippet}

We received an error from the relay indicating you don't have access to {displayRelayUrl(url)}. @@ -56,12 +61,18 @@

If you have one, you can try entering an invite code below to request access.

-

Invite code

- -

Enter an invite code provided to you by the admin of the relay.

+ {#snippet label()} +

Invite code

+ {/snippet} + {#snippet input()} + + {/snippet} + {#snippet info()} +

Enter an invite code provided to you by the admin of the relay.

+ {/snippet} -

+ {#snippet label()} +

Relay

+ {/snippet} + {#snippet input()} + + {/snippet} + {#snippet info()} +

+ This can be any nostr relay where you'd like to host your space. + +

+ {/snippet} - -

- This invite link can be used by clicking "Add Space" and pasting it there. - {#if !claim} - This space did not issue a claim for this link, so additional steps might be required - for people using this invite link. - {/if} -

+ {#snippet input()} + + {/snippet} + {#snippet info()} +

+ This invite link can be used by clicking "Add Space" and pasting it there. + {#if !claim} + This space did not issue a claim for this link, so additional steps might be + required for people using this invite link. + {/if} +

+ {/snippet}
{/if} diff --git a/src/app/components/SpaceInviteAccept.svelte b/src/app/components/SpaceInviteAccept.svelte index 83ded1dc..f9fa0bbd 100644 --- a/src/app/components/SpaceInviteAccept.svelte +++ b/src/app/components/SpaceInviteAccept.svelte @@ -1,4 +1,6 @@ - + -
Join a Space
-
Enter an invite code below to join an existing space.
+ {#snippet title()} +
Join a Space
+ {/snippet} + {#snippet info()} +
Enter an invite code below to join an existing space.
+ {/snippet} -

Invite code*

- -

- You can also directly join any relay by entering its URL here. - -

+ {#snippet label()} +

Invite code*

+ {/snippet} + {#snippet input()} + + {/snippet} + {#snippet info()} +

+ You can also directly join any relay by entering its URL here. + +

+ {/snippet} diff --git a/src/app/components/ThreadMenu.svelte b/src/app/components/ThreadMenu.svelte index ac747cf3..ec502c39 100644 --- a/src/app/components/ThreadMenu.svelte +++ b/src/app/components/ThreadMenu.svelte @@ -9,9 +9,7 @@ import ConfirmDelete from "@app/components/ConfirmDelete.svelte" import {pushModal} from "@app/modal" - export let url - export let event - export let onClick + let {url, event, onClick} = $props() const isRoot = event.kind !== COMMENT diff --git a/src/app/components/ThreadReply.svelte b/src/app/components/ThreadReply.svelte index 9bd64d43..91fbaaac 100644 --- a/src/app/components/ThreadReply.svelte +++ b/src/app/components/ThreadReply.svelte @@ -1,4 +1,6 @@ - + -
Share Thread
-
Which room would you like to share this thread to?
+ {#snippet title()} +
Share Thread
+ {/snippet} + {#snippet info()} +
Which room would you like to share this thread to?
+ {/snippet}
{#each $channelsByUrl.get(url) || [] as channel (channel.room)} @@ -44,7 +49,7 @@ class="btn" class:btn-neutral={selection !== channel.room} class:btn-primary={selection === channel.room} - on:click={() => toggleRoom(channel.room)}> + onclick={() => toggleRoom(channel.room)}> # {/each} diff --git a/src/app/components/ThunkStatus.svelte b/src/app/components/ThunkStatus.svelte index 10139417..e787e7bc 100644 --- a/src/app/components/ThunkStatus.svelte +++ b/src/app/components/ThunkStatus.svelte @@ -10,7 +10,11 @@ import ThunkStatusDetail from "@app/components/ThunkStatusDetail.svelte" import {userSettingValues} from "@app/state" - export let thunk: Thunk | MergedThunk + interface Props { + thunk: Thunk | MergedThunk + } + + let {thunk} = $props() const {Pending, Failure, Timeout} = PublishStatus diff --git a/src/app/components/ThunkStatusDetail.svelte b/src/app/components/ThunkStatusDetail.svelte index ec1c8d26..4c76b95e 100644 --- a/src/app/components/ThunkStatusDetail.svelte +++ b/src/app/components/ThunkStatusDetail.svelte @@ -1,14 +1,20 @@
diff --git a/src/app/editor/EditMention.svelte b/src/app/editor/EditMention.svelte index 1d1d1b40..fb0ec5c4 100644 --- a/src/app/editor/EditMention.svelte +++ b/src/app/editor/EditMention.svelte @@ -3,8 +3,12 @@ import {NodeViewWrapper} from "svelte-tiptap" import {deriveProfileDisplay} from "@welshman/app" - export let node: NodeViewProps["node"] - export let selected: NodeViewProps["selected"] + interface Props { + node: NodeViewProps["node"] + selected: NodeViewProps["selected"] + } + + let {node, selected}: Props = $props() const display = deriveProfileDisplay(node.attrs.pubkey) diff --git a/src/app/editor/ProfileSuggestion.svelte b/src/app/editor/ProfileSuggestion.svelte index ac746a53..7d44c21d 100644 --- a/src/app/editor/ProfileSuggestion.svelte +++ b/src/app/editor/ProfileSuggestion.svelte @@ -10,14 +10,14 @@ import WotScore from "@lib/components/WotScore.svelte" import ProfileCircle from "@app/components/ProfileCircle.svelte" - export let value + let {value} = $props() const pubkey = value const profileDisplay = deriveProfileDisplay(pubkey) const handle = deriveHandleForPubkey(pubkey) const score = deriveUserWotScore(pubkey) - $: following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey) + let following = $derived(getPubkeyTagValues(getListTags($userFollows)).includes(pubkey))
diff --git a/src/app/editor/index.ts b/src/app/editor/index.ts index 069fde18..b62f985b 100644 --- a/src/app/editor/index.ts +++ b/src/app/editor/index.ts @@ -77,7 +77,7 @@ export const makeEditor = ({ }, nprofile: { extend: { - addNodeView: () => SvelteNodeViewRenderer(EditMention), + addNodeView: () => SvelteNodeViewRenderer(asClassComponent(EditMention)), addProseMirrorPlugins() { return [ MentionSuggestion({ diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte index fd42b5db..3dd38af5 100644 --- a/src/lib/components/Avatar.svelte +++ b/src/lib/components/Avatar.svelte @@ -2,13 +2,11 @@ import {onMount} from "svelte" import Icon from "@lib/components/Icon.svelte" - export let src = "" - export let size = 7 - export let icon = "user-rounded" + let {src = "", size = 7, icon = "user-rounded", style = "", ...restProps} = $props() let element: HTMLElement - $: rem = size * 4 + const rem = $derived(size * 4) onMount(() => { if (src) { @@ -25,8 +23,7 @@
+ class="{restProps.class} relative !flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-cover bg-center" + style="width: {rem}px; height: {rem}px; min-width: {rem}px; background-image: url({src}); {style}">
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte index abbebead..65588b9e 100644 --- a/src/lib/components/Button.svelte +++ b/src/lib/components/Button.svelte @@ -1,15 +1,19 @@ {#if type === "submit"} - {:else} - {/if} diff --git a/src/lib/components/CardButton.svelte b/src/lib/components/CardButton.svelte index 0982bb2d..acaae6f2 100644 --- a/src/lib/components/CardButton.svelte +++ b/src/lib/components/CardButton.svelte @@ -1,18 +1,26 @@ -
+
- + {@render props.icon?.()}

- + {@render props.title?.()}

- + {@render props.info?.()}

diff --git a/src/lib/components/Collapse.svelte b/src/lib/components/Collapse.svelte index 16cbca21..b2d8c99e 100644 --- a/src/lib/components/Collapse.svelte +++ b/src/lib/components/Collapse.svelte @@ -1,27 +1,35 @@ -
+
- - + {@render props.title?.()} + {@render props.description?.()} {#if isOpen}
- + {@render props.children?.()}
{/if}
diff --git a/src/lib/components/Confirm.svelte b/src/lib/components/Confirm.svelte index 007d8517..2a907a2d 100644 --- a/src/lib/components/Confirm.svelte +++ b/src/lib/components/Confirm.svelte @@ -1,16 +1,22 @@ - + -
{title}
-
{subtitle}
+ {#snippet title()} +
{title}
+ {/snippet} + {#snippet info()} +
{subtitle}
+ {/snippet}

{message}

diff --git a/src/lib/components/ContentSearch.svelte b/src/lib/components/ContentSearch.svelte index 2ecbf42b..f35535a7 100644 --- a/src/lib/components/ContentSearch.svelte +++ b/src/lib/components/ContentSearch.svelte @@ -1,12 +1,22 @@ -
+ + +
- + {@render props.input?.()}
- + {@render props.content?.()}
diff --git a/src/lib/components/DateTimeInput.svelte b/src/lib/components/DateTimeInput.svelte index eae4adfd..4ec351c1 100644 --- a/src/lib/components/DateTimeInput.svelte +++ b/src/lib/components/DateTimeInput.svelte @@ -3,8 +3,13 @@ import Icon from "@lib/components/Icon.svelte" import Button from "@lib/components/Button.svelte" - export let initialValue: Date | undefined = undefined - export let value: Date | undefined = initialValue + interface Props { + initialValue?: Date | undefined + value?: Date | undefined + } + + let {initialValue = undefined, value = $bindable(initialValue)}: Props = + $props() const init = () => { if (!value) { diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte index f580de88..d7e7360a 100644 --- a/src/lib/components/Dialog.svelte +++ b/src/lib/components/Dialog.svelte @@ -2,12 +2,18 @@ import {noop} from "@welshman/lib" import {fade, fly} from "@lib/transition" - export let onClose: any = noop - export let fullscreen = false + interface Props { + onClose?: any + fullscreen?: boolean + children?: import("svelte").Snippet + } - $: extraClass = + let {onClose = noop, fullscreen = false, children}: Props = $props() + + let extraClass = $derived( !fullscreen && - "card2 bg-alt max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px] shadow-xl" + "card2 bg-alt max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px] shadow-xl", + )
@@ -15,9 +21,9 @@ aria-label="Close dialog" class="absolute inset-0 cursor-pointer bg-black opacity-75" transition:fade={{duration: 300}} - on:click={onClose}> + onclick={onClose}>
- + {@render children?.()}
diff --git a/src/lib/components/Divider.svelte b/src/lib/components/Divider.svelte index f1f446c2..b6a5744b 100644 --- a/src/lib/components/Divider.svelte +++ b/src/lib/components/Divider.svelte @@ -1,7 +1,15 @@ + +
- {#if $$slots.default} -

+ {#if children} +

{@render children?.()}

{/if}
diff --git a/src/lib/components/Drawer.svelte b/src/lib/components/Drawer.svelte index e3e8f84d..9c647789 100644 --- a/src/lib/components/Drawer.svelte +++ b/src/lib/components/Drawer.svelte @@ -1,7 +1,7 @@
@@ -9,11 +9,11 @@ aria-label="Close drawer" class="absolute inset-0 cursor-pointer bg-black opacity-50" transition:fade - on:click={onClose}> + onclick={onClose}>
- + {@render children?.()}
diff --git a/src/lib/components/EmojiButton.svelte b/src/lib/components/EmojiButton.svelte index 9b61b7c9..dffbdf49 100644 --- a/src/lib/components/EmojiButton.svelte +++ b/src/lib/components/EmojiButton.svelte @@ -6,13 +6,13 @@ import Tippy from "@lib/components/Tippy.svelte" import EmojiPicker from "@lib/components/EmojiPicker.svelte" - export let onEmoji + let {...props} = $props() - const open = () => popover.show() + const open = () => popover?.show() const onClick = (emoji: NativeEmoji) => { - onEmoji(emoji) - popover.hide() + props.onEmoji(emoji) + popover?.hide() } const onMouseMove = throttle(300, ({clientX, clientY}: any) => { @@ -25,17 +25,17 @@ } }) - let popover: Instance + let popover: Instance | undefined = $state() - + - diff --git a/src/lib/components/EmojiPicker.svelte b/src/lib/components/EmojiPicker.svelte index 74ef14b3..07569602 100644 --- a/src/lib/components/EmojiPicker.svelte +++ b/src/lib/components/EmojiPicker.svelte @@ -13,12 +13,16 @@ import type {Emoji} from "emoji-picker-element/shared" import {onMount} from "svelte" - export let onClick: (emoji: Emoji) => void + interface Props { + onClick: (emoji: Emoji) => void + } - let element: Element + let {onClick}: Props = $props() + + let element: Element | undefined = $state() onMount(() => { - element.addEventListener("emoji-click", (event: any) => onClick(event.detail as Emoji)) + element?.addEventListener("emoji-click", (event: any) => onClick(event.detail as Emoji)) }) diff --git a/src/lib/components/Field.svelte b/src/lib/components/Field.svelte index bf102735..c11cdbb0 100644 --- a/src/lib/components/Field.svelte +++ b/src/lib/components/Field.svelte @@ -1,13 +1,24 @@ -
- {#if $$slots.label} + + +
+ {#if props.label} {/if} - - {#if $$slots.info} + {@render props.input?.()} + {#if props.info}

- + {@render props.info?.()}

{/if}
diff --git a/src/lib/components/FieldInline.svelte b/src/lib/components/FieldInline.svelte index d631c3d5..7e48067e 100644 --- a/src/lib/components/FieldInline.svelte +++ b/src/lib/components/FieldInline.svelte @@ -1,13 +1,24 @@ -
+ + +
- + {@render props.input?.()}

- {#if $$slots.info} - + {#if props.info} + {@render props.info?.()} {/if}

diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte index 3fe6f688..d3972bde 100644 --- a/src/lib/components/Icon.svelte +++ b/src/lib/components/Icon.svelte @@ -84,8 +84,12 @@ import WidgetAdd from "@assets/icons/Widget Add.svg?dataurl" import WiFiRouterRound from "@assets/icons/Wi-Fi Router Round.svg?dataurl" - export let icon - export let size = 5 + interface Props { + icon: string + size: number + } + + let {icon, size = 5, ...restProps} = $props() const px = size * 4 @@ -173,6 +177,6 @@
diff --git a/src/lib/components/InputPicture.svelte b/src/lib/components/InputPicture.svelte index c787c2a7..05ef7da1 100644 --- a/src/lib/components/InputPicture.svelte +++ b/src/lib/components/InputPicture.svelte @@ -1,9 +1,15 @@ - +