Prompt to add space members when adding room members

src/app/components/RoomMembersAdd.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-  import {addRoomMember, waitForThunkError} from "@welshman/app"
+  import {onMount} from 'svelte'
+  import {setKey, popKey} from '@lib/implicit'
+  import {sleep} from "@welshman/lib"
+  import {ManagementMethod} from "@welshman/util"
+  import {manageRelay} from "@welshman/app"
+  import {addRoomMember, displayProfileByPubkey, waitForThunkError} from "@welshman/app"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -11,10 +16,12 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {pushToast} from "@app/util/toast"
-  import {deriveRoom} from "@app/core/state"
+  import {pushModal} from "@app/util/modal"
+  import {deriveRoom, deriveSpaceMembers} from "@app/core/state"
 
   interface Props {
     url: string
@@ -24,13 +31,34 @@
   const {url, h}: Props = $props()
 
   const room = deriveRoom(url, h)
+  const spaceMembers = deriveSpaceMembers(url)
 
   const back = () => history.back()
 
-  const addMember = async () => {
+  const addMembers = async () => {
     loading = true
 
     try {
+      // Show loading for auto submit callback
+      await sleep(500)
+
+      const results = await Promise.all(
+        pubkeys
+          .filter(pubkey => !$spaceMembers.includes(pubkey))
+          .map(pubkey =>
+            manageRelay(url, {
+              method: ManagementMethod.AllowPubkey,
+              params: [pubkey],
+            }),
+          ),
+      )
+
+      for (const {error} of results) {
+        if (error) {
+          return pushToast({theme: "error", message: error})
+        }
+      }
+
       const errors = await Promise.all(
         pubkeys.map(pubkey => waitForThunkError(addRoomMember(url, $room, pubkey))),
       )
@@ -48,8 +76,39 @@
     }
   }
 
+  const onSubmit = async () => {
+    const pubkeysSnapshot = $state.snapshot(pubkeys)
+    const nonSpaceMembers = pubkeysSnapshot.filter(pubkey => !$spaceMembers.includes(pubkey))
+
+    if (nonSpaceMembers.length > 0) {
+      setKey('RoomMembersAdd.pubkeys', pubkeysSnapshot)
+
+      pushModal(Confirm, {
+        title: "New Space Members",
+        subtitle: "Automatically add members to space",
+        message: nonSpaceMembers.length === 1
+          ? `${displayProfileByPubkey(nonSpaceMembers[0])} is not a member of this space. Add them?`
+          : `${nonSpaceMembers.length} people are not members of this space. Add them?`,
+        confirm: async () => {
+          setKey('RoomMembersAdd.confirm', true)
+          back()
+        },
+      })
+    } else {
+      addMembers()
+    }
+  }
+
   let loading = $state(false)
-  let pubkeys: string[] = $state([])
+  let pubkeys: string[] = $state(popKey('RoomMembersAdd.pubkeys') || [])
+
+  onMount(() => {
+    console.log('=====')
+    if (popKey('RoomMembersAdd.confirm')) {
+      console.log('hi')
+      addMembers()
+    }
+  })
 </script>
 
 <Modal>
@@ -72,7 +131,7 @@
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button class="btn btn-primary" onclick={addMember} disabled={loading}>
+    <Button class="btn btn-primary" onclick={onSubmit} disabled={loading}>
       <Spinner {loading}>Save changes</Spinner>
     </Button>
   </ModalFooter>

src/app/util/modal.ts

@@ -1,6 +1,7 @@
 import type {Component} from "svelte"
 import {derived, writable} from "svelte/store"
 import {randomId, always, assoc, Emitter} from "@welshman/lib"
+import {deriveDeduplicated} from "@welshman/store"
 import {goto} from "$app/navigation"
 import {page} from "$app/stores"
 
@@ -23,7 +24,7 @@ export const emitter = new Emitter()
 
 export const modals = writable<Record<string, Modal>>({})
 
-export const modal = derived([page, modals], ([$page, $modals]) => {
+export const modal = deriveDeduplicated([page, modals], ([$page, $modals]) => {
   return $modals[$page.url.hash.slice(1)]
 })