Whatever

frontend/src/components/CheckIcon.tsx

@@ -0,0 +1,7 @@
+export default function CheckIcon() {
+  return (
+    <svg class="w-4 h-4 text-blue-500 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M20 6L9 17l-5-5" />
+    </svg>
+  )
+}

frontend/src/components/ExternalLinkIcon.tsx

@@ -0,0 +1,9 @@
+export default function ExternalLinkIcon() {
+  return (
+    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
+      <path d="M15 3h6v6" />
+      <path d="M10 14L21 3" />
+    </svg>
+  )
+}

frontend/src/components/RelayForm.tsx

@@ -1,13 +1,18 @@
-type RelayFormProps = {
+import { createEffect, createSignal } from "solid-js"
-  name: string
+import type { Relay } from "../lib/hooks"
-  setName: (value: string) => void
+import { slugify } from "../lib/slugify"
+
+export type RelayFormValues = {
+  info_name: string
   subdomain: string
-  setSubdomain: (value: string) => void
+  info_icon: string
-  icon: string
+  info_description: string
-  setIcon: (value: string) => void
+}
-  description: string
+
-  setDescription: (value: string) => void
+type RelayFormProps = {
-  onSubmit: (e: Event) => void
+  initialValues: Pick<Relay, "info_name" | "subdomain" | "info_icon" | "info_description">
+  syncSubdomainWithName?: boolean
+  onSubmit: (values: RelayFormValues, e: Event) => void | Promise<void>
   submitting: boolean
   error?: string
   submitLabel: string
@@ -15,14 +20,43 @@ type RelayFormProps = {
 }
 
 export default function RelayForm(props: RelayFormProps) {
+  const [name, setName] = createSignal(props.initialValues.info_name)
+  const [subdomain, setSubdomain] = createSignal(props.initialValues.subdomain)
+  const [icon, setIcon] = createSignal(props.initialValues.info_icon)
+  const [description, setDescription] = createSignal(props.initialValues.info_description)
+
+  createEffect(() => {
+    setName(props.initialValues.info_name)
+    setSubdomain(props.initialValues.subdomain)
+    setIcon(props.initialValues.info_icon)
+    setDescription(props.initialValues.info_description)
+  })
+
+  function handleSubmit(e: Event) {
+    e.preventDefault()
+    void props.onSubmit(
+      {
+        info_name: name(),
+        subdomain: subdomain(),
+        info_icon: icon(),
+        info_description: description(),
+      },
+      e,
+    )
+  }
+
   return (
-    <form onSubmit={props.onSubmit} class="space-y-6">
+    <form onSubmit={handleSubmit} class="space-y-6">
       {/* Basic info */}
       <div>
         <label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
         <input
-          value={props.name}
+          value={name()}
-          onInput={e => props.setName(e.currentTarget.value)}
+          onInput={e => {
+            const value = e.currentTarget.value
+            setName(value)
+            if (props.syncSubdomainWithName) setSubdomain(slugify(value))
+          }}
           required
           class="w-full border border-gray-300 rounded-lg px-3 py-2"
         />
@@ -31,8 +65,8 @@ export default function RelayForm(props: RelayFormProps) {
         <label class="block text-sm font-medium text-gray-700 mb-1">Subdomain</label>
         <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden">
           <input
-            value={props.subdomain}
+            value={subdomain()}
-            onInput={e => props.setSubdomain(e.currentTarget.value)}
+            onInput={e => setSubdomain(e.currentTarget.value)}
             required
             class="flex-1 px-3 py-2"
           />
@@ -43,16 +77,16 @@ export default function RelayForm(props: RelayFormProps) {
         <label class="block text-sm font-medium text-gray-700 mb-1">Icon URL</label>
         <input
           type="url"
-          value={props.icon}
+          value={icon()}
-          onInput={e => props.setIcon(e.currentTarget.value)}
+          onInput={e => setIcon(e.currentTarget.value)}
           class="w-full border border-gray-300 rounded-lg px-3 py-2"
         />
       </div>
       <div>
         <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
         <textarea
-          value={props.description}
+          value={description()}
-          onInput={e => props.setDescription(e.currentTarget.value)}
+          onInput={e => setDescription(e.currentTarget.value)}
           rows={3}
           class="w-full border border-gray-300 rounded-lg px-3 py-2"
         />

frontend/src/lib/hooks.ts

@@ -26,7 +26,6 @@ import {
   type CreateRelayInput,
   type Relay,
   type Tenant,
-  type Identity,
   type UpdateRelayInput,
 } from "./api"
 
@@ -75,7 +74,7 @@ export const [identity, { refetch: refetchIdentity, mutate: setIdentity }] = cre
 
 ;(() => {
   try {
-    accountManager.fromJSON(JSON.parse(localStorage.getItem("caravel.accounts")))
+    accountManager.fromJSON(JSON.parse(localStorage.getItem("caravel.accounts")!))
   } catch {
     // pass
   }

frontend/src/pages/Home.tsx

@@ -1,26 +1,89 @@
-import { A } from "@solidjs/router"
+import { A, useNavigate } from "@solidjs/router"
+import { createSignal } from "solid-js"
+import CheckIcon from "../components/CheckIcon"
+import ExternalLinkIcon from "../components/ExternalLinkIcon"
 import PricingTable from "../components/PricingTable"
-import { account } from "../lib/hooks"
+import RelayForm, { type RelayFormValues } from "../components/RelayForm"
-
+import Modal from "../components/Modal"
-function CheckIcon() {
+import Login from "./Login"
-  return (
+import { account, createRelayForActiveTenant } from "../lib/hooks"
-    <svg class="w-4 h-4 text-blue-500 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+import { slugify } from "../lib/slugify"
-      <path d="M20 6L9 17l-5-5" />
-    </svg>
-  )
-}
-
-function ExternalLinkIcon() {
-  return (
-    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
-      <path d="M15 3h6v6" />
-      <path d="M10 14L21 3" />
-    </svg>
-  )
-}
 
 export default function Home() {
+  const navigate = useNavigate()
+  const [showRelayModal, setShowRelayModal] = createSignal(false)
+  const [showLoginModal, setShowLoginModal] = createSignal(false)
+  const [name, setName] = createSignal("")
+  const [subdomain, setSubdomain] = createSignal("")
+  const [icon, setIcon] = createSignal("")
+  const [description, setDescription] = createSignal("")
+  const [pendingRelay, setPendingRelay] = createSignal(false)
+  const [error, setError] = createSignal("")
+
+  function resetForm() {
+    setName("")
+    setSubdomain("")
+    setIcon("")
+    setDescription("")
+    setError("")
+    setPendingRelay(false)
+  }
+
+  function openRelayFlow() {
+    setError("")
+    setShowRelayModal(true)
+  }
+
+  async function createRelayAndRedirect() {
+    setError("")
+    setPendingRelay(true)
+
+    try {
+      const relay = await createRelayForActiveTenant({
+        subdomain: slugify(subdomain()),
+        plan: "free",
+        info_name: name().trim(),
+        info_icon: icon().trim(),
+        info_description: description().trim(),
+        policy_public_join: 0,
+        policy_strip_signatures: 0,
+        groups_enabled: 1,
+        management_enabled: 1,
+        blossom_enabled: 0,
+        livekit_enabled: 0,
+        push_enabled: 1,
+      })
+
+      setShowLoginModal(false)
+      setShowRelayModal(false)
+      resetForm()
+      navigate(`/relays/${relay.id}`)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to create relay")
+      setShowLoginModal(false)
+      setShowRelayModal(true)
+    } finally {
+      setPendingRelay(false)
+    }
+  }
+
+  async function handleRelaySubmit(values: RelayFormValues, e: Event) {
+    e.preventDefault()
+    setError("")
+    setName(values.info_name)
+    setSubdomain(values.subdomain)
+    setIcon(values.info_icon)
+    setDescription(values.info_description)
+
+    if (account()) {
+      await createRelayAndRedirect()
+      return
+    }
+
+    setShowRelayModal(false)
+    setShowLoginModal(true)
+  }
+
   return (
     <div class="min-h-screen bg-white text-gray-900 overflow-x-hidden">
 
@@ -32,7 +95,13 @@ export default function Home() {
             Caravel
           </div>
           <A
-            href={account() ? "/relays" : "/login"}
+            href={account() ? "/relays" : "#"}
+            onClick={(e) => {
+              if (!account()) {
+                e.preventDefault()
+                setShowLoginModal(true)
+              }
+            }}
             class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors"
           >
             {account() ? "Go to dashboard" : "Sign in"}
@@ -63,15 +132,22 @@ export default function Home() {
           </p>
 
           <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <A
+            <button
-              href="/relays/new"
+              type="button"
+              onClick={openRelayFlow}
               class="inline-flex items-center gap-2 py-3 px-8 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 active:scale-95 transition-all shadow-lg shadow-blue-200"
             >
               Get started free
               <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
-            </A>
+            </button>
             <A
-              href={account() ? "/relays" : "/login"}
+              href={account() ? "/relays" : "#"}
+              onClick={(e) => {
+                if (!account()) {
+                  e.preventDefault()
+                  setShowLoginModal(true)
+                }
+              }}
               class="inline-flex items-center gap-2 py-3 px-8 border border-gray-200 text-gray-700 font-semibold rounded-xl hover:bg-gray-50 transition-all"
             >
               {account() ? "Go to dashboard" : "Sign in"}
@@ -262,7 +338,7 @@ export default function Home() {
             Pay in sats. Upgrade or cancel any time.
           </p>
 
-          <PricingTable ctaHref="/relays/new" />
+          <PricingTable ctaHref="#" />
         </div>
       </section>
 
@@ -274,13 +350,14 @@ export default function Home() {
           <p class="text-gray-500 mb-10 max-w-lg mx-auto text-lg">
             Join communities already running on Caravel. Set up in minutes, pay in sats.
           </p>
-          <A
+          <button
-            href="/relays/new"
+            type="button"
+            onClick={openRelayFlow}
             class="inline-flex items-center gap-2 py-3 px-10 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 active:scale-95 transition-all shadow-lg shadow-blue-200 text-lg"
           >
             Create your relay
             <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
-          </A>
+          </button>
         </div>
       </section>
 
@@ -298,6 +375,72 @@ export default function Home() {
           </div>
         </div>
       </footer>
+
+      <Modal
+        open={showRelayModal()}
+        onClose={() => {
+          if (!pendingRelay()) setShowRelayModal(false)
+        }}
+        wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+        panelClass="w-full max-w-2xl rounded-2xl bg-white p-6 sm:p-8 shadow-2xl"
+      >
+        <div class="mb-6 flex items-start justify-between gap-4">
+          <div>
+            <h3 class="text-xl font-bold text-gray-900">Create your relay</h3>
+            <p class="mt-1 text-sm text-gray-500">Start with a free relay. You can upgrade later.</p>
+          </div>
+          <button
+            type="button"
+            class="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
+            onClick={() => {
+              if (!pendingRelay()) setShowRelayModal(false)
+            }}
+            aria-label="Close"
+          >
+            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg>
+          </button>
+        </div>
+
+        <RelayForm
+          initialValues={{
+            info_name: name(),
+            subdomain: subdomain(),
+            info_icon: icon(),
+            info_description: description(),
+          }}
+          syncSubdomainWithName
+          onSubmit={handleRelaySubmit}
+          submitting={pendingRelay()}
+          error={error()}
+          submitLabel="Continue"
+          submittingLabel="Creating..."
+        />
+      </Modal>
+
+      <Modal
+        open={showLoginModal()}
+        onClose={() => {
+          if (!pendingRelay()) setShowLoginModal(false)
+        }}
+        wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+        panelClass="w-full max-w-4xl rounded-2xl"
+      >
+        <Login
+          inModal
+          onClose={() => {
+            if (!pendingRelay()) setShowLoginModal(false)
+          }}
+          onAuthenticated={async () => {
+            if (name().trim() && subdomain().trim()) {
+              await createRelayAndRedirect()
+              return
+            }
+
+            setShowLoginModal(false)
+            navigate("/relays")
+          }}
+        />
+      </Modal>
     </div>
   )
 }

frontend/src/pages/Login.tsx

@@ -1,5 +1,5 @@
 import { Show, createSignal, createEffect, onCleanup } from "solid-js"
-import { useNavigate } from "@solidjs/router"
+import { useNavigate, type RouteSectionProps } from "@solidjs/router"
 import { ExtensionAccount, NostrConnectAccount, PasswordAccount, PrivateKeyAccount } from "applesauce-accounts/accounts"
 import { PasswordSigner } from "applesauce-signers"
 import QrScanner from "qr-scanner"
@@ -13,6 +13,12 @@ type Screen = "tabs" | "nip46" | "key"
 type SignerTab = "qr" | "paste"
 type KeyTab = "plaintext" | "encrypted"
 
+type LoginProps = {
+  inModal?: boolean
+  onClose?: () => void
+  onAuthenticated?: () => void | Promise<void>
+}
+
 function normalizeBunkerUrl(value: string): string {
   const trimmed = value.trim()
   if (!trimmed) return ""
@@ -35,7 +41,9 @@ async function loadNostrConnectSigner() {
   return import("applesauce-signers").then((m) => m.NostrConnectSigner)
 }
 
-export default function Login() {
+type LoginPageProps = LoginProps & Partial<RouteSectionProps<unknown>>
+
+export default function Login(props: LoginPageProps = {}) {
   const navigate = useNavigate()
   const [tab, setTab] = createSignal<Tab>(window.nostr ? "nip07" : "nip46")
   const [loading, setLoading] = createSignal(false)
@@ -56,9 +64,10 @@ export default function Login() {
   let scanner: QrScanner | undefined
   let abortController: AbortController | undefined
 
-  function completeLogin(account: ExtensionAccount | NostrConnectAccount | PrivateKeyAccount | PasswordAccount) {
+  async function completeLogin(account: ExtensionAccount | NostrConnectAccount | PrivateKeyAccount | PasswordAccount) {
     accountManager.addAccount(account)
     accountManager.setActive(account)
+    await props.onAuthenticated?.()
   }
 
   async function loginWithNip07() {
@@ -190,7 +199,7 @@ export default function Login() {
   }
 
   createEffect(() => {
-    if (identity()) {
+    if (!props.inModal && identity()) {
       navigate("/relays")
     }
   })
@@ -201,9 +210,19 @@ export default function Login() {
   })
 
   return (
-    <div class="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 flex items-center justify-center p-6">
+    <div class={props.inModal ? "w-full" : "min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 flex items-center justify-center p-6"}>
       <div class="w-full max-w-3xl">
         <div class="relative overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl">
+          <Show when={props.inModal && props.onClose}>
+            <button
+              type="button"
+              class="absolute right-4 top-4 z-10 rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
+              onClick={() => props.onClose?.()}
+              aria-label="Close"
+            >
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg>
+            </button>
+          </Show>
           <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(99,102,241,0.08),_transparent_45%)]" />
           <div class="relative grid gap-8 p-8 md:grid-cols-[1.2fr_1fr] md:p-10">
             <div class="space-y-6">

frontend/src/pages/admin/AdminRelayEdit.tsx

@@ -1,6 +1,6 @@
 import { useNavigate, useParams } from "@solidjs/router"
-import { Show, createEffect, createSignal } from "solid-js"
+import { Show, createSignal } from "solid-js"
-import RelayForm from "../../components/RelayForm"
+import RelayForm, { type RelayFormValues } from "../../components/RelayForm"
 import { slugify } from "../../lib/slugify"
 import BackLink from "../../components/BackLink"
 import PageContainer from "../../components/PageContainer"
@@ -15,32 +15,19 @@ export default function AdminRelayEdit() {
   const [relay] = useRelay(relayId)
   const loading = useMinLoading(() => relay.loading)
 
-  const [name, setName] = createSignal("")
-  const [subdomain, setSubdomain] = createSignal("")
-  const [icon, setIcon] = createSignal("")
-  const [description, setDescription] = createSignal("")
   const [error, setError] = createSignal("")
   const [submitting, setSubmitting] = createSignal(false)
 
-  createEffect(() => {
+  async function handleSubmit(values: RelayFormValues, e: Event) {
-    const data = relay()
-    if (!data) return
-    setName(data.info_name)
-    setSubdomain(data.subdomain)
-    setIcon(data.info_icon)
-    setDescription(data.info_description)
-  })
-
-  async function handleSubmit(e: Event) {
     e.preventDefault()
     setError("")
     setSubmitting(true)
     try {
       await updateRelayById(relayId(), {
-        subdomain: slugify(subdomain()),
+        subdomain: slugify(values.subdomain),
-        info_name: name().trim(),
+        info_name: values.info_name.trim(),
-        info_icon: icon().trim(),
+        info_icon: values.info_icon.trim(),
-        info_description: description().trim(),
+        info_description: values.info_description.trim(),
       })
       navigate(`/admin/relays/${relayId()}`)
     } catch (e) {
@@ -64,14 +51,7 @@ export default function AdminRelayEdit() {
 
       <Show when={relay() && !loading()}>
         <RelayForm
-          name={name()}
+          initialValues={relay()!}
-          setName={setName}
-          subdomain={subdomain()}
-          setSubdomain={setSubdomain}
-          icon={icon()}
-          setIcon={setIcon}
-          description={description()}
-          setDescription={setDescription}
           onSubmit={handleSubmit}
           submitting={submitting()}
           error={error()}

frontend/src/pages/relays/RelayEdit.tsx

@@ -1,6 +1,6 @@
 import { useNavigate, useParams } from "@solidjs/router"
-import { Show, createEffect, createSignal } from "solid-js"
+import { Show, createSignal } from "solid-js"
-import RelayForm from "../../components/RelayForm"
+import RelayForm, { type RelayFormValues } from "../../components/RelayForm"
 import { slugify } from "../../lib/slugify"
 import BackLink from "../../components/BackLink"
 import PageContainer from "../../components/PageContainer"
@@ -15,32 +15,19 @@ export default function RelayEdit() {
   const [relay] = useRelay(relayId)
   const loading = useMinLoading(() => relay.loading)
 
-  const [name, setName] = createSignal("")
-  const [subdomain, setSubdomain] = createSignal("")
-  const [icon, setIcon] = createSignal("")
-  const [description, setDescription] = createSignal("")
   const [error, setError] = createSignal("")
   const [submitting, setSubmitting] = createSignal(false)
 
-  createEffect(() => {
+  async function handleSubmit(values: RelayFormValues, e: Event) {
-    const data = relay()
-    if (!data) return
-    setName(data.info_name)
-    setSubdomain(data.subdomain)
-    setIcon(data.info_icon)
-    setDescription(data.info_description)
-  })
-
-  async function handleSubmit(e: Event) {
     e.preventDefault()
     setError("")
     setSubmitting(true)
     try {
       await updateRelayById(relayId(), {
-        subdomain: slugify(subdomain()),
+        subdomain: slugify(values.subdomain),
-        info_name: name().trim(),
+        info_name: values.info_name.trim(),
-        info_icon: icon().trim(),
+        info_icon: values.info_icon.trim(),
-        info_description: description().trim(),
+        info_description: values.info_description.trim(),
       })
       navigate(`/relays/${relayId()}`)
     } catch (e) {
@@ -64,14 +51,7 @@ export default function RelayEdit() {
 
       <Show when={relay() && !loading()}>
         <RelayForm
-          name={name()}
+          initialValues={relay()!}
-          setName={setName}
-          subdomain={subdomain()}
-          setSubdomain={setSubdomain}
-          icon={icon()}
-          setIcon={setIcon}
-          description={description()}
-          setDescription={setDescription}
           onSubmit={handleSubmit}
           submitting={submitting()}
           error={error()}