Split up spacejoin settings

src/app/components/SpaceInviteAccept.svelte

@@ -19,7 +19,8 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import RelaySummary from "@app/components/RelaySummary.svelte"
-  import SpaceJoinSettings from "@app/components/SpaceJoinSettings.svelte"
+  import SpaceJoinNotifications from "@app/components/SpaceJoinNotifications.svelte"
+  import SpaceJoinStatus from "@app/components/SpaceJoinStatus.svelte"
   import {pushToast} from "@app/toast"
   import {goToSpace} from "@app/routes"
   import {relaysMostlyRestricted} from "@app/policies"
@@ -126,7 +127,8 @@
           <div class="card flex flex-col gap-4">
             <p class="opacity-75">You're about to join:</p>
             <RelaySummary url={inviteData.url} />
-            <SpaceJoinSettings url={inviteData.url} {error} bind:notifications />
+            <SpaceJoinNotifications bind:notifications />
+            <SpaceJoinStatus url={inviteData.url} {error} />
           </div>
         </div>
       </div>

src/app/components/SpaceJoin.svelte

@@ -12,7 +12,8 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import RelaySummary from "@app/components/RelaySummary.svelte"
   import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
-  import SpaceJoinSettings from "@app/components/SpaceJoinSettings.svelte"
+  import SpaceJoinNotifications from "@app/components/SpaceJoinNotifications.svelte"
+  import SpaceJoinStatus from "@app/components/SpaceJoinStatus.svelte"
   import {attemptRelayAccess} from "@app/relays"
   import {addSpace} from "@app/groups"
   import {broadcastUserData} from "@app/profiles"
@@ -81,7 +82,8 @@
 <Modal tag="form" onsubmit={preventDefault(join)}>
   <ModalBody>
     <RelaySummary {url} />
-    <SpaceJoinSettings {url} {error} bind:notifications />
+    <SpaceJoinNotifications bind:notifications />
+    <SpaceJoinStatus {url} {error} />
   </ModalBody>
   <ModalFooter>
     <Button class="button button-link" onclick={back} disabled={loading}>

src/app/components/SpaceJoinNotifications.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  type Props = {
+    notifications: boolean
+  }
+
+  let {notifications = $bindable()}: Props = $props()
+</script>
+
+<div class="card card-sm">
+  <div class="flex justify-between gap-12">
+    <div class="flex flex-col gap-1">
+      <strong>Enable notifications for this space</strong>
+      <p class="text-xs opacity-75">
+        Get notified about new activity in this space. You can change this later in settings.
+      </p>
+    </div>
+    <input type="checkbox" class="toggle" bind:checked={notifications} />
+  </div>
+</div>

src/app/components/SpaceJoinStatus.svelte

@@ -7,23 +7,11 @@
   type Props = {
     url: string
     error?: string
-    notifications: boolean
   }
 
-  let {url, error, notifications = $bindable()}: Props = $props()
+  const {url, error}: Props = $props()
 </script>
 
-<div class="card card-sm">
-  <div class="flex justify-between gap-12">
-    <div class="flex flex-col gap-1">
-      <strong>Enable notifications for this space</strong>
-      <p class="text-xs opacity-75">
-        Get notified about new activity in this space. You can change this later in settings.
-      </p>
-    </div>
-    <input type="checkbox" class="toggle" bind:checked={notifications} />
-  </div>
-</div>
 <div class="card card-sm flex flex-col gap-2">
   <div class="flex justify-between">
     <strong>Connection Status</strong>