Move alerts to their own page, add direct message alerts

src/routes/+layout.svelte

@@ -26,6 +26,11 @@
   import type {TrustedEvent, StampedEvent} from "@welshman/util"
   import {
     WRAP,
+    ALERT_STATUS,
+    ALERT_EMAIL,
+    ALERT_WEB,
+    ALERT_IOS,
+    ALERT_ANDROID,
     EVENT_TIME,
     APP_DATA,
     THREAD,
@@ -39,7 +44,6 @@
     RELAYS,
     BLOSSOM_SERVERS,
     ROOMS,
-    getRelaysFromList,
   } from "@welshman/util"
   import {Nip46Broker, makeSecret} from "@welshman/signer"
   import type {Socket, RelayMessage, ClientMessage} from "@welshman/net"
@@ -67,7 +71,6 @@
     signerLog,
     dropSession,
     defaultStorageAdapters,
-    userInboxRelaySelections,
     loginWithNip01,
     loginWithNip46,
     EventsStorageAdapter,
@@ -96,6 +99,7 @@
     canDecrypt,
     getSetting,
     relaysMostlyRestricted,
+    userInboxRelays,
   } from "@app/core/state"
   import {loadUserData, listenForNotifications} from "@app/core/requests"
   import {theme} from "@app/util/theme"
@@ -290,6 +294,11 @@
                 INBOX_RELAYS,
                 ROOMS,
                 APP_DATA,
+                ALERT_STATUS,
+                ALERT_EMAIL,
+                ALERT_WEB,
+                ALERT_IOS,
+                ALERT_ANDROID,
               ].includes(e.kind)
             ) {
               return 1
@@ -437,19 +446,19 @@
       // Listen for chats, populate chat-based notifications
       let controller: AbortController
 
-      derived([pubkey, canDecrypt, userInboxRelaySelections], identity).subscribe(
-        ([$pubkey, $canDecrypt, $userInboxRelaySelections]) => {
+      derived([pubkey, canDecrypt, userInboxRelays], identity).subscribe(
+        ([$pubkey, $canDecrypt, $userInboxRelays]) => {
           controller?.abort()
           controller = new AbortController()
 
           if ($pubkey && $canDecrypt) {
             request({
               signal: controller.signal,
+              relays: $userInboxRelays,
               filters: [
                 {kinds: [WRAP], "#p": [$pubkey], since: ago(WEEK, 2)},
                 {kinds: [WRAP], "#p": [$pubkey], limit: 100},
               ],
-              relays: getRelaysFromList($userInboxRelaySelections),
             })
           }
         },

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

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import {onDestroy} from "svelte"
   import {page} from "$app/stores"
   import Chat from "@app/components/Chat.svelte"
-  import {setChecked} from "@app/util/notifications"
+  import {notifications, setChecked} from "@app/util/notifications"
 
-  onDestroy(() => {
-    setChecked($page.url.pathname)
+  // We have to watch this one, since on mobile the badge will be visible when active
+  $effect(() => {
+    if ($notifications.has($page.url.pathname)) {
+      setChecked($page.url.pathname)
+    }
   })
 </script>
 

src/routes/settings/+layout.svelte

@@ -8,6 +8,8 @@
   import Moon from "@assets/icons/moon.svg?dataurl"
   import InfoSquare from "@assets/icons/info-square.svg?dataurl"
   import Exit from "@assets/icons/logout-3.svg?dataurl"
+  import GalleryMinimalistic from "@assets/icons/gallery-minimalistic.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
@@ -30,37 +32,45 @@
 
 <SecondaryNav>
   <SecondaryNavSection>
+    <SecondaryNavItem class="w-full !justify-between">
+      <strong class="ellipsize flex items-center gap-3"> Your Settings </strong>
+    </SecondaryNavItem>
     <div in:fly|local>
       <SecondaryNavItem href="/settings/profile">
         <Icon icon={UserCircle} /> Profile
       </SecondaryNavItem>
     </div>
-    <div in:fly|local>
+    <div in:fly|local={{delay: 50}}>
+      <SecondaryNavItem href="/settings/alerts">
+        <Icon icon={Bell} /> Alerts
+      </SecondaryNavItem>
+    </div>
+    <div in:fly|local={{delay: 100}}>
       <SecondaryNavItem href="/settings/wallet">
         <Icon icon={Wallet} /> Wallet
       </SecondaryNavItem>
     </div>
-    <div in:fly|local={{delay: 50}}>
+    <div in:fly|local={{delay: 150}}>
       <SecondaryNavItem href="/settings/relays">
         <Icon icon={Server} /> Relays
       </SecondaryNavItem>
     </div>
-    <div in:fly|local={{delay: 100}}>
-      <SecondaryNavItem href="/settings">
-        <Icon icon={Settings} /> Settings
+    <div in:fly|local={{delay: 200}}>
+      <SecondaryNavItem href="/settings/content">
+        <Icon icon={GalleryMinimalistic} /> Content
       </SecondaryNavItem>
     </div>
-    <div in:fly|local={{delay: 150}}>
+    <div in:fly|local={{delay: 250}}>
       <SecondaryNavItem onclick={toggleTheme}>
         <Icon icon={Moon} /> Theme
       </SecondaryNavItem>
     </div>
-    <div in:fly|local={{delay: 200}}>
+    <div in:fly|local={{delay: 300}}>
       <SecondaryNavItem href="/settings/about">
         <Icon icon={InfoSquare} /> About
       </SecondaryNavItem>
     </div>
-    <div in:fly|local={{delay: 250}}>
+    <div in:fly|local={{delay: 350}}>
       <SecondaryNavItem class="text-error hover:text-error" onclick={logout}>
         <Icon icon={Exit} /> Log Out
       </SecondaryNavItem>

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import Alerts from "@app/components/Alerts.svelte"
+</script>
+
+<div class="content column">
+  <Alerts />
+</div>

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

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