Fix more stuff, particularly event handlers

src/app/components/AppContainer.svelte

@@ -14,7 +14,7 @@
     children: Snippet
   }
 
-  let {children}: Props = $props()
+  const {children}: Props = $props()
 
   if (BURROW_URL && !$pubkey) {
     if ($page.url.pathname === "/confirm-email") {

src/app/components/ChannelCompose.svelte

@@ -14,7 +14,7 @@
     content?: string
   }
 
-  let {onSubmit, content = ""}: Props = $props()
+  const {onSubmit, content = ""}: Props = $props()
 
   export const focus = () => $editor.chain().focus().run()
 
@@ -47,7 +47,7 @@
     data-tip="Add an image"
     class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
     disabled={$uploading}
-    on:click={uploadFiles}>
+    onclick={uploadFiles}>
     {#if $uploading}
       <span class="loading loading-spinner loading-xs"></span>
     {:else}
@@ -61,7 +61,7 @@
     data-tip="{window.navigator.platform.includes('Mac') ? 'cmd' : 'ctrl'}+enter to send"
     class="center tooltip tooltip-left absolute right-4 h-10 w-10 min-w-10 rounded-full"
     disabled={$uploading}
-    on:click={submit}>
+    onclick={submit}>
     <Icon icon="plain" />
   </Button>
 </form>

src/app/components/ChannelComposeParent.svelte

@@ -11,7 +11,7 @@
     clear: () => void
   }
 
-  let {event, clear}: Props = $props()
+  const {event, clear}: Props = $props()
 </script>
 
 <div
@@ -21,7 +21,7 @@
   {#key event.id}
     <Content {event} hideMedia minLength={100} maxLength={300} expandMode="disabled" />
   {/key}
-  <Button class="absolute right-2 top-2 cursor-pointer" on:click={clear}>
+  <Button class="absolute right-2 top-2 cursor-pointer" onclick={clear}>
     <Icon icon="close-circle" />
   </Button>
 </div>

src/app/components/ChannelMessage.svelte

@@ -38,7 +38,7 @@
     inert?: boolean
   }
 
-  let {url, room, event, replyTo = undefined, showPubkey = false, inert = false}: Props = $props()
+  const {url, room, event, replyTo = undefined, showPubkey = false, inert = false}: Props = $props()
 
   const thunk = $thunks[event.id]
   const today = formatTimestampAsDate(now())
@@ -69,7 +69,7 @@
   class="group relative flex w-full cursor-default flex-col p-2 pb-3 text-left">
   <div class="flex w-full gap-3 overflow-auto">
     {#if showPubkey}
-      <Button on:click={openProfile} class="flex items-start">
+      <Button onclick={openProfile} class="flex items-start">
         <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={8} />
       </Button>
     {:else}
@@ -78,7 +78,7 @@
     <div class="min-w-0 flex-grow pr-1">
       {#if showPubkey}
         <div class="flex items-center gap-2">
-          <Button on:click={openProfile} class="text-sm font-bold" style="color: {colorValue}">
+          <Button onclick={openProfile} class="text-sm font-bold" style="color: {colorValue}">
             {$profileDisplay}
           </Button>
           <span class="text-xs opacity-50">
@@ -108,7 +108,7 @@
     onclick={stopPropagation(bubble("click"))}>
     <ChannelMessageEmojiButton {url} {room} {event} />
     {#if replyTo}
-      <Button class="btn join-item btn-xs" on:click={reply}>
+      <Button class="btn join-item btn-xs" onclick={reply}>
         <Icon icon="reply" size={4} />
       </Button>
     {/if}

src/app/components/ChannelMessageEmojiButton.svelte

@@ -5,7 +5,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import {publishReaction} from "@app/commands"
 
-  let {url, room, event} = $props()
+  const {url, room, event} = $props()
 
   // Tell svelte-check to shut up
   noop(room)

src/app/components/ChannelMessageMenu.svelte

@@ -7,7 +7,7 @@
   import ConfirmDelete from "@app/components/ConfirmDelete.svelte"
   import {pushModal} from "@app/modal"
 
-  let {url, event, onClick} = $props()
+  const {url, event, onClick} = $props()
 
   const report = () => {
     onClick()
@@ -27,21 +27,21 @@
 
 <ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl">
   <li>
-    <Button on:click={showInfo}>
+    <Button onclick={showInfo}>
       <Icon size={4} icon="code-2" />
       Message Details
     </Button>
   </li>
   {#if event.pubkey === $pubkey}
     <li>
-      <Button on:click={showDelete} class="text-error">
+      <Button onclick={showDelete} class="text-error">
         <Icon size={4} icon="trash-bin-2" />
         Delete Message
       </Button>
     </li>
   {:else}
     <li>
-      <Button class="text-error" on:click={report}>
+      <Button class="text-error" onclick={report}>
         <Icon size={4} icon="danger" />
         Report Content
       </Button>

src/app/components/ChannelMessageMenuButton.svelte

@@ -6,7 +6,7 @@
   import Tippy from "@lib/components/Tippy.svelte"
   import ChannelMessageMenu from "@app/components/ChannelMessageMenu.svelte"
 
-  let {url, event} = $props()
+  const {url, event} = $props()
 
   const open = () => popover?.show()
 
@@ -28,7 +28,7 @@
 <svelte:document onmousemove={onMouseMove} />
 
 <div class="flex">
-  <Button class="btn join-item btn-xs" on:click={open}>
+  <Button class="btn join-item btn-xs" onclick={open}>
     <Icon icon="menu-dots" size={4} />
   </Button>
   <Tippy

src/app/components/ChannelMessageMenuMobile.svelte

@@ -9,7 +9,7 @@
   import {publishReaction} from "@app/commands"
   import {pushModal} from "@app/modal"
 
-  let {url, event, reply} = $props()
+  const {url, event, reply} = $props()
 
   const onEmoji = (emoji: NativeEmoji) => {
     history.back()
@@ -29,20 +29,20 @@
 </script>
 
 <div class="col-2">
-  <Button class="btn btn-primary w-full" on:click={showEmojiPicker}>
+  <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
     <Icon size={4} icon="smile-circle" />
     Send Reaction
   </Button>
-  <Button class="btn btn-neutral w-full" on:click={sendReply}>
+  <Button class="btn btn-neutral w-full" onclick={sendReply}>
     <Icon size={4} icon="reply" />
     Send Reply
   </Button>
-  <Button class="btn btn-neutral" on:click={showInfo}>
+  <Button class="btn btn-neutral" onclick={showInfo}>
     <Icon size={4} icon="code-2" />
     Message Details
   </Button>
   {#if event.pubkey === $pubkey}
-    <Button class="btn btn-neutral text-error" on:click={showDelete}>
+    <Button class="btn btn-neutral text-error" onclick={showDelete}>
       <Icon size={4} icon="trash-bin-2" />
       Delete Message
     </Button>

src/app/components/ChannelName.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {GENERAL, channelsById, makeChannelId} from "@app/state"
 
-  let {url, room} = $props()
+  const {url, room} = $props()
 </script>
 
 {#if room === GENERAL}

src/app/components/Chat.svelte

@@ -1,12 +1,3 @@
-<script lang="ts" module>
-  type Element = {
-    id: string
-    type: "date" | "note"
-    value: string | TrustedEvent
-    showPubkey: boolean
-  }
-</script>
-
 <script lang="ts">
   import {onMount} from "svelte"
   import {int, nthNe, MINUTE, sortBy, remove} from "@welshman/lib"
@@ -37,7 +28,7 @@
   import {pushModal} from "@app/modal"
   import {sendWrapped, prependParent} from "@app/commands"
 
-  let {id, info = undefined} = $props()
+  const {id, info = undefined} = $props()
 
   const chat = deriveChat(id)
   const pubkeys = splitChatId(id)
@@ -125,7 +116,7 @@
           {#if others.length === 1}
             {@const pubkey = others[0]}
             {@const onClick = () => pushModal(ProfileDetail, {pubkey})}
-            <Button on:click={onClick} class="row-2">
+            <Button onclick={onClick} class="row-2">
               <ProfileCircle {pubkey} size={5} />
               <ProfileName {pubkey} />
             </Button>
@@ -144,7 +135,7 @@
               </p>
             </div>
             {#if others.length > 2}
-              <Button on:click={showMembers} class="btn btn-link hidden sm:block"
+              <Button onclick={showMembers} class="btn btn-link hidden sm:block"
                 >Show all members</Button>
             {/if}
           {/if}

src/app/components/ChatEnable.svelte

@@ -12,7 +12,7 @@
   import {canDecrypt, PLATFORM_NAME, ensureUnwrapped} from "@app/state"
   import {clearModals} from "@app/modal"
 
-  let {next} = $props()
+  const {next} = $props()
 
   let loading = $state(false)
 
@@ -58,7 +58,7 @@
     to decrypt data.
   </p>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/ChatItem.svelte

@@ -19,7 +19,7 @@
     [key: string]: any
   }
 
-  let {...props}: Props = $props()
+  const {...props}: Props = $props()
 
   const others = remove($pubkey!, props.pubkeys)
   const active = $page.params.chat === props.id

src/app/components/ChatMenuMobile.svelte

@@ -14,11 +14,11 @@
 </script>
 
 <div class="col-2">
-  <Button class="btn btn-primary" on:click={startChat}>
+  <Button class="btn btn-primary" onclick={startChat}>
     <Icon size={4} icon="add-circle" />
     Start chat
   </Button>
-  <Button class="btn btn-neutral" on:click={markAsRead}>
+  <Button class="btn btn-neutral" onclick={markAsRead}>
     <Icon size={4} icon="check-circle" />
     Mark all read
   </Button>

src/app/components/ChatMessage.svelte

@@ -32,7 +32,7 @@
     showPubkey?: boolean
   }
 
-  let {event, replyTo = undefined, pubkeys, showPubkey = false}: Props = $props()
+  const {event, replyTo = undefined, pubkeys, showPubkey = false}: Props = $props()
 
   const thunk = $thunks[event.id]
   const isOwn = event.pubkey === $pubkey
@@ -101,16 +101,13 @@
       {#if showPubkey}
         <div class="flex items-center gap-2">
           {#if !isOwn}
-            <Button on:click={openProfile} class="flex items-center gap-1">
+            <Button onclick={openProfile} class="flex items-center gap-1">
               <Avatar
                 src={$profile?.picture}
                 class="border border-solid border-base-content"
                 size={4} />
               <div class="flex items-center gap-2">
-                <Button
-                  on:click={openProfile}
-                  class="text-sm font-bold"
-                  style="color: {colorValue}">
+                <Button onclick={openProfile} class="text-sm font-bold" style="color: {colorValue}">
                   {$profileDisplay}
                 </Button>
               </div>

src/app/components/ChatMessageEmojiButton.svelte

@@ -10,7 +10,7 @@
     pubkeys: string[]
   }
 
-  let {event, pubkeys}: Props = $props()
+  const {event, pubkeys}: Props = $props()
 
   const onEmoji = (emoji: NativeEmoji) =>
     sendWrapped({template: makeReaction({event, content: emoji.unicode}), pubkeys})

src/app/components/ChatMessageMenu.svelte

@@ -5,7 +5,7 @@
   import EventInfo from "@app/components/EventInfo.svelte"
   import {pushModal} from "@app/modal"
 
-  let {event, pubkeys, popover, replyTo} = $props()
+  const {event, pubkeys, popover, replyTo} = $props()
 
   const reply = () => replyTo(event)
 
@@ -18,11 +18,11 @@
 <div class="join border border-solid border-neutral text-xs">
   <ChatMessageEmojiButton {event} {pubkeys} />
   {#if replyTo}
-    <Button class="btn join-item btn-xs" on:click={reply}>
+    <Button class="btn join-item btn-xs" onclick={reply}>
       <Icon size={4} icon="reply" />
     </Button>
   {/if}
-  <Button class="btn join-item btn-xs" on:click={showInfo}>
+  <Button class="btn join-item btn-xs" onclick={showInfo}>
     <Icon size={4} icon="code-2" />
   </Button>
 </div>

src/app/components/ChatMessageMenuMobile.svelte

@@ -8,7 +8,7 @@
   import {pushModal} from "@app/modal"
   import {clip} from "@app/toast"
 
-  let {event, pubkeys} = $props()
+  const {event, pubkeys} = $props()
 
   const onEmoji = (emoji: NativeEmoji) => {
     history.back()
@@ -26,15 +26,15 @@
 </script>
 
 <div class="col-2">
-  <Button class="btn btn-primary w-full" on:click={showEmojiPicker}>
+  <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
     <Icon size={4} icon="smile-circle" />
     Send Reaction
   </Button>
-  <Button class="btn btn-neutral w-full" on:click={copyText}>
+  <Button class="btn btn-neutral w-full" onclick={copyText}>
     <Icon size={4} icon="copy" />
     Copy Text
   </Button>
-  <Button class="btn btn-neutral" on:click={showInfo}>
+  <Button class="btn btn-neutral" onclick={showInfo}>
     <Icon size={4} icon="code-2" />
     Message Details
   </Button>

src/app/components/ChatStart.svelte

@@ -35,7 +35,7 @@
     {/snippet}
   </Field>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/ConfirmDelete.svelte

@@ -3,7 +3,7 @@
   import {publishDelete} from "@app/commands"
   import {clearModals} from "@app/modal"
 
-  let {url, event} = $props()
+  const {url, event} = $props()
 
   const confirm = async () => {
     await publishDelete({event, relays: [url]})

src/app/components/Content.svelte

@@ -2,6 +2,7 @@
   import Content from "./Content.svelte"
   import {preventDefault, stopPropagation} from "svelte/legacy"
 
+  import type {TrustedEvent} from "@welshman/util"
   import {fromNostrURI} from "@welshman/util"
   import {nthEq} from "@welshman/lib"
   import {
@@ -102,7 +103,7 @@
     $userSettingValues.hide_sensitive && event.tags.find(nthEq(0, "content-warning"))?.[1],
   )
 
-  let shortContent = $derived(
+  const shortContent = $derived(
     showEntire
       ? fullContent
       : truncate(fullContent, {
@@ -112,9 +113,9 @@
         }),
   )
 
-  let hasEllipsis = $derived(shortContent.some(isEllipsis))
-  let expandInline = $derived(hasEllipsis && expandMode === "inline")
-  let expandBlock = $derived(hasEllipsis && expandMode === "block")
+  const hasEllipsis = $derived(shortContent.some(isEllipsis))
+  const expandInline = $derived(hasEllipsis && expandMode === "inline")
+  const expandBlock = $derived(hasEllipsis && expandMode === "block")
 </script>
 
 <div class="relative">
@@ -123,7 +124,7 @@
       <Icon icon="danger" />
       <p>
         This note has been flagged by the author as "{warning}".<br />
-        <Button class="link" on:click={ignoreWarning}>Show anyway</Button>
+        <Button class="link" onclick={ignoreWarning}>Show anyway</Button>
       </p>
     </div>
   {:else}
@@ -151,8 +152,8 @@
           <ContentMention value={parsed.value} />
         {:else if isEvent(parsed) || isAddress(parsed)}
           {#if isBlock(i)}
-            <ContentQuote {...quoteProps} value={parsed.value} {depth} {event}>
-              {#snippet noteContent({event})}
+            <ContentQuote {...quoteProps} value={parsed.value} {event}>
+              {#snippet noteContent({event}: {event: TrustedEvent})}
                 <Content {quoteProps} {hideMedia} {event} depth={depth + 1} />
               {/snippet}
             </ContentQuote>

src/app/components/ContentCode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  let {value, isBlock} = $props()
+  const {value, isBlock} = $props()
 </script>
 
 <code

src/app/components/ContentLinkBlock.svelte

@@ -7,7 +7,7 @@
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import {pushModal} from "@app/modal"
 
-  let {value} = $props()
+  const {value} = $props()
 
   const url = value.url.toString()
 

src/app/components/ContentLinkDetail.svelte

@@ -2,11 +2,11 @@
   import Button from "@lib/components/Button.svelte"
   import {imgproxy} from "@app/state"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const back = () => history.back()
 </script>
 
-<Button class="m-auto h-screen w-screen cursor-pointer p-4" on:click={back}>
+<Button class="m-auto h-screen w-screen cursor-pointer p-4" onclick={back}>
   <img alt="" src={imgproxy(url)} class="m-auto max-h-full max-w-full rounded-box" />
 </Button>

src/app/components/ContentLinkInline.svelte

@@ -7,7 +7,7 @@
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import {pushModal} from "@app/modal"
 
-  let {value} = $props()
+  const {value} = $props()
 
   const url = value.url.toString()
 

src/app/components/ContentMention.svelte

@@ -5,13 +5,13 @@
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushModal} from "@app/modal"
 
-  let {value} = $props()
+  const {value} = $props()
 
   const profile = deriveProfile(value.pubkey)
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey: value.pubkey})
 </script>
 
-<Button on:click={openProfile} class="link-content">
+<Button onclick={openProfile} class="link-content">
   @{displayProfile($profile)}
 </Button>

src/app/components/ContentNewline.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  let {value} = $props()
+  const {value} = $props()
 </script>
 
 {#each value as _}

src/app/components/ContentQuote.svelte

@@ -10,7 +10,7 @@
   import {deriveEvent, entityLink, ROOM} from "@app/state"
   import {makeThreadPath, makeRoomPath} from "@app/routes"
 
-  let props = ({value, event, depth = 0, relays = [], minimal = false, ...restProps} = $props())
+  const {value, event, noteContent, relays = [], minimal = false} = $props()
 
   const {id, identifier, kind, pubkey, relays: relayHints = []} = value
   const idOrAddress = id || new Address(kind, pubkey, identifier).toString()
@@ -56,7 +56,7 @@
     return Boolean(event)
   }
 
-  const onClick = (e: Event) => {
+  const onclick = () => {
     if ($quote) {
       if ($quote.kind === DIRECT_MESSAGE) {
         return scrollToEvent($quote.id)
@@ -93,10 +93,10 @@
   }
 </script>
 
-<Button class="my-2 block max-w-full text-left" on:click={onClick}>
+<Button class="my-2 block max-w-full text-left" {onclick}>
   {#if $quote}
     <NoteCard {minimal} event={$quote} class="bg-alt rounded-box p-4">
-      {@render noteContent({event: $quote, depth})}
+      {@render noteContent({event: $quote})}
     </NoteCard>
   {:else}
     <div class="rounded-box p-4">

src/app/components/ContentToken.svelte

@@ -3,12 +3,12 @@
   import Button from "@lib/components/Button.svelte"
   import {clip} from "@app/toast"
 
-  let {value} = $props()
+  const {value} = $props()
 
   const copy = () => clip(value)
 </script>
 
-<Button on:click={copy} class="link-content">
+<Button onclick={copy} class="link-content">
   <Icon icon="bolt" size={3} class="inline-block translate-y-px" />
   {value.slice(0, 16)}...
 </Button>

src/app/components/ContentTopic.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  let {value} = $props()
+  const {value} = $props()
 </script>
 
 <span class="link-content">

src/app/components/EmailConfirm.svelte

@@ -7,7 +7,7 @@
   import {pushModal} from "@app/modal"
   import {BURROW_URL} from "@app/state"
 
-  let {email, confirm_token} = $props()
+  const {email, confirm_token} = $props()
 
   const login = () => {
     pushModal(LogInPassword, {email}, {path: "/"})
@@ -48,5 +48,5 @@
       {/if}
     </Spinner>
   </p>
-  <Button class="btn btn-primary" on:click={login} disabled={loading}>Continue to Login</Button>
+  <Button class="btn btn-primary" onclick={login} disabled={loading}>Continue to Login</Button>
 </div>

src/app/components/EventCreate.svelte

@@ -16,7 +16,7 @@
   import {makeEditor} from "@app/editor"
   import {pushToast} from "@app/toast"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const uploading = writable(false)
 
@@ -95,7 +95,7 @@
         <Button
           data-tip="Add an image"
           class="center btn tooltip"
-          on:click={() => $editor.chain().selectFiles().run()}>
+          onclick={() => $editor.chain().selectFiles().run()}>
           {#if $uploading}
             <span class="loading loading-spinner loading-xs"></span>
           {:else}
@@ -131,7 +131,7 @@
     {/snippet}
   </Field>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/EventInfo.svelte

@@ -7,7 +7,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import {clip} from "@app/toast"
 
-  let {event} = $props()
+  const {event} = $props()
 
   const relays = ctx.app.router.Event(event).getUrls()
   const nevent1 = nip19.neventEncode({...event, relays})
@@ -35,7 +35,7 @@
       <label class="input input-bordered flex w-full items-center gap-2">
         <Icon icon="file" />
         <input type="text" class="ellipsize min-w-0 grow" value={nevent1} />
-        <Button on:click={copyLink} class="flex items-center">
+        <Button onclick={copyLink} class="flex items-center">
           <Icon icon="copy" />
         </Button>
       </label>
@@ -49,7 +49,7 @@
       <label class="input input-bordered flex w-full items-center gap-2">
         <Icon icon="user-circle" />
         <input type="text" class="ellipsize min-w-0 grow" value={npub1} />
-        <Button on:click={copyPubkey} class="flex items-center">
+        <Button onclick={copyPubkey} class="flex items-center">
           <Icon icon="copy" />
         </Button>
       </label>
@@ -58,10 +58,10 @@
   <div class="relative">
     <pre class="card2 card2-sm bg-alt overflow-auto text-xs"><code>{json}</code></pre>
     <p class="absolute right-2 top-2 flex flex-grow items-center justify-between">
-      <Button on:click={copyJson} class="btn btn-neutral btn-sm flex items-center">
+      <Button onclick={copyJson} class="btn btn-neutral btn-sm flex items-center">
         <Icon icon="copy" /> Copy
       </Button>
     </p>
   </div>
-  <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
+  <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
 </div>

src/app/components/EventItem.svelte

@@ -3,14 +3,14 @@
   import {formatTimestamp, formatTimestampAsDate, formatTimestampAsTime} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
 
-  let {event} = $props()
+  const {event} = $props()
 
-  let meta = $derived(fromPairs(event.tags) as Record<string, string>)
-  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)
+  const meta = $derived(fromPairs(event.tags) as Record<string, string>)
+  const end = $derived(parseInt(meta.end))
+  const start = $derived(parseInt(meta.start))
+  const startDateDisplay = $derived(formatTimestampAsDate(start))
+  const endDateDisplay = $derived(formatTimestampAsDate(end))
+  const isSingleDay = $derived(startDateDisplay === endDateDisplay)
 </script>
 
 <div class="card2 flex items-center justify-between gap-2">

src/app/components/EventReport.svelte

@@ -10,7 +10,7 @@
   import {pushToast} from "@app/toast"
   import {publishReport} from "@app/commands"
 
-  let {url, event} = $props()
+  const {url, event} = $props()
 
   const back = () => history.back()
 
@@ -78,7 +78,7 @@
     {/snippet}
   </Field>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/EventReportDetails.svelte

@@ -8,7 +8,7 @@
   import Profile from "@app/components/Profile.svelte"
   import {publishDelete} from "@app/commands"
 
-  let {url, event} = $props()
+  const {url, event} = $props()
 
   const reports = deriveEvents(repository, {
     filters: [{kinds: [REPORT], "#e": [event.id]}],
@@ -46,7 +46,7 @@
           <span>Reported this event as "{reason}"</span>
         </div>
         {#if report.pubkey === $pubkey}
-          <Button class="btn-default btn" on:click={remove}>Delete Report</Button>
+          <Button class="btn-default btn" onclick={remove}>Delete Report</Button>
         {/if}
       </div>
       {#if report.content}
@@ -54,5 +54,5 @@
       {/if}
     </div>
   {/each}
-  <Button class="btn btn-primary" on:click={back}>Got it</Button>
+  <Button class="btn btn-primary" onclick={back}>Got it</Button>
 </div>

src/app/components/InfoBunker.svelte

@@ -35,5 +35,5 @@
       href="https://nostrapps.com#signers">nostrapps.com</Link
     >.
   </p>
-  <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
+  <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
 </div>

src/app/components/InfoHandle.svelte

@@ -25,5 +25,5 @@
       class="underline">nostr.how</Link
     >.
   </p>
-  <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
+  <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
 </div>

src/app/components/InfoKeys.svelte

@@ -38,16 +38,16 @@
     </p>
     <p>If you'd like to switch to self-custody, please click below to get started.</p>
     <ModalFooter>
-      <Button class="btn btn-link" on:click={back}>
+      <Button class="btn btn-link" onclick={back}>
         <Icon icon="alt-arrow-left" />
         Go back
       </Button>
-      <Button class="btn btn-primary" on:click={startEject}>
+      <Button class="btn btn-primary" onclick={startEject}>
         <Icon icon="check-circle" />
         I want to hold my own keys
       </Button>
     </ModalFooter>
   {:else}
-    <Button class="btn btn-primary" on:click={back}>Got it</Button>
+    <Button class="btn btn-primary" onclick={back}>Got it</Button>
   {/if}
 </div>

src/app/components/InfoNostr.svelte

@@ -26,5 +26,5 @@
     To learn more about how to manage your keys, or to set up an account, try
     <Link external class="link" href="https://nosta.me/">nosta.me</Link>.
   </p>
-  <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
+  <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
 </div>

src/app/components/InfoRelay.svelte

@@ -22,5 +22,5 @@
     Different relays have different policies for access control and content retention. Be sure to
     double check that you have access to the relays you try to use by visiting their website.
   </p>
-  <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
+  <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
 </div>

src/app/components/Landing.svelte

@@ -20,7 +20,7 @@
       <h1 class="heading">Welcome to {PLATFORM_NAME}!</h1>
       <p class="text-center">The chat app built for self-hosted communities.</p>
     </div>
-    <Button on:click={logIn}>
+    <Button onclick={logIn}>
       <CardButton class="!btn-primary">
         {#snippet icon()}
           <div><Icon icon="login-2" size={7} /></div>
@@ -33,7 +33,7 @@
         {/snippet}
       </CardButton>
     </Button>
-    <Button on:click={signUp}>
+    <Button onclick={signUp}>
       <CardButton>
         {#snippet icon()}
           <div><Icon icon="add-circle" size={7} /></div>

src/app/components/LogIn.svelte

@@ -73,7 +73,7 @@
   let signers: any[] = $state([])
   let loading: string | undefined = $state()
 
-  let hasSigner = $derived(getNip07() || signers.length > 0)
+  const hasSigner = $derived(getNip07() || signers.length > 0)
 
   onMount(async () => {
     if (Capacitor.isNativePlatform()) {
@@ -86,11 +86,11 @@
   <h1 class="heading">Log in with Nostr</h1>
   <p class="m-auto max-w-sm text-center">
     {PLATFORM_NAME} is built using the
-    <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
+    <Button class="link" onclick={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
     you to own your social identity.
   </p>
   {#if getNip07()}
-    <Button disabled={loading} on:click={loginWithNip07} class="btn btn-primary">
+    <Button disabled={Boolean(loading)} onclick={loginWithNip07} class="btn btn-primary">
       {#if loading === "nip07"}
         <span class="loading loading-spinner mr-3"></span>
       {:else}
@@ -100,7 +100,7 @@
     </Button>
   {/if}
   {#each signers as app}
-    <Button disabled={loading} class="btn btn-primary" on:click={() => loginWithNip55(app)}>
+    <Button disabled={Boolean(loading)} class="btn btn-primary" onclick={() => loginWithNip55(app)}>
       {#if loading === "nip55"}
         <span class="loading loading-spinner mr-3"></span>
       {:else}
@@ -110,7 +110,7 @@
     </Button>
   {/each}
   {#if BURROW_URL && !hasSigner}
-    <Button disabled={loading} on:click={loginWithPassword} class="btn btn-primary">
+    <Button disabled={Boolean(loading)} onclick={loginWithPassword} class="btn btn-primary">
       {#if loading === "password"}
         <span class="loading loading-spinner mr-3"></span>
       {:else}
@@ -120,14 +120,14 @@
     </Button>
   {/if}
   <Button
-    disabled={loading}
-    on:click={loginWithBunker}
+    onclick={loginWithBunker}
+    disabled={Boolean(loading)}
     class="btn {hasSigner || BURROW_URL ? 'btn-neutral' : 'btn-primary'}">
     <Icon icon="cpu" />
     Log in with Remote Signer
   </Button>
   {#if BURROW_URL && hasSigner}
-    <Button disabled={loading} on:click={loginWithPassword} class="btn">
+    <Button disabled={Boolean(loading)} onclick={loginWithPassword} class="btn">
       {#if loading === "password"}
         <span class="loading loading-spinner mr-3"></span>
       {:else}
@@ -139,7 +139,7 @@
   {#if !hasSigner || !BURROW_URL}
     <Link
       external
-      disabled={loading}
+      disabled={Boolean(loading)}
       href="https://nostrapps.com#signers"
       class="btn {hasSigner || BURROW_URL ? '' : 'btn-neutral'}">
       <Icon icon="compass" />
@@ -148,6 +148,6 @@
   {/if}
   <div class="text-sm">
     Need an account?
-    <Button class="link" on:click={signUp}>Register instead</Button>
+    <Button class="link" onclick={signUp}>Register instead</Button>
   </div>
 </div>

src/app/components/LogInBunker.svelte

@@ -28,7 +28,7 @@
   const back = () => history.back()
 
   const onSubmit = async () => {
-    const {signerPubkey, connectSecret, relays} = Nip46Broker.parseBunkerUrl(input)
+    const {signerPubkey, connectSecret, relays} = Nip46Broker.parseBunkerUrl(bunker)
 
     if (loading) {
       return
@@ -62,12 +62,12 @@
   }
 
   let url = $state("")
-  let input = $state("")
+  let bunker = $state("")
   let loading = $state(false)
 
   run(() => {
     // For testing and for play store reviewers
-    if (input === "reviewkey") {
+    if (bunker === "reviewkey") {
       const secret = makeSecret()
 
       addSession({method: "nip01", secret, pubkey: getPubkey(secret)})
@@ -144,22 +144,22 @@
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
         <Icon icon="cpu" />
-        <input disabled={loading} bind:value={input} class="grow" placeholder="bunker://" />
+        <input disabled={loading} bind:value={bunker} class="grow" placeholder="bunker://" />
       </label>
     {/snippet}
     {#snippet info()}
       <p>
         A login link provided by a nostr signing app.
-        <Button class="link" on:click={() => pushModal(InfoBunker)}>What is a bunker link?</Button>
+        <Button class="link" onclick={() => pushModal(InfoBunker)}>What is a bunker link?</Button>
       </p>
     {/snippet}
   </Field>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading || !input}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || !bunker}>
       <Spinner {loading}>Next</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>

src/app/components/LogInPassword.svelte

@@ -139,11 +139,11 @@
   </FieldInline>
   <p class="text-sm">
     Your email and password only work to log in to {PLATFORM_NAME}. To use your key on other nostr
-    applications, visit your settings page. <Button class="link" on:click={startReset}
+    applications, visit your settings page. <Button class="link" onclick={startReset}
       >Forgot your password?</Button>
   </p>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/LogOut.svelte

@@ -32,7 +32,7 @@
   </ModalHeader>
   <p class="text-center">Your local database will be cleared.</p>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/MenuSettings.svelte

@@ -63,7 +63,7 @@
       {/snippet}
     </CardButton>
   </Link>
-  <Button on:click={logout} class="btn btn-neutral">
+  <Button onclick={logout} class="btn btn-neutral">
     <Icon icon="exit" /> Log Out
   </Button>
 </div>

src/app/components/MenuSpace.svelte

@@ -26,7 +26,7 @@
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const threadsPath = makeSpacePath(url, "threads")
   const userRooms = deriveUserRooms(url)
@@ -59,7 +59,7 @@
   let replaceState = false
   let element: Element | undefined = $state()
 
-  let members = $derived(
+  const members = $derived(
     $memberships.filter(l => hasMembershipUrl(l, url)).map(l => l.event.pubkey),
   )
 
@@ -72,7 +72,7 @@
 <div bind:this={element}>
   <SecondaryNavSection class="max-h-screen">
     <div>
-      <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
+      <SecondaryNavItem class="w-full !justify-between" onclick={openMenu}>
         <strong class="ellipsize">{displayRelayUrl(url)}</strong>
         <Icon icon="alt-arrow-down" />
       </SecondaryNavItem>
@@ -82,25 +82,25 @@
             transition:fly
             class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
             <li>
-              <Button on:click={showMembers}>
+              <Button onclick={showMembers}>
                 <Icon icon="user-rounded" />
                 View Members ({members.length})
               </Button>
             </li>
             <li>
-              <Button on:click={createInvite}>
+              <Button onclick={createInvite}>
                 <Icon icon="link-round" />
                 Create Invite
               </Button>
             </li>
             <li>
               {#if $userRoomsByUrl.has(url)}
-                <Button on:click={leaveSpace} class="text-error">
+                <Button onclick={leaveSpace} class="text-error">
                   <Icon icon="exit" />
                   Leave Space
                 </Button>
               {:else}
-                <Button on:click={joinSpace} class="bg-primary text-primary-content">
+                <Button onclick={joinSpace} class="bg-primary text-primary-content">
                   <Icon icon="login-2" />
                   Join Space
                 </Button>
@@ -135,7 +135,7 @@
       {#each $otherRooms as room, i (room)}
         <MenuSpaceRoomItem {url} {room} />
       {/each}
-      <SecondaryNavItem on:click={addRoom}>
+      <SecondaryNavItem onclick={addRoom}>
         <Icon icon="add-circle" />
         Create room
       </SecondaryNavItem>

src/app/components/MenuSpaceButton.svelte

@@ -6,14 +6,14 @@
   import {makeSpacePath} from "@app/routes"
   import {pushDrawer} from "@app/modal"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const path = makeSpacePath(url)
 
   const openMenu = () => pushDrawer(MenuSpace, {url})
 </script>
 
-<Button on:click={openMenu} class="btn btn-neutral btn-sm relative md:hidden">
+<Button onclick={openMenu} class="btn btn-neutral btn-sm relative md:hidden">
   <Icon icon="menu-dots" />
   {#if $notifications.has(path)}
     <div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-primary"></div>

src/app/components/MenuSpaceRoomItem.svelte

@@ -12,7 +12,7 @@
     notify?: boolean
   }
 
-  let {url, room, notify = false}: Props = $props()
+  const {url, room, notify = false}: Props = $props()
 
   const path = makeRoomPath(url, room)
   const channel = deriveChannel(url, room)

src/app/components/MenuSpaces.svelte

@@ -22,7 +22,7 @@
     <Divider />
   {/if}
   {#if !PLATFORM_RELAY}
-    <Button on:click={addSpace}>
+    <Button onclick={addSpace}>
       <CardButton>
         {#snippet icon()}
           <div><Icon icon="login-2" size={7} /></div>

src/app/components/MenuSpacesItem.svelte

@@ -7,7 +7,7 @@
   import {makeSpacePath} from "@app/routes"
   import {notifications} from "@app/notifications"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const path = makeSpacePath(url)
 </script>

src/app/components/ModalContainer.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import {run} from "svelte/legacy"
-
   import {page} from "$app/stores"
   import Drawer from "@lib/components/Drawer.svelte"
   import Dialog from "@lib/components/Dialog.svelte"
@@ -13,8 +11,8 @@
   }
 
   let modal: any = $state()
-  let hash = $derived($page.url.hash.slice(1))
-  let hashIsValid = $derived(Boolean($modals[hash]))
+  const hash = $derived($page.url.hash.slice(1))
+  const hashIsValid = $derived(Boolean($modals[hash]))
 
   $effect(() => {
     if ($modals[hash]) {

src/app/components/NoteCard.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import cx from "classnames"
+  import type {Snippet} from "svelte"
   import {nip19} from "nostr-tools"
   import {ctx} from "@welshman/lib"
   import {getListTags, getPubkeyTagValues} from "@welshman/util"
+  import type {TrustedEvent} from "@welshman/util"
   import {formatTimestamp, userMutes} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
@@ -11,13 +13,19 @@
   import ProfileName from "@app/components/ProfileName.svelte"
   import {entityLink} from "@app/state"
 
-  interface Props {
+  const {
+    event,
+    children,
+    minimal = false,
+    hideProfile = false,
+    ...restProps
+  }: {
     event: TrustedEvent
-    minimal: boolean
-    hideProfile: boolean
-  }
-
-  let {event, children, minimal = false, hideProfile = false, ...restProps} = $props()
+    children: Snippet
+    minimal?: boolean
+    hideProfile?: boolean
+    class?: string
+  } = $props()
 
   const relays = ctx.app.router.Event(event).getUrls()
   const nevent = nip19.neventEncode({id: event.id, relays})
@@ -26,7 +34,7 @@
     muted = false
   }
 
-  let muted = getPubkeyTagValues(getListTags($userMutes)).includes(event.pubkey)
+  let muted = $state(getPubkeyTagValues(getListTags($userMutes)).includes(event.pubkey))
 </script>
 
 <div class="flex flex-col gap-2 {restProps.class}">
@@ -36,7 +44,7 @@
         <Icon icon="danger" class="mt-1" />
         <p>You have muted this person.</p>
       </div>
-      <Button class="link ml-8" on:click={ignoreMute}>Show anyway</Button>
+      <Button class="link ml-8" onclick={ignoreMute}>Show anyway</Button>
     </div>
   {:else}
     <div class="flex justify-between gap-2">

src/app/components/NoteItem.svelte

@@ -9,7 +9,7 @@
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
 
-  let {url, event} = $props()
+  const {url, event} = $props()
 
   const onReactionClick = (content: string, events: TrustedEvent[]) => {
     const reaction = events.find(e => e.pubkey === $pubkey)

src/app/components/PasswordReset.svelte

@@ -12,7 +12,7 @@
   import {pushToast} from "@app/toast"
   import {BURROW_URL} from "@app/state"
 
-  let {email, reset_token} = $props()
+  const {email, reset_token} = $props()
 
   const onSubmit = async () => {
     loading = true

src/app/components/PasswordResetRequest.svelte

@@ -65,7 +65,7 @@
     {/snippet}
   </FieldInline>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/PeopleItem.svelte

@@ -10,7 +10,7 @@
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
   import {makeChatPath} from "@app/routes"
 
-  let {pubkey} = $props()
+  const {pubkey} = $props()
 
   const filters: Filter[] = [{authors: [pubkey], limit: 1}]
   const events = deriveEvents(repository, {filters})

src/app/components/PrimaryNav.svelte

@@ -18,7 +18,7 @@
     children?: import("svelte").Snippet
   }
 
-  let {children}: Props = $props()
+  const {children}: Props = $props()
 
   const addSpace = () => pushModal(SpaceAdd)
 
@@ -28,9 +28,9 @@
 
   const openChat = () => ($canDecrypt ? goto("/chat") : pushModal(ChatEnable, {next: "/chat"}))
 
-  let spaceUrls = $derived(Array.from($userRoomsByUrl.keys()))
-  let spacePaths = $derived(spaceUrls.map(url => makeSpacePath(url)))
-  let anySpaceNotifications = $derived(
+  const spaceUrls = $derived(Array.from($userRoomsByUrl.keys()))
+  const spacePaths = $derived(spaceUrls.map(url => makeSpacePath(url)))
+  const anySpaceNotifications = $derived(
     spacePaths.some(path => !$page.url.pathname.startsWith(path) && $notifications.has(path)),
   )
 </script>
@@ -48,7 +48,7 @@
         {#each spaceUrls as url (url)}
           <PrimaryNavItemSpace {url} />
         {/each}
-        <PrimaryNavItem title="Add Space" on:click={addSpace} class="tooltip-right">
+        <PrimaryNavItem title="Add Space" onclick={addSpace} class="tooltip-right">
           <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
         </PrimaryNavItem>
       {/if}
@@ -63,7 +63,7 @@
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
-        on:click={openChat}
+        onclick={openChat}
         class="tooltip-right"
         notification={$notifications.has("/chat")}>
         <Avatar icon="letter" class="!h-10 !w-10" />
@@ -88,15 +88,15 @@
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
-        on:click={openChat}
+        onclick={openChat}
         notification={$notifications.has("/chat")}>
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Spaces" on:click={showSpacesMenu} notification={anySpaceNotifications}>
+      <PrimaryNavItem title="Spaces" onclick={showSpacesMenu} notification={anySpaceNotifications}>
         <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
       </PrimaryNavItem>
     </div>
-    <PrimaryNavItem title="Settings" on:click={showSettingsMenu}>
+    <PrimaryNavItem title="Settings" onclick={showSettingsMenu}>
       <Avatar icon="settings" src={$userProfile?.picture} class="!h-10 !w-10" />
     </PrimaryNavItem>
   </div>

src/app/components/PrimaryNavItemSpace.svelte

@@ -5,7 +5,7 @@
   import {makeSpacePath} from "@app/routes"
   import {notifications} from "@app/notifications"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const path = makeSpacePath(url)
 </script>

src/app/components/Profile.svelte

@@ -15,7 +15,7 @@
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushModal} from "@app/modal"
 
-  let {pubkey} = $props()
+  const {pubkey} = $props()
 
   const profile = deriveProfile(pubkey)
   const profileDisplay = deriveProfileDisplay(pubkey)
@@ -24,18 +24,18 @@
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey})
 
-  let following = $derived(
+  const following = $derived(
     pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey),
   )
 </script>
 
 <div class="flex max-w-full gap-3">
-  <Button on:click={openProfile} class="py-1">
+  <Button onclick={openProfile} class="py-1">
     <Avatar src={$profile?.picture} size={10} />
   </Button>
   <div class="flex min-w-0 flex-col">
     <div class="flex items-center gap-2">
-      <Button on:click={openProfile} class="text-bold overflow-hidden text-ellipsis">
+      <Button onclick={openProfile} class="text-bold overflow-hidden text-ellipsis">
         {$profileDisplay}
       </Button>
       <WotScore score={$score} active={following} />

src/app/components/ProfileCircle.svelte

@@ -2,7 +2,7 @@
   import {deriveProfile} from "@welshman/app"
   import Avatar from "@lib/components/Avatar.svelte"
 
-  let {...props} = $props()
+  const {...props} = $props()
 
   const profile = deriveProfile(props.pubkey)
 </script>

src/app/components/ProfileCircles.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
 
-  let {...props} = $props()
+  const {...props} = $props()
 </script>
 
 <div class="flex pr-3">

src/app/components/ProfileDetail.svelte

@@ -22,7 +22,7 @@
   import {pushModal} from "@app/modal"
   import {makeChatPath} from "@app/routes"
 
-  let {pubkey} = $props()
+  const {pubkey} = $props()
 
   const profile = deriveProfile(pubkey)
   const profileDisplay = deriveProfileDisplay(pubkey)
@@ -35,7 +35,7 @@
 
   const openChat = () => ($canDecrypt ? goto(chatPath) : pushModal(ChatEnable, {next: chatPath}))
 
-  let following = $derived(
+  const following = $derived(
     pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey),
   )
 </script>
@@ -59,7 +59,7 @@
   </div>
   <ProfileInfo {pubkey} />
   <ModalFooter>
-    <Button on:click={back} class="btn btn-link">
+    <Button onclick={back} class="btn btn-link">
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
@@ -68,7 +68,7 @@
         <Icon icon="user-circle" />
         See Complete Profile
       </Link>
-      <Button on:click={openChat} class="btn btn-primary">
+      <Button onclick={openChat} class="btn btn-primary">
         <Icon icon="letter" />
         Open Chat
       </Button>

src/app/components/ProfileEdit.svelte

@@ -71,13 +71,12 @@
     {/snippet}
     {#snippet info()}
       <p>
-        <Button class="link" on:click={() => pushModal(InfoHandle)}
-          >What is a nostr address?</Button>
+        <Button class="link" onclick={() => pushModal(InfoHandle)}>What is a nostr address?</Button>
       </p>
     {/snippet}
   </Field>
   <div class="mt-4 flex flex-row items-center justify-between gap-4">
-    <Button class="btn btn-neutral" on:click={back}>Discard Changes</Button>
+    <Button class="btn btn-neutral" onclick={back}>Discard Changes</Button>
     <Button type="submit" class="btn btn-primary">Save Changes</Button>
   </div>
 </form>

src/app/components/ProfileEject.svelte

@@ -89,17 +89,17 @@
     </div>
   {/if}
   <ModalFooter>
-    <Button class="btn btn-link" disabled={loading || success} on:click={back}>
+    <Button class="btn btn-link" disabled={loading || success} onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
     {#if success}
-      <Button class="btn btn-primary" disabled={loading} on:click={reload}>
+      <Button class="btn btn-primary" disabled={loading} onclick={reload}>
         <Icon icon="check-circle" />
         <Spinner {loading}>Refresh the page</Spinner>
       </Button>
     {:else}
-      <Button class="btn btn-error" disabled={loading} on:click={confirm}>
+      <Button class="btn btn-error" disabled={loading} onclick={confirm}>
         <Icon icon="check-circle" />
         <Spinner {loading}>I understand, send me my private key</Spinner>
       </Button>

src/app/components/ProfileInfo.svelte

@@ -2,7 +2,7 @@
   import {deriveProfile} from "@welshman/app"
   import Content from "@app/components/Content.svelte"
 
-  let {pubkey} = $props()
+  const {pubkey} = $props()
 
   const profile = deriveProfile(pubkey)
 </script>

src/app/components/ProfileList.svelte

@@ -9,13 +9,13 @@
     pubkeys: any
   }
 
-  let {title, subtitle = "", pubkeys}: Props = $props()
+  const {subtitle = "", pubkeys, ...restProps}: Props = $props()
 </script>
 
 <div class="column gap-4">
   <ModalHeader>
     {#snippet title()}
-      <div>{title}</div>
+      <div>{restProps.title}</div>
     {/snippet}
     {#snippet info()}
       <div>{subtitle}</div>
@@ -26,5 +26,5 @@
       <Profile {pubkey} />
     </div>
   {/each}
-  <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
+  <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
 </div>

src/app/components/ProfileMultiSelect.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type {Component} from "svelte"
   import {derived} from "svelte/store"
   import {type Instance} from "tippy.js"
   import {append, remove, uniq} from "@welshman/lib"
@@ -57,10 +56,10 @@
     {#each value as pubkey (pubkey)}
       {@const onClick = () => pushModal(ProfileDetail, {pubkey})}
       <div class="flex-inline badge badge-neutral mr-1 gap-1">
-        <Button class="flex items-center" on:click={() => removePubkey(pubkey)}>
+        <Button class="flex items-center" onclick={() => removePubkey(pubkey)}>
           <Icon icon="close-circle" size={4} class="-ml-1 mt-px" />
         </Button>
-        <Button on:click={onClick}>
+        <Button onclick={onClick}>
           <ProfileName {pubkey} />
         </Button>
       </div>

src/app/components/ProfileName.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {deriveProfileDisplay} from "@welshman/app"
 
-  let {pubkey} = $props()
+  const {pubkey} = $props()
 
   const profileDisplay = deriveProfileDisplay(pubkey)
 </script>

src/app/components/QRCode.svelte

@@ -4,7 +4,7 @@
   import Button from "@lib/components/Button.svelte"
   import {clip} from "@app/toast"
 
-  let {code} = $props()
+  const {code} = $props()
 
   let canvas: Element | undefined = $state()
   let wrapper: Element | undefined = $state()
@@ -26,7 +26,7 @@
   })
 </script>
 
-<Button class="max-w-full" on:click={copy}>
+<Button class="max-w-full" onclick={copy}>
   <div bind:this={wrapper} style={`height: ${height}px`}>
     <canvas
       class="rounded-box"

src/app/components/ReactionSummary.svelte

@@ -23,7 +23,7 @@
     children?: import("svelte").Snippet
   }
 
-  let {
+  const {
     event,
     onReactionClick,
     url = "",
@@ -42,9 +42,9 @@
 
   const onReportClick = () => pushModal(EventReportDetails, {url, event})
 
-  let reportReasons = $derived(uniq($reports.map(e => getTag("e", e.tags)?.[2])))
+  const reportReasons = $derived(uniq($reports.map(e => getTag("e", e.tags)?.[2])))
 
-  let groupedReactions = $derived(
+  const groupedReactions = $derived(
     groupBy(
       e => e.content,
       uniqBy(e => e.pubkey + e.content, $reactions),

src/app/components/RelayAdd.svelte

@@ -14,13 +14,13 @@
     addRelay: (url: string) => void
   }
 
-  let {relays, addRelay}: Props = $props()
+  const {relays, addRelay}: Props = $props()
 
   let term = $state("")
   let limit = $state(20)
   let element: Element | undefined = $state()
 
-  let customUrl = $derived(tryCatch(() => normalizeRelayUrl(term)))
+  const customUrl = $derived(tryCatch(() => normalizeRelayUrl(term)))
 
   onMount(() => {
     const scroller = createScroller({
@@ -44,7 +44,7 @@
 <div class="column -m-6 mt-0 h-[50vh] gap-2 overflow-auto p-6 pt-2" bind:this={element}>
   {#if customUrl && isShareableRelayUrl(customUrl) && !$relays.includes(normalizeRelayUrl(customUrl))}
     <RelayItem url={term}>
-      <Button class="btn btn-outline btn-sm flex items-center" on:click={() => addRelay(customUrl)}>
+      <Button class="btn btn-outline btn-sm flex items-center" onclick={() => addRelay(customUrl)}>
         <Icon icon="add-circle" />
         Add Relay
       </Button>
@@ -55,7 +55,7 @@
     .filter(url => !$relays.includes(url))
     .slice(0, limit) as url (url)}
     <RelayItem {url}>
-      <Button class="btn btn-outline btn-sm flex items-center" on:click={() => addRelay(url)}>
+      <Button class="btn btn-outline btn-sm flex items-center" onclick={() => addRelay(url)}>
         <Icon icon="add-circle" />
         Add Relay
       </Button>

src/app/components/RelayDescription.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {deriveRelay} from "@welshman/app"
 
-  let {...props} = $props()
+  const {...props} = $props()
 
   const relay = deriveRelay(props.url)
 </script>

src/app/components/RelayItem.svelte

@@ -5,11 +5,11 @@
   import {displayRelayUrl} from "@welshman/util"
   import {deriveRelay} from "@welshman/app"
 
-  let {url, children} = $props()
+  const {url, children} = $props()
 
   const relay = deriveRelay(url)
 
-  let connections = $derived($relay?.stats?.open_count || 0)
+  const connections = $derived($relay?.stats?.open_count || 0)
 </script>
 
 <div class="card2 card2-sm bg-alt column gap-2">

src/app/components/RelayName.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {deriveRelayDisplay} from "@welshman/app"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const display = deriveRelayDisplay(url)
 </script>

src/app/components/RoomCreate.svelte

@@ -16,7 +16,7 @@
   import {makeSpacePath} from "@app/routes"
   import {pushToast} from "@app/toast"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const room = randomId()
   const relay = deriveRelay(url)
@@ -85,7 +85,7 @@
     {/snippet}
   </Field>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/SignUp.svelte

@@ -54,7 +54,7 @@
   <h1 class="heading">Sign up with Nostr</h1>
   <p class="m-auto max-w-sm text-center">
     {PLATFORM_NAME} is built using the
-    <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
+    <Button class="link" onclick={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
     you to own your social identity.
   </p>
   {#if BURROW_URL}
@@ -97,6 +97,6 @@
   </a>
   <div class="text-sm">
     Already have an account?
-    <Button class="link" on:click={login}>Log in instead</Button>
+    <Button class="link" onclick={login}>Log in instead</Button>
   </div>
 </form>

src/app/components/SignUpSuccess.svelte

@@ -3,7 +3,7 @@
   import LogInPassword from "@app/components/LogInPassword.svelte"
   import {pushModal} from "@app/modal"
 
-  let {email} = $props()
+  const {email} = $props()
 
   const login = () => pushModal(LogInPassword)
 </script>
@@ -14,5 +14,5 @@
     A confirmation email has been sent to {email}.
   </p>
   <p>Once you've confirmed your account you'll be redirected to the login page.</p>
-  <Button class="btn btn-primary" on:click={login}>Back to Login</Button>
+  <Button class="btn btn-primary" onclick={login}>Back to Login</Button>
 </div>

src/app/components/SpaceAdd.svelte

@@ -35,7 +35,7 @@
       {/snippet}
     </CardButton>
   </Link>
-  <Button on:click={startJoin}>
+  <Button onclick={startJoin}>
     <CardButton>
       {#snippet icon()}
         <div><Icon icon="login-2" size={7} /></div>
@@ -48,7 +48,7 @@
       {/snippet}
     </CardButton>
   </Button>
-  <Button on:click={startCreate}>
+  <Button onclick={startCreate}>
     <CardButton>
       {#snippet icon()}
         <div><Icon icon="add-circle" size={7} /></div>

src/app/components/SpaceAuthError.svelte

@@ -12,7 +12,7 @@
   import {clearModals} from "@app/modal"
   import {attemptRelayAccess} from "@app/commands"
 
-  let {url, error} = $props()
+  const {url, error} = $props()
 
   const back = () => history.back()
 
@@ -75,7 +75,7 @@
     {/snippet}
   </Field>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/SpaceAvatar.svelte

@@ -7,7 +7,7 @@
     url?: string
   }
 
-  let {url = ""}: Props = $props()
+  const {url = ""}: Props = $props()
 
   const relay = deriveRelay(url)
 </script>

src/app/components/SpaceCheck.svelte

@@ -15,7 +15,7 @@
   import {makeSpacePath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const back = () => history.back()
 
@@ -71,7 +71,7 @@
     {/if}
   </div>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/SpaceCreate.svelte

@@ -56,12 +56,12 @@
     {#snippet info()}
       <p>
         This can be any nostr relay where you'd like to host your space.
-        <Button class="link" on:click={() => pushModal(InfoRelay)}>What is a relay?</Button>
+        <Button class="link" onclick={() => pushModal(InfoRelay)}>What is a relay?</Button>
       </p>
     {/snippet}
   </Field>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/SpaceCreateExternal.svelte

@@ -37,7 +37,7 @@
     Once you've created a relay of your own, come back here to link {PLATFORM_NAME} with your new relay.
   </p>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/SpaceExit.svelte

@@ -10,7 +10,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {removeSpaceMembership} from "@app/commands"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const back = () => history.back()
 
@@ -39,7 +39,7 @@
   </ModalHeader>
   <p class="text-center">Are you sure you want to leave?</p>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/SpaceInvite.svelte

@@ -12,7 +12,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {clip} from "@app/toast"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const back = () => history.back()
 
@@ -62,7 +62,7 @@
             <label class="input input-bordered flex w-full items-center gap-2">
               <Icon icon="link-round" />
               <input bind:value={invite} class="grow" type="text" />
-              <Button on:click={copyInvite}>
+              <Button onclick={copyInvite}>
                 <Icon icon="copy" />
               </Button>
             </label>
@@ -81,6 +81,6 @@
     {/if}
   </div>
   <ModalFooter>
-    <Button class="btn btn-primary flex-grow" on:click={back}>Done</Button>
+    <Button class="btn btn-primary flex-grow" onclick={back}>Done</Button>
   </ModalFooter>
 </div>

src/app/components/SpaceInviteAccept.svelte

@@ -64,7 +64,7 @@
   let url = $state("")
   let loading = $state(false)
 
-  let linkIsValid = $derived(
+  const linkIsValid = $derived(
     Boolean(tryCatch(() => isRelayUrl(normalizeRelayUrl(url.split("|")[0])))),
   )
 </script>
@@ -91,12 +91,12 @@
     {#snippet info()}
       <p>
         You can also directly join any relay by entering its URL here.
-        <Button class="link" on:click={() => pushModal(InfoRelay)}>What is a relay?</Button>
+        <Button class="link" onclick={() => pushModal(InfoRelay)}>What is a relay?</Button>
       </p>
     {/snippet}
   </Field>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/SpaceJoin.svelte

@@ -10,7 +10,7 @@
   import {clearModals} from "@app/modal"
   import {addSpaceMembership} from "@app/commands"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const back = () => history.back()
 
@@ -45,7 +45,7 @@
     {/snippet}
   </ModalHeader>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/ThreadActions.svelte

@@ -24,7 +24,7 @@
     showActivity?: boolean
   }
 
-  let {url, event, showActivity = false}: Props = $props()
+  const {url, event, showActivity = false}: Props = $props()
 
   const thunk = $thunks[event.id]
   const deleted = deriveIsDeleted(repository, event)
@@ -51,7 +51,7 @@
 
   let popover: Instance | undefined = $state()
 
-  let lastActive = $derived(max([...$replies, event].map(e => e.created_at)))
+  const lastActive = $derived(max([...$replies, event].map(e => e.created_at)))
 
   onMount(() => {
     load({relays: [url], filters})
@@ -87,7 +87,7 @@
         component={ThreadMenu}
         props={{url, event, onClick: hidePopover}}
         params={{trigger: "manual", interactive: true}}>
-        <Button class="btn join-item btn-neutral btn-xs" on:click={showPopover}>
+        <Button class="btn join-item btn-neutral btn-xs" onclick={showPopover}>
           <Icon icon="menu-dots" size={4} />
         </Button>
       </Tippy>

src/app/components/ThreadCreate.svelte

@@ -15,7 +15,7 @@
   import {GENERAL, tagRoom, PROTECTED} from "@app/state"
   import {makeEditor} from "@app/editor"
 
-  let {url} = $props()
+  const {url} = $props()
 
   const uploading = writable(false)
 
@@ -99,7 +99,7 @@
     <Button
       data-tip="Add an image"
       class="tooltip tooltip-left absolute bottom-1 right-2"
-      on:click={$editor.commands.selectFiles}>
+      onclick={$editor.commands.selectFiles}>
       {#if $uploading}
         <span class="loading loading-spinner loading-xs"></span>
       {:else}
@@ -108,7 +108,7 @@
     </Button>
   </div>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/ThreadItem.svelte

@@ -17,7 +17,7 @@
     hideActions?: boolean
   }
 
-  let {url, event, hideActions = false}: Props = $props()
+  const {url, event, hideActions = false}: Props = $props()
 
   const title = event.tags.find(nthEq(0, "title"))?.[1]
 

src/app/components/ThreadMenu.svelte

@@ -9,7 +9,7 @@
   import ConfirmDelete from "@app/components/ConfirmDelete.svelte"
   import {pushModal} from "@app/modal"
 
-  let {url, event, onClick} = $props()
+  const {url, event, onClick} = $props()
 
   const isRoot = event.kind !== COMMENT
 
@@ -37,28 +37,28 @@
 <ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl">
   {#if isRoot}
     <li>
-      <Button on:click={share}>
+      <Button onclick={share}>
         <Icon size={4} icon="share-circle" />
         Share to Chat
       </Button>
     </li>
   {/if}
   <li>
-    <Button on:click={showInfo}>
+    <Button onclick={showInfo}>
       <Icon size={4} icon="code-2" />
       Message Details
     </Button>
   </li>
   {#if event.pubkey === $pubkey}
     <li>
-      <Button on:click={showDelete} class="text-error">
+      <Button onclick={showDelete} class="text-error">
         <Icon size={4} icon="trash-bin-2" />
         Delete Message
       </Button>
     </li>
   {:else}
     <li>
-      <Button class="text-error" on:click={report}>
+      <Button class="text-error" onclick={report}>
         <Icon size={4} icon="danger" />
         Report Content
       </Button>

src/app/components/ThreadReply.svelte

@@ -13,7 +13,7 @@
   import {makeEditor} from "@app/editor"
   import {pushToast} from "@app/toast"
 
-  let {url, event, onClose, onSubmit} = $props()
+  const {url, event, onClose, onSubmit} = $props()
 
   const uploading = writable(false)
 
@@ -48,7 +48,7 @@
     <Button
       data-tip="Add an image"
       class="tooltip tooltip-left absolute bottom-1 right-2"
-      on:click={$editor.commands.selectFiles}>
+      onclick={$editor.commands.selectFiles}>
       {#if $uploading}
         <span class="loading loading-spinner loading-xs"></span>
       {:else}
@@ -57,7 +57,7 @@
     </Button>
   </div>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={onClose}>Cancel</Button>
+    <Button class="btn btn-link" onclick={onClose}>Cancel</Button>
     <Button type="submit" class="btn btn-primary">Post Reply</Button>
   </ModalFooter>
 </form>

src/app/components/ThreadShare.svelte

@@ -14,7 +14,7 @@
   import {makeRoomPath} from "@app/routes"
   import {setKey} from "@app/implicit"
 
-  let {url, event} = $props()
+  const {url, event} = $props()
 
   const relays = ctx.app.router.Event(event).getUrls()
   const nevent = nip19.neventEncode({id: event.id, relays})
@@ -55,7 +55,7 @@
     {/each}
   </div>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/ThunkStatus.svelte

@@ -12,9 +12,10 @@
 
   interface Props {
     thunk: Thunk | MergedThunk
+    class?: string
   }
 
-  let {thunk} = $props()
+  let {thunk, ...restProps}: Props = $props()
 
   const {Pending, Failure, Timeout} = PublishStatus
 
@@ -26,16 +27,18 @@
       : publishThunk((thunk as Thunk).request)
   }
 
-  let isPending = Object.values(get(thunk.status)).some(s => s.status == Pending)
+  const status = throttled(300, thunk.status)
+  const ps = $derived(Object.values($status))
+  const canCancel = $derived(ps.length === 0 && $userSettingValues.send_delay > 0)
+  const isFailure = $derived(!canCancel && ps.every(s => [Failure, Timeout].includes(s.status)))
+  const failure = $derived(
+    Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status)),
+  )
 
-  $: status = throttled(300, thunk.status)
-  $: ps = Object.values($status)
-  $: canCancel = ps.length === 0 && $userSettingValues.send_delay > 0
-  $: isFailure = !canCancel && ps.every(s => [Failure, Timeout].includes(s.status))
-  $: failure = Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status))
+  let isPending = $state(Object.values(get(thunk.status)).some(s => s.status == Pending))
 
   // Delay updating isPending so users can see that the message is sent
-  $: {
+  $effect(() => {
     isPending = isPending || ps.some(s => s.status === Pending)
 
     if (!ps.some(s => s.status === Pending)) {
@@ -43,14 +46,14 @@
         isPending = false
       }, 2000)
     }
-  }
+  })
 </script>
 
 {#if isFailure && failure}
   {@const [url, {message, status}] = failure}
-  <div class="flex justify-end px-1 text-xs {$$props.class}">
+  <div class="flex justify-end px-1 text-xs {restProps.class}">
     <Tippy
-      class="flex items-center {$$props.class}"
+      class="flex items-center {restProps.class}"
       component={ThunkStatusDetail}
       props={{url, message, status, retry}}
       params={{interactive: true}}>
@@ -63,12 +66,12 @@
     </Tippy>
   </div>
 {:else if canCancel || isPending}
-  <div class="flex justify-end px-1 text-xs {$$props.class}">
-    <span class="flex items-center gap-1 {$$props.class}">
+  <div class="flex justify-end px-1 text-xs {restProps.class}">
+    <span class="flex items-center gap-1 {restProps.class}">
       <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px"></span>
       <span class="opacity-50">Sending...</span>
       {#if canCancel}
-        <Button class="link" on:click={abort}>Cancel</Button>
+        <Button class="link" onclick={abort}>Cancel</Button>
       {/if}
     </span>
   </div>

src/app/components/ThunkStatusDetail.svelte

@@ -29,5 +29,5 @@
   <p>
     Failed to publish to {displayRelayUrl(url)}: {message}.
   </p>
-  <Button class="link" on:click={retry}>Retry</Button>
+  <Button class="link" onclick={retry}>Retry</Button>
 </div>

src/app/components/Toast.svelte

@@ -16,7 +16,7 @@
         class:text-base-content={theme === "info"}
         class:alert-error={theme === "error"}>
         {$toast.message}
-        <Button class="flex items-center opacity-75" on:click={() => popToast($toast.id)}>
+        <Button class="flex items-center opacity-75" onclick={() => popToast($toast.id)}>
           <Icon icon="close-circle" />
         </Button>
       </div>

src/app/editor/EditMention.svelte

@@ -8,7 +8,7 @@
     selected: NodeViewProps["selected"]
   }
 
-  let {node, selected}: Props = $props()
+  const {node, selected}: Props = $props()
 
   const display = deriveProfileDisplay(node.attrs.pubkey)
 </script>

src/app/editor/ProfileSuggestion.svelte

@@ -10,14 +10,14 @@
   import WotScore from "@lib/components/WotScore.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
 
-  let {value} = $props()
+  const {value} = $props()
 
   const pubkey = value
   const profileDisplay = deriveProfileDisplay(pubkey)
   const handle = deriveHandleForPubkey(pubkey)
   const score = deriveUserWotScore(pubkey)
 
-  let following = $derived(getPubkeyTagValues(getListTags($userFollows)).includes(pubkey))
+  const following = $derived(getPubkeyTagValues(getListTags($userFollows)).includes(pubkey))
 </script>
 
 <div class="flex max-w-full gap-3">

src/lib/components/Avatar.svelte

@@ -2,7 +2,7 @@
   import {onMount} from "svelte"
   import Icon from "@lib/components/Icon.svelte"
 
-  let {src = "", size = 7, icon = "user-rounded", style = "", ...restProps} = $props()
+  const {src = "", size = 7, icon = "user-rounded", style = "", ...restProps} = $props()
 
   let element: HTMLElement