Rework alert settings and UI

src/app/components/SpaceAccessRequest.svelte

@@ -11,17 +11,17 @@
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import SpaceJoinConfirm, {confirmSpaceJoin} from "@app/components/SpaceJoinConfirm.svelte"
   import {pushToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
   import {attemptRelayAccess} from "@app/core/commands"
-  import {deriveSocket} from "@app/core/state"
+  import {deriveSocket, parseInviteLink} from "@app/core/state"
 
   type Props = {
     url: string
+    callback: () => void
   }
 
-  const {url}: Props = $props()
+  const {url, callback}: Props = $props()
 
   const back = () => history.back()
 
@@ -31,23 +31,20 @@
     loading = true
 
     try {
+      const claim = parseInviteLink(value)?.claim || value
       const message = await attemptRelayAccess(url, claim)
 
       if (message) {
         return pushToast({theme: "error", message, timeout: 30_000})
       }
 
-      if ($socket.auth.status === AuthStatus.None) {
-        pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
-      } else {
-        await confirmSpaceJoin(url)
-      }
+      callback()
     } finally {
       loading = false
     }
   }
 
-  let claim = $state("")
+  let value = $state("")
   let loading = $state(false)
 </script>
 
@@ -67,7 +64,7 @@
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
         <Icon icon={LinkRound} />
-        <input bind:value={claim} class="grow" type="text" />
+        <input bind:value class="grow" type="text" />
       </label>
     {/snippet}
   </Field>