Implement more stuff

frontend/src/pages/admin/AdminRelayDetail.tsx

@@ -1,14 +1,56 @@
 import { useParams, A } from "@solidjs/router"
+import { createResource, createSignal, Show } from "solid-js"
+import { adminDeactivateRelay, adminGetRelay } from "../../lib/api"
 
 export default function AdminRelayDetail() {
   const params = useParams()
+  const relayId = () => params.id ?? ""
+  const [relay, { refetch }] = createResource(relayId, adminGetRelay)
+  const [busy, setBusy] = createSignal(false)
+  const [error, setError] = createSignal("")
+
+  async function handleDeactivate() {
+    if (busy()) return
+    setError("")
+    setBusy(true)
+    try {
+      await adminDeactivateRelay(relayId())
+      await refetch()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to deactivate relay")
+    } finally {
+      setBusy(false)
+    }
+  }
 
   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>
+
+      <Show when={relay.loading}>
+        <p class="text-gray-500 mb-4">Loading relay...</p>
+      </Show>
+      <Show when={relay.error && !relay.loading}>
+        <p class="text-red-600 mb-4">Failed to load relay.</p>
+      </Show>
+
+      <Show when={relay()}>
+        {(r) => (
+          <div class="mb-6">
+            <h1 class="text-2xl font-bold text-gray-900 mb-1">{r().name}</h1>
+            <p class="text-sm text-gray-500">{r().subdomain}.spaces.coracle.social</p>
+            <p class="text-sm text-gray-500 mt-2 break-all">Tenant: {r().tenant}</p>
+            <p class="text-sm text-gray-700 mt-2">Plan: <span class="uppercase">{r().plan}</span></p>
+            <p class="text-sm text-gray-700">Status: <span class="uppercase">{r().status}</span></p>
+            <Show when={r().description.trim()}>
+              <p class="mt-3 text-gray-700">{r().description}</p>
+            </Show>
+          </div>
+        )}
+      </Show>
+
       <div class="flex gap-3">
         <A
           href={`/admin/relays/${params.id}/edit`}
@@ -16,10 +58,17 @@ export default function AdminRelayDetail() {
         >
           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
+          class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors disabled:opacity-50"
+          onClick={handleDeactivate}
+          disabled={busy()}
+        >
+          {busy() ? "Deactivating..." : "Deactivate"}
         </button>
       </div>
+      <Show when={error()}>
+        <p class="mt-3 text-sm text-red-600">{error()}</p>
+      </Show>
     </div>
   )
 }