From 0399ae37eceaec2c311cf288ccb94af2d61f6265 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 29 Oct 2025 12:52:26 -0700
Subject: [PATCH] Move space create to its own page

---
 src/app/components/SpaceAdd.svelte    |  7 +-
 src/app/components/SpaceCreate.svelte | 92 ---------------------------
 src/routes/spaces/create/+page.svelte | 89 ++++++++++++++++++++++++++
 3 files changed, 91 insertions(+), 97 deletions(-)
 delete mode 100644 src/app/components/SpaceCreate.svelte
 create mode 100644 src/routes/spaces/create/+page.svelte

diff --git a/src/app/components/SpaceAdd.svelte b/src/app/components/SpaceAdd.svelte
index 0dcdc4d..45b87fc 100644
--- a/src/app/components/SpaceAdd.svelte
+++ b/src/app/components/SpaceAdd.svelte
@@ -7,7 +7,6 @@
   import Button from "@lib/components/Button.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import SpaceCreate from "@app/components/SpaceCreate.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/util/modal"
 
@@ -17,8 +16,6 @@
 
   const {hideDiscover}: Props = $props()
 
-  const startCreate = () => pushModal(SpaceCreate)
-
   const startJoin = () => pushModal(SpaceInviteAccept)
 </script>
 
@@ -59,7 +56,7 @@
       {/snippet}
     </CardButton>
   </Button>
-  <Button onclick={startCreate}>
+  <Link href="/spaces/create">
     <CardButton class="btn-neutral">
       {#snippet icon()}
         <div><Icon icon={AddCircle} size={7} /></div>
@@ -71,5 +68,5 @@
         <div>Just a few questions and you'll be on your way.</div>
       {/snippet}
     </CardButton>
-  </Button>
+  </Link>
 </div>
diff --git a/src/app/components/SpaceCreate.svelte b/src/app/components/SpaceCreate.svelte
deleted file mode 100644
index a41a068..0000000
--- a/src/app/components/SpaceCreate.svelte
+++ /dev/null
@@ -1,92 +0,0 @@
-<script lang="ts">
-  import Server from "@assets/icons/server.svg?dataurl"
-  import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import Link from "@lib/components/Link.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Icon from "@lib/components/Icon.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-
-  const back = () => history.back()
-</script>
-
-<div class="column gap-4">
-  <ModalHeader>
-    {#snippet title()}
-      <div>Create your own Space</div>
-    {/snippet}
-    {#snippet info()}
-      <p>Get started with one of our trusted partners, or learn how to host your own space.</p>
-    {/snippet}
-  </ModalHeader>
-  <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" />
-          <h3 class="text-lg font-bold">Coracle Hosting</h3>
-        </div>
-        <div class="badge badge-primary self-start">Recommended</div>
-      </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>
-    </div>
-    <Link class="btn btn-primary" href="https://info.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>Customizable relay policies</li>
-        <li>Simple management dashboard</li>
-        <li>Support available</li>
-      </ul>
-    </div>
-    <Link class="btn btn-neutral" href="https://relay.tools/signup">
-      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 gap-3">
-        <Icon icon={Server} />
-        <h3 class="text-lg font-bold">Self-Hosted</h3>
-      </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>
-      </ul>
-    </div>
-    <Link class="btn btn-neutral" href="https://github.com/coracle-social/zooid">
-      Get Started
-      <Icon icon={ArrowRight} />
-    </Link>
-  </div>
-  <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
-      <Icon icon={AltArrowLeft} />
-      Go back
-    </Button>
-  </ModalFooter>
-</div>
diff --git a/src/routes/spaces/create/+page.svelte b/src/routes/spaces/create/+page.svelte
new file mode 100644
index 0000000..a04a67a
--- /dev/null
+++ b/src/routes/spaces/create/+page.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+  import Server from "@assets/icons/server.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"
+  import Page from "@lib/components/Page.svelte"
+  import PageHeader from "@lib/components/PageHeader.svelte"
+  import PageContent from "@lib/components/PageContent.svelte"
+</script>
+
+<Page class="cw-full">
+  <PageContent class="cw-full flex flex-col items-center gap-2 p-2 pt-4">
+    <PageHeader>
+      {#snippet title()}
+        <div>Create your own Space</div>
+      {/snippet}
+      {#snippet info()}
+        <p>Get started with one of our trusted partners, or learn how to host your own space.</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-2">
+              <img alt="Coracle Logo" src="/coracle.png" class="h-7 w-7" />
+              <h3 class="text-lg font-bold">Coracle Hosting</h3>
+            </div>
+            <div class="badge badge-neutral">Recommended</div>
+          </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>
+        </div>
+        <Link class="btn btn-primary" href="https://info.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 class="btn btn-neutral" href="https://relay.tools/signup">
+          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 gap-3">
+            <Icon icon={Server} />
+            <h3 class="text-lg font-bold">Self-Hosted</h3>
+          </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>Cheapest option</li>
+          </ul>
+        </div>
+        <Link class="btn btn-neutral" href="https://github.com/coracle-social/zooid">
+          Get Started
+          <Icon icon={ArrowRight} />
+        </Link>
+      </div>
+    </div>
+  </PageContent>
+</Page>