From ed57ff7bb7352dedc6dd9b8a76e71fc95cd9ea22 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 26 Feb 2026 15:43:49 -0800
Subject: [PATCH] Add toast

---
 frontend/src/components/Toast.tsx       | 74 +++++++++++++++++++++++++
 frontend/src/pages/relays/RelayList.tsx |  2 +-
 frontend/src/pages/relays/RelayNew.tsx  | 48 ++++++++--------
 3 files changed, 101 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/components/Toast.tsx

diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
new file mode 100644
index 0000000..a1aeea2
--- /dev/null
+++ b/frontend/src/components/Toast.tsx
@@ -0,0 +1,74 @@
+import { Show, createEffect, createSignal, onCleanup } from "solid-js"
+
+type ToastProps = {
+  message?: string
+  duration?: number
+  onClear?: () => void
+}
+
+export default function Toast(props: ToastProps) {
+  const [visible, setVisible] = createSignal(false)
+
+  let hideTimer: number | undefined
+  let clearTimer: number | undefined
+  let rafOne: number | undefined
+  let rafTwo: number | undefined
+
+  function clearTimers() {
+    if (hideTimer) window.clearTimeout(hideTimer)
+    if (clearTimer) window.clearTimeout(clearTimer)
+    if (rafOne) window.cancelAnimationFrame(rafOne)
+    if (rafTwo) window.cancelAnimationFrame(rafTwo)
+    hideTimer = undefined
+    clearTimer = undefined
+    rafOne = undefined
+    rafTwo = undefined
+  }
+
+  createEffect(() => {
+    const message = props.message?.trim()
+    clearTimers()
+
+    if (!message) {
+      setVisible(false)
+      return
+    }
+
+    setVisible(false)
+    rafOne = window.requestAnimationFrame(() => {
+      rafTwo = window.requestAnimationFrame(() => {
+        setVisible(true)
+        rafOne = undefined
+        rafTwo = undefined
+      })
+    })
+
+    hideTimer = window.setTimeout(() => {
+      setVisible(false)
+      clearTimer = window.setTimeout(() => {
+        props.onClear?.()
+        clearTimer = undefined
+      }, 250)
+      hideTimer = undefined
+    }, props.duration ?? 10_000)
+  })
+
+  onCleanup(() => {
+    clearTimers()
+  })
+
+  return (
+    <Show when={props.message}>
+      <div
+        role="alert"
+        class="fixed bottom-4 right-4 z-50 max-w-md rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-base text-red-700 shadow-lg transition-all duration-400 ease-out"
+        classList={{
+          "translate-y-0 opacity-100 scale-100": visible(),
+          "translate-y-3 opacity-0 scale-95": !visible(),
+        }}
+      >
+        {props.message}
+      </div>
+    </Show>
+  )
+}
diff --git a/frontend/src/pages/relays/RelayList.tsx b/frontend/src/pages/relays/RelayList.tsx
index bb209a4..1ce045f 100644
--- a/frontend/src/pages/relays/RelayList.tsx
+++ b/frontend/src/pages/relays/RelayList.tsx
@@ -37,7 +37,7 @@ export default function RelayList() {
                   <div class="flex items-center justify-between">
                     <div>
                       <p class="font-medium text-gray-900">{relay.name}</p>
-                      <p class="text-sm text-gray-500">{relay.subdomain}</p>
+                      <p class="text-sm text-gray-500">https://{relay.subdomain}.spaces.coracle.social</p>
                     </div>
                     <p class="text-xs uppercase tracking-wide text-gray-500">{relay.status}</p>
                   </div>
diff --git a/frontend/src/pages/relays/RelayNew.tsx b/frontend/src/pages/relays/RelayNew.tsx
index 09a1ad8..f923225 100644
--- a/frontend/src/pages/relays/RelayNew.tsx
+++ b/frontend/src/pages/relays/RelayNew.tsx
@@ -1,6 +1,6 @@
-import { createSignal } from "solid-js"
+import { Show, createSignal } from "solid-js"
 import { useNavigate } from "@solidjs/router"
-import { createTenantRelay, listTenantRelays } from "../../lib/api"
+import { createTenantRelay } from "../../lib/api"
 
 const PLANS = [
   { id: "free", label: "Free", price: 0, members: "Up to 10", blossom: false, livekit: false },
@@ -28,38 +28,31 @@ export default function RelayNew() {
   const [description, setDescription] = createSignal("")
   const [plan, setPlan] = createSignal<PlanId>("free")
   const [submitting, setSubmitting] = createSignal(false)
-  const [error, setError] = createSignal("")
+  const [subdomainError, setSubdomainError] = createSignal("")
 
   function handleNameInput(value: string) {
     setName(value)
     setSubdomain(slugify(value))
+    setSubdomainError("")
   }
 
   async function handleSubmit(e: Event) {
     e.preventDefault()
 
-    setError("")
+    setSubdomainError("")
     setSubmitting(true)
 
     try {
-      const normalizedSubdomain = slugify(subdomain())
-      const existingRelays = await listTenantRelays()
-      const hasDuplicate = existingRelays.some(relay => relay.subdomain.toLowerCase() === normalizedSubdomain.toLowerCase())
-
-      if (hasDuplicate) {
-        throw new Error("You already have a relay with this subdomain")
-      }
-
       const relay = await createTenantRelay({
         name: name().trim(),
-        subdomain: normalizedSubdomain,
+        subdomain: slugify(subdomain()),
         icon: icon().trim(),
         description: description().trim(),
         plan: plan(),
       })
       navigate(`/relays/${relay.id}`)
     } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to create relay")
+      setSubdomainError(e instanceof Error ? e.message : "Failed to create relay")
     } finally {
       setSubmitting(false)
     }
@@ -69,12 +62,6 @@ export default function RelayNew() {
     <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">
-        {error() && (
-          <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-            {error()}
-          </div>
-        )}
-
         <div>
           <label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
           <input
@@ -89,18 +76,35 @@ export default function RelayNew() {
 
         <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">
+          <div class="relative">
+            <div
+              class="flex items-center border rounded-lg overflow-hidden focus-within:ring-2"
+              classList={{
+                "border-gray-300 focus-within:ring-blue-500": !subdomainError(),
+                "border-red-400 focus-within:ring-red-400": !!subdomainError(),
+              }}
+            >
             <input
               type="text"
               required
               value={subdomain()}
-              onInput={e => setSubdomain(e.currentTarget.value)}
+              onInput={e => {
+                setSubdomain(e.currentTarget.value)
+                setSubdomainError("")
+              }}
               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>
+
+            <Show when={subdomainError()}>
+              <div class="pointer-events-none absolute right-0 top-full z-10 mt-2 rounded-md bg-red-600 px-3 py-2 text-xs text-white shadow-lg">
+                {subdomainError()}
+              </div>
+            </Show>
           </div>
         </div>