Add handler for alerts

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "flotilla",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "flotilla",
-      "version": "0.2.12",
+      "version": "0.2.13",
       "dependencies": {
         "@capacitor/android": "^7.0.0",
         "@capacitor/app": "^7.0.0",
@@ -23,7 +23,7 @@
         "@vite-pwa/assets-generator": "^0.2.6",
         "@vite-pwa/sveltekit": "^0.6.6",
         "@welshman/app": "^0.0.43",
-        "@welshman/content": "^0.1.0",
+        "@welshman/content": "^0.1.1",
         "@welshman/dvm": "^0.0.15",
         "@welshman/editor": "^0.1.0",
         "@welshman/feeds": "^0.1.0",
@@ -4776,9 +4776,9 @@
       }
     },
     "node_modules/@welshman/content": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@welshman/content/-/content-0.1.0.tgz",
-      "integrity": "sha512-l+r3JgBf6raPcwsAsNiM3N4Ms0X88uKPMuPltQLOMv0whaDCUVpu/w7llQBX6fH7v9RgSq0imgkUCWw9puYNlQ==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@welshman/content/-/content-0.1.1.tgz",
+      "integrity": "sha512-pzyH79/XCMAssT7QNCOkaIvknAW7Eek+l6cuL6c2s8ZO0wX4sTu55qmPzZHpjqg5l6VzW+6nCWDO/Tb8m62CMw==",
       "license": "MIT",
       "dependencies": {
         "@braintree/sanitize-url": "^7.0.2",

package.json

@@ -52,7 +52,7 @@
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.6",
     "@welshman/app": "^0.0.43",
-    "@welshman/content": "^0.1.0",
+    "@welshman/content": "^0.1.1",
     "@welshman/dvm": "^0.0.15",
     "@welshman/editor": "^0.1.0",
     "@welshman/feeds": "^0.1.0",

src/app/commands.ts

@@ -465,12 +465,15 @@ export type AlertParams = {
   cron: string
   email: string
   relay: string
-  handler: string
   filters: Filter[]
 }
 
-export const makeAlert = async ({cron, email, handler, relay, filters}: AlertParams) =>
-  createEvent(ALERT, {
+export const makeAlert = async ({cron, email, relay, filters}: AlertParams) => {
+  const handler =
+    "31990:97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322:1737058597050"
+  const handlerRelay = "wss://relay.nostr.band/"
+
+  return createEvent(ALERT, {
     content: await signer
       .get()
       .nip44.encrypt(
@@ -479,8 +482,8 @@ export const makeAlert = async ({cron, email, handler, relay, filters}: AlertPar
           ["cron", cron],
           ["email", email],
           ["relay", relay],
-          ["handler", handler],
           ["channel", "email"],
+          ["handler", handler, handlerRelay, "web"],
           ...unionFilters(filters).map(filter => ["filter", JSON.stringify(filter)]),
         ]),
       ),
@@ -489,6 +492,7 @@ export const makeAlert = async ({cron, email, handler, relay, filters}: AlertPar
       ["p", NOTIFIER_PUBKEY],
     ],
   })
+}
 
 export const publishAlert = async (params: AlertParams) =>
   publishThunk({event: await makeAlert(params), relays: [NOTIFIER_RELAY]})

src/app/components/AlertAdd.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {Capacitor} from "@capacitor/core"
   import {preventDefault} from "@lib/html"
   import {randomInt} from "@welshman/lib"
   import {displayRelayUrl, THREAD, MESSAGE, EVENT_TIME, COMMENT} from "@welshman/util"
@@ -11,15 +10,11 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {getMembershipUrls, getMembershipRoomsByUrl, userMembership} from "@app/state"
+  import {GENERAL, getMembershipUrls, getMembershipRoomsByUrl, userMembership} from "@app/state"
   import {loadAlertStatuses} from "@app/requests"
   import {publishAlert} from "@app/commands"
   import {pushToast} from "@app/toast"
 
-  const handler = Capacitor.isNativePlatform()
-    ? "https://app.flotilla.social"
-    : window.location.origin
-
   const timezone = new Date()
     .toString()
     .match(/GMT[^\s]+/)![0]
@@ -75,13 +70,18 @@
     }
 
     if (notifyChat) {
-      filters.push({kinds: [MESSAGE], "#h": getMembershipRoomsByUrl(relay, $userMembership)})
+      filters.push({
+        kinds: [MESSAGE],
+        "#h": [GENERAL, ...getMembershipRoomsByUrl(relay, $userMembership)],
+      })
     }
 
     loading = true
 
     try {
-      await publishAlert({cron, email, relay, handler, filters})
+      const thunk = await publishAlert({cron, email, relay, filters})
+
+      await thunk.result
       await loadAlertStatuses($pubkey!)
 
       pushToast({message: "Your alert has been successfully created!"})

src/app/components/ContentQuote.svelte

@@ -4,6 +4,7 @@
   import {ctx, nthEq} from "@welshman/lib"
   import {tracker, repository} from "@welshman/app"
   import {Address, DIRECT_MESSAGE, MESSAGE, THREAD, EVENT_TIME} from "@welshman/util"
+  import {scrollToEvent} from "@lib/html"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
@@ -24,34 +25,12 @@
     ? nip19.neventEncode({id, relays: mergedRelays})
     : new Address(kind, pubkey, identifier, mergedRelays).toNaddr()
 
-  const scrollToEvent = (id: string) => {
-    const element = document.querySelector(`[data-event="${id}"]`) as any
-
-    if (element) {
-      element.scrollIntoView({behavior: "smooth"})
-      element.style =
-        "filter: brightness(1.5); transition-property: all; transition-duration: 400ms;"
-
-      setTimeout(() => {
-        element.style = "transition-property: all; transition-duration: 300ms;"
-      }, 800)
-
-      setTimeout(() => {
-        element.style = ""
-      }, 800 + 400)
-    }
-
-    return Boolean(element)
-  }
-
   const openMessage = (url: string, room: string, id: string) => {
     const event = repository.getEvent(id)
 
     if (event) {
       goto(makeRoomPath(url, room))
-
-      // TODO: if the event doesn't immediately load, this won't work. Scroll up until it's found
-      setTimeout(() => scrollToEvent(id), 300)
+      scrollToEvent(id)
     }
 
     return Boolean(event)

src/lib/components/PrimaryNavItem.svelte

@@ -24,7 +24,7 @@
       data-tip={title}>
       {@render children?.()}
       {#if !active && notification}
-        <div class="absolute right-2 top-2 h-2 w-2 rounded-full bg-primary"></div>
+        <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
     </div>
   </a>
@@ -37,7 +37,7 @@
       data-tip={title}>
       {@render children?.()}
       {#if !active && notification}
-        <div class="absolute right-2 top-2 h-2 w-2 rounded-full bg-primary"></div>
+        <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
     </div>
   </Button>

src/lib/html.ts

@@ -1,4 +1,4 @@
-import {sleep} from "@welshman/lib"
+import {sleep, last} from "@welshman/lib"
 export {preventDefault, stopPropagation} from "svelte/legacy"
 
 export const copyToClipboard = (text: string) => {
@@ -89,3 +89,40 @@ export const downloadText = (filename: string, text: string) => {
   document.body.removeChild(a)
   URL.revokeObjectURL(url)
 }
+
+export const isIntersecting = async (element: Element) =>
+  new Promise(resolve => {
+    const observer = new IntersectionObserver(xs => {
+      resolve(xs.some(x => x.isIntersecting))
+      observer.unobserve(element)
+    })
+
+    observer.observe(element)
+  })
+
+export const scrollToEvent = async (id: string) => {
+  const element = document.querySelector(`[data-event="${id}"]`) as any
+
+  if (element) {
+    element.scrollIntoView({behavior: "smooth", block: "center"})
+    element.style = "filter: brightness(1.5); transition-property: all; transition-duration: 400ms;"
+
+    setTimeout(() => {
+      element.style = "transition-property: all; transition-duration: 300ms;"
+    }, 800)
+
+    setTimeout(() => {
+      element.style = ""
+    }, 800 + 400)
+  } else {
+    const lastElement = last(Array.from(document.querySelectorAll("[data-event]")))
+
+    if (lastElement && !isIntersecting(lastElement)) {
+      lastElement.scrollIntoView({behavior: "smooth", block: "center"})
+    }
+
+    await sleep(300)
+
+    scrollToEvent(id)
+  }
+}

src/routes/[bech32]/+page.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import * as nip19 from "nostr-tools/nip19"
+  import type {TrustedEvent} from "@welshman/util"
+  import {Address, getIdFilters, getTagValue} from "@welshman/util"
+  import {load} from "@welshman/app"
+  import {page} from "$app/stores"
+  import {goto} from "$app/navigation"
+  import {scrollToEvent} from "@lib/html"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import {makeRoomPath, makeThreadPath} from "@app/routes"
+
+  const {bech32} = $page.params
+
+  const attemptToNavigate = async () => {
+    const {type, data} = nip19.decode(bech32) as any
+
+    if (!["nevent", "naddr"].includes(type) && data.relays.length > 0) {
+      return goto("/", {replaceState: true})
+    }
+
+    let found = false
+
+    load({
+      filters: getIdFilters([type === "nevent" ? data.id : Address.fromNaddr(bech32).toString()]),
+      relays: data.relays,
+      onEvent: (event: TrustedEvent) => {
+        found = true
+
+        if (event.kind === 9) {
+          goto(makeRoomPath(data.relays[0], getTagValue("h", event.tags)!), {replaceState: true})
+          scrollToEvent(event.id)
+        } else if (event.kind === 11) {
+          goto(makeThreadPath(data.relays[0], event.id), {replaceState: true})
+        } else {
+          goto("/", {replaceState: true})
+        }
+      },
+      onComplete: () => {
+        if (!found) {
+          goto("/", {replaceState: true})
+        }
+      },
+    })
+  }
+
+  onMount(async () => {
+    try {
+      await attemptToNavigate()
+    } catch (e) {
+      goto("/", {replaceState: true})
+    }
+  })
+</script>
+
+<Spinner />

src/routes/settings/profile/+page.svelte

@@ -12,6 +12,7 @@
   import ProfileEdit from "@app/components/ProfileEdit.svelte"
   import ProfileDelete from "@app/components/ProfileDelete.svelte"
   import InfoKeys from "@app/components/InfoKeys.svelte"
+  import Alerts from "@app/components/Alerts.svelte"
   import {PLATFORM_NAME} from "@app/state"
   import {pushModal} from "@app/modal"
   import {clip} from "@app/toast"
@@ -129,6 +130,7 @@
       </FieldInline>
     {/if}
   </div>
+  <Alerts />
   <div class="card2 bg-alt shadow-xl">
     <div class="flex items-center justify-between">
       <strong class="flex items-center gap-3">