fix: include MESSAGE kind and local matches in space search

The emoji grid wasn't rendering on Android because emoji-picker-element
defaults to fetching its data.json from jsdelivr, and CapacitorHttp's
patched fetch breaks the library's ETag-based revalidation flow. Bundle
emoji-picker-element-data via Vite's ?url import so the JSON ships as a
same-origin asset.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package.json

@@ -85,6 +85,7 @@
     "date-picker-svelte": "^2.17.0",
     "dotenv": "^16.6.1",
     "emoji-picker-element": "^1.28.1",
+    "emoji-picker-element-data": "^1.8.0",
     "fuse.js": "^7.1.0",
     "husky": "^9.1.7",
     "idb": "^8.0.3",

pnpm-lock.yaml

@@ -137,6 +137,9 @@ importers:
       emoji-picker-element:
         specifier: ^1.28.1
         version: 1.28.1
+      emoji-picker-element-data:
+        specifier: ^1.8.0
+        version: 1.8.0
       fuse.js:
         specifier: ^7.1.0
         version: 7.1.0
@@ -2824,6 +2827,9 @@ packages:
     resolution: {integrity: sha512-wkgGT6kugeQk/P6VZ/f4T+4HB41BVgNBq5CDIZVbQ02nvTVqAiVTbskxxu3eA/X96lMlfYOwnLQpN2v5E1zDEg==}
     engines: {node: '>= 0.4.0'}
 
+  emoji-picker-element-data@1.8.0:
+    resolution: {integrity: sha512-VfRuRJNEDLS1JKlNS4olaqhjX5S1nnZ+ZHG73b/dV8QeZyi0yPruTPEE72EmF6XO3k/9hj3lybMIYMOYXb/57A==}
+
   emoji-picker-element@1.28.1:
     resolution: {integrity: sha512-8c64IPish2PWoV9oYCo2pvuPHwIv+uK9bO0dfpPyMupDAvaWL9ZvYhWNTAR+2sx7BhfRjciImqP6CIUgNX+DMg==}
 
@@ -8028,6 +8034,8 @@ snapshots:
     dependencies:
       sax: 1.1.4
 
+  emoji-picker-element-data@1.8.0: {}
+
   emoji-picker-element@1.28.1: {}
 
   emoji-regex@8.0.0: {}

src/app/components/KeyDownload.svelte

@@ -15,6 +15,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
   import {pushToast} from "@app/util/toast"
   import {PLATFORM_NAME} from "@app/core/state"
 
@@ -22,9 +23,11 @@
     secret: string
     next: () => unknown
     submitText?: string
+    step?: number
+    totalSteps?: number
   }
 
-  const {secret, next, submitText = "Continue"}: Props = $props()
+  const {secret, next, submitText = "Continue", step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 
@@ -150,6 +153,9 @@
       </Button>
     </div>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />

src/app/components/ProfileEditForm.svelte

@@ -23,9 +23,10 @@
     onsubmit: (values: Values) => void
     isSignup?: boolean
     footer: Snippet
+    progressBar?: Snippet
   }
 
-  const {initialValues, isSignup, onsubmit, footer}: Props = $props()
+  const {initialValues, isSignup, onsubmit, footer, progressBar}: Props = $props()
 
   const values = $state(initialValues)
 
@@ -103,6 +104,9 @@
       </Field>
     {/if}
   </ModalBody>
+  {#if progressBar}
+    {@render progressBar()}
+  {/if}
   <ModalFooter>
     {@render footer()}
   </ModalFooter>

src/app/components/ProgressBar.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  const {current, total}: {current: number; total: number} = $props()
+</script>
+
+<div class="flex w-full">
+  {#each Array(total) as _, i}
+    <div class="h-1 flex-1 transition-colors {i < current ? 'bg-primary' : 'bg-base-300'}"></div>
+  {/each}
+</div>

src/app/components/SignUp.svelte

@@ -62,9 +62,10 @@
 
   const flows = {
     email: {
-      start: () => pushModal(SignUpEmail, {next: flows.email.profile}),
-      profile: () => pushModal(SignUpProfile, {next: flows.email.complete}),
-      complete: () => pushModal(SignUpComplete, {next: flows.email.finalize}),
+      start: () => pushModal(SignUpEmail, {next: flows.email.profile, step: 1, totalSteps: 3}),
+      profile: () => pushModal(SignUpProfile, {next: flows.email.complete, step: 2, totalSteps: 3}),
+      complete: () =>
+        pushModal(SignUpComplete, {next: flows.email.finalize, step: 3, totalSteps: 3}),
       finalize: () => {
         const email = getKey<string>("signup.email")!
         const clientOptions = getKey<ClientOptions>("signup.clientOptions")!
@@ -74,9 +75,10 @@
       },
     },
     nostr: {
-      start: () => pushModal(SignUpProfile, {next: flows.nostr.key}),
-      key: () => pushModal(SignUpKey, {next: flows.nostr.complete}),
-      complete: () => pushModal(SignUpComplete, {next: flows.nostr.finalize}),
+      start: () => pushModal(SignUpProfile, {next: flows.nostr.key, step: 1, totalSteps: 3}),
+      key: () => pushModal(SignUpKey, {next: flows.nostr.complete, step: 2, totalSteps: 3}),
+      complete: () =>
+        pushModal(SignUpComplete, {next: flows.nostr.finalize, step: 3, totalSteps: 3}),
       finalize: () => {
         const secret = getKey<string>("signup.secret")!
 

src/app/components/SignUpComplete.svelte

@@ -9,12 +9,15 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 </script>
@@ -33,6 +36,9 @@
       on groups you've already joined. Click below to get started!
     </p>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />

src/app/components/SignUpEmail.svelte

@@ -18,14 +18,17 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SignUpEmailConfirm from "@app/components/SignUpEmailConfirm.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
   import {pushToast, popToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 
@@ -81,7 +84,7 @@
       setKey("signup.clientOptions", clientOptions)
 
       popToast(toastId)
-      pushModal(SignUpEmailConfirm, {next})
+      pushModal(SignUpEmailConfirm, {next, step, totalSteps})
     } catch (e) {
       console.error(e)
 
@@ -139,6 +142,9 @@
       {/snippet}
     </FieldInline>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />

src/app/components/SignUpEmailConfirm.svelte

@@ -15,12 +15,15 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const email = getKey<string>("signup.email")
 
@@ -61,6 +64,9 @@
       above.
     </p>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />

src/app/components/SignUpKey.svelte

@@ -4,11 +4,13 @@
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const secret = getKey<string>("signup.secret")!
 </script>
 
-<KeyDownload {secret} {next} />
+<KeyDownload {secret} {next} {step} {totalSteps} />

src/app/components/SignUpProfile.svelte

@@ -5,15 +5,16 @@
   import {getKey, setKey} from "@lib/implicit"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components/ModalBody.svelte"
   import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const profile = getKey<Profile>("signup.profile")!
 
@@ -27,19 +28,20 @@
   }
 </script>
 
-<Modal>
-  <ModalBody>
-    <ProfileEditForm isSignup {initialValues} {onsubmit}>
-      {#snippet footer()}
-        <Button class="btn btn-link" onclick={back}>
-          <Icon icon={AltArrowLeft} />
-          Go back
-        </Button>
-        <Button class="btn btn-primary" type="submit">
-          Create Account
-          <Icon icon={AltArrowRight} />
-        </Button>
-      {/snippet}
-    </ProfileEditForm>
-  </ModalBody>
-</Modal>
+<ProfileEditForm isSignup {initialValues} {onsubmit}>
+  {#snippet footer()}
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" type="submit">
+      Create Account
+      <Icon icon={AltArrowRight} />
+    </Button>
+  {/snippet}
+  {#snippet progressBar()}
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
+  {/snippet}
+</ProfileEditForm>

src/app/components/SpaceSearch.svelte

@@ -2,9 +2,10 @@
   import {tick} from "svelte"
   import {debounce} from "throttle-debounce"
   import {request} from "@welshman/net"
-  import {formatTimestampAsDate, groupBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
+  import {repository, tracker} from "@welshman/app"
+  import {formatTimestampAsDate, groupBy, uniqBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
   import type {TrustedEvent, Filter} from "@welshman/util"
-  import {sortEventsDesc} from "@welshman/util"
+  import {MESSAGE, sortEventsDesc} from "@welshman/util"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import {fly} from "@lib/transition"
@@ -53,8 +54,11 @@
 
   const getFilter = (searchTerm: string): Filter =>
     h
-      ? {kinds: CONTENT_KINDS, "#h": [h], search: searchTerm}
-      : {kinds: CONTENT_KINDS, search: searchTerm}
+      ? {kinds: [MESSAGE, ...CONTENT_KINDS], "#h": [h], search: searchTerm}
+      : {kinds: [MESSAGE, ...CONTENT_KINDS], search: searchTerm}
+
+  const getLocalResults = (filter: Filter) =>
+    repository.query([filter]).filter(event => tracker.getRelays(event.id).has(url))
 
   const search = debounce(300, async (searchTerm: string) => {
     controller?.abort()
@@ -68,18 +72,23 @@
     controller = new AbortController()
     loading = true
 
+    const filter = getFilter(searchTerm.trim())
+    const localResults = getLocalResults(filter)
+
+    results = sortEventsDesc(localResults)
+
     try {
       const events = await request({
         relays: getRelayUrls(),
         autoClose: true,
         signal: controller.signal,
-        filters: [getFilter(searchTerm.trim())],
+        filters: [filter],
       })
 
-      results = sortEventsDesc(events)
+      results = sortEventsDesc(uniqBy((e: TrustedEvent) => e.id, [...events, ...localResults]))
     } catch (error) {
       if (!(error instanceof DOMException && error.name === "AbortError")) {
-        results = []
+        results = sortEventsDesc(localResults)
       }
     } finally {
       loading = false

src/lib/components/EmojiPicker.svelte

@@ -10,6 +10,7 @@
 
 <script lang="ts">
   import "emoji-picker-element"
+  import emojiDataUrl from "emoji-picker-element-data/en/emojibase/data.json?url"
   import type {Emoji} from "emoji-picker-element/shared"
   import {onMount} from "svelte"
 
@@ -26,4 +27,4 @@
   })
 </script>
 
-<emoji-picker bind:this={element} class="m-auto"></emoji-picker>
+<emoji-picker bind:this={element} data-source={emojiDataUrl} class="m-auto"></emoji-picker>

src/routes/spaces/create/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Server from "@assets/icons/server.svg?dataurl"
+  import CloudCheck from "@assets/icons/cloud-check.svg?dataurl"
+  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
@@ -12,78 +14,91 @@
   <PageContent class="flex flex-col items-center gap-2 p-2 pt-4">
     <PageHeader>
       {#snippet title()}
-        <div>Create your own Space</div>
+        <div>Choose your Hosting Plan</div>
       {/snippet}
       {#snippet info()}
-        <p>Get started with one of our trusted partners, or learn how to host your own space.</p>
+        <p>
+          Select how you want to deploy and manage your new Space. You can always migrate later.
+        </p>
       {/snippet}
     </PageHeader>
-    <div class="grid w-full max-w-lg grid-cols-1 gap-2 lg:max-w-4xl lg:grid-cols-2">
-      <div class="card2 bg-alt flex flex-col gap-4">
-        <div class="flex flex-col gap-4">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-3">
-              <Icon icon={Server} />
-              <h3 class="text-lg font-bold">Self-Host your Space</h3>
+    <div class="flex w-full max-w-lg flex-col gap-4 lg:max-w-4xl">
+      <div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
+        <div class="card2 bg-alt flex flex-col gap-5">
+          <div class="flex flex-col gap-3">
+            <div class="bg-primary/20 flex h-10 w-10 items-center justify-center rounded-md">
+              <Icon icon={CloudCheck} class="text-primary" />
             </div>
-            <div class="badge badge-neutral">Recommended</div>
+            <div class="flex flex-col gap-1">
+              <h3 class="text-lg font-bold">Community</h3>
+              <div class="text-xs font-semibold tracking-wider opacity-60">SELF-HOSTED</div>
+            </div>
+            <p class="text-sm opacity-70">
+              For technical users who want full control. Deploy on your own infrastructure and
+              manage your own updates and scaling.
+            </p>
           </div>
-          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
-            <li>Unlimited customization and control</li>
-            <li>Free and open source software</li>
-            <li>Full-featured admin dashboards available</li>
-            <li>Requires some technical skills</li>
+          <ul class="flex flex-col gap-2 text-sm">
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="opacity-60" />
+              Open source core
+            </li>
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="opacity-60" />
+              Community support
+            </li>
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="opacity-60" />
+              Bring your own infra
+            </li>
           </ul>
+          <Link
+            external
+            class="btn btn-neutral mt-auto"
+            href="https://gitea.coracle.social/coracle/zooid">
+            Get started
+            <Icon icon={ArrowRight} />
+          </Link>
         </div>
-        <Link external class="btn btn-primary" href="https://github.com/coracle-social/zooid">
-          Get Started
-          <Icon icon={ArrowRight} />
-        </Link>
-      </div>
-      <div class="card2 bg-alt flex flex-col gap-4">
-        <div class="flex flex-col gap-4">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-2">
-              <img alt="Coracle Logo" src="/coracle.png" class="h-7 w-7" />
+        <div class="card2 bg-alt border-primary flex flex-col gap-5 border">
+          <div class="flex flex-col gap-3">
+            <div class="flex items-start justify-between">
+              <img alt="Coracle Logo" src="/coracle.png" class="h-10 w-10" />
+              <div class="badge badge-primary">Recommended</div>
+            </div>
+            <div class="flex flex-col gap-1">
               <h3 class="text-lg font-bold">Coracle Hosting</h3>
+              <div class="text-xs font-semibold tracking-wider opacity-60">FULLY MANAGED</div>
             </div>
-            <div class="badge badge-neutral">Recommended</div>
+            <p class="text-sm opacity-70">
+              The premium experience. We handle the infrastructure, security updates, and scaling so
+              you can focus on your community.
+            </p>
           </div>
-          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
-            <li>Simple setup, support included</li>
-            <li>Free and open source software — no vendor lock-in</li>
-            <li>Advanced access controls and relay policies</li>
-            <li>Full-featured admin dashboard</li>
+          <ul class="flex flex-col gap-2 text-sm">
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="text-primary" />
+              One-click deployment
+            </li>
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="text-primary" />
+              Automated backups & scaling
+            </li>
+            <li class="flex items-center gap-2">
+              <Icon icon={CheckCircle} class="text-primary" />
+              Priority support
+            </li>
           </ul>
+          <Link external class="btn btn-primary mt-auto" href="https://hosting.coracle.social">
+            Start for free
+            <Icon icon={ArrowRight} />
+          </Link>
         </div>
-        <Link external class="btn btn-neutral" href="https://hosting.coracle.social">
-          Get Started
-          <Icon icon={ArrowRight} />
-        </Link>
       </div>
-      <div class="card2 bg-alt flex flex-col gap-4">
-        <div class="flex flex-col gap-4">
-          <div class="self-start">
-            <img
-              alt="Relay Tools"
-              src="https://relay.tools/17.svg"
-              class="-my-20 -ml-2 hidden h-48 dark:block"
-              style="filter: contrast(50%)" />
-            <img
-              alt="Relay Tools"
-              src="https://relay.tools/19.svg"
-              class="-my-20 -ml-2 h-48 dark:hidden"
-              style="filter: contrast(50%)" />
-          </div>
-          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
-            <li>Independently run</li>
-            <li>Customizable relay policies</li>
-            <li>Simple management dashboard</li>
-            <li>Support available</li>
-          </ul>
-        </div>
-        <Link external class="btn btn-neutral" href="https://relay.tools/signup">
-          Get Started
+      <div class="flex flex-col items-center justify-center gap-2 py-2 text-sm opacity-70">
+        <span>Want to host on other servers?</span>
+        <Link external class="link center gap-1" href="https://relay.tools/signup">
+          Other hosting options
           <Icon icon={ArrowRight} />
         </Link>
       </div>