From a0e97d5e5be531f27a9ecb57de210b804bffa89d Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 3 Feb 2025 19:28:29 -0800
Subject: [PATCH] Finish svelte 5 migration

---
 src/app/components/ChannelCompose.svelte      |  4 +---
 src/app/components/ChannelMessage.svelte      |  6 +----
 src/app/components/ChatEnable.svelte          |  3 +--
 src/app/components/ChatStart.svelte           |  3 +--
 src/app/components/Content.svelte             |  5 ++--
 src/app/components/ContentLinkBlock.svelte    |  3 +--
 src/app/components/ContentLinkInline.svelte   |  3 +--
 src/app/components/EventCreate.svelte         |  3 +--
 src/app/components/EventReport.svelte         |  3 +--
 src/app/components/LogInBunker.svelte         |  5 ++--
 src/app/components/LogInPassword.svelte       |  3 +--
 src/app/components/LogOut.svelte              |  3 +--
 src/app/components/PasswordReset.svelte       |  3 +--
 .../components/PasswordResetRequest.svelte    |  3 +--
 src/app/components/ProfileEdit.svelte         |  3 +--
 src/app/components/ReactionSummary.svelte     |  4 +---
 src/app/components/RoomCreate.svelte          |  3 +--
 src/app/components/SignUp.svelte              |  4 +---
 src/app/components/SpaceAuthError.svelte      |  3 +--
 src/app/components/SpaceCheck.svelte          |  3 +--
 src/app/components/SpaceCreate.svelte         |  3 +--
 src/app/components/SpaceCreateExternal.svelte |  3 +--
 src/app/components/SpaceExit.svelte           |  3 +--
 src/app/components/SpaceInviteAccept.svelte   |  3 +--
 src/app/components/SpaceJoin.svelte           |  3 +--
 src/app/components/ThreadCreate.svelte        |  4 +---
 src/app/components/ThreadItem.svelte          |  3 +--
 src/app/components/ThreadReply.svelte         |  4 +---
 src/app/components/ThreadShare.svelte         |  3 +--
 src/app/components/ThunkStatusDetail.svelte   |  4 +---
 src/lib/components/Confirm.svelte             |  3 +--
 src/lib/components/InputPicture.svelte        |  6 ++---
 src/lib/components/InputProfilePicture.svelte |  5 ++--
 src/lib/components/Link.svelte                |  2 +-
 src/lib/components/LongPress.svelte           | 24 ++++++-------------
 src/lib/html.ts                               |  1 +
 src/routes/settings/+page.svelte              |  9 ++++---
 src/routes/spaces/[relay]/+layout.svelte      |  4 +---
 38 files changed, 52 insertions(+), 105 deletions(-)

diff --git a/src/app/components/ChannelCompose.svelte b/src/app/components/ChannelCompose.svelte
index 23c914da..ce593ac9 100644
--- a/src/app/components/ChannelCompose.svelte
+++ b/src/app/components/ChannelCompose.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {onMount} from "svelte"
   import {writable} from "svelte/store"
   import {EditorContent} from "svelte-tiptap"
-  import {isMobile} from "@lib/html"
+  import {isMobile, preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {makeEditor} from "@app/editor"
diff --git a/src/app/components/ChannelMessage.svelte b/src/app/components/ChannelMessage.svelte
index 01fa7e77..b82507bc 100644
--- a/src/app/components/ChannelMessage.svelte
+++ b/src/app/components/ChannelMessage.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-  import {createBubbler, stopPropagation} from "svelte/legacy"
-
-  const bubble = createBubbler()
   import {hash} from "@welshman/lib"
   import {now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
@@ -104,8 +101,7 @@
   </div>
   <button
     class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
-    class:group-hover:opacity-100={!isMobile}
-    onclick={stopPropagation(bubble("click"))}>
+    class:group-hover:opacity-100={!isMobile}>
     <ChannelMessageEmojiButton {url} {room} {event} />
     {#if replyTo}
       <Button class="btn join-item btn-xs" onclick={reply}>
diff --git a/src/app/components/ChatEnable.svelte b/src/app/components/ChatEnable.svelte
index f0f07f99..84228865 100644
--- a/src/app/components/ChatEnable.svelte
+++ b/src/app/components/ChatEnable.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {goto} from "$app/navigation"
   import {WRAP} from "@welshman/util"
   import {repository} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
diff --git a/src/app/components/ChatStart.svelte b/src/app/components/ChatStart.svelte
index 773ad5f2..56fbdaab 100644
--- a/src/app/components/ChatStart.svelte
+++ b/src/app/components/ChatStart.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {goto} from "$app/navigation"
   import {pubkey} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
diff --git a/src/app/components/Content.svelte b/src/app/components/Content.svelte
index f0db98b9..64cbbb19 100644
--- a/src/app/components/Content.svelte
+++ b/src/app/components/Content.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-  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"
@@ -21,9 +18,11 @@
     isAddress,
     isNewline,
   } from "@welshman/content"
+  import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Content from "@app/components/Content.svelte"
   import ContentToken from "@app/components/ContentToken.svelte"
   import ContentCode from "@app/components/ContentCode.svelte"
   import ContentLinkInline from "@app/components/ContentLinkInline.svelte"
diff --git a/src/app/components/ContentLinkBlock.svelte b/src/app/components/ContentLinkBlock.svelte
index 55f1be03..19182338 100644
--- a/src/app/components/ContentLinkBlock.svelte
+++ b/src/app/components/ContentLinkBlock.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import {preventDefault, stopPropagation} from "svelte/legacy"
-
   import {ellipsize, postJson} from "@welshman/lib"
   import {dufflepud, imgproxy} from "@app/state"
+  import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import {pushModal} from "@app/modal"
diff --git a/src/app/components/ContentLinkInline.svelte b/src/app/components/ContentLinkInline.svelte
index d4d4e739..36b89fbf 100644
--- a/src/app/components/ContentLinkInline.svelte
+++ b/src/app/components/ContentLinkInline.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {displayUrl} from "@welshman/lib"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
diff --git a/src/app/components/EventCreate.svelte b/src/app/components/EventCreate.svelte
index 48c961a6..adb264f1 100644
--- a/src/app/components/EventCreate.svelte
+++ b/src/app/components/EventCreate.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {EditorContent} from "svelte-tiptap"
   import {writable} from "svelte/store"
   import {randomId} from "@welshman/lib"
   import {createEvent, EVENT_TIME} from "@welshman/util"
   import {publishThunk, dateToSeconds} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
diff --git a/src/app/components/EventReport.svelte b/src/app/components/EventReport.svelte
index ce5069c2..23553f0f 100644
--- a/src/app/components/EventReport.svelte
+++ b/src/app/components/EventReport.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
+  import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
diff --git a/src/app/components/LogInBunker.svelte b/src/app/components/LogInBunker.svelte
index b849f0b2..c44db935 100644
--- a/src/app/components/LogInBunker.svelte
+++ b/src/app/components/LogInBunker.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import {run, preventDefault} from "svelte/legacy"
-
   import {onMount, onDestroy} from "svelte"
   import {Nip46Broker, getPubkey, makeSecret} from "@welshman/signer"
   import {addSession} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import {slideAndFade} from "@lib/transition"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -65,7 +64,7 @@
   let bunker = $state("")
   let loading = $state(false)
 
-  run(() => {
+  $effect(() => {
     // For testing and for play store reviewers
     if (bunker === "reviewkey") {
       const secret = makeSecret()
diff --git a/src/app/components/LogInPassword.svelte b/src/app/components/LogInPassword.svelte
index 203468ef..748c731b 100644
--- a/src/app/components/LogInPassword.svelte
+++ b/src/app/components/LogInPassword.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {onMount, onDestroy} from "svelte"
   import {postJson, stripProtocol} from "@welshman/lib"
   import {Nip46Broker, makeSecret} from "@welshman/signer"
   import {normalizeRelayUrl} from "@welshman/util"
   import {addSession} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
diff --git a/src/app/components/LogOut.svelte b/src/app/components/LogOut.svelte
index 83c38dae..06e69fb6 100644
--- a/src/app/components/LogOut.svelte
+++ b/src/app/components/LogOut.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
diff --git a/src/app/components/PasswordReset.svelte b/src/app/components/PasswordReset.svelte
index a1fa6633..a74c0050 100644
--- a/src/app/components/PasswordReset.svelte
+++ b/src/app/components/PasswordReset.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {postJson, sleep} from "@welshman/lib"
+  import {preventDefault} from "@lib/html"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Icon from "@lib/components/Icon.svelte"
diff --git a/src/app/components/PasswordResetRequest.svelte b/src/app/components/PasswordResetRequest.svelte
index b739855a..e4bc3af4 100644
--- a/src/app/components/PasswordResetRequest.svelte
+++ b/src/app/components/PasswordResetRequest.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {postJson, sleep} from "@welshman/lib"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
diff --git a/src/app/components/ProfileEdit.svelte b/src/app/components/ProfileEdit.svelte
index 9af78fd8..1fde68fb 100644
--- a/src/app/components/ProfileEdit.svelte
+++ b/src/app/components/ProfileEdit.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {ctx} from "@welshman/lib"
   import {
     createEvent,
@@ -10,6 +8,7 @@
     isPublishedProfile,
   } from "@welshman/util"
   import {pubkey, profilesByPubkey, publishThunk} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
diff --git a/src/app/components/ReactionSummary.svelte b/src/app/components/ReactionSummary.svelte
index 130ea682..c78543ed 100644
--- a/src/app/components/ReactionSummary.svelte
+++ b/src/app/components/ReactionSummary.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import {preventDefault, stopPropagation} from "svelte/legacy"
-
   import {onMount} from "svelte"
   import {groupBy, uniq, uniqBy, batch} from "@welshman/lib"
   import {REACTION, getTag, REPORT, DELETE} from "@welshman/util"
@@ -8,7 +6,7 @@
   import {deriveEvents} from "@welshman/store"
   import {pubkey, repository, load, displayProfileByPubkey} from "@welshman/app"
   import {displayList} from "@lib/util"
-  import {isMobile} from "@lib/html"
+  import {isMobile, preventDefault, stopPropagation} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import EventReportDetails from "@app/components/EventReportDetails.svelte"
   import {displayReaction} from "@app/state"
diff --git a/src/app/components/RoomCreate.svelte b/src/app/components/RoomCreate.svelte
index d7b8b024..17a81201 100644
--- a/src/app/components/RoomCreate.svelte
+++ b/src/app/components/RoomCreate.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {goto} from "$app/navigation"
   import {randomId} from "@welshman/lib"
   import {displayRelayUrl} from "@welshman/util"
   import {deriveRelay} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Field from "@lib/components/Field.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
diff --git a/src/app/components/SignUp.svelte b/src/app/components/SignUp.svelte
index d983cc10..3161adc4 100644
--- a/src/app/components/SignUp.svelte
+++ b/src/app/components/SignUp.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {postJson} from "@welshman/lib"
-  import {isMobile} from "@lib/html"
+  import {isMobile, preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
diff --git a/src/app/components/SpaceAuthError.svelte b/src/app/components/SpaceAuthError.svelte
index 67b09110..39a39fbd 100644
--- a/src/app/components/SpaceAuthError.svelte
+++ b/src/app/components/SpaceAuthError.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {displayRelayUrl} from "@welshman/util"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import {preventDefault} from "@lib/html"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushToast} from "@app/toast"
diff --git a/src/app/components/SpaceCheck.svelte b/src/app/components/SpaceCheck.svelte
index 8908ae2c..592a24bc 100644
--- a/src/app/components/SpaceCheck.svelte
+++ b/src/app/components/SpaceCheck.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {onMount} from "svelte"
   import {goto} from "$app/navigation"
   import {ctx, sleep} from "@welshman/lib"
   import {displayRelayUrl} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
diff --git a/src/app/components/SpaceCreate.svelte b/src/app/components/SpaceCreate.svelte
index 6c4ab993..d908805c 100644
--- a/src/app/components/SpaceCreate.svelte
+++ b/src/app/components/SpaceCreate.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
+  import {preventDefault} from "@lib/html"
   import InputProfilePicture from "@lib/components/InputProfilePicture.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
diff --git a/src/app/components/SpaceCreateExternal.svelte b/src/app/components/SpaceCreateExternal.svelte
index 6abd882c..2cff9cdf 100644
--- a/src/app/components/SpaceCreateExternal.svelte
+++ b/src/app/components/SpaceCreateExternal.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
+  import {preventDefault} from "@lib/html"
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
diff --git a/src/app/components/SpaceExit.svelte b/src/app/components/SpaceExit.svelte
index 8b2d9d9f..46a2bb11 100644
--- a/src/app/components/SpaceExit.svelte
+++ b/src/app/components/SpaceExit.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {goto} from "$app/navigation"
   import {displayRelayUrl} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
diff --git a/src/app/components/SpaceInviteAccept.svelte b/src/app/components/SpaceInviteAccept.svelte
index 122c484b..8db039ea 100644
--- a/src/app/components/SpaceInviteAccept.svelte
+++ b/src/app/components/SpaceInviteAccept.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {goto} from "$app/navigation"
   import {ctx, tryCatch} from "@welshman/lib"
   import {isRelayUrl, normalizeRelayUrl} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
diff --git a/src/app/components/SpaceJoin.svelte b/src/app/components/SpaceJoin.svelte
index 0223cdbb..73fd9efb 100644
--- a/src/app/components/SpaceJoin.svelte
+++ b/src/app/components/SpaceJoin.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {displayRelayUrl} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
diff --git a/src/app/components/ThreadCreate.svelte b/src/app/components/ThreadCreate.svelte
index 624d7be0..f92a6931 100644
--- a/src/app/components/ThreadCreate.svelte
+++ b/src/app/components/ThreadCreate.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {writable} from "svelte/store"
   import {EditorContent} from "svelte-tiptap"
   import {createEvent, THREAD} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
-  import {isMobile} from "@lib/html"
+  import {isMobile, preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
diff --git a/src/app/components/ThreadItem.svelte b/src/app/components/ThreadItem.svelte
index 69cff1d2..1c7b4557 100644
--- a/src/app/components/ThreadItem.svelte
+++ b/src/app/components/ThreadItem.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {nthEq} from "@welshman/lib"
   import {formatTimestamp} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import Content from "@app/components/Content.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
diff --git a/src/app/components/ThreadReply.svelte b/src/app/components/ThreadReply.svelte
index d71473de..90c81369 100644
--- a/src/app/components/ThreadReply.svelte
+++ b/src/app/components/ThreadReply.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {writable} from "svelte/store"
   import {EditorContent} from "svelte-tiptap"
-  import {isMobile} from "@lib/html"
+  import {isMobile, preventDefault} from "@lib/html"
   import {fly, slideAndFade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
diff --git a/src/app/components/ThreadShare.svelte b/src/app/components/ThreadShare.svelte
index 08c0c07f..d05efec4 100644
--- a/src/app/components/ThreadShare.svelte
+++ b/src/app/components/ThreadShare.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {nip19} from "nostr-tools"
   import {goto} from "$app/navigation"
   import {ctx} from "@welshman/lib"
   import {toNostrURI} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
diff --git a/src/app/components/ThunkStatusDetail.svelte b/src/app/components/ThunkStatusDetail.svelte
index bf1d6479..b388b343 100644
--- a/src/app/components/ThunkStatusDetail.svelte
+++ b/src/app/components/ThunkStatusDetail.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import {run} from "svelte/legacy"
-
   import {PublishStatus} from "@welshman/net"
   import {displayRelayUrl} from "@welshman/util"
   import Button from "@lib/components/Button.svelte"
@@ -14,7 +12,7 @@
 
   let {url, status, message = $bindable(), retry}: Props = $props()
 
-  run(() => {
+  $effect(() => {
     if (!message && status === PublishStatus.Timeout) {
       message = "request timed out"
     }
diff --git a/src/lib/components/Confirm.svelte b/src/lib/components/Confirm.svelte
index 84fa70b0..a552e4b4 100644
--- a/src/lib/components/Confirm.svelte
+++ b/src/lib/components/Confirm.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
diff --git a/src/lib/components/InputPicture.svelte b/src/lib/components/InputPicture.svelte
index 24521461..174d324b 100644
--- a/src/lib/components/InputPicture.svelte
+++ b/src/lib/components/InputPicture.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {run, preventDefault, stopPropagation} from "svelte/legacy"
-
   import {randomId} from "@welshman/lib"
+  import {preventDefault, stopPropagation} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
@@ -44,7 +43,7 @@
   let active = $state(false)
   let initialUrl = $state(url)
 
-  run(() => {
+  $effect(() => {
     if (file) {
       const reader = new FileReader()
 
@@ -55,6 +54,7 @@
         },
         false,
       )
+
       reader.readAsDataURL(file)
     } else {
       url = initialUrl
diff --git a/src/lib/components/InputProfilePicture.svelte b/src/lib/components/InputProfilePicture.svelte
index b97e08a6..1bdc07d8 100644
--- a/src/lib/components/InputProfilePicture.svelte
+++ b/src/lib/components/InputProfilePicture.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {run, preventDefault, stopPropagation} from "svelte/legacy"
-
   import {randomId} from "@welshman/lib"
+  import {preventDefault, stopPropagation} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
@@ -44,7 +43,7 @@
   let active = $state(false)
   let initialUrl = $state(url)
 
-  run(() => {
+  $effect(() => {
     if (file) {
       const reader = new FileReader()
 
diff --git a/src/lib/components/Link.svelte b/src/lib/components/Link.svelte
index ee4394e1..40ae50ff 100644
--- a/src/lib/components/Link.svelte
+++ b/src/lib/components/Link.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {stopPropagation} from "svelte/legacy"
   import {goto} from "$app/navigation"
+  import {stopPropagation} from "@lib/html"
 
   const {
     children,
diff --git a/src/lib/components/LongPress.svelte b/src/lib/components/LongPress.svelte
index 3ef97b98..6ebb5f82 100644
--- a/src/lib/components/LongPress.svelte
+++ b/src/lib/components/LongPress.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-  import {createBubbler} from "svelte/legacy"
+  const {children, onLongPress, ...restProps} = $props()
 
-  const bubble = createBubbler()
-  const {...props} = $props()
-
-  const onTouchStart = (event: any) => {
+  const ontouchstart = (event: any) => {
     touch = event.touches[0]
-    timeout = setTimeout(props.onLongPress, 500)
+    timeout = setTimeout(onLongPress, 500)
   }
 
-  const onTouchMove = (event: any) => {
+  const ontouchmove = (event: any) => {
     const curTouch = event.touches[0]
 
     if (Math.abs(curTouch.clientX - touch.clientX) > 30) {
@@ -21,19 +18,12 @@
     }
   }
 
-  const onTouchEnd = () => clearTimeout(timeout)
+  const ontouchend = () => clearTimeout(timeout)
 
   let touch: Touch
   let timeout: any
 </script>
 
-<div
-  role="button"
-  tabindex="0"
-  onclick={bubble("click")}
-  ontouchstart={onTouchStart}
-  ontouchmove={onTouchMove}
-  ontouchend={onTouchEnd}
-  {...props}>
-  {@render props.children?.()}
+<div role="button" tabindex="0" {ontouchstart} {ontouchmove} {ontouchend} {...restProps}>
+  {@render children()}
 </div>
diff --git a/src/lib/html.ts b/src/lib/html.ts
index f778e13e..c1f989a5 100644
--- a/src/lib/html.ts
+++ b/src/lib/html.ts
@@ -1,4 +1,5 @@
 import {sleep} from "@welshman/lib"
+export {preventDefault, stopPropagation} from "svelte/legacy"
 
 export const copyToClipboard = (text: string) => {
   const {activeElement} = document
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 1b0af816..a18db3bb 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
   import {ctx} from "@welshman/lib"
   import {getListTags, createEvent, getPubkeyTagValues, MUTES} from "@welshman/util"
   import {pubkey, signer, userMutes, tagPubkey, publishThunk} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Icon from "@lib/components/Icon.svelte"
@@ -17,7 +16,7 @@
     settings = {...$userSettingValues}
   }
 
-  const onSubmit = async () => {
+  const onsubmit = preventDefault(async () => {
     publishThunk({
       event: createEvent(SETTINGS, {
         content: await $signer!.nip04.encrypt($pubkey!, JSON.stringify(settings)),
@@ -31,13 +30,13 @@
     })
 
     pushToast({message: "Your settings have been saved!"})
-  }
+  })
 
   let settings = $state({...$userSettingValues})
   let mutedPubkeys = $state(getPubkeyTagValues(getListTags($userMutes)))
 </script>
 
-<form class="content column gap-4" onsubmit={preventDefault(onSubmit)}>
+<form class="content column gap-4" {onsubmit}>
   <div class="card2 bg-alt col-4 shadow-xl">
     <p class="text-lg">Content Settings</p>
     <FieldInline>
diff --git a/src/routes/spaces/[relay]/+layout.svelte b/src/routes/spaces/[relay]/+layout.svelte
index 67ac90e1..89ddda7d 100644
--- a/src/routes/spaces/[relay]/+layout.svelte
+++ b/src/routes/spaces/[relay]/+layout.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import {run} from "svelte/legacy"
-
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {ago, MONTH} from "@welshman/lib"
@@ -44,7 +42,7 @@
   }
 
   // We have to watch this one, since on mobile the badge will be visible when active
-  run(() => {
+  $effect(() => {
     if ($notifications.has($page.url.pathname)) {
       setChecked($page.url.pathname)
     }