Refine space join dialogs and discover page

src/app/components/SpaceInviteAccept.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import {dissoc} from "@welshman/lib"
+  import {debounce} from "throttle-debounce"
+  import {dissoc, maybe} from "@welshman/lib"
   import {goto} from "$app/navigation"
   import {preventDefault} from "@lib/html"
   import {slideAndFade} from "@lib/transition"
@@ -10,6 +11,8 @@
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
+  import Scanner from "@lib/components/Scanner.svelte"
+  import QrCode from "@assets/icons/qr-code.svg?dataurl"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -17,10 +20,17 @@
   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 {pushToast} from "@app/util/toast"
   import {makeSpacePath} from "@app/util/routes"
-  import {relaysMostlyRestricted, parseInviteLink} from "@app/core/state"
-  import {attemptRelayAccess, addSpaceMembership, broadcastUserData} from "@app/core/commands"
+  import {Push} from "@app/util/notifications"
+  import {relaysMostlyRestricted, notificationSettings, parseInviteLink} from "@app/core/state"
+  import {
+    attemptRelayAccess,
+    addSpaceMembership,
+    broadcastUserData,
+    setSpaceNotifications,
+  } from "@app/core/commands"
 
   type Props = {
     invite: string
@@ -29,21 +39,42 @@
 
   let {invite = "", back = () => history.back()}: Props = $props()
 
+  const toggleScanner = () => {
+    showScanner = !showScanner
+  }
+
+  const onScan = debounce(1000, async (data: string) => {
+    showScanner = false
+    invite = data
+  })
+
   const joinRelay = async () => {
     const {url, claim} = inviteData!
 
-    const error = await attemptRelayAccess(url, claim)
+    error = await attemptRelayAccess(url, claim)
 
-    if (error) {
-      return pushToast({theme: "error", message: error, timeout: 30_000})
+    if (!error) {
+      if (notifications) {
+        if (!notificationSettings.get().push) {
+          await setSpaceNotifications(url, true)
+        } else {
+          const permissions = await Push.request()
+
+          if (permissions === "granted") {
+            await setSpaceNotifications(url, true)
+          }
+        }
+      } else {
+        await setSpaceNotifications(url, false)
+      }
+
+      await addSpaceMembership(url)
+      await goto(makeSpacePath(url), {replaceState: true})
+
+      broadcastUserData([url])
+      relaysMostlyRestricted.update(dissoc(url))
+      pushToast({message: "Welcome to the space!"})
     }
-
-    await addSpaceMembership(url)
-    await goto(makeSpacePath(url), {replaceState: true})
-
-    broadcastUserData([url])
-    relaysMostlyRestricted.update(dissoc(url))
-    pushToast({message: "Welcome to the space!"})
   }
 
   const join = async () => {
@@ -56,7 +87,10 @@
     }
   }
 
+  let error = $state(maybe<string>())
   let loading = $state(false)
+  let showScanner = $state(false)
+  let notifications = $state(true)
 
   const inviteData = $derived(parseInviteLink(invite))
 </script>
@@ -76,15 +110,22 @@
         <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={LinkRound} />
           <input bind:value={invite} class="grow" type="text" />
+          <Button onclick={toggleScanner} class="center">
+            <Icon icon={QrCode} />
+          </Button>
         </label>
       {/snippet}
     </Field>
+    {#if showScanner}
+      <Scanner onscan={onScan} />
+    {/if}
     {#if inviteData}
       <div class="-my-4">
         <div transition:slideAndFade class="flex flex-col gap-4 py-4">
           <div class="card2 bg-alt flex flex-col gap-4">
             <p class="opacity-75">You're about to join:</p>
             <RelaySummary url={inviteData.url} />
+            <SpaceJoinSettings url={inviteData.url} bind:error bind:notifications />
           </div>
         </div>
       </div>

src/app/components/SpaceJoin.svelte

@@ -1,21 +1,19 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {goto} from "$app/navigation"
-  import {dissoc} from "@welshman/lib"
+  import {dissoc, maybe} from "@welshman/lib"
   import {preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import DangerTriangle from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import StatusIndicator from "@lib/components/StatusIndicator.svelte"
   import RelaySummary from "@app/components/RelaySummary.svelte"
-  import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
   import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
+  import SpaceJoinSettings from "@app/components/SpaceJoinSettings.svelte"
   import {
     attemptRelayAccess,
     addSpaceMembership,
@@ -72,7 +70,7 @@
     }
   }
 
-  let error: string | undefined = $state()
+  let error = $state(maybe<string>())
   let loading = $state(true)
   let notifications = $state(true)
 
@@ -85,33 +83,7 @@
 <Modal tag="form" onsubmit={preventDefault(join)}>
   <ModalBody>
     <RelaySummary {url} />
-    <div class="card2 card2-sm bg-alt">
-      <div class="flex justify-between gap-12">
-        <div class="col-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 toggle-primary" bind:checked={notifications} />
-      </div>
-    </div>
-    <div class="card2 card2-sm bg-alt flex flex-col gap-2">
-      <div class="flex justify-between">
-        <strong>Connection Status</strong>
-        {#if error}
-          <StatusIndicator class="bg-error">Error</StatusIndicator>
-        {:else}
-          <SocketStatusIndicator {url} />
-        {/if}
-      </div>
-      {#if error}
-        <div class="flex items-center gap-2">
-          <Icon icon={DangerTriangle} />
-          <p class="text-sm opacity-75">{error}</p>
-        </div>
-      {/if}
-    </div>
+    <SpaceJoinSettings {url} bind:error bind:notifications />
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back} disabled={loading}>

src/app/components/SpaceJoinSettings.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import DangerTriangle from "@assets/icons/danger-triangle.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import StatusIndicator from "@lib/components/StatusIndicator.svelte"
+  import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
+
+  type Props = {
+    url: string
+    error?: string
+    notifications: boolean
+  }
+
+  let {url, error = $bindable(), notifications = $bindable()}: Props = $props()
+</script>
+
+<div class="card2 card2-sm bg-alt">
+  <div class="flex justify-between gap-12">
+    <div class="col-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 toggle-primary" bind:checked={notifications} />
+  </div>
+</div>
+<div class="card2 card2-sm bg-alt flex flex-col gap-2">
+  <div class="flex justify-between">
+    <strong>Connection Status</strong>
+    {#if error}
+      <StatusIndicator class="bg-error">Error</StatusIndicator>
+    {:else}
+      <SocketStatusIndicator {url} />
+    {/if}
+  </div>
+  {#if error}
+    <div class="flex items-center gap-2">
+      <Icon icon={DangerTriangle} />
+      <p class="text-sm opacity-75">{error}</p>
+    </div>
+  {/if}
+</div>

src/app/util/title.ts

@@ -8,7 +8,7 @@ const FALLBACK_APP_NAME = "Flotilla"
 const staticTitles = new Map<string, string>([
   ["/", "Redirecting"],
   ["/home", "Home"],
-  ["/discover", "Discover Spaces"],
+  ["/discover", "Join a Space"],
   ["/spaces", "Your Spaces"],
   ["/spaces/create", "Create a Space"],
   ["/spaces/[relay]", "Space"],