From b9048936bad8fa2cf51d03c55acaa5dff7e1d0a0 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 30 Jun 2025 09:38:43 -0700
Subject: [PATCH] Tweak alerts button layout

---
 src/app/components/AlertAdd.svelte  | 30 +++++++++-------
 src/app/components/MenuSpace.svelte | 53 +++++++++++++++--------------
 2 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/src/app/components/AlertAdd.svelte b/src/app/components/AlertAdd.svelte
index 2c3326c..6d5e990 100644
--- a/src/app/components/AlertAdd.svelte
+++ b/src/app/components/AlertAdd.svelte
@@ -41,6 +41,7 @@
     notifyChat?: boolean
     notifyThreads?: boolean
     notifyCalendar?: boolean
+    hideSpaceField?: boolean
   }
 
   let {
@@ -49,6 +50,7 @@
     notifyChat = true,
     notifyThreads = true,
     notifyCalendar = true,
+    hideSpaceField = false,
   }: Props = $props()
 
   const timezoneOffset = parseInt(TIMEZONE.slice(3)) / 100
@@ -229,19 +231,21 @@
       {/snippet}
     </FieldInline>
   {/if}
-  <FieldInline>
-    {#snippet label()}
-      <p>Space*</p>
-    {/snippet}
-    {#snippet input()}
-      <select bind:value={relay} 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>
-        {/each}
-      </select>
-    {/snippet}
-  </FieldInline>
+  {#if !hideSpaceField}
+    <FieldInline>
+      {#snippet label()}
+        <p>Space*</p>
+      {/snippet}
+      {#snippet input()}
+        <select bind:value={relay} 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>
+          {/each}
+        </select>
+      {/snippet}
+    </FieldInline>
+  {/if}
   <FieldInline>
     {#snippet label()}
       <p>Notifications*</p>
diff --git a/src/app/components/MenuSpace.svelte b/src/app/components/MenuSpace.svelte
index 1f8f521..d5dc5fb 100644
--- a/src/app/components/MenuSpace.svelte
+++ b/src/app/components/MenuSpace.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {displayRelayUrl, getTagValue} from "@welshman/util"
+  import {displayRelayUrl, getTagValue, MESSAGE, THREAD, EVENT_TIME} from "@welshman/util"
   import {pubkey, deriveRelay} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
@@ -14,7 +14,6 @@
   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"
@@ -40,7 +39,6 @@
   const calendarPath = makeSpacePath(url, "calendar")
   const userRooms = deriveUserRooms(url)
   const otherRooms = deriveOtherRooms(url)
-  const alert = $derived($deviceAlerts.find(a => getTagValue("feed", a.tags)?.includes(url)))
 
   const openMenu = () => {
     showMenu = true
@@ -67,9 +65,22 @@
 
   const addRoom = () => pushModal(RoomCreate, {url}, {replaceState})
 
-  const addAlert = () => pushModal(AlertAdd, {relay: url, channel: "push"}, {replaceState})
+  const addAlert = () => {
+    const alert = $deviceAlerts.find(a => getTagValue("feed", a.tags)?.includes(url))
+    const feed = getTagValue("feed", alert?.tags || [])
 
-  const deleteAlert = () => pushModal(AlertDelete, {alert}, {replaceState})
+    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})
+  }
 
   let showMenu = $state(false)
   let replaceState = $state(false)
@@ -85,11 +96,13 @@
   })
 </script>
 
-<div bind:this={element}>
-  <SecondaryNavSection class="max-h-screen">
+<div bind:this={element} class="flex h-screen flex-col justify-between">
+  <SecondaryNavSection>
     <div>
       <SecondaryNavItem class="w-full !justify-between" onclick={openMenu}>
-        <strong class="ellipsize">{displayRelayUrl(url)}</strong>
+        <strong class="ellipsize flex items-center gap-3">
+          {displayRelayUrl(url)}
+        </strong>
         <Icon icon="alt-arrow-down" />
       </SecondaryNavItem>
       {#if showMenu}
@@ -109,21 +122,6 @@
                 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">
@@ -194,6 +192,11 @@
           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}>
+      <Icon icon="bell" />
+      Manage Alerts
+    </button>
+  </div>
 </div>