Always join spaces when visiting them

src/app/components/SpaceAuthError.svelte

@@ -12,12 +12,29 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
   import {pushModal} from "@app/util/modal"
+  import {removeSpaceMembership, publishLeaveRequest, removeTrustedRelay} from "@app/core/commands"
 
   const {url, error} = $props()
 
   const back = () => goto("/home")
 
   const requestAccess = () => pushModal(SpaceAccessRequest, {url})
+
+  const leaveSpace = async () => {
+    loading = true
+
+    try {
+      await removeSpaceMembership(url)
+      await publishLeaveRequest({url})
+      await removeTrustedRelay(url)
+    } finally {
+      loading = false
+    }
+
+    goto("/home")
+  }
+
+  let loading = $state(false)
 </script>
 
 <form class="column gap-4" onsubmit={preventDefault(requestAccess)}>
@@ -40,9 +57,14 @@
       <Icon icon={AltArrowLeft} />
       Go Home
     </Button>
-    <Button type="submit" class="btn btn-primary">
+    <div class="flex gap-2">
-      Request Access
+      <Button class="btn btn-outline btn-error" onclick={leaveSpace} disabled={loading}>
-      <Icon icon={AltArrowRight} />
+        Leave Space
-    </Button>
+      </Button>
+      <Button type="submit" class="btn btn-primary" disabled={loading}>
+        Request Access
+        <Icon icon={AltArrowRight} />
+      </Button>
+    </div>
   </ModalFooter>
 </form>

src/app/components/SpaceCheck.svelte

@@ -10,19 +10,24 @@
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import SpaceVisitConfirm, {confirmSpaceVisit} from "@app/components/SpaceVisitConfirm.svelte"
+  import SpaceJoinConfirm, {confirmSpaceJoin} from "@app/components/SpaceJoinConfirm.svelte"
   import {attemptRelayAccess} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
 
   const {url} = $props()
 
   const back = () => history.back()
 
-  const next = () => {
+  const next = async () => {
-    if (!error && Pool.get().get(url).auth.status === AuthStatus.None) {
+    if (error) {
-      pushModal(SpaceVisitConfirm, {url}, {replaceState: true})
+      return pushToast({theme: "error", message: error, timeout: 30_000})
+    }
+
+    if (Pool.get().get(url).auth.status === AuthStatus.None) {
+      pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
     } else {
-      confirmSpaceVisit(url)
+      await confirmSpaceJoin(url)
     }
   }
 
@@ -72,7 +77,7 @@
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
-      Go to Space
+      Join Space
       <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>

src/app/components/SpaceVisitConfirm.svelte

@@ -1,24 +0,0 @@
-<script module lang="ts">
-  import {goto} from "$app/navigation"
-  import {makeSpacePath} from "@app/util/routes"
-
-  export const confirmSpaceVisit = (url: string) => {
-    goto(makeSpacePath(url), {replaceState: true})
-  }
-</script>
-
-<script lang="ts">
-  import Confirm from "@lib/components/Confirm.svelte"
-
-  type Props = {
-    url: string
-  }
-
-  const {url}: Props = $props()
-
-  const confirm = () => confirmSpaceVisit(url)
-</script>
-
-<Confirm
-  {confirm}
-  message="This space does not appear to limit who can post to it. This can result in a large amount of spam or other objectionable content. Continue?" />