Add qr scanner to discover page

src/routes/discover/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
+  import {debounce} from "throttle-debounce"
   import {dec, tryCatch} from "@welshman/lib"
   import {ROOMS, normalizeRelayUrl, isRelayUrl} from "@welshman/util"
   import {Router} from "@welshman/router"
@@ -8,15 +9,18 @@
   import {relays, createSearch, loadRelay, loadRelaySelections} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import {fly} from "@lib/transition"
+  import QrCode from "@assets/icons/qr-code.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.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 Button from "@lib/components/Button.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 SpaceCheck from "@app/components/SpaceCheck.svelte"
   import {getMembershipUrls, loadMembership, defaultPubkeys, membersByUrl} from "@app/core/state"
@@ -26,6 +30,15 @@
 
   const termUrl = $derived(tryCatch(() => normalizeRelayUrl(term)) || "")
 
+  const toggleScanner = () => {
+    showScanner = !showScanner
+  }
+
+  const onScan = debounce(1000, async (data: string) => {
+    showScanner = false
+    pushModal(SpaceInviteAccept, {invite: data})
+  })
+
   const discoverRelays = () =>
     Promise.all([
       load({
@@ -66,6 +79,7 @@
 
   let term = $state("")
   let limit = $state(20)
+  let showScanner = $state(false)
   let element: Element
 
   onMount(() => {
@@ -85,22 +99,30 @@
 <Page class="cw-full">
   <ContentSearch>
     {#snippet input()}
-      <PageHeader>
+      <div class="flex flex-col gap-2">
-        {#snippet title()}
+        <PageHeader>
-          Discover Spaces
+          {#snippet title()}
-        {/snippet}
+            Discover Spaces
-        {#snippet info()}
+          {/snippet}
-          Find communities all across the nostr network
+          {#snippet info()}
-        {/snippet}
+            Find communities all across the nostr network
-      </PageHeader>
+          {/snippet}
-      <div class="row-2 min-w-0 flex-grow items-center">
+        </PageHeader>
-        <label class="input input-bordered flex flex-grow items-center gap-2">
+        <div class="row-2 min-w-0 flex-grow items-center">
-          <Icon icon={Magnifier} />
+          <label class="input input-bordered flex flex-grow items-center gap-2">
-          <input bind:value={term} class="grow" type="text" placeholder="Search for spaces..." />
+            <Icon icon={Magnifier} />
-        </label>
+            <input bind:value={term} class="grow" type="text" placeholder="Search for spaces..." />
-        <Button class="btn btn-primary" onclick={openMenu}>
+            <Button onclick={toggleScanner} class="center">
-          <Icon icon={AddCircle} />
+              <Icon icon={QrCode} />
-        </Button>
+            </Button>
+          </label>
+          <Button class="btn btn-primary" onclick={openMenu}>
+            <Icon icon={AddCircle} />
+          </Button>
+        </div>
+        {#if showScanner}
+          <Scanner onscan={onScan} />
+        {/if}
       </div>
     {/snippet}
     {#snippet content()}