Refine space join dialogs and discover page

check.sh

@@ -1,7 +0,0 @@
-#!/usr/bin/env zsh
-
-onchange src -ik -- npx svelte-kit sync &
-
-onchange src -ik -- bash -c 'unbuffer npx svelte-check --tsconfig ./tsconfig.json | less -R' &
-
-wait

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"],

src/routes/discover/+page.svelte

@@ -1,39 +1,30 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {derived as _derived} from "svelte/store"
-  import {debounce} from "throttle-debounce"
   import {dec, sleep} from "@welshman/lib"
   import type {RelayProfile} from "@welshman/util"
   import {throttled} from "@welshman/store"
   import {relays, createSearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
-  import QrCode from "@assets/icons/qr-code.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import Login from "@assets/icons/login-3.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
-  import Scanner from "@lib/components/Scanner.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import Divider from "@lib/components/Divider.svelte"
   import Button from "@lib/components/Button.svelte"
+  import CardButton from "@lib/components/CardButton.svelte"
+  import Link from "@lib/components/Link.svelte"
   import PageHeader from "@lib/components/PageHeader.svelte"
   import ContentSearch from "@lib/components/ContentSearch.svelte"
-  import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import RelaySummary from "@app/components/RelaySummary.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import {groupListPubkeysByUrl, parseInviteLink} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
 
-  const openMenu = () => pushModal(SpaceAdd, {hideDiscover: true})
-
-  const toggleScanner = () => {
-    showScanner = !showScanner
-  }
-
-  const onScan = debounce(1000, async (data: string) => {
-    showScanner = false
-    pushModal(SpaceInviteAccept, {invite: data})
-  })
+  const startJoin = () => pushModal(SpaceInviteAccept)
 
   const relaySearch = _derived(throttled(1000, relays), $relays => {
     const options = $relays.filter(r => $groupListPubkeysByUrl.has(r.url))
@@ -64,7 +55,6 @@
 
   let term = $state("")
   let limit = $state(20)
-  let showScanner = $state(false)
   let element: Element
 
   const options = $derived($relaySearch.searchOptions(term).filter(r => r.url !== inviteData?.url))
@@ -90,36 +80,51 @@
       <div class="flex flex-col gap-2">
         <PageHeader>
           {#snippet title()}
-            Discover Spaces
+            Join a Space
           {/snippet}
           {#snippet info()}
             Find communities all across the nostr network
           {/snippet}
         </PageHeader>
-        <div class="row-2 min-w-0 flex-grow items-center">
-          <label class="input input-bordered flex flex-grow items-center gap-2">
-            <Icon icon={Magnifier} />
-            <input
-              bind:value={term}
-              class="grow"
-              type="text"
-              placeholder="Search for spaces or paste invite link..." />
-            <Button onclick={toggleScanner} class="center">
-              <Icon icon={QrCode} />
-            </Button>
-          </label>
-          <Button class="btn btn-primary" onclick={openMenu}>
-            <Icon icon={AddCircle} />
-            <span class="hidden sm:inline">Add Space</span>
+        <div class="grid gap-3 sm:grid-cols-2">
+          <Button onclick={startJoin} class="w-full">
+            <CardButton class="btn-primary w-full">
+              {#snippet icon()}
+                <div><Icon icon={Login} size={7} /></div>
+              {/snippet}
+              {#snippet title()}
+                <div>Join with an invite</div>
+              {/snippet}
+              {#snippet info()}
+                <div>Paste a link and jump right in.</div>
+              {/snippet}
+            </CardButton>
           </Button>
+          <Link href="/spaces/create" class="w-full">
+            <CardButton class="btn-neutral w-full">
+              {#snippet icon()}
+                <div><Icon icon={AddCircle} size={7} /></div>
+              {/snippet}
+              {#snippet title()}
+                <div>Create a new space</div>
+              {/snippet}
+              {#snippet info()}
+                <div>Launch a place for your people.</div>
+              {/snippet}
+            </CardButton>
+          </Link>
+        </div>
+        <Divider>Or</Divider>
+        <div class="min-w-0">
+          <label class="input input-bordered flex items-center gap-2">
+            <Icon icon={Magnifier} />
+            <input bind:value={term} class="grow" type="text" placeholder="Search for spaces..." />
+          </label>
         </div>
-        {#if showScanner}
-          <Scanner onscan={onScan} />
-        {/if}
       </div>
     {/snippet}
     {#snippet content()}
-      <div class="col-2 scroll-container" bind:this={element}>
+      <div class="col-2" bind:this={element}>
         {#if inviteData}
           {#key inviteData.url}
             <Button