Rework the relay detail page and edit screen

This commit is contained in:
Jon Staab
2026-03-03 10:54:14 -08:00
parent 7e577bf7ff
commit 0482c2710a
10 changed files with 520 additions and 235 deletions
-87
View File
@@ -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"