Add step to confirm decrypt before doing it in the background

src/app/components/ChatEnable.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import {goto} from "$app/navigation"
+  import {WRAP} from "@welshman/util"
+  import {repository} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import {canDecrypt, PLATFORM_NAME, ensureUnwrapped} from "@app/state"
+  import {clearModals} from "@app/modal"
+
+  let loading = false
+
+  const enableChat = async () => {
+    canDecrypt.set(true)
+
+    for (const event of repository.query([{kinds: [WRAP]}])) {
+      ensureUnwrapped(event)
+    }
+
+    clearModals()
+    goto("/chat")
+  }
+
+  const submit = async () => {
+    loading = true
+
+    try {
+      await enableChat()
+    } finally {
+      loading = false
+    }
+  }
+
+  const back = () => history.back()
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={submit}>
+  <ModalHeader>
+    <div slot="title">Enable Chat</div>
+    <div slot="info">Do you want to enable direct messages?</div>
+  </ModalHeader>
+  <p>
+    By default, direct messages are disabled, since loading them requires
+    {PLATFORM_NAME} to download and decrypt a lot of data.
+  </p>
+  <p>
+    If you'd like to enable direct messages, please make sure your signer is set up to to
+    auto-approve requests to decrypt data.
+  </p>
+  <ModalFooter>
+    <Button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Enable Chat</Spinner>
+      <Icon icon="alt-arrow-right" />
+    </Button>
+  </ModalFooter>
+</form>

src/app/components/PrimaryNav.svelte

@@ -1,13 +1,21 @@
 <script lang="ts">
+  import {goto} from "$app/navigation"
   import {userProfile} from "@welshman/app"
   import Avatar from "@lib/components/Avatar.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
+  import ChatEnable from "@app/components/ChatEnable.svelte"
   import MenuSpaces from "@app/components/MenuSpaces.svelte"
   import MenuSettings from "@app/components/MenuSettings.svelte"
   import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
-  import {userMembership, getMembershipUrls, PLATFORM_RELAY, PLATFORM_LOGO} from "@app/state"
+  import {
+    userMembership,
+    getMembershipUrls,
+    canDecrypt,
+    PLATFORM_RELAY,
+    PLATFORM_LOGO,
+  } from "@app/state"
   import {pushModal} from "@app/modal"
   import {deriveNotification, inactiveSpacesNotifications, CHAT_FILTERS} from "@app/notifications"
 
@@ -19,6 +27,8 @@
     getMembershipUrls($userMembership).length > 0 ? pushModal(MenuSpaces) : pushModal(SpaceAdd)
 
   const showSettingsMenu = () => pushModal(MenuSettings)
+
+  const openChat = () => ($canDecrypt ? goto("/chat") : pushModal(ChatEnable))
 </script>
 
 <div class="relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
@@ -52,7 +62,7 @@
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
-        href="/chat"
+        on:click={openChat}
         class="tooltip-right"
         notification={$chatNotification}>
         <Avatar icon="letter" class="!h-10 !w-10" />
@@ -76,7 +86,7 @@
       <PrimaryNavItem title="Notes" href="/notes">
         <Avatar icon="notes-minimalistic" class="!h-10 !w-10" />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Messages" href="/chat" notification={$chatNotification}>
+      <PrimaryNavItem title="Messages" on:click={openChat} notification={$chatNotification}>
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>
       <PrimaryNavItem

src/app/state.ts

@@ -59,7 +59,7 @@ import {
 } from "@welshman/app"
 import type {AppSyncOpts} from "@welshman/app"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
-import {deriveEvents, deriveEventsMapped, withGetter} from "@welshman/store"
+import {deriveEvents, deriveEventsMapped, withGetter, synced} from "@welshman/store"
 
 export const ROOM = "~"
 
@@ -278,6 +278,8 @@ export const deriveEventsForUrl = (url: string, filters: Filter[]) =>
 
 // Settings
 
+export const canDecrypt = synced("canDecrypt", false)
+
 export const SETTINGS = 38489
 
 export type Settings = {

src/routes/+layout.svelte

@@ -55,6 +55,7 @@
     getMembershipRooms,
     userMembership,
     ensureUnwrapped,
+    canDecrypt,
     MESSAGE,
     COMMENT,
     THREAD,
@@ -171,6 +172,10 @@
       unwrapper.addGlobalHandler(ensureUnwrapped)
 
       repository.on("update", ({added}) => {
+        if (!$canDecrypt) {
+          return
+        }
+
         for (const event of added) {
           if (event.kind === WRAP) {
             unwrapper.push(event)