Implement more stuff

frontend/src/pages/relays/RelayDetail.tsx

@@ -1,10 +1,27 @@
 import { useParams, A } from "@solidjs/router"
-import { createResource, Show } from "solid-js"
-import { getTenantRelay } from "../../lib/api"
+import { createResource, createSignal, Show } from "solid-js"
+import { deactivateTenantRelay, getTenantRelay } from "../../lib/api"
 
 export default function RelayDetail() {
   const params = useParams()
-  const [relay] = createResource(() => params.id, getTenantRelay)
+  const relayId = () => params.id ?? ""
+  const [relay, { refetch }] = createResource(relayId, getTenantRelay)
+  const [busy, setBusy] = createSignal(false)
+  const [error, setError] = createSignal("")
+
+  async function handleDeactivate() {
+    if (busy()) return
+    setError("")
+    setBusy(true)
+    try {
+      await deactivateTenantRelay(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">
@@ -39,10 +56,17 @@ export default function RelayDetail() {
         >
           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>
   )
 }