Update alert form to include push notifications

src/app/components/AlertAdd.svelte

@@ -13,22 +13,34 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {alerts, getMembershipUrls, getMembershipRoomsByUrl, userMembership} from "@app/state"
   import {loadAlertStatuses, requestRelayClaims} from "@app/requests"
-  import {publishAlert} from "@app/commands"
+  import {publishEmailAlert, publishPushAlert} from "@app/commands"
   import {pushToast} from "@app/toast"
 
+  type Props = {
+    channel?: string
+    relay?: string
+    notifyChat?: boolean
+    notifyThreads?: boolean
+    notifyCalendar?: boolean
+  }
+
+  let {
+    relay = "",
+    channel = "email",
+    notifyChat = true,
+    notifyThreads = true,
+    notifyCalendar = true,
+  }: Props = $props()
+
   const timezoneOffset = parseInt(TIMEZONE.slice(3)) / 100
   const minute = randomInt(0, 59)
   const hour = (17 - timezoneOffset) % 24
   const WEEKLY = `0 ${minute} ${hour} * * 1`
   const DAILY = `0 ${minute} ${hour} * * *`
 
-  let loading = false
-  let cron = WEEKLY
-  let email = $alerts.map(a => getTagValue("email", a.tags)).filter(identity)[0] || ""
-  let relay = ""
-  let notifyThreads = true
-  let notifyCalendar = true
-  let notifyChat = false
+  let loading = $state(false)
+  let cron = $state(WEEKLY)
+  let email = $state($alerts.map(a => getTagValue("email", a.tags)).filter(identity)[0] || "")
 
   const back = () => history.back()
 
@@ -84,7 +96,10 @@
       const cadence = cron?.endsWith("1") ? "Weekly" : "Daily"
       const description = `${cadence} alert for ${displayList(display)} on ${displayRelayUrl(relay)}, sent via email.`
       const feed = makeIntersectionFeed(feedFromFilters(filters), makeRelayFeed(relay))
-      const thunk = await publishAlert({cron, email, feed, claims, description})
+      const thunk =
+        channel === "email"
+          ? await publishEmailAlert({cron, email, feed, claims, description})
+          : await publishPushAlert({feed, claims, description})
 
       await thunk.result
       await loadAlertStatuses($pubkey!)
@@ -105,25 +120,38 @@
   </ModalHeader>
   <FieldInline>
     {#snippet label()}
-      <p>Email Address*</p>
+      <p>Alert Type*</p>
     {/snippet}
     {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <input placeholder="email@example.com" bind:value={email} />
-      </label>
-    {/snippet}
-  </FieldInline>
-  <FieldInline>
-    {#snippet label()}
-      <p>Frequency*</p>
-    {/snippet}
-    {#snippet input()}
-      <select bind:value={cron} class="select select-bordered">
-        <option value={WEEKLY}>Weekly</option>
-        <option value={DAILY}>Daily</option>
+      <select bind:value={channel} class="select select-bordered">
+        <option value="push">Push Notification</option>
+        <option value="email">Email Digest</option>
       </select>
     {/snippet}
   </FieldInline>
+  {#if channel === "email"}
+    <FieldInline>
+      {#snippet label()}
+        <p>Email Address*</p>
+      {/snippet}
+      {#snippet input()}
+        <label class="input input-bordered flex w-full items-center gap-2">
+          <input placeholder="email@example.com" bind:value={email} />
+        </label>
+      {/snippet}
+    </FieldInline>
+    <FieldInline>
+      {#snippet label()}
+        <p>Frequency*</p>
+      {/snippet}
+      {#snippet input()}
+        <select bind:value={cron} class="select select-bordered">
+          <option value={WEEKLY}>Weekly</option>
+          <option value={DAILY}>Daily</option>
+        </select>
+      {/snippet}
+    </FieldInline>
+  {/if}
   <FieldInline>
     {#snippet label()}
       <p>Space*</p>

src/app/components/MenuSpace.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {displayRelayUrl} from "@welshman/util"
-  import {deriveRelay} from "@welshman/app"
+  import {displayRelayUrl, getTagValue} from "@welshman/util"
+  import {pubkey, deriveRelay} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -13,6 +13,8 @@
   import SpaceExit from "@app/components/SpaceExit.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import ProfileList from "@app/components/ProfileList.svelte"
+  import AlertAdd from "@app/components/AlertAdd.svelte"
+  import AlertDelete from "@app/components/AlertDelete.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
   import MenuSpaceRoomItem from "@app/components/MenuSpaceRoomItem.svelte"
   import InfoMissingRooms from "@app/components/InfoMissingRooms.svelte"
@@ -23,7 +25,9 @@
     deriveUserRooms,
     deriveOtherRooms,
     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"
@@ -36,6 +40,7 @@
   const calendarPath = makeSpacePath(url, "calendar")
   const userRooms = deriveUserRooms(url)
   const otherRooms = deriveOtherRooms(url)
+  const alert = $derived($alerts.find(a => getTagValue("feed", a.tags)?.includes(url)))
 
   const openMenu = () => {
     showMenu = true
@@ -62,6 +67,10 @@
 
   const addRoom = () => pushModal(RoomCreate, {url}, {replaceState})
 
+  const addAlert = () => pushModal(AlertAdd, {relay: url, channel: "push"})
+
+  const deleteAlert = () => pushModal(AlertDelete, {alert})
+
   let showMenu = $state(false)
   let replaceState = $state(false)
   let element: Element | undefined = $state()
@@ -72,6 +81,7 @@
 
   onMount(() => {
     replaceState = Boolean(element?.closest(".drawer"))
+    loadAlerts($pubkey!)
   })
 </script>
 
@@ -86,7 +96,7 @@
         <Popover hideOnClick onClose={toggleMenu}>
           <ul
             transition:fly
-            class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
+            class="menu absolute z-popover mt-2 w-full gap-1 rounded-box bg-base-100 p-2 shadow-xl">
             <li>
               <Button onclick={showMembers}>
                 <Icon icon="user-rounded" />
@@ -99,6 +109,21 @@
                 Create Invite
               </Button>
             </li>
+            {#if alert}
+              <li>
+                <Button onclick={deleteAlert}>
+                  <Icon icon="bell" />
+                  Disable alerts
+                </Button>
+              </li>
+            {:else}
+              <li>
+                <Button onclick={addAlert}>
+                  <Icon icon="bell" />
+                  Enable alerts
+                </Button>
+              </li>
+            {/if}
             <li>
               {#if $userRoomsByUrl.has(url)}
                 <Button onclick={leaveSpace} class="text-error">