Rework the relay detail page and edit screen
This commit is contained in:
Jon Staab
+2
-3
@@ -321,7 +321,6 @@ struct UpdateRelayRequest {
|
||||
subdomain: String,
|
||||
icon: String,
|
||||
description: String,
|
||||
plan: String,
|
||||
config: Option<RelayConfig>,
|
||||
}
|
||||
|
||||
@@ -363,7 +362,7 @@ async fn update_tenant_relay(
|
||||
subdomain: payload.subdomain.clone(),
|
||||
icon: payload.icon,
|
||||
description: payload.description,
|
||||
plan: payload.plan,
|
||||
plan: existing.plan,
|
||||
status: existing.status,
|
||||
config: payload.config,
|
||||
};
|
||||
@@ -760,7 +759,7 @@ async fn admin_update_relay(
|
||||
subdomain: payload.subdomain.clone(),
|
||||
icon: payload.icon,
|
||||
description: payload.description,
|
||||
plan: payload.plan,
|
||||
plan: existing.plan,
|
||||
status: existing.status,
|
||||
config: payload.config,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="5" r="2" transform="rotate(90 12 5)" stroke="#000000" stroke-width="1.5"/>
|
||||
<circle cx="12" cy="12" r="2" transform="rotate(90 12 12)" stroke="#000000" stroke-width="1.5"/>
|
||||
<circle cx="12" cy="19" r="2" transform="rotate(90 12 19)" stroke="#000000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 392 B |
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
+15
-1
@@ -1,4 +1,5 @@
|
||||
import { accounts, API_URL } from "./nostr"
|
||||
import { Relay as NostrRelay, RelayManagement } from "applesauce-relay"
|
||||
|
||||
type NostrTag = string[]
|
||||
|
||||
@@ -146,7 +147,6 @@ export type UpdateRelayInput = {
|
||||
subdomain: string
|
||||
icon: string
|
||||
description: string
|
||||
plan: string
|
||||
config: RelayConfig
|
||||
}
|
||||
|
||||
@@ -245,3 +245,17 @@ export function adminDeactivateRelay(id: string) {
|
||||
method: "POST",
|
||||
})
|
||||
}
|
||||
|
||||
export async function getRelayMemberCount(relayUrl: string): Promise<number | undefined> {
|
||||
const signer = getActiveSigner()
|
||||
const management = new RelayManagement(new NostrRelay(relayUrl), signer)
|
||||
|
||||
try {
|
||||
const members = await management.listAllowedPubkeys()
|
||||
return members.length
|
||||
} catch {
|
||||
// ignore and fall back to unknown member count
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useParams, A } from "@solidjs/router"
|
||||
import { useParams } from "@solidjs/router"
|
||||
import { createResource, createSignal, Show } from "solid-js"
|
||||
import { adminDeactivateRelay, adminGetRelay } from "../../lib/api"
|
||||
import { adminDeactivateRelay, adminGetRelay, adminUpdateRelay, type RelayConfig } from "../../lib/api"
|
||||
import BackLink from "../../components/BackLink"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
import RelayDetailCard from "../../components/RelayDetailCard"
|
||||
@@ -10,10 +10,10 @@ import useMinLoading from "../../components/useMinLoading"
|
||||
export default function AdminRelayDetail() {
|
||||
const params = useParams()
|
||||
const relayId = () => params.id ?? ""
|
||||
const [relay, { refetch }] = createResource(relayId, adminGetRelay)
|
||||
const [relay, { refetch, mutate }] = createResource(relayId, adminGetRelay)
|
||||
const [busy, setBusy] = createSignal(false)
|
||||
const [error, setError] = createSignal("")
|
||||
const loading = useMinLoading(() => relay.loading)
|
||||
const loading = useMinLoading(() => relay.loading && !relay())
|
||||
|
||||
async function handleDeactivate() {
|
||||
if (busy()) return
|
||||
@@ -29,6 +29,108 @@ export default function AdminRelayDetail() {
|
||||
}
|
||||
}
|
||||
|
||||
function withDefaults(config?: RelayConfig): RelayConfig {
|
||||
return {
|
||||
policy: {
|
||||
public_join: config?.policy.public_join ?? false,
|
||||
strip_signatures: config?.policy.strip_signatures ?? false,
|
||||
},
|
||||
groups: {
|
||||
enabled: config?.groups.enabled ?? true,
|
||||
auto_join: config?.groups.auto_join ?? true,
|
||||
},
|
||||
management: {
|
||||
enabled: config?.management.enabled ?? true,
|
||||
},
|
||||
blossom: {
|
||||
enabled: config?.blossom.enabled ?? (relay()?.plan !== "free"),
|
||||
},
|
||||
push: {
|
||||
enabled: config?.push.enabled ?? true,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
async function updateFlags(nextConfig: RelayConfig, previousConfig: RelayConfig) {
|
||||
const current = relay()
|
||||
if (!current) return
|
||||
|
||||
setError("")
|
||||
const optimisticRelay = {
|
||||
...current,
|
||||
config: nextConfig,
|
||||
}
|
||||
mutate(optimisticRelay)
|
||||
|
||||
try {
|
||||
await adminUpdateRelay(relayId(), {
|
||||
name: current.name,
|
||||
subdomain: current.subdomain,
|
||||
icon: current.icon,
|
||||
description: current.description,
|
||||
config: nextConfig,
|
||||
})
|
||||
await refetch()
|
||||
} catch (e) {
|
||||
mutate({ ...current, config: previousConfig })
|
||||
setError(e instanceof Error ? e.message : "Failed to update relay settings")
|
||||
}
|
||||
}
|
||||
|
||||
function togglePublicJoin() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
policy: { ...config.policy, public_join: !config.policy.public_join },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
function toggleStripSignatures() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
policy: { ...config.policy, strip_signatures: !config.policy.strip_signatures },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
function toggleGroups() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
groups: { ...config.groups, enabled: !config.groups.enabled },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
function toggleManagement() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
management: { enabled: !config.management.enabled },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
function toggleMediaStorage() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
blossom: { enabled: !config.blossom.enabled },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
function togglePushNotifications() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
push: { enabled: !config.push.enabled },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<BackLink href="/admin/relays" label="Relays" />
|
||||
@@ -44,26 +146,22 @@ export default function AdminRelayDetail() {
|
||||
<Show when={!loading() && relay()}>
|
||||
{(r) => (
|
||||
<div class="mb-6">
|
||||
<RelayDetailCard relay={r()} showTenant />
|
||||
<RelayDetailCard
|
||||
relay={r()}
|
||||
showTenant
|
||||
editHref={`/admin/relays/${params.id}/edit`}
|
||||
onDeactivate={handleDeactivate}
|
||||
deactivating={busy()}
|
||||
onTogglePublicJoin={togglePublicJoin}
|
||||
onToggleStripSignatures={toggleStripSignatures}
|
||||
onToggleGroups={toggleGroups}
|
||||
onToggleManagement={toggleManagement}
|
||||
onToggleMediaStorage={toggleMediaStorage}
|
||||
onTogglePushNotifications={togglePushNotifications}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<A
|
||||
href={`/admin/relays/${params.id}/edit`}
|
||||
class="py-2 px-4 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
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 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>
|
||||
|
||||
@@ -2,7 +2,6 @@ import { useNavigate, useParams } from "@solidjs/router"
|
||||
import { Show, createEffect, createResource, createSignal } from "solid-js"
|
||||
import { adminGetRelay, adminUpdateRelay, type RelayConfig } from "../../lib/api"
|
||||
import RelayForm from "../../components/RelayForm"
|
||||
import { RELAY_PLAN_IDS, type RelayPlanId } from "../../lib/relayPlans"
|
||||
import { slugify } from "../../lib/slugify"
|
||||
import BackLink from "../../components/BackLink"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
@@ -28,8 +27,6 @@ export default function AdminRelayEdit() {
|
||||
const [subdomain, setSubdomain] = createSignal("")
|
||||
const [icon, setIcon] = createSignal("")
|
||||
const [description, setDescription] = createSignal("")
|
||||
const [plan, setPlan] = createSignal<RelayPlanId>("free")
|
||||
const [config, setConfig] = createSignal<RelayConfig>(DEFAULT_CONFIG)
|
||||
const [error, setError] = createSignal("")
|
||||
const [submitting, setSubmitting] = createSignal(false)
|
||||
|
||||
@@ -40,8 +37,6 @@ export default function AdminRelayEdit() {
|
||||
setSubdomain(data.subdomain)
|
||||
setIcon(data.icon)
|
||||
setDescription(data.description)
|
||||
setPlan(RELAY_PLAN_IDS.includes(data.plan as RelayPlanId) ? (data.plan as RelayPlanId) : "free")
|
||||
setConfig(data.config ?? DEFAULT_CONFIG)
|
||||
})
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
@@ -54,8 +49,7 @@ export default function AdminRelayEdit() {
|
||||
subdomain: slugify(subdomain()),
|
||||
icon: icon().trim(),
|
||||
description: description().trim(),
|
||||
plan: plan(),
|
||||
config: config(),
|
||||
config: relay()?.config ?? DEFAULT_CONFIG,
|
||||
})
|
||||
navigate(`/admin/relays/${relayId()}`)
|
||||
} catch (e) {
|
||||
@@ -87,11 +81,6 @@ export default function AdminRelayEdit() {
|
||||
setIcon={setIcon}
|
||||
description={description()}
|
||||
setDescription={setDescription}
|
||||
plan={plan()}
|
||||
setPlan={setPlan}
|
||||
plans={RELAY_PLAN_IDS}
|
||||
config={config()}
|
||||
setConfig={setConfig}
|
||||
onSubmit={handleSubmit}
|
||||
submitting={submitting()}
|
||||
error={error()}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useParams, A } from "@solidjs/router"
|
||||
import { createResource, createSignal, Show } from "solid-js"
|
||||
import { deactivateTenantRelay, getTenantRelay } from "../../lib/api"
|
||||
import { useParams } from "@solidjs/router"
|
||||
import { createMemo, createResource, createSignal, Show } from "solid-js"
|
||||
import { deactivateTenantRelay, getRelayMemberCount, getTenantRelay, updateTenantRelay, type RelayConfig } from "../../lib/api"
|
||||
import BackLink from "../../components/BackLink"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
import RelayDetailCard from "../../components/RelayDetailCard"
|
||||
@@ -10,10 +10,15 @@ import useMinLoading from "../../components/useMinLoading"
|
||||
export default function RelayDetail() {
|
||||
const params = useParams()
|
||||
const relayId = () => params.id ?? ""
|
||||
const [relay, { refetch }] = createResource(relayId, getTenantRelay)
|
||||
const [relay, { refetch, mutate }] = createResource(relayId, getTenantRelay)
|
||||
const relayUrl = createMemo(() => {
|
||||
const subdomain = relay()?.subdomain
|
||||
return subdomain ? `wss://${subdomain}.spaces.coracle.social` : undefined
|
||||
})
|
||||
const [memberCount] = createResource(relayUrl, async (url) => getRelayMemberCount(url))
|
||||
const [busy, setBusy] = createSignal(false)
|
||||
const [error, setError] = createSignal("")
|
||||
const loading = useMinLoading(() => relay.loading)
|
||||
const loading = useMinLoading(() => relay.loading && !relay())
|
||||
|
||||
async function handleDeactivate() {
|
||||
if (busy()) return
|
||||
@@ -29,6 +34,104 @@ export default function RelayDetail() {
|
||||
}
|
||||
}
|
||||
|
||||
function withDefaults(config?: RelayConfig): RelayConfig {
|
||||
return {
|
||||
policy: {
|
||||
public_join: config?.policy.public_join ?? false,
|
||||
strip_signatures: config?.policy.strip_signatures ?? false,
|
||||
},
|
||||
groups: {
|
||||
enabled: config?.groups.enabled ?? true,
|
||||
auto_join: config?.groups.auto_join ?? true,
|
||||
},
|
||||
management: {
|
||||
enabled: config?.management.enabled ?? true,
|
||||
},
|
||||
blossom: {
|
||||
enabled: config?.blossom.enabled ?? (relay()?.plan !== "free"),
|
||||
},
|
||||
push: {
|
||||
enabled: config?.push.enabled ?? true,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
async function updateFlags(nextConfig: RelayConfig, previousConfig: RelayConfig) {
|
||||
const current = relay()
|
||||
if (!current) return
|
||||
|
||||
setError("")
|
||||
mutate({ ...current, config: nextConfig })
|
||||
|
||||
try {
|
||||
await updateTenantRelay(relayId(), {
|
||||
name: current.name,
|
||||
subdomain: current.subdomain,
|
||||
icon: current.icon,
|
||||
description: current.description,
|
||||
config: nextConfig,
|
||||
})
|
||||
await refetch()
|
||||
} catch (e) {
|
||||
mutate({ ...current, config: previousConfig })
|
||||
setError(e instanceof Error ? e.message : "Failed to update relay settings")
|
||||
}
|
||||
}
|
||||
|
||||
function togglePublicJoin() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
policy: { ...config.policy, public_join: !config.policy.public_join },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
function toggleStripSignatures() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
policy: { ...config.policy, strip_signatures: !config.policy.strip_signatures },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
function toggleGroups() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
groups: { ...config.groups, enabled: !config.groups.enabled },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
function toggleManagement() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
management: { enabled: !config.management.enabled },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
function toggleMediaStorage() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
blossom: { enabled: !config.blossom.enabled },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
function togglePushNotifications() {
|
||||
const config = withDefaults(relay()?.config)
|
||||
const nextConfig = {
|
||||
...config,
|
||||
push: { enabled: !config.push.enabled },
|
||||
}
|
||||
void updateFlags(nextConfig, config)
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<BackLink href="/relays" label="Relays" />
|
||||
@@ -44,26 +147,22 @@ export default function RelayDetail() {
|
||||
<Show when={!loading() && relay()}>
|
||||
{(r) => (
|
||||
<div class="mb-6">
|
||||
<RelayDetailCard relay={r()} />
|
||||
<RelayDetailCard
|
||||
relay={r()}
|
||||
currentMembers={memberCount()}
|
||||
editHref={`/relays/${params.id}/edit`}
|
||||
onDeactivate={handleDeactivate}
|
||||
deactivating={busy()}
|
||||
onTogglePublicJoin={togglePublicJoin}
|
||||
onToggleStripSignatures={toggleStripSignatures}
|
||||
onToggleGroups={toggleGroups}
|
||||
onToggleManagement={toggleManagement}
|
||||
onToggleMediaStorage={toggleMediaStorage}
|
||||
onTogglePushNotifications={togglePushNotifications}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<A
|
||||
href={`/relays/${params.id}/edit`}
|
||||
class="py-2 px-4 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
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 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>
|
||||
|
||||
@@ -2,7 +2,6 @@ import { useNavigate, useParams } from "@solidjs/router"
|
||||
import { Show, createEffect, createResource, createSignal } from "solid-js"
|
||||
import { getTenantRelay, updateTenantRelay, type RelayConfig } from "../../lib/api"
|
||||
import RelayForm from "../../components/RelayForm"
|
||||
import { RELAY_PLAN_IDS, type RelayPlanId } from "../../lib/relayPlans"
|
||||
import { slugify } from "../../lib/slugify"
|
||||
import BackLink from "../../components/BackLink"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
@@ -28,8 +27,6 @@ export default function RelayEdit() {
|
||||
const [subdomain, setSubdomain] = createSignal("")
|
||||
const [icon, setIcon] = createSignal("")
|
||||
const [description, setDescription] = createSignal("")
|
||||
const [plan, setPlan] = createSignal<RelayPlanId>("free")
|
||||
const [config, setConfig] = createSignal<RelayConfig>(DEFAULT_CONFIG)
|
||||
const [error, setError] = createSignal("")
|
||||
const [submitting, setSubmitting] = createSignal(false)
|
||||
|
||||
@@ -40,8 +37,6 @@ export default function RelayEdit() {
|
||||
setSubdomain(data.subdomain)
|
||||
setIcon(data.icon)
|
||||
setDescription(data.description)
|
||||
setPlan(RELAY_PLAN_IDS.includes(data.plan as RelayPlanId) ? (data.plan as RelayPlanId) : "free")
|
||||
setConfig(data.config ?? DEFAULT_CONFIG)
|
||||
})
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
@@ -54,8 +49,7 @@ export default function RelayEdit() {
|
||||
subdomain: slugify(subdomain()),
|
||||
icon: icon().trim(),
|
||||
description: description().trim(),
|
||||
plan: plan(),
|
||||
config: config(),
|
||||
config: relay()?.config ?? DEFAULT_CONFIG,
|
||||
})
|
||||
navigate(`/relays/${relayId()}`)
|
||||
} catch (e) {
|
||||
@@ -87,11 +81,6 @@ export default function RelayEdit() {
|
||||
setIcon={setIcon}
|
||||
description={description()}
|
||||
setDescription={setDescription}
|
||||
plan={plan()}
|
||||
setPlan={setPlan}
|
||||
plans={RELAY_PLAN_IDS}
|
||||
config={config()}
|
||||
setConfig={setConfig}
|
||||
onSubmit={handleSubmit}
|
||||
submitting={submitting()}
|
||||
error={error()}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Show, createSignal } from "solid-js"
|
||||
import { useNavigate } from "@solidjs/router"
|
||||
import { createTenantRelay } from "../../lib/api"
|
||||
import { createTenantRelay, type RelayConfig } from "../../lib/api"
|
||||
import { slugify } from "../../lib/slugify"
|
||||
|
||||
const PLANS = [
|
||||
@@ -11,6 +11,14 @@ const PLANS = [
|
||||
|
||||
type PlanId = (typeof PLANS)[number]["id"]
|
||||
|
||||
const DEFAULT_CONFIG: RelayConfig = {
|
||||
policy: { public_join: false, strip_signatures: false },
|
||||
groups: { enabled: true, auto_join: true },
|
||||
management: { enabled: true },
|
||||
blossom: { enabled: false },
|
||||
push: { enabled: true },
|
||||
}
|
||||
|
||||
export default function RelayNew() {
|
||||
const navigate = useNavigate()
|
||||
const [name, setName] = createSignal("")
|
||||
@@ -40,6 +48,10 @@ export default function RelayNew() {
|
||||
icon: icon().trim(),
|
||||
description: description().trim(),
|
||||
plan: plan(),
|
||||
config: {
|
||||
...DEFAULT_CONFIG,
|
||||
blossom: { enabled: plan() !== "free" },
|
||||
},
|
||||
})
|
||||
navigate(`/relays/${relay.id}`)
|
||||
} catch (e) {
|
||||
|
||||
Reference in New Issue
Block a user