Combine discover and space list into a single page

src/app/components/LogIn.svelte

@@ -3,7 +3,7 @@
   import {Capacitor} from "@capacitor/core"
   import {getNip07, getNip55, Nip55Signer} from "@welshman/signer"
   import {addSession, type Session, makeNip07Session, makeNip55Session} from "@welshman/app"
-  import Widget from "@assets/icons/widget-2.svg?dataurl"
+  import Widget from "@assets/icons/widget-4.svg?dataurl"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Cpu from "@assets/icons/cpu-bolt.svg?dataurl"
   import Compass from "@assets/icons/compass-big.svg?dataurl"

src/app/components/MenuSpacesItem.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-  import Link from "@lib/components/Link.svelte"
-  import CardButton from "@lib/components/CardButton.svelte"
-  import RelayIcon from "@app/components/RelayIcon.svelte"
-  import RelayName from "@app/components/RelayName.svelte"
-  import RelayDescription from "@app/components/RelayDescription.svelte"
-  import {makeSpacePath} from "@app/util/routes"
-  import {notifications} from "@app/util/notifications"
-
-  const {url} = $props()
-
-  const path = makeSpacePath(url)
-</script>
-
-<Link replaceState href={path}>
-  <CardButton class="btn-neutral shadow-md bg-alt rounded-box border-none">
-    {#snippet icon()}
-      <RelayIcon {url} size={12} class="rounded-full" />
-    {/snippet}
-    {#snippet title()}
-      <div class="flex gap-1">
-        <RelayName {url} />
-        {#if $notifications.has(path)}
-          <div class="relative top-1 h-2 w-2 rounded-full bg-primary"></div>
-        {/if}
-      </div>
-    {/snippet}
-    {#snippet info()}
-      <div><RelayDescription {url} /></div>
-    {/snippet}
-  </CardButton>
-</Link>

src/app/components/PrimaryNav.svelte

@@ -3,7 +3,7 @@
   import {userProfile} from "@welshman/app"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
-  import Planet from "@assets/icons/planet-3.svg?dataurl"
+  import Widget from "@assets/icons/widget-4.svg?dataurl"
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Settings from "@assets/icons/settings.svg?dataurl"
   import ImageIcon from "@lib/components/ImageIcon.svelte"
@@ -84,7 +84,7 @@
       </PrimaryNavItem>
       {#if PLATFORM_RELAYS.length !== 1}
         <PrimaryNavItem title="Spaces" href="/spaces" notification={anySpaceNotifications}>
-          <ImageIcon alt="Spaces" src={Planet} size={8} />
+          <ImageIcon alt="Spaces" src={Widget} size={8} />
         </PrimaryNavItem>
       {/if}
     </div>

src/app/components/PrimaryNavSpaces.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {splitAt} from "@welshman/lib"
-  import Widget from "@assets/icons/widget.svg?dataurl"
+  import Widget from "@assets/icons/widget-4.svg?dataurl"
   import Compass from "@assets/icons/compass.svg?dataurl"
   import ImageIcon from "@lib/components/ImageIcon.svelte"
   import Divider from "@lib/components/Divider.svelte"
@@ -38,7 +38,7 @@
       notification={otherSpaceNotifications}>
       <ImageIcon alt="All Spaces" src={Widget} size={8} />
     </PrimaryNavItem>
-    <PrimaryNavItem title="Add a Space" href="/discover" class="tooltip-right">
+    <PrimaryNavItem title="Add a Space" href="/spaces" class="tooltip-right">
       <ImageIcon alt="Add a Space" src={Compass} size={8} />
     </PrimaryNavItem>
   {/each}

src/app/components/RelaySummary.svelte

@@ -9,9 +9,10 @@
 
   type Props = {
     url: string
+    hideFavorites?: boolean
   }
 
-  const {url}: Props = $props()
+  const {url, hideFavorites}: Props = $props()
   const rooms = deriveUserRooms(url)
   const favorited = deriveGroupListPubkeys(url)
 </script>
@@ -43,7 +44,7 @@
     </div>
     <RelayDescription {url} />
   </div>
-  {#if $favorited.size > 0}
+  {#if !hideFavorites && $favorited.size > 0}
     <div class="row-2 card2 card2-sm bg-alt">
       Favorited By:
       <ProfileCircles pubkeys={Array.from($favorited)} />

src/app/components/SpaceAdd.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Login from "@assets/icons/login-3.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
-  import Compass from "@assets/icons/compass.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -14,12 +13,6 @@
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/util/modal"
 
-  type Props = {
-    hideDiscover?: boolean
-  }
-
-  const {hideDiscover}: Props = $props()
-
   const startJoin = () => pushModal(SpaceInviteAccept)
 </script>
 
@@ -30,23 +23,8 @@
       <ModalSubtitle
         >Spaces are places where communities come together to work, play, and hang out.</ModalSubtitle>
     </ModalHeader>
-    {#if !hideDiscover}
-      <Link href="/discover">
-        <CardButton class="btn-primary">
-          {#snippet icon()}
-            <div><Icon icon={Compass} size={7} /></div>
-          {/snippet}
-          {#snippet title()}
-            <div>Explore Spaces</div>
-          {/snippet}
-          {#snippet info()}
-            <div>Join create, or browse spaces</div>
-          {/snippet}
-        </CardButton>
-      </Link>
-    {/if}
     <Button onclick={startJoin}>
-      <CardButton class={hideDiscover ? "btn-primary" : "btn-neutral"}>
+      <CardButton class="btn-primary">
         {#snippet icon()}
           <div><Icon icon={Login} size={7} /></div>
         {/snippet}

src/app/components/SpaceEdit.svelte

@@ -3,7 +3,7 @@
   import {displayRelayUrl, ManagementMethod} from "@welshman/util"
   import {manageRelay, forceLoadRelay} from "@welshman/app"
   import StickerSmileSquare from "@assets/icons/sticker-smile-square.svg?dataurl"
-  import Planet from "@assets/icons/planet-3.svg?dataurl"
+  import Widget from "@assets/icons/widget-4.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import UploadMinimalistic from "@assets/icons/upload-minimalistic.svg?dataurl"
   import {preventDefault} from "@lib/html"
@@ -164,7 +164,7 @@
           {#if imagePreview}
             <ImageIcon src={imagePreview} alt="" />
           {:else}
-            <Icon icon={Planet} />
+            <Icon icon={Widget} />
           {/if}
           <input bind:value={values.name} class="grow" type="text" />
         </label>

src/app/util/title.ts

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

src/routes/discover/+page.svelte

@@ -1,156 +0,0 @@
-<script lang="ts">
-  import {onMount} from "svelte"
-  import {derived as _derived} from "svelte/store"
-  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 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 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 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 startJoin = () => pushModal(SpaceInviteAccept)
-
-  const relaySearch = _derived(throttled(1000, relays), $relays => {
-    const options = $relays.filter(r => $groupListPubkeysByUrl.has(r.url))
-
-    return createSearch(options, {
-      getValue: (relay: RelayProfile) => relay.url,
-      sortFn: ({score, item}) => {
-        if (score && score > 0.1) return -score!
-
-        const wotScore = $groupListPubkeysByUrl.get(item.url)!.size
-
-        return score ? dec(score) * wotScore : -wotScore
-      },
-      fuseOptions: {
-        keys: ["url", "name", {name: "description", weight: 0.3}],
-        shouldSort: false,
-      },
-    })
-  })
-
-  const openSpace = (url: string, claim = "") => {
-    if (claim) {
-      pushModal(SpaceInviteAccept, {invite: term})
-    } else {
-      pushModal(SpaceJoin, {url})
-    }
-  }
-
-  let term = $state("")
-  let limit = $state(20)
-  let element: Element
-
-  const options = $derived($relaySearch.searchOptions(term).filter(r => r.url !== inviteData?.url))
-  const inviteData = $derived(parseInviteLink(term))
-
-  onMount(() => {
-    const scroller = createScroller({
-      element,
-      onScroll: () => {
-        limit += 20
-      },
-    })
-
-    return () => {
-      scroller.stop()
-    }
-  })
-</script>
-
-<Page class="cw-full">
-  <ContentSearch>
-    {#snippet input()}
-      <div class="flex flex-col gap-2">
-        <PageHeader>
-          {#snippet title()}
-            Join a Space
-          {/snippet}
-          {#snippet info()}
-            Find communities all across the nostr network
-          {/snippet}
-        </PageHeader>
-        <div class="grid gap-3 sm:grid-cols-2 card2 bg-alt">
-          <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>
-      </div>
-    {/snippet}
-    {#snippet content()}
-      <div class="col-2" bind:this={element}>
-        {#if inviteData}
-          {#key inviteData.url}
-            <Button
-              class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
-              onclick={() => openSpace(inviteData.url, inviteData.claim)}>
-              <RelaySummary url={inviteData.url} />
-            </Button>
-          {/key}
-        {/if}
-        {#each options.slice(0, limit) as relay (relay.url)}
-          <Button
-            class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
-            onclick={() => openSpace(relay.url)}>
-            <RelaySummary url={relay.url} />
-          </Button>
-        {/each}
-        <div class="flex justify-center py-20">
-          {#await sleep(5000)}
-            <Spinner loading>Looking for spaces...</Spinner>
-          {:then}
-            {#if options.length === 0}
-              <Spinner>No spaces found.</Spinner>
-            {/if}
-          {/await}
-        </div>
-      </div>
-    {/snippet}
-  </ContentSearch>
-</Page>

src/routes/home/+page.svelte

@@ -25,7 +25,7 @@
       <h1 class="text-center text-5xl">Welcome to</h1>
       <h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
       <div class="col-3">
-        <Link href="/discover">
+        <Link href="/spaces">
           <CardButton class="btn-neutral">
             {#snippet icon()}
               <Icon icon={AddCircle} size={7} />

src/routes/spaces/+page.svelte

@@ -1,20 +1,69 @@
 <script lang="ts">
-  import {insertAt, removeAt} from "@welshman/lib"
+  import {onMount, tick} from "svelte"
-  import Planet from "@assets/icons/planet-3.svg?dataurl"
+  import {derived as _derived} from "svelte/store"
+  import {dec, insertAt, removeAt, 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 {fly} from "@lib/transition"
+  import Widget from "@assets/icons/widget-4.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Page from "@lib/components/Page.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
-  import MenuSpacesItem from "@app/components/MenuSpacesItem.svelte"
+  import Divider from "@lib/components/Divider.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import RelaySummary from "@app/components/RelaySummary.svelte"
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
-  import {userSpaceUrls, loadUserGroupList, PLATFORM_RELAYS} from "@app/core/state"
+  import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
+  import SpaceJoin from "@app/components/SpaceJoin.svelte"
+  import {
+    userSpaceUrls,
+    loadUserGroupList,
+    PLATFORM_RELAYS,
+    groupListPubkeysByUrl,
+    parseInviteLink,
+  } from "@app/core/state"
   import {setSpaceMembershipOrder} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
+  import {goToSpace} from "@app/util/routes"
 
   const addSpace = () => pushModal(SpaceAdd)
 
+  const relaySearch = _derived(throttled(1000, relays), $relays => {
+    const options = $relays.filter(r => $groupListPubkeysByUrl.has(r.url))
+
+    return createSearch(options, {
+      getValue: (relay: RelayProfile) => relay.url,
+      sortFn: ({score, item}) => {
+        if (score && score > 0.1) return -score!
+
+        const wotScore = $groupListPubkeysByUrl.get(item.url)?.size || 0
+
+        return score ? dec(score) * wotScore : -wotScore
+      },
+      fuseOptions: {
+        keys: ["url", "name", {name: "description", weight: 0.3}],
+        shouldSort: false,
+      },
+    })
+  })
+
+  const openSpace = (url: string, claim = "") => {
+    if ($userSpaceUrls.includes(url)) {
+      goToSpace(url)
+    } else if (claim) {
+      pushModal(SpaceInviteAccept, {invite: term})
+    } else {
+      pushModal(SpaceJoin, {url})
+    }
+  }
+
   const reconcileUrls = (currentUrls: string[], nextUrls: string[]) => {
     const mergedUrls = currentUrls.filter(url => nextUrls.includes(url))
 
@@ -31,16 +80,12 @@
     a.length === b.length && a.every((url, index) => url === b[index])
 
   const reorderSpaceUrls = (targetUrl: string) => {
-    if (!draggedUrl) {
+    if (!draggedUrl) return
-      return
-    }
 
     const sourceIndex = orderedSpaceUrls.indexOf(draggedUrl)
     const targetIndex = orderedSpaceUrls.indexOf(targetUrl)
 
-    if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
+    if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) return
-      return
-    }
 
     orderedSpaceUrls = insertAt(
       targetIndex,
@@ -89,57 +134,160 @@
     }
   })
 
+  let term = $state("")
+  let showSearch = $state(false)
+  let searchInput: HTMLInputElement | undefined = $state()
+  let limit = $state(20)
+  let element: Element
   let orderedSpaceUrls = $state<string[]>([])
   let draggedUrl = $state<string | undefined>()
   let dragStartOrder = $state<string[] | undefined>()
+
+  const openSearch = () => {
+    showSearch = true
+    tick().then(() => searchInput?.focus())
+  }
+
+  const closeSearch = () => {
+    showSearch = false
+    term = ""
+  }
+
+  const inviteData = $derived(parseInviteLink(term))
+  const searchResults = $derived($relaySearch.searchOptions(term))
+  const userSpaceSet = $derived(new Set($userSpaceUrls))
+  const filteredUserUrls = $derived(
+    term
+      ? orderedSpaceUrls.filter(url => searchResults.some(r => r.url === url))
+      : orderedSpaceUrls,
+  )
+  const otherSpaces = $derived(
+    searchResults.filter(r => !userSpaceSet.has(r.url) && r.url !== inviteData?.url),
+  )
+
+  onMount(() => {
+    const scroller = createScroller({
+      element,
+      onScroll: () => {
+        limit += 20
+      },
+    })
+
+    return () => {
+      scroller.stop()
+    }
+  })
 </script>
 
 <Page class="cw-full">
   <PageBar class="cw-full">
-    <div class="flex items-center justify-between gap-4">
+    {#if showSearch}
-      <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
+      <label class="input input-bordered input-sm flex flex-1 items-center gap-2" in:fly>
-        <Icon icon={Planet} />
+        <Icon icon={Magnifier} />
-        <strong>Your Spaces</strong>
+        <input
-      </div>
+          bind:this={searchInput}
-      {#if $userSpaceUrls.length > 0 && PLATFORM_RELAYS.length === 0}
+          bind:value={term}
-        <Button class="btn btn-primary btn-sm" onclick={addSpace}>
+          class="min-w-0 grow"
-          <Icon icon={AddCircle} />
+          type="text"
-          Add Space
+          placeholder="Search for spaces..." />
+        <Button onclick={closeSearch} class="flex items-center">
+          <Icon icon={CloseCircle} />
         </Button>
-      {/if}
+      </label>
-    </div>
+    {:else}
+      <div class="flex items-center justify-between gap-4" in:fly>
+        <div class="ellipsize flex items-center gap-2 whitespace-nowrap">
+          <Icon icon={Widget} size={6} />
+          <strong>Spaces</strong>
+        </div>
+        <div class="flex items-center gap-2">
+          <button
+            class="btn btn-neutral btn-sm btn-square"
+            aria-label="Search"
+            onclick={openSearch}>
+            <Icon size={4} icon={Magnifier} />
+          </button>
+          {#if PLATFORM_RELAYS.length === 0}
+            <Button class="btn btn-primary btn-sm" onclick={addSpace}>
+              <Icon icon={AddCircle} />
+              Add Space
+            </Button>
+          {/if}
+        </div>
+      </div>
+    {/if}
   </PageBar>
   <PageContent class="cw-full flex flex-col gap-2 p-2 pt-4">
-    {#each PLATFORM_RELAYS as url (url)}
+    <div class="flex flex-col gap-2" bind:this={element}>
-      <MenuSpacesItem {url} />
+      {#each PLATFORM_RELAYS as url (url)}
-    {:else}
+        <Button
-      {#await loadUserGroupList()}
+          class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
-        <div class="flex justify-center items-center py-20">
+          onclick={() => openSpace(url)}>
-          <span class="loading loading-spinner mr-3"></span>
+          <RelaySummary {url} />
-          Loading your spaces...
+        </Button>
-        </div>
+      {:else}
-      {:then}
+        {#await loadUserGroupList()}
-        {#each orderedSpaceUrls as url (url)}
+          <div class="flex items-center justify-center py-20">
-          <div
+            <span class="loading loading-spinner mr-3"></span>
-            class:opacity-60={draggedUrl === url}
+            Loading your spaces...
-            draggable="true"
-            role="listitem"
-            ondragstart={e => onDragStart(e, url)}
-            ondragover={e => onDragOver(e, url)}
-            ondrop={e => onDrop(e, url)}
-            ondragend={onDragEnd}>
-            <MenuSpacesItem {url} />
           </div>
-        {:else}
+        {:then}
-          <div class="flex flex-col gap-8 items-center py-20">
+          {#if inviteData}
-            <p>You haven't added any spaces yet!</p>
+            <Divider>Search results</Divider>
-            <Button class="btn btn-primary" onclick={addSpace}>
+            {#key inviteData.url}
-              <Icon icon={AddCircle} />
+              <Button
-              Add a Space
+                class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
+                onclick={() => openSpace(inviteData.url, inviteData.claim)}>
+                <RelaySummary url={inviteData.url} />
+              </Button>
+            {/key}
+          {/if}
+          {#if filteredUserUrls.length > 0}
+            <Divider>Your spaces</Divider>
+            {#each filteredUserUrls as url (url)}
+              <div
+                class:opacity-60={draggedUrl === url}
+                draggable="true"
+                role="listitem"
+                ondragstart={e => onDragStart(e, url)}
+                ondragover={e => onDragOver(e, url)}
+                ondrop={e => onDrop(e, url)}
+                ondragend={onDragEnd}>
+                <Button
+                  class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full"
+                  onclick={() => openSpace(url)}>
+                  <RelaySummary hideFavorites {url} />
+                </Button>
+              </div>
+            {/each}
+          {:else if !term}
+            <div class="flex flex-col items-center gap-4 py-12 text-center">
+              <p class="text-base-content/60">You haven't joined any spaces yet.</p>
+              <Button class="btn btn-primary" onclick={addSpace}>
+                <Icon icon={AddCircle} />
+                Browse Spaces
+              </Button>
+            </div>
+          {/if}
+          <Divider>{filteredUserUrls.length > 0 ? "More Spaces" : "Browse Spaces"}</Divider>
+          {#each otherSpaces.slice(0, limit) as relay (relay.url)}
+            <Button
+              class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
+              onclick={() => openSpace(relay.url)}>
+              <RelaySummary url={relay.url} />
             </Button>
+          {/each}
+          <div class="flex justify-center py-20">
+            {#await sleep(5000)}
+              <Spinner loading>Looking for spaces...</Spinner>
+            {:then}
+              {#if otherSpaces.length === 0}
+                <Spinner>No other spaces found.</Spinner>
+              {/if}
+            {/await}
           </div>
-        {/each}
+        {/await}
-      {/await}
+      {/each}
-    {/each}
+    </div>
   </PageContent>
 </Page>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Server from "@assets/icons/server.svg?dataurl"
   import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"
-  import HandShake from "@assets/icons/hand-shake.svg?dataurl"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
@@ -62,24 +61,6 @@
           <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 gap-2">
-            <Icon icon={HandShake} />
-            <h3 class="text-lg font-bold">Holis Communities</h3>
-          </div>
-          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
-            <li>Simple self-serve space creation</li>
-            <li>Built-in moderation tools</li>
-            <li>Room-level access controls</li>
-            <li>Membship lists and invite codes</li>
-          </ul>
-        </div>
-        <Link external class="btn btn-neutral" href="https://hol.is">
-          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">