docs: document delinquent relay status across spec

frontend/src/components/ConfirmDialog.tsx

@@ -1,151 +0,0 @@
-import { For, Show, createEffect, createSignal } from "solid-js"
-import Modal from "@/components/Modal"
-
-type ConfirmDialogProps = {
-  open: boolean
-  title: string
-  description: string
-  /** Optional bullet points shown in a warning box below the description */
-  details?: string[]
-  confirmLabel: string
-  busyLabel?: string
-  busy?: boolean
-  tone?: "danger" | "primary"
-  onConfirm: () => void | Promise<void>
-  onClose: () => void
-}
-
-const TONE_STYLES: Record<NonNullable<ConfirmDialogProps["tone"]>, string> = {
-  danger: "bg-red-600 text-white hover:bg-red-700",
-  primary: "bg-blue-600 text-white hover:bg-blue-700",
-}
-
-const DETAIL_BOX_STYLES: Record<NonNullable<ConfirmDialogProps["tone"]>, string> = {
-  danger: "border-amber-200 bg-amber-50 text-amber-800",
-  primary: "border-blue-200 bg-blue-50 text-blue-800",
-}
-
-type ConfirmDialogSnapshot = {
-  title: string
-  description: string
-  details?: string[]
-  confirmLabel: string
-  busyLabel?: string
-  busy: boolean
-  tone: NonNullable<ConfirmDialogProps["tone"]>
-}
-
-export default function ConfirmDialog(props: ConfirmDialogProps) {
-  const [snapshot, setSnapshot] = createSignal<ConfirmDialogSnapshot>({
-    title: props.title,
-    description: props.description,
-    details: props.details ? [...props.details] : undefined,
-    confirmLabel: props.confirmLabel,
-    busyLabel: props.busyLabel,
-    busy: props.busy ?? false,
-    tone: props.tone ?? "primary",
-  })
-
-  createEffect(() => {
-    if (!props.open) return
-
-    setSnapshot({
-      title: props.title,
-      description: props.description,
-      details: props.details ? [...props.details] : undefined,
-      confirmLabel: props.confirmLabel,
-      busyLabel: props.busyLabel,
-      busy: props.busy ?? false,
-      tone: props.tone ?? "primary",
-    })
-  })
-
-  const content = () => props.open
-    ? {
-        title: props.title,
-        description: props.description,
-        details: props.details,
-        confirmLabel: props.confirmLabel,
-        busyLabel: props.busyLabel,
-        busy: props.busy ?? false,
-        tone: props.tone ?? "primary",
-      }
-    : snapshot()
-  const tone = () => content().tone
-  const confirmText = () => content().busy ? (content().busyLabel ?? content().confirmLabel) : content().confirmLabel
-
-  function handleClose() {
-    if (props.busy) return
-    props.onClose()
-  }
-
-  function handleConfirm() {
-    if (props.busy) return
-    void props.onConfirm()
-  }
-
-  return (
-    <Modal
-      open={props.open}
-      onClose={handleClose}
-      wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
-      panelClass="w-full max-w-md rounded-2xl bg-white shadow-xl overflow-hidden"
-    >
-      <div class="px-6 pt-6 pb-4 border-b border-gray-100">
-        <div class="flex items-start justify-between gap-3">
-          <div>
-            <h2 class="text-lg font-semibold text-gray-900">{content().title}</h2>
-          </div>
-          <button
-            type="button"
-            onClick={handleClose}
-            disabled={content().busy}
-            class="shrink-0 rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
-            aria-label="Close"
-          >
-            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      <div class="px-6 py-4">
-        <div class="space-y-3 text-left">
-          <p class="text-sm text-gray-600">{content().description}</p>
-          <Show when={content().details && content().details!.length > 0}>
-            <ul class={`w-full rounded-lg border px-4 py-3 space-y-1.5 ${DETAIL_BOX_STYLES[tone()]}`}>
-              <For each={content().details}>
-                {(item) => (
-                  <li class="flex items-start gap-2 text-sm">
-                    <span class="mt-0.5 shrink-0 select-none">•</span>
-                    <span>{item}</span>
-                  </li>
-                )}
-              </For>
-            </ul>
-          </Show>
-        </div>
-      </div>
-
-      <div class="px-6 py-4 flex justify-end gap-3 border-t border-gray-100">
-        <button
-          type="button"
-          onClick={handleClose}
-          disabled={content().busy}
-          class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          Cancel
-        </button>
-        <button
-          type="button"
-          onClick={handleConfirm}
-          disabled={content().busy}
-          class={`rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${TONE_STYLES[tone()]}`}
-        >
-          {confirmText()}
-        </button>
-      </div>
-    </Modal>
-  )
-}

frontend/src/components/RelayDetailCard.tsx

@@ -2,7 +2,6 @@ import { A } from "@solidjs/router"
 import { Show, createEffect, createSignal, onCleanup } from "solid-js"
 import type { Relay, PlanId } from "@/lib/api"
 import menuDotsIcon from "@/assets/menu-dots-2.svg"
-import ConfirmDialog from "@/components/ConfirmDialog"
 import Field from "@/components/Field"
 import PricingTable from "@/components/PricingTable"
 import ToggleButton from "@/components/ToggleButton"
@@ -52,8 +51,8 @@ type RelayDetailCardProps = {
   currentMembers?: number
   showTenant?: boolean
   editHref?: string
-  onDeactivate?: () => void | Promise<void>
-  onReactivate?: () => void | Promise<void>
+  onDeactivate?: () => void
+  onReactivate?: () => void
   deactivating?: boolean
   reactivating?: boolean
   onTogglePublicJoin?: () => void
@@ -77,7 +76,6 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
   }
   const [menuOpen, setMenuOpen] = createSignal(false)
   const [plan, setPlan] = createSignal<PlanId>(props.relay.plan)
-  const [pendingAction, setPendingAction] = createSignal<"deactivate" | "reactivate" | null>(null)
 
   let menuContainerRef: HTMLDivElement | undefined
 
@@ -88,24 +86,6 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
   }
   const planLimited = () => (props.enforcePlanLimits ?? true) && r().plan === "free"
   const showPlanActions = () => props.showPlanActions ?? true
-  const actionBusy = () => pendingAction() === "deactivate" ? !!props.deactivating : pendingAction() === "reactivate" ? !!props.reactivating : false
-  const relayLabel = () => r().info_name || r().subdomain
-  const confirmTitle = () => pendingAction() === "deactivate" ? "Deactivate relay?" : "Reactivate relay?"
-  const confirmDescription = () => pendingAction() === "deactivate"
-    ? `${relayLabel()} will be taken offline immediately.`
-    : `${relayLabel()} will come back online and start accepting connections.`
-  const confirmDetails = () => pendingAction() === "deactivate"
-    ? [
-        "All client connections will be dropped immediately.",
-        "Members will be unable to read from or publish to the relay.",
-        "Scheduled and automated tasks (billing, syncing) will be paused.",
-        "All relay data, settings, and members are preserved, nothing is deleted.",
-        "You can reactivate at any time from this page.",
-      ]
-    : undefined
-  const confirmLabel = () => pendingAction() === "deactivate" ? "Yes, deactivate" : "Yes, reactivate"
-  const confirmBusyLabel = () => pendingAction() === "deactivate" ? "Deactivating..." : "Reactivating..."
-  const confirmTone = () => pendingAction() === "deactivate" ? "danger" : "primary"
 
   async function changePlan(plan: PlanId) {
     setPlan(plan)
@@ -117,29 +97,6 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
     }
   }
 
-  function openActionDialog(action: "deactivate" | "reactivate") {
-    setMenuOpen(false)
-    setPendingAction(action)
-  }
-
-  function closeActionDialog() {
-    if (actionBusy()) return
-    setPendingAction(null)
-  }
-
-  async function confirmAction() {
-    const action = pendingAction()
-    if (!action) return
-
-    if (action === "deactivate") {
-      await props.onDeactivate?.()
-    } else {
-      await props.onReactivate?.()
-    }
-
-    setPendingAction(null)
-  }
-
   createEffect(() => {
     if (!menuOpen()) return
 
@@ -171,7 +128,7 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
       <div class="flex items-start justify-between gap-4">
         <div class="flex items-start gap-4 min-w-0">
           <Show when={r().info_icon}>
-            <img src={r().info_icon} alt="" class="w-14 h-14 rounded-xl object-cover shrink-0 border border-gray-200" />
+            <img src={r().info_icon} alt="" class="w-14 h-14 rounded-xl object-cover flex-shrink-0 border border-gray-200" />
           </Show>
           <div class="min-w-0">
             <div class="flex items-center gap-3 flex-wrap">
@@ -191,7 +148,7 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
         </div>
 
         <Show when={props.editHref && (props.onDeactivate || props.onReactivate)}>
-          <div class="relative shrink-0" ref={menuContainerRef}>
+          <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"
@@ -220,7 +177,8 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
                   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={() => {
-                    openActionDialog("deactivate")
+                    setMenuOpen(false)
+                    props.onDeactivate?.()
                   }}
                   disabled={props.deactivating}
                 >
@@ -232,7 +190,8 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
                   type="button"
                   class="block w-full text-left px-3 py-2 text-sm text-blue-600 hover:bg-blue-50 disabled:opacity-50"
                   onClick={() => {
-                    openActionDialog("reactivate")
+                    setMenuOpen(false)
+                    props.onReactivate?.()
                   }}
                   disabled={props.reactivating}
                 >
@@ -387,19 +346,6 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
           </Show>
         </DetailSection>
       </Show>
-
-      <ConfirmDialog
-        open={pendingAction() !== null}
-        title={confirmTitle()}
-        description={confirmDescription()}
-        details={confirmDetails()}
-        confirmLabel={confirmLabel()}
-        busyLabel={confirmBusyLabel()}
-        busy={actionBusy()}
-        tone={confirmTone()}
-        onConfirm={confirmAction}
-        onClose={closeActionDialog}
-      />
     </div>
   )
 }