Space alerts dialog

src/app/components/AlertAdd.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {preventDefault} from "@lib/html"
-  import {ucFirst} from "@lib/util"
   import {decrypt} from "@welshman/signer"
   import {randomInt, parseJson, fromPairs, displayList, TIMEZONE, identity} from "@welshman/lib"
   import {
@@ -32,12 +31,12 @@
   import {loadAlertStatuses, requestRelayClaim} from "@app/requests"
   import {publishAlert, attemptAuth} from "@app/commands"
   import type {AlertParams} from "@app/commands"
-  import {platform, canSendPushNotifications, getPushInfo} from "@app/push"
+  import {platform, platformName, canSendPushNotifications, getPushInfo} from "@app/push"
   import {pushToast} from "@app/toast"
 
   type Props = {
+    url?: string
     channel?: string
-    relay?: string
     notifyChat?: boolean
     notifyThreads?: boolean
     notifyCalendar?: boolean
@@ -45,7 +44,7 @@
   }
 
   let {
-    relay = "",
+    url = "",
     channel = "email",
     notifyChat = true,
     notifyThreads = true,
@@ -74,7 +73,7 @@
       })
     }
 
-    if (!relay) {
+    if (!url) {
       return pushToast({
         theme: "error",
         message: "Please select a space",
@@ -111,9 +110,9 @@
     loading = true
 
     try {
-      const claims = claim ? {[relay]: claim} : {}
-      const feed = makeIntersectionFeed(feedFromFilters(filters), makeRelayFeed(relay))
-      const description = `for ${displayList(display)} on ${displayRelayUrl(relay)}`
+      const claims = claim ? {[url]: claim} : {}
+      const feed = makeIntersectionFeed(feedFromFilters(filters), makeRelayFeed(url))
+      const description = `for ${displayList(display)} on ${displayRelayUrl(url)}`
       const params: AlertParams = {feed, claims, description}
 
       if (channel === "email") {
@@ -133,7 +132,7 @@
         try {
           // @ts-ignore
           params[platform] = await getPushInfo()
-          params.description = `${ucFirst(platform)} push notification ${description}.`
+          params.description = `${platformName} push notification ${description}.`
         } catch (e: any) {
           return pushToast({
             theme: "error",
@@ -181,11 +180,13 @@
       channel = "email"
     }
 
-    requestRelayClaim(relay).then(code => {
-      if (code) {
-        claim = code
-      }
-    })
+    if (url) {
+      requestRelayClaim(url).then(code => {
+        if (code) {
+          claim = code
+        }
+      })
+    }
   })
 </script>
 
@@ -237,7 +238,7 @@
         <p>Space*</p>
       {/snippet}
       {#snippet input()}
-        <select bind:value={relay} class="select select-bordered">
+        <select bind:value={url} class="select select-bordered">
           <option value="" disabled selected>Choose a space URL</option>
           {#each getMembershipUrls($userMembership) as url (url)}
             <option value={url}>{displayRelayUrl(url)}</option>

src/app/components/Alerts.svelte

@@ -1,20 +1,25 @@
 <script lang="ts">
-  import {onMount} from "svelte"
-  import {pubkey} from "@welshman/app"
+  import {getTagValue} from "@welshman/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import AlertAdd from "@app/components/AlertAdd.svelte"
   import AlertItem from "@app/components/AlertItem.svelte"
-  import {loadAlertStatuses, loadAlerts} from "@app/requests"
   import {pushModal} from "@app/modal"
   import {alerts} from "@app/state"
 
-  const startAlert = () => pushModal(AlertAdd)
+  type Props = {
+    url?: string
+    channel?: string
+    hideSpaceField?: boolean
+  }
 
-  onMount(() => {
-    loadAlertStatuses($pubkey!)
-    loadAlerts($pubkey!)
-  })
+  const {url = "", channel = "push", hideSpaceField = false}: Props = $props()
+
+  const startAlert = () => pushModal(AlertAdd, {url, channel, hideSpaceField})
+
+  const filteredAlerts = $derived(
+    url ? $alerts.filter(a => getTagValue("feed", a.tags)?.includes(url)) : $alerts,
+  )
 </script>
 
 <div class="card2 bg-alt flex flex-col gap-6 shadow-xl">
@@ -29,10 +34,10 @@
     </Button>
   </div>
   <div class="col-4">
-    {#each $alerts as alert (alert.event.id)}
+    {#each filteredAlerts as alert (alert.event.id)}
       <AlertItem {alert} />
     {:else}
-      <p class="text-center opacity-75 py-12">No alerts found</p>
+      <p class="text-center opacity-75 py-12">Nothing here yet!</p>
     {/each}
   </div>
 </div>

src/app/components/MenuSpace.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {displayRelayUrl, getTagValue, MESSAGE, THREAD, EVENT_TIME} from "@welshman/util"
-  import {pubkey, deriveRelay} from "@welshman/app"
+  import {displayRelayUrl, getTagValue} from "@welshman/util"
+  import {deriveRelay} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -14,6 +14,7 @@
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import ProfileList from "@app/components/ProfileList.svelte"
   import AlertAdd from "@app/components/AlertAdd.svelte"
+  import Alerts from "@app/components/Alerts.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
   import MenuSpaceRoomItem from "@app/components/MenuSpaceRoomItem.svelte"
   import InfoMissingRooms from "@app/components/InfoMissingRooms.svelte"
@@ -23,10 +24,9 @@
     memberships,
     deriveUserRooms,
     deriveOtherRooms,
-    deviceAlerts,
     hasNip29,
+    alerts,
   } from "@app/state"
-  import {loadAlerts} from "@app/requests"
   import {notifications} from "@app/notifications"
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
@@ -39,6 +39,7 @@
   const calendarPath = makeSpacePath(url, "calendar")
   const userRooms = deriveUserRooms(url)
   const otherRooms = deriveOtherRooms(url)
+  const hasAlerts = $derived($alerts.some(a => getTagValue("feed", a.tags)?.includes(url)))
 
   const openMenu = () => {
     showMenu = true
@@ -65,21 +66,11 @@
 
   const addRoom = () => pushModal(RoomCreate, {url}, {replaceState})
 
-  const addAlert = () => {
-    const alert = $deviceAlerts.find(a => getTagValue("feed", a.tags)?.includes(url))
-    const feed = getTagValue("feed", alert?.tags || [])
+  const manageAlerts = () => {
+    const component = hasAlerts ? Alerts : AlertAdd
+    const params = {url, channel: "push", hideSpaceField: true}
 
-    const props = {
-      relay: url,
-      channel: "push",
-      notifyChat: feed ? feed.includes(String(MESSAGE)) : true,
-      notifyThreads: feed ? feed.includes(String(THREAD)) : true,
-      notifyCalendar: feed ? feed.includes(String(EVENT_TIME)) : true,
-      removeDuplicates: true,
-      hideSpaceField: true,
-    }
-
-    pushModal(AlertAdd, props, {replaceState})
+    pushModal(component, params, {replaceState})
   }
 
   let showMenu = $state(false)
@@ -92,11 +83,10 @@
 
   onMount(() => {
     replaceState = Boolean(element?.closest(".drawer"))
-    loadAlerts($pubkey!)
   })
 </script>
 
-<div bind:this={element} class="flex h-screen flex-col justify-between">
+<div bind:this={element} class="flex h-full flex-col justify-between">
   <SecondaryNavSection>
     <div>
       <SecondaryNavItem class="w-full !justify-between" onclick={openMenu}>
@@ -192,9 +182,10 @@
           Where did my rooms go?
         </Button>
       {/if}
-    </div></SecondaryNavSection>
+    </div>
+  </SecondaryNavSection>
   <div class="p-4">
-    <button class="btn btn-neutral btn-sm w-full" onclick={addAlert}>
+    <button class="btn btn-neutral btn-sm w-full" onclick={manageAlerts}>
       <Icon icon="bell" />
       Manage Alerts
     </button>