Create frontend project

frontend/src/pages/Account.tsx

@@ -0,0 +1,31 @@
+export default function Account() {
+  return (
+    <div class="max-w-4xl mx-auto px-4 py-8">
+      <h1 class="text-2xl font-bold text-gray-900 mb-6">Account</h1>
+
+      <div class="space-y-6">
+        <section class="bg-white border border-gray-200 rounded-xl p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">Account Status</h2>
+          <p class="text-gray-500">Status information coming soon.</p>
+        </section>
+
+        <section class="bg-white border border-gray-200 rounded-xl p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">Recurring Billing</h2>
+          <p class="text-sm text-gray-600 mb-4">
+            Enable automatic payments by providing your Nostr Wallet Connect URL.
+          </p>
+          <input
+            type="text"
+            placeholder="nostr+walletconnect://..."
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </section>
+
+        <section class="bg-white border border-gray-200 rounded-xl p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">Invoice History</h2>
+          <p class="text-gray-500">No invoices yet.</p>
+        </section>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/Home.tsx

@@ -0,0 +1,59 @@
+import { A } from "@solidjs/router"
+
+export default function Home() {
+  return (
+    <div class="min-h-screen bg-white">
+      {/* Hero */}
+      <div class="max-w-5xl mx-auto px-4 py-24 text-center">
+        <h1 class="text-5xl font-bold text-gray-900 mb-4">
+          Host Your Own Nostr Community Relay
+        </h1>
+        <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
+          Spin up a private, managed Nostr relay for your community in minutes.
+          Full control over membership, access, and policies.
+        </p>
+        <A
+          href="/relays/new"
+          class="inline-block py-3 px-8 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          Get Started
+        </A>
+      </div>
+
+      {/* Pricing */}
+      <div class="max-w-5xl mx-auto px-4 pb-24">
+        <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Pricing</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div class="border border-gray-200 rounded-xl p-6">
+            <h3 class="text-xl font-bold mb-2">Free</h3>
+            <p class="text-3xl font-bold mb-4">0 <span class="text-sm font-normal text-gray-500">sats/mo</span></p>
+            <ul class="space-y-2 text-gray-600">
+              <li>Up to 10 members</li>
+              <li class="line-through text-gray-400">Blossom storage</li>
+              <li class="line-through text-gray-400">LiveKit video</li>
+            </ul>
+          </div>
+          <div class="border-2 border-blue-600 rounded-xl p-6 relative">
+            <span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">Popular</span>
+            <h3 class="text-xl font-bold mb-2">Basic</h3>
+            <p class="text-3xl font-bold mb-4">10,000 <span class="text-sm font-normal text-gray-500">sats/mo</span></p>
+            <ul class="space-y-2 text-gray-600">
+              <li>Up to 100 members</li>
+              <li>Blossom storage</li>
+              <li>LiveKit video</li>
+            </ul>
+          </div>
+          <div class="border border-gray-200 rounded-xl p-6">
+            <h3 class="text-xl font-bold mb-2">Growth</h3>
+            <p class="text-3xl font-bold mb-4">50,000 <span class="text-sm font-normal text-gray-500">sats/mo</span></p>
+            <ul class="space-y-2 text-gray-600">
+              <li>Unlimited members</li>
+              <li>Blossom storage</li>
+              <li>LiveKit video</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/Login.tsx

@@ -0,0 +1,31 @@
+import { onMount, onCleanup } from "solid-js"
+import { useNavigate } from "@solidjs/router"
+import nb from "nonboard"
+
+export default function Login() {
+  const navigate = useNavigate()
+  let container: HTMLDivElement | undefined
+
+  onMount(() => {
+    const app = nb({
+      appUrl: window.location.origin,
+      appName: "Nostr Relay Hosting",
+      onLogin: () => navigate("/relays"),
+      onSignup: () => navigate("/relays"),
+      onError: (e: unknown) => console.error("Login error:", e),
+      onInfo: (msg: unknown) => console.info("Login info:", msg),
+    })
+
+    app.mount(container!)
+    onCleanup(() => app.destroy())
+  })
+
+  return (
+    <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 w-full max-w-md">
+        <h1 class="text-2xl font-bold text-gray-900 mb-6 text-center">Log In</h1>
+        <div ref={container} />
+      </div>
+    </div>
+  )
+}

frontend/src/pages/admin/AdminRelayDetail.tsx

@@ -0,0 +1,25 @@
+import { useParams, A } from "@solidjs/router"
+
+export default function AdminRelayDetail() {
+  const params = useParams()
+
+  return (
+    <div class="max-w-4xl mx-auto px-4 py-8">
+      <div class="flex items-center gap-2 mb-6">
+        <A href="/admin/relays" class="text-gray-500 hover:text-gray-700">← Relays</A>
+      </div>
+      <h1 class="text-2xl font-bold text-gray-900 mb-4">Relay {params.id}</h1>
+      <div class="flex gap-3">
+        <A
+          href={`/admin/relays/${params.id}/edit`}
+          class="py-2 px-4 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors"
+        >
+          Edit
+        </A>
+        <button class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors">
+          Deactivate
+        </button>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/admin/AdminRelayEdit.tsx

@@ -0,0 +1,15 @@
+import { useParams, A } from "@solidjs/router"
+
+export default function AdminRelayEdit() {
+  const params = useParams()
+
+  return (
+    <div class="max-w-2xl mx-auto px-4 py-8">
+      <div class="flex items-center gap-2 mb-6">
+        <A href={`/admin/relays/${params.id}`} class="text-gray-500 hover:text-gray-700">← Back</A>
+      </div>
+      <h1 class="text-2xl font-bold text-gray-900 mb-6">Edit Relay (Admin)</h1>
+      <p class="text-gray-500">Edit form coming soon.</p>
+    </div>
+  )
+}

frontend/src/pages/admin/AdminRelays.tsx

@@ -0,0 +1,13 @@
+export default function AdminRelays() {
+  return (
+    <div class="max-w-5xl mx-auto px-4 py-8">
+      <h1 class="text-2xl font-bold text-gray-900 mb-6">All Relays</h1>
+      <input
+        type="search"
+        placeholder="Search relays..."
+        class="w-full border border-gray-300 rounded-lg px-3 py-2 mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+      <p class="text-gray-500">No relays found.</p>
+    </div>
+  )
+}

frontend/src/pages/admin/AdminTenantDetail.tsx

@@ -0,0 +1,23 @@
+import { useParams, A } from "@solidjs/router"
+
+export default function AdminTenantDetail() {
+  const params = useParams()
+
+  return (
+    <div class="max-w-4xl mx-auto px-4 py-8">
+      <div class="flex items-center gap-2 mb-6">
+        <A href="/admin/tenants" class="text-gray-500 hover:text-gray-700">← Tenants</A>
+      </div>
+      <h1 class="text-2xl font-bold text-gray-900 mb-6">Tenant {params.id}</h1>
+      <div class="space-y-6">
+        <section class="bg-white border border-gray-200 rounded-xl p-6">
+          <h2 class="text-lg font-semibold mb-4">Relays</h2>
+          <p class="text-gray-500">No relays.</p>
+        </section>
+        <button class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors">
+          Deactivate Tenant
+        </button>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/admin/AdminTenants.tsx

@@ -0,0 +1,13 @@
+export default function AdminTenants() {
+  return (
+    <div class="max-w-5xl mx-auto px-4 py-8">
+      <h1 class="text-2xl font-bold text-gray-900 mb-6">Tenants</h1>
+      <input
+        type="search"
+        placeholder="Search tenants..."
+        class="w-full border border-gray-300 rounded-lg px-3 py-2 mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+      <p class="text-gray-500">No tenants found.</p>
+    </div>
+  )
+}

frontend/src/pages/relays/RelayDetail.tsx

@@ -0,0 +1,25 @@
+import { useParams, A } from "@solidjs/router"
+
+export default function RelayDetail() {
+  const params = useParams()
+
+  return (
+    <div class="max-w-4xl mx-auto px-4 py-8">
+      <div class="flex items-center gap-2 mb-6">
+        <A href="/relays" class="text-gray-500 hover:text-gray-700">← Relays</A>
+      </div>
+      <h1 class="text-2xl font-bold text-gray-900 mb-4">Relay {params.id}</h1>
+      <div class="flex gap-3">
+        <A
+          href={`/relays/${params.id}/edit`}
+          class="py-2 px-4 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors"
+        >
+          Edit
+        </A>
+        <button class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors">
+          Deactivate
+        </button>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/relays/RelayEdit.tsx

@@ -0,0 +1,15 @@
+import { useParams, A } from "@solidjs/router"
+
+export default function RelayEdit() {
+  const params = useParams()
+
+  return (
+    <div class="max-w-2xl mx-auto px-4 py-8">
+      <div class="flex items-center gap-2 mb-6">
+        <A href={`/relays/${params.id}`} class="text-gray-500 hover:text-gray-700">← Back</A>
+      </div>
+      <h1 class="text-2xl font-bold text-gray-900 mb-6">Edit Relay</h1>
+      <p class="text-gray-500">Edit form coming soon.</p>
+    </div>
+  )
+}

frontend/src/pages/relays/RelayList.tsx

@@ -0,0 +1,18 @@
+import { A } from "@solidjs/router"
+
+export default function RelayList() {
+  return (
+    <div class="max-w-4xl mx-auto px-4 py-8">
+      <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-gray-900">My Relays</h1>
+        <A
+          href="/relays/new"
+          class="py-2 px-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          Add Relay
+        </A>
+      </div>
+      <p class="text-gray-500">No relays yet. Create one to get started.</p>
+    </div>
+  )
+}

frontend/src/pages/relays/RelayNew.tsx

@@ -0,0 +1,128 @@
+import { createSignal } from "solid-js"
+import { useNavigate } from "@solidjs/router"
+
+const PLANS = [
+  { id: "free", label: "Free", price: 0, members: "Up to 10", blossom: false, livekit: false },
+  { id: "basic", label: "Basic", price: 10_000, members: "Up to 100", blossom: true, livekit: true },
+  { id: "growth", label: "Growth", price: 50_000, members: "Unlimited", blossom: true, livekit: true },
+] as const
+
+type PlanId = (typeof PLANS)[number]["id"]
+
+function slugify(s: string) {
+  return s
+    .toLowerCase()
+    .trim()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+}
+
+export default function RelayNew() {
+  const navigate = useNavigate()
+  const [name, setName] = createSignal("")
+  const [subdomain, setSubdomain] = createSignal("")
+  const [icon, setIcon] = createSignal("")
+  const [description, setDescription] = createSignal("")
+  const [plan, setPlan] = createSignal<PlanId>("free")
+
+  function handleNameInput(value: string) {
+    setName(value)
+    setSubdomain(slugify(value))
+  }
+
+  function handleSubmit(e: Event) {
+    e.preventDefault()
+    // TODO: submit to backend, handle invoice flow
+    navigate("/relays")
+  }
+
+  return (
+    <div class="max-w-2xl mx-auto px-4 py-8">
+      <h1 class="text-2xl font-bold text-gray-900 mb-6">New Relay</h1>
+      <form onSubmit={handleSubmit} class="space-y-6">
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
+          <input
+            type="text"
+            required
+            value={name()}
+            onInput={e => handleNameInput(e.currentTarget.value)}
+            placeholder="My Community"
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <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 focus-within:ring-2 focus-within:ring-blue-500">
+            <input
+              type="text"
+              required
+              value={subdomain()}
+              onInput={e => setSubdomain(e.currentTarget.value)}
+              placeholder="my-community"
+              class="flex-1 px-3 py-2 focus:outline-none"
+            />
+            <span class="px-3 py-2 bg-gray-50 text-gray-500 text-sm border-l border-gray-300">
+              .spaces.coracle.social
+            </span>
+          </div>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Icon URL</label>
+          <input
+            type="url"
+            value={icon()}
+            onInput={e => setIcon(e.currentTarget.value)}
+            placeholder="https://example.com/icon.png"
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+          <textarea
+            value={description()}
+            onInput={e => setDescription(e.currentTarget.value)}
+            placeholder="A community for..."
+            rows={3}
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-3">Plan</label>
+          <div class="grid grid-cols-3 gap-3">
+            {PLANS.map(p => (
+              <button
+                type="button"
+                onClick={() => setPlan(p.id)}
+                class={`border-2 rounded-xl p-4 text-left transition-colors ${
+                  plan() === p.id
+                    ? "border-blue-600 bg-blue-50"
+                    : "border-gray-200 hover:border-gray-300"
+                }`}
+              >
+                <div class="font-bold text-gray-900">{p.label}</div>
+                <div class="text-sm text-gray-500 mt-1">
+                  {p.price === 0 ? "Free" : `${p.price.toLocaleString()} sats/mo`}
+                </div>
+                <div class="text-xs text-gray-500 mt-2">{p.members} members</div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          Create Relay
+        </button>
+      </form>
+    </div>
+  )
+}