feat: add confirmation dialog for relay deactivate/reactivate with explicit warnings

frontend/src/components/ConfirmDialog.tsx

@@ -0,0 +1,151 @@
+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/PaymentSetup.tsx

@@ -64,7 +64,7 @@ export default function PaymentSetup(props: PaymentSetupProps) {
         <div class="flex items-start justify-between gap-3">
           <div>
             <h2 class="text-lg font-semibold text-gray-900">Set Up Payments</h2>
-            <p class="text-sm text-gray-500 mt-1">Choose how you'd like to pay once invoices are issued for your relay.</p>
+            <p class="text-sm text-gray-500 mt-1">Choose how you'd like to pay for your relay.</p>
           </div>
           <button
             type="button"
@@ -144,7 +144,7 @@ export default function PaymentSetup(props: PaymentSetupProps) {
                 <line x1="1" y1="10" x2="23" y2="10" />
               </svg>
             </div>
-            <p class="text-sm text-gray-600">Add a payment card via Stripe to enable automatic billing once invoices are issued.</p>
+            <p class="text-sm text-gray-600">Add a payment card via Stripe to enable automatic billing.</p>
             <button
               type="button"
               onClick={openPortal}

frontend/src/components/RelayDetailCard.tsx

@@ -2,6 +2,7 @@ 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"
@@ -51,8 +52,8 @@ type RelayDetailCardProps = {
   currentMembers?: number
   showTenant?: boolean
   editHref?: string
-  onDeactivate?: () => void
-  onReactivate?: () => void
+  onDeactivate?: () => void | Promise<void>
+  onReactivate?: () => void | Promise<void>
   deactivating?: boolean
   reactivating?: boolean
   onTogglePublicJoin?: () => void
@@ -76,6 +77,7 @@ 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
 
@@ -86,6 +88,24 @@ 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)
@@ -97,6 +117,29 @@ 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
 
@@ -128,7 +171,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 flex-shrink-0 border border-gray-200" />
+            <img src={r().info_icon} alt="" class="w-14 h-14 rounded-xl object-cover shrink-0 border border-gray-200" />
           </Show>
           <div class="min-w-0">
             <div class="flex items-center gap-3 flex-wrap">
@@ -148,7 +191,7 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
         </div>
 
         <Show when={props.editHref && (props.onDeactivate || props.onReactivate)}>
-          <div class="relative flex-shrink-0" ref={menuContainerRef}>
+          <div class="relative 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"
@@ -177,8 +220,7 @@ 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={() => {
-                    setMenuOpen(false)
-                    props.onDeactivate?.()
+                    openActionDialog("deactivate")
                   }}
                   disabled={props.deactivating}
                 >
@@ -190,8 +232,7 @@ 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={() => {
-                    setMenuOpen(false)
-                    props.onReactivate?.()
+                    openActionDialog("reactivate")
                   }}
                   disabled={props.reactivating}
                 >
@@ -346,6 +387,19 @@ 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>
   )
 }

frontend/src/pages/relays/RelayDetail.tsx

@@ -1,5 +1,5 @@
 import { useParams } from "@solidjs/router"
-import { createMemo, createResource, createSignal, Show } from "solid-js"
+import { createMemo, createResource, Show } from "solid-js"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
 import PaymentSetup from "@/components/PaymentSetup"
@@ -7,9 +7,8 @@ import RelayDetailCard from "@/components/RelayDetailCard"
 import ResourceState from "@/components/ResourceState"
 import useMinLoading from "@/components/useMinLoading"
 import ActivityFeed from "@/components/ActivityFeed"
-import { getRelayMembers, useRelay, useRelayActivity, useTenant } from "@/lib/hooks"
+import { getRelayMembers, useRelay, useRelayActivity } from "@/lib/hooks"
 import useRelayToggles from "@/lib/useRelayToggles"
-import { plans } from "@/lib/state"
 
 export default function RelayDetail() {
   const params = useParams()
@@ -24,21 +23,6 @@ export default function RelayDetail() {
   const [activity] = useRelayActivity(relayId)
   const { busy, handleDeactivate, handleReactivate, handleUpdatePlan, needsPaymentSetup, clearNeedsPaymentSetup, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
 
-  const [tenant, { refetch: refetchTenant }] = useTenant()
-  const [paymentSetupOpen, setPaymentSetupOpen] = createSignal(false)
-  const [paymentBannerDismissed, setPaymentBannerDismissed] = createSignal(false)
-
-  const showPaymentNudge = createMemo(() => {
-    if (paymentBannerDismissed()) return false
-    const r = relay()
-    if (!r) return false
-    const plan = plans().find(p => p.id === r.plan)
-    if (!plan || plan.amount === 0) return false
-    const t = tenant()
-    if (!t) return false
-    return !t.nwc_url && !t.stripe_subscription_id
-  })
-
   return (
     <PageContainer>
       <BackLink href="/relays" label="Relays" />
@@ -46,35 +30,6 @@ export default function RelayDetail() {
       <Show when={!loading() && relay()}>
         {(r) => (
           <div class="space-y-6 mb-6">
-            <Show when={showPaymentNudge()}>
-              <div class="rounded-lg border border-amber-200 bg-amber-50 p-4 flex items-start justify-between gap-4">
-                <div class="min-w-0">
-                  <p class="text-sm font-medium text-amber-800">Payment setup recommended</p>
-                  <p class="text-sm text-amber-700 mt-1">
-                    This relay is on a paid plan. Invoices are generated at the end of the billing period, so you cannot pay in advance. You can set up NWC or Stripe now to be ready when an invoice is issued.
-                  </p>
-                </div>
-                <div class="flex items-center gap-3 shrink-0">
-                  <button
-                    type="button"
-                    onClick={() => setPaymentSetupOpen(true)}
-                    class="text-sm font-medium text-amber-800 underline hover:text-amber-900 whitespace-nowrap"
-                  >
-                    Set up NWC or Stripe
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setPaymentBannerDismissed(true)}
-                    aria-label="Dismiss"
-                    class="text-amber-500 hover:text-amber-800 shrink-0"
-                  >
-                    <svg class="w-4 h-4" 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>
-            </Show>
             <RelayDetailCard
               relay={r()}
               currentMembers={members.length}
@@ -91,12 +46,8 @@ export default function RelayDetail() {
         )}
       </Show>
       <PaymentSetup
-        open={needsPaymentSetup() || paymentSetupOpen()}
-        onClose={() => {
-          clearNeedsPaymentSetup()
-          setPaymentSetupOpen(false)
-          void refetchTenant()
-        }}
+        open={needsPaymentSetup()}
+        onClose={clearNeedsPaymentSetup}
       />
     </PageContainer>
   )