Rework the relay detail page and edit screen

frontend/src/components/RelayDetailCard.tsx

@@ -1,5 +1,7 @@
-import { For, Show } from "solid-js"
+import { A } from "@solidjs/router"
+import { Show, createEffect, createSignal, onCleanup } from "solid-js"
 import type { Relay } from "../lib/api"
+import menuDotsIcon from "../assets/menu-dots-2.svg"
 
 function Field(props: { label: string; children: any }) {
   return (
@@ -10,20 +12,60 @@ function Field(props: { label: string; children: any }) {
   )
 }
 
-function Badge(props: { on: boolean; onLabel?: string; offLabel?: string }) {
-  const label = () => (props.on ? (props.onLabel ?? "Yes") : (props.offLabel ?? "No"))
+function ToggleField(props: { label: string; children: any }) {
   return (
-    <span class={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${props.on ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"}`}>
-      {label()}
-    </span>
+    <div class="flex items-center justify-between gap-3">
+      <dt class="text-xs font-medium text-gray-500 uppercase tracking-wide">{props.label}</dt>
+      <dd class="text-sm text-gray-900">{props.children}</dd>
+    </div>
   )
 }
 
-function Section(props: { title: string; children: any }) {
+function ToggleButton(props: {
+  enabled: boolean
+  disabled?: boolean
+  onToggle?: () => void
+  onLabel?: string
+  offLabel?: string
+}) {
+  const label = () => (props.enabled ? (props.onLabel ?? "Enabled") : (props.offLabel ?? "Disabled"))
+
+  return (
+    <div class="inline-flex items-center gap-2">
+      <button
+        type="button"
+        role="switch"
+        aria-checked={props.enabled}
+        aria-label={label()}
+        class={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${props.enabled ? "bg-blue-600" : "bg-gray-300"} disabled:opacity-50`}
+        onClick={props.onToggle}
+        disabled={props.disabled}
+      >
+        <span
+          class={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform ${props.enabled ? "translate-x-5" : "translate-x-0.5"}`}
+        />
+      </button>
+      <span class={`text-xs font-medium ${props.enabled ? "text-blue-700" : "text-gray-500"}`}>{label()}</span>
+    </div>
+  )
+}
+
+function DetailSection(props: { title: string; children: any }) {
   return (
     <div>
       <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">{props.title}</h3>
-      <dl class="grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-3">
+      <dl class="grid lg:grid-cols-2 gap-x-32 gap-y-4">
+        {props.children}
+      </dl>
+    </div>
+  )
+}
+
+function MembershipSection(props: { title: string; children: any }) {
+  return (
+    <div>
+      <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">{props.title}</h3>
+      <dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2">
         {props.children}
       </dl>
     </div>
@@ -32,98 +74,223 @@ function Section(props: { title: string; children: any }) {
 
 type RelayDetailCardProps = {
   relay: Relay
+  currentMembers?: number
   showTenant?: boolean
+  editHref?: string
+  onDeactivate?: () => void
+  deactivating?: boolean
+  onTogglePublicJoin?: () => void
+  onToggleStripSignatures?: () => void
+  onToggleGroups?: () => void
+  onToggleManagement?: () => void
+  onToggleMediaStorage?: () => void
+  onTogglePushNotifications?: () => void
 }
 
 export default function RelayDetailCard(props: RelayDetailCardProps) {
   const r = () => props.relay
   const cfg = () => r().config
+  const [menuOpen, setMenuOpen] = createSignal(false)
+  let menuContainerRef: HTMLDivElement | undefined
+
+  const memberLimitByPlan: Record<string, string> = {
+    free: "10",
+    basic: "100",
+    growth: "∞",
+  }
+
+  const memberLimitLabel = () => memberLimitByPlan[r().plan] ?? "?"
+  const isTopTier = () => r().plan === "growth"
+
+  createEffect(() => {
+    if (!menuOpen()) return
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node | null
+      if (target && !menuContainerRef?.contains(target)) {
+        setMenuOpen(false)
+      }
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setMenuOpen(false)
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    document.addEventListener("keydown", handleEscape)
+
+    onCleanup(() => {
+      document.removeEventListener("mousedown", handleClickOutside)
+      document.removeEventListener("keydown", handleEscape)
+    })
+  })
 
   return (
     <div class="space-y-6">
       {/* Header */}
-      <div class="flex items-start gap-4">
-        <Show when={r().icon}>
-          <img src={r().icon} alt="" class="w-14 h-14 rounded-xl object-cover flex-shrink-0 border border-gray-200" />
-        </Show>
-        <div class="min-w-0">
-          <h1 class="text-2xl font-bold text-gray-900">{r().name}</h1>
-          <a
-            href={`wss://${r().subdomain}.spaces.coracle.social`}
-            class="text-sm text-blue-600 hover:underline break-all"
-          >
-            wss://{r().subdomain}.spaces.coracle.social
-          </a>
-          <Show when={r().description.trim()}>
-            <p class="mt-2 text-sm text-gray-600">{r().description}</p>
+      <div class="flex items-start justify-between gap-4">
+        <div class="flex items-start gap-4 min-w-0">
+          <Show when={r().icon}>
+            <img src={r().icon} alt="" class="w-14 h-14 rounded-xl object-cover flex-shrink-0 border border-gray-200" />
           </Show>
+          <div class="min-w-0">
+            <h1 class="text-2xl font-bold text-gray-900">{r().name}</h1>
+            <a
+              href={`wss://${r().subdomain}.spaces.coracle.social`}
+              class="text-sm text-blue-600 hover:underline break-all"
+            >
+              wss://{r().subdomain}.spaces.coracle.social
+            </a>
+            <Show when={r().description.trim()}>
+              <p class="mt-2 text-sm text-gray-600">{r().description}</p>
+            </Show>
+          </div>
         </div>
+
+        <Show when={props.editHref && props.onDeactivate}>
+          <div class="relative flex-shrink-0" ref={menuContainerRef}>
+            <button
+              type="button"
+              class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-200 hover:bg-gray-50"
+              aria-label="Open relay actions"
+              onClick={() => setMenuOpen((open) => !open)}
+            >
+              <img src={menuDotsIcon} alt="" class="h-5 w-5" />
+            </button>
+
+            <div
+              class="absolute right-0 mt-2 w-44 rounded-lg border border-gray-200 bg-white shadow-lg z-10 py-1 origin-top-right transition-all duration-150 ease-out"
+              classList={{
+                "opacity-100 scale-100": menuOpen(),
+                "opacity-0 scale-95 pointer-events-none": !menuOpen(),
+              }}
+            >
+              <A
+                href={props.editHref!}
+                class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                onClick={() => setMenuOpen(false)}
+              >
+                Edit Details
+              </A>
+              <button
+                type="button"
+                class="block w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 disabled:opacity-50"
+                onClick={() => {
+                  setMenuOpen(false)
+                  props.onDeactivate?.()
+                }}
+                disabled={props.deactivating}
+              >
+                {props.deactivating ? "Deactivating..." : "Deactivate"}
+              </button>
+            </div>
+          </div>
+        </Show>
       </div>
 
       <hr class="border-gray-200" />
 
-      {/* Relay info */}
-      <Section title="Relay">
-        <Field label="Plan">
-          <span class="capitalize">{r().plan}</span>
+      <DetailSection title="Policy">
+        <ToggleField label="Public join">
+          <ToggleButton
+            enabled={cfg()?.policy.public_join ?? false}
+            onToggle={props.onTogglePublicJoin}
+          />
+        </ToggleField>
+        <ToggleField label="Strip signatures">
+          <ToggleButton
+            enabled={cfg()?.policy.strip_signatures ?? false}
+            onToggle={props.onToggleStripSignatures}
+          />
+        </ToggleField>
+      </DetailSection>
+
+      <hr class="border-gray-200" />
+
+      <DetailSection title="Features">
+        <ToggleField label="Rooms">
+          <ToggleButton
+            enabled={cfg()?.groups.enabled ?? true}
+            onToggle={props.onToggleGroups}
+          />
+        </ToggleField>
+        <ToggleField label="Management API">
+          <ToggleButton
+            enabled={cfg()?.management.enabled ?? true}
+            onToggle={props.onToggleManagement}
+          />
+        </ToggleField>
+        <ToggleField label="Push notifications">
+          <ToggleButton
+            enabled={cfg()?.push.enabled ?? true}
+            onToggle={props.onTogglePushNotifications}
+          />
+        </ToggleField>
+        <ToggleField label="Media storage">
+          <Show
+            when={r().plan !== "free"}
+            fallback={
+              <A
+                href={props.editHref ?? "#"}
+                class="inline-flex items-center rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
+              >
+                Upgrade Plan
+              </A>
+            }
+          >
+            <ToggleButton
+              enabled={cfg()?.blossom.enabled ?? true}
+              onToggle={props.onToggleMediaStorage}
+            />
+          </Show>
+        </ToggleField>
+        <ToggleField label="Audio Rooms">
+          <Show
+            when={r().plan !== "free"}
+            fallback={
+              <A
+                href={props.editHref ?? "#"}
+                class="inline-flex items-center rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
+              >
+                Upgrade Plan
+              </A>
+            }
+          >
+            <ToggleButton
+              enabled={cfg()?.livekit.enabled ?? true}
+              onToggle={props.onToggleMediaStorage}
+            />
+          </Show>
+        </ToggleField>
+      </DetailSection>
+
+      <hr class="border-gray-200" />
+
+      <MembershipSection title="Membership">
+        <Field label="Current members">
+          <span class="font-medium text-gray-900">{props.currentMembers ?? "—"}</span>
         </Field>
-        <Field label="Status">
-          <span class={`capitalize font-medium ${r().status === "active" ? "text-green-600" : r().status === "deactivated" ? "text-red-500" : "text-yellow-600"}`}>
-            {r().status}
-          </span>
+        <Field label="Member limit">
+          <span class="text-gray-900">{memberLimitLabel()}</span>
         </Field>
-        <Field label="Schema">{r().schema}</Field>
         <Show when={props.showTenant}>
           <Field label="Tenant">
             <span class="font-mono text-xs break-all">{r().tenant}</span>
           </Field>
         </Show>
-      </Section>
-
-      <hr class="border-gray-200" />
-
-      {/* Config sections */}
-      <Show when={cfg()}>
-        <Section title="Policy">
-          <Field label="Public join">
-            <Badge on={cfg().policy.public_join} onLabel="Enabled" offLabel="Disabled" />
+        <Show when={!isTopTier() && props.editHref}>
+          <Field label=" ">
+            <A
+              href={props.editHref!}
+              class="inline-flex items-center rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
+            >
+              Upgrade Plan
+            </A>
           </Field>
-          <Field label="Strip signatures">
-            <Badge on={cfg().policy.strip_signatures} onLabel="Enabled" offLabel="Disabled" />
-          </Field>
-        </Section>
-
-        <hr class="border-gray-200" />
-
-        <Section title="Groups (NIP 29)">
-          <Field label="Enabled">
-            <Badge on={cfg().groups.enabled} />
-          </Field>
-          <Field label="Auto-join">
-            <Badge on={cfg().groups.auto_join} />
-          </Field>
-        </Section>
-
-        <hr class="border-gray-200" />
-
-        <Section title="Management (NIP 86)">
-          <Field label="Enabled">
-            <Badge on={cfg().management.enabled} />
-          </Field>
-
-        </Section>
-
-        <hr class="border-gray-200" />
-
-        <Section title="Features">
-          <Field label="Blossom">
-            <Badge on={cfg().blossom.enabled} onLabel="Enabled" offLabel="Disabled" />
-          </Field>
-          <Field label="Push (NIP 9a)">
-            <Badge on={cfg().push.enabled} onLabel="Enabled" offLabel="Disabled" />
-          </Field>
-        </Section>
-      </Show>
+        </Show>
+      </MembershipSection>
     </div>
   )
 }

frontend/src/components/RelayForm.tsx

@@ -1,6 +1,3 @@
-import type { RelayConfig } from "../lib/api"
-import Checkbox from "./Checkbox"
-
 type RelayFormProps = {
   name: string
   setName: (value: string) => void
@@ -10,11 +7,6 @@ type RelayFormProps = {
   setIcon: (value: string) => void
   description: string
   setDescription: (value: string) => void
-  plan: string
-  setPlan: (value: string) => void
-  plans: readonly string[]
-  config: RelayConfig
-  setConfig: (value: RelayConfig) => void
   onSubmit: (e: Event) => void
   submitting: boolean
   error?: string
@@ -23,10 +15,6 @@ type RelayFormProps = {
 }
 
 export default function RelayForm(props: RelayFormProps) {
-  function patchConfig(patch: Partial<RelayConfig>) {
-    props.setConfig({ ...props.config, ...patch })
-  }
-
   return (
     <form onSubmit={props.onSubmit} class="space-y-6">
       {/* Basic info */}
@@ -69,81 +57,6 @@ export default function RelayForm(props: RelayFormProps) {
           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-2">Plan</label>
-        <div class="flex gap-2">
-          {props.plans.map(p => (
-            <button
-              type="button"
-              class={`rounded-lg border px-3 py-2 text-sm capitalize ${props.plan === p ? "border-blue-600 text-blue-700" : "border-gray-300 text-gray-700"}`}
-              onClick={() => props.setPlan(p)}
-            >
-              {p}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Policy */}
-      <fieldset class="border border-gray-200 rounded-lg p-4 space-y-3">
-        <legend class="text-sm font-semibold text-gray-700 px-1">Policy</legend>
-        <Checkbox
-          label="Allow public join (anyone can join without an invite)"
-          checked={props.config.policy.public_join}
-          onChange={v => patchConfig({ policy: { ...props.config.policy, public_join: v } })}
-        />
-        <Checkbox
-          label="Strip signatures when serving events to non-admins"
-          checked={props.config.policy.strip_signatures}
-          onChange={v => patchConfig({ policy: { ...props.config.policy, strip_signatures: v } })}
-        />
-      </fieldset>
-
-      {/* Groups (NIP 29) */}
-      <fieldset class="border border-gray-200 rounded-lg p-4 space-y-3">
-        <legend class="text-sm font-semibold text-gray-700 px-1">Groups (NIP 29)</legend>
-        <Checkbox
-          label="Enable NIP 29 groups"
-          checked={props.config.groups.enabled}
-          onChange={v => patchConfig({ groups: { ...props.config.groups, enabled: v } })}
-        />
-        <Checkbox
-          label="Allow members to join groups without approval"
-          checked={props.config.groups.auto_join}
-          onChange={v => patchConfig({ groups: { ...props.config.groups, auto_join: v } })}
-        />
-      </fieldset>
-
-      {/* Management (NIP 86) */}
-      <fieldset class="border border-gray-200 rounded-lg p-4 space-y-3">
-        <legend class="text-sm font-semibold text-gray-700 px-1">Management (NIP 86)</legend>
-        <Checkbox
-          label="Enable NIP 86 relay management"
-          checked={props.config.management.enabled}
-          onChange={v => patchConfig({ management: { enabled: v } })}
-        />
-      </fieldset>
-
-      {/* Blossom */}
-      <fieldset class="border border-gray-200 rounded-lg p-4">
-        <legend class="text-sm font-semibold text-gray-700 px-1">Blossom</legend>
-        <Checkbox
-          label="Enable Blossom media storage"
-          checked={props.config.blossom.enabled}
-          onChange={v => patchConfig({ blossom: { enabled: v } })}
-        />
-      </fieldset>
-
-      {/* Push (NIP 9a) */}
-      <fieldset class="border border-gray-200 rounded-lg p-4">
-        <legend class="text-sm font-semibold text-gray-700 px-1">Push (NIP 9a)</legend>
-        <Checkbox
-          label="Enable NIP 9a push notifications"
-          checked={props.config.push.enabled}
-          onChange={v => patchConfig({ push: { enabled: v } })}
-        />
-      </fieldset>
-
       {props.error && <p class="text-sm text-red-600">{props.error}</p>}
       <button
         type="submit"