fix: turn on notification defaults and prompt on first DM visit

src/app/components/EnableNotificationsPrompt.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-  import Bell from "@assets/icons/bell.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import {enableNotifications} from "@app/util/notifications"
-  import {pushToast} from "@app/util/toast"
-
-  const dismiss = () => history.back()
-
-  const enable = async () => {
-    loading = true
-
-    try {
-      if (await enableNotifications()) {
-        pushToast({message: "Notifications enabled!"})
-        dismiss()
-      } else {
-        pushToast({
-          theme: "error",
-          message: "Failed to request notification permissions.",
-        })
-      }
-    } finally {
-      loading = false
-    }
-  }
-
-  let loading = $state(false)
-</script>
-
-<Modal>
-  <ModalBody>
-    <ModalHeader>
-      <div class="flex justify-center">
-        <Icon icon={Bell} size={6} />
-      </div>
-      <ModalTitle>Enable notifications</ModalTitle>
-      <ModalSubtitle>
-        Get notified when you receive new direct messages, even when Flotilla is in the background.
-      </ModalSubtitle>
-    </ModalHeader>
-  </ModalBody>
-  <ModalFooter>
-    <Button class="btn btn-ghost" onclick={dismiss} disabled={loading}>Not now</Button>
-    <Button class="btn btn-primary" onclick={enable} disabled={loading}>
-      <Spinner {loading}>Enable</Spinner>
-    </Button>
-  </ModalFooter>
-</Modal>

src/app/components/SpaceInviteAccept.svelte

@@ -23,8 +23,8 @@
   import SpaceJoinSettings from "@app/components/SpaceJoinSettings.svelte"
   import {pushToast} from "@app/util/toast"
   import {makeSpacePath} from "@app/util/routes"
-  import {Push} from "@app/util/notifications"
   import {relaysMostlyRestricted, notificationSettings, parseInviteLink} from "@app/core/state"
+  import {Push} from "@app/util/push"
   import {
     attemptRelayAccess,
     addSpaceMembership,

src/app/components/SpaceJoin.svelte

@@ -24,7 +24,7 @@
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
   import {makeSpacePath} from "@app/util/routes"
-  import {Push} from "@app/util/notifications"
+  import {Push} from "@app/util/push"
 
   type Props = {
     url: string

src/app/util/logout.ts

@@ -1,6 +1,6 @@
 import {db, kv, ss} from "@app/core/storage"
-import {Push} from "@app/util/notifications"
 import {deactivateCurrentPomadeSession} from "@app/util/pomade"
+import {Push} from "@app/util/push"
 
 export const logout = async () => {
   await deactivateCurrentPomadeSession()

src/app/util/notifications.ts

@@ -1,5 +1,4 @@
 import {derived, get, writable} from "svelte/store"
-import {Capacitor} from "@capacitor/core"
 import {Badge} from "@capawesome/capacitor-badge"
 import {synced, throttled, withGetter} from "@welshman/store"
 import {pubkey, tracker, repository, relaysByUrl} from "@welshman/app"
@@ -11,7 +10,6 @@ import {makeSpacePath, makeRoomPath, makeSpaceChatPath, makeChatPath} from "@app
 import {
   CONTENT_KINDS,
   notificationSettings,
-  pushState,
   chatsById,
   userGroupList,
   getSpaceUrlsFromGroupList,
@@ -20,49 +18,6 @@ import {
 } from "@app/core/state"
 import {kv} from "@app/core/storage"
 import {page} from "$app/stores"
-import {Push} from "@app/util/push"
-
-export {Push}
-
-export const areNotificationsEnabled = () => {
-  const {push, messages} = notificationSettings.get()
-
-  if (!push || !messages) {
-    return false
-  }
-
-  if (Capacitor.isNativePlatform()) {
-    return Boolean(pushState.get().token)
-  }
-
-  return Notification?.permission === "granted"
-}
-
-export const enableNotifications = async () => {
-  const permission = await Push.request()
-
-  if (!permission.startsWith("granted")) {
-    return false
-  }
-
-  const current = notificationSettings.get()
-
-  notificationSettings.set({
-    ...current,
-    push: true,
-    badge: true,
-    sound: Capacitor.isNativePlatform() ? current.sound : true,
-    messages: true,
-  })
-
-  return true
-}
-
-export const dmNotificationsPrompted = synced({
-  key: "dmNotificationsPrompted",
-  defaultValue: false,
-  storage: kv,
-})
 
 // Checked state
 

src/routes/+layout.svelte

@@ -37,6 +37,7 @@
   import {theme} from "@app/util/theme"
   import {toast, pushToast} from "@app/util/toast"
   import * as notifications from "@app/util/notifications"
+  import {Push} from "@app/util/push"
   import {onPushNotificationAction} from "@app/util/push/adapters/common"
   import * as storage from "@app/util/storage"
   import {syncKeyboard} from "@app/util/keyboard"
@@ -175,7 +176,7 @@
     unsubscribers.push(notifications.syncChecked())
 
     // Initialize background notifications
-    unsubscribers.push(notifications.Push.sync())
+    unsubscribers.push(Push.sync())
 
     // Listen for signer errors, report to user via toast
     unsubscribers.push(

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

@@ -1,23 +1,69 @@
+<script context="module" lang="ts">
+  import {synced} from "@welshman/store"
+  import {kv} from "@app/core/storage"
+
+  const dmNotificationsPrompted = synced({
+    key: "dmNotificationsPrompted",
+    defaultValue: false,
+    storage: kv,
+  })
+</script>
+
 <script lang="ts">
   import {onMount} from "svelte"
-  import {get} from "svelte/store"
   import {page} from "$app/stores"
+  import {get} from "svelte/store"
   import type {MakeNonOptional} from "@welshman/lib"
   import {append, uniq} from "@welshman/lib"
+  import {Capacitor} from "@capacitor/core"
   import {pubkey} from "@welshman/app"
   import Chat from "@app/components/Chat.svelte"
-  import EnableNotificationsPrompt from "@app/components/EnableNotificationsPrompt.svelte"
   import {splitChatId} from "@app/core/state"
-  import {areNotificationsEnabled, dmNotificationsPrompted} from "@app/util/notifications"
-  import {pushModal} from "@app/util/modal"
+  import {notificationSettings, pushState} from "@app/core/state"
+  import {pushToast} from "@app/util/toast"
+  import {Push} from "@app/util/push"
 
   const {chat} = $page.params as MakeNonOptional<typeof $page.params>
   const pubkeys = uniq(append($pubkey!, splitChatId(chat)))
 
   onMount(() => {
-    if (!areNotificationsEnabled() && !get(dmNotificationsPrompted)) {
+    if (!get(dmNotificationsPrompted)) {
       dmNotificationsPrompted.set(true)
-      pushModal(EnableNotificationsPrompt)
+
+      const enableDMNotificationsAndShowToast = async () => {
+        const {push, messages} = notificationSettings.get()
+
+        if (push && messages) {
+          if (Capacitor.isNativePlatform()) {
+            if (pushState.get().token) return
+          } else {
+            if (Notification?.permission === "granted") return
+          }
+        }
+
+        const permission = await Push.request()
+
+        if (!permission.startsWith("granted")) {
+          return pushToast({
+            theme: "error",
+            message: `Failed to request notification permissions (${permission}).`,
+          })
+        }
+
+        const current = notificationSettings.get()
+
+        notificationSettings.set({
+          ...current,
+          push: true,
+          badge: true,
+          sound: Capacitor.isNativePlatform() ? current.sound : true,
+          messages: true,
+        })
+
+        pushToast({message: "Notifications enabled!"})
+      }
+
+      enableDMNotificationsAndShowToast()
     }
   })
 </script>

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

@@ -10,7 +10,8 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {pushToast} from "@app/util/toast"
-  import {Push, clearBadges} from "@app/util/notifications"
+  import {clearBadges} from "@app/util/notifications"
+  import {Push} from "@app/util/push"
   import {notificationSettings} from "@app/core/state"
 
   const reset = () => {