fix: turn on notification defaults and prompt on first DM visit (#284)

Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com>
Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>

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/core/state.ts

@@ -418,7 +418,7 @@ export const device = withGetter(writable(randomId()))
 export const notificationSettings = withGetter(
   writable({
     push: false,
-    sound: false,
+    sound: true,
     badge: false,
     spaces: true,
     mentions: true,

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

@@ -18,7 +18,6 @@ import {
 } from "@app/core/state"
 import {kv} from "@app/core/storage"
 import {page} from "$app/stores"
-export {Push} from "@app/util/push"
 
 // 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,13 +1,51 @@
+<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 {page} from "$app/stores"
   import type {MakeNonOptional} from "@welshman/lib"
   import {append, uniq} from "@welshman/lib"
   import {pubkey} from "@welshman/app"
   import Chat from "@app/components/Chat.svelte"
   import {splitChatId} from "@app/core/state"
+  import {notificationSettings} 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(async () => {
+    if (!$dmNotificationsPrompted) {
+      dmNotificationsPrompted.set(true)
+
+      const permission = await Push.request()
+
+      if (!permission.startsWith("granted")) {
+        return pushToast({
+          theme: "error",
+          message: `Failed to request notification permissions (${permission}).`,
+        })
+      }
+
+      notificationSettings.update(current => ({
+        ...current,
+        push: true,
+        messages: true,
+      }))
+
+      pushToast({message: "Notifications enabled!"})
+    }
+  })
 </script>
 
 <Chat {pubkeys} />

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 = () => {