forked from coracle/caravel
Opus refactor
This commit is contained in:
Jon Staab
@@ -1,142 +1,24 @@
|
||||
import { useParams } from "@solidjs/router"
|
||||
import { createSignal, Show } from "solid-js"
|
||||
import { Show } from "solid-js"
|
||||
import BackLink from "@/components/BackLink"
|
||||
import PageContainer from "@/components/PageContainer"
|
||||
import RelayDetailCard from "@/components/RelayDetailCard"
|
||||
import ResourceState from "@/components/ResourceState"
|
||||
import useMinLoading from "@/components/useMinLoading"
|
||||
import { deactivateRelayById, updateRelayById, useRelay, type Relay } from "@/lib/hooks"
|
||||
import { useRelay } from "@/lib/hooks"
|
||||
import useRelayToggles from "@/lib/useRelayToggles"
|
||||
|
||||
export default function AdminRelayDetail() {
|
||||
const params = useParams()
|
||||
const relayId = () => params.id ?? ""
|
||||
const [relay, { refetch, mutate }] = useRelay(relayId)
|
||||
const [busy, setBusy] = createSignal(false)
|
||||
const [error, setError] = createSignal("")
|
||||
const loading = useMinLoading(() => relay.loading && !relay())
|
||||
|
||||
async function handleDeactivate() {
|
||||
if (busy()) return
|
||||
setError("")
|
||||
setBusy(true)
|
||||
try {
|
||||
await deactivateRelayById(relayId())
|
||||
await refetch()
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Failed to deactivate relay")
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
function toBool(value: number | undefined, fallback: boolean): boolean {
|
||||
if (value === 0) return false
|
||||
if (value === 1) return true
|
||||
return fallback
|
||||
}
|
||||
|
||||
function toInt(value: boolean): number {
|
||||
return value ? 1 : 0
|
||||
}
|
||||
|
||||
async function updateRelay(next: Relay, previous: Relay) {
|
||||
const current = relay()
|
||||
if (!current) return
|
||||
|
||||
setError("")
|
||||
mutate(next)
|
||||
|
||||
try {
|
||||
await updateRelayById(relayId(), next)
|
||||
await refetch()
|
||||
} catch (e) {
|
||||
mutate(previous)
|
||||
setError(e instanceof Error ? e.message : "Failed to update relay settings")
|
||||
}
|
||||
}
|
||||
|
||||
function togglePublicJoin() {
|
||||
const current = relay()
|
||||
if (!current) return
|
||||
const next = {
|
||||
...current,
|
||||
policy_public_join: toInt(!toBool(current.policy_public_join, false)),
|
||||
}
|
||||
void updateRelay(next, current)
|
||||
}
|
||||
|
||||
function toggleStripSignatures() {
|
||||
const current = relay()
|
||||
if (!current) return
|
||||
const next = {
|
||||
...current,
|
||||
policy_strip_signatures: toInt(!toBool(current.policy_strip_signatures, false)),
|
||||
}
|
||||
void updateRelay(next, current)
|
||||
}
|
||||
|
||||
function toggleGroups() {
|
||||
const current = relay()
|
||||
if (!current) return
|
||||
const next = {
|
||||
...current,
|
||||
groups_enabled: toInt(!toBool(current.groups_enabled, true)),
|
||||
}
|
||||
void updateRelay(next, current)
|
||||
}
|
||||
|
||||
function toggleManagement() {
|
||||
const current = relay()
|
||||
if (!current) return
|
||||
const next = {
|
||||
...current,
|
||||
management_enabled: toInt(!toBool(current.management_enabled, true)),
|
||||
}
|
||||
void updateRelay(next, current)
|
||||
}
|
||||
|
||||
function toggleMediaStorage() {
|
||||
const current = relay()
|
||||
if (!current) return
|
||||
const next = {
|
||||
...current,
|
||||
blossom_enabled: toInt(!toBool(current.blossom_enabled, current.plan !== "free")),
|
||||
}
|
||||
void updateRelay(next, current)
|
||||
}
|
||||
|
||||
function togglePushNotifications() {
|
||||
const current = relay()
|
||||
if (!current) return
|
||||
const next = {
|
||||
...current,
|
||||
push_enabled: toInt(!toBool(current.push_enabled, true)),
|
||||
}
|
||||
void updateRelay(next, current)
|
||||
}
|
||||
|
||||
function toggleLivekitSupport() {
|
||||
const current = relay()
|
||||
if (!current) return
|
||||
const next = {
|
||||
...current,
|
||||
livekit_enabled: toInt(!toBool(current.livekit_enabled, current.plan !== "free")),
|
||||
}
|
||||
void updateRelay(next, current)
|
||||
}
|
||||
const { busy, handleDeactivate, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<BackLink href="/admin/relays" label="Relays" />
|
||||
|
||||
<ResourceState
|
||||
loading={loading()}
|
||||
error={relay.error}
|
||||
loadingText="Loading relay..."
|
||||
errorText="Failed to load relay."
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<ResourceState loading={loading()} error={relay.error} loadingText="Loading relay..." errorText="Failed to load relay." class="mb-4" />
|
||||
<Show when={!loading() && relay()}>
|
||||
{(r) => (
|
||||
<div class="mb-6">
|
||||
@@ -146,22 +28,13 @@ export default function AdminRelayDetail() {
|
||||
editHref={`/admin/relays/${params.id}/edit`}
|
||||
onDeactivate={handleDeactivate}
|
||||
deactivating={busy()}
|
||||
onTogglePublicJoin={togglePublicJoin}
|
||||
onToggleStripSignatures={toggleStripSignatures}
|
||||
onToggleGroups={toggleGroups}
|
||||
onToggleManagement={toggleManagement}
|
||||
onToggleMediaStorage={toggleMediaStorage}
|
||||
onToggleLivekitSupport={toggleLivekitSupport}
|
||||
onTogglePushNotifications={togglePushNotifications}
|
||||
enforcePlanLimits={false}
|
||||
showPlanActions={false}
|
||||
{...toggles}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
<Show when={error()}>
|
||||
<p class="mt-3 text-sm text-red-600">{error()}</p>
|
||||
</Show>
|
||||
</PageContainer>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,50 +1,5 @@
|
||||
import { useNavigate, useParams } from "@solidjs/router"
|
||||
import { Show } from "solid-js"
|
||||
import RelayForm, { type RelayFormValues } from "@/components/RelayForm"
|
||||
import { slugify } from "@/lib/slugify"
|
||||
import BackLink from "@/components/BackLink"
|
||||
import PageContainer from "@/components/PageContainer"
|
||||
import ResourceState from "@/components/ResourceState"
|
||||
import useMinLoading from "@/components/useMinLoading"
|
||||
import { updateRelayById, useRelay } from "@/lib/hooks"
|
||||
import RelayEdit from "@/pages/relays/RelayEdit"
|
||||
|
||||
export default function AdminRelayEdit() {
|
||||
const navigate = useNavigate()
|
||||
const params = useParams()
|
||||
const relayId = () => params.id ?? ""
|
||||
const [relay] = useRelay(relayId)
|
||||
const loading = useMinLoading(() => relay.loading)
|
||||
|
||||
async function handleSubmit(values: RelayFormValues) {
|
||||
await updateRelayById(relayId(), {
|
||||
subdomain: slugify(values.subdomain),
|
||||
info_name: values.info_name.trim(),
|
||||
info_icon: values.info_icon.trim(),
|
||||
info_description: values.info_description.trim(),
|
||||
})
|
||||
navigate(`/admin/relays/${relayId()}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContainer size="narrow">
|
||||
<BackLink href={`/admin/relays/${params.id}`} label="Back" />
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 py-2">Edit Relay (Admin)</h1>
|
||||
|
||||
<ResourceState
|
||||
loading={loading()}
|
||||
error={relay.error}
|
||||
loadingText="Loading relay..."
|
||||
errorText="Failed to load relay."
|
||||
/>
|
||||
|
||||
<Show when={relay() && !loading()}>
|
||||
<RelayForm
|
||||
initialValues={relay()!}
|
||||
onSubmit={handleSubmit}
|
||||
submitLabel="Save Changes"
|
||||
submittingLabel="Saving..."
|
||||
/>
|
||||
</Show>
|
||||
</PageContainer>
|
||||
)
|
||||
return <RelayEdit basePath="/admin/relays" title="Edit Relay (Admin)" />
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { A } from "@solidjs/router"
|
||||
import Fuse from "fuse.js"
|
||||
import { createMemo, createSignal, For, Show } from "solid-js"
|
||||
import PageContainer from "@/components/PageContainer"
|
||||
import RelayListItem from "@/components/RelayListItem"
|
||||
import ResourceState from "@/components/ResourceState"
|
||||
import SearchInput from "@/components/SearchInput"
|
||||
import useMinLoading from "@/components/useMinLoading"
|
||||
import { useAdminRelays } from "@/lib/hooks"
|
||||
|
||||
@@ -14,61 +15,22 @@ export default function AdminRelayList() {
|
||||
const filtered = createMemo(() => {
|
||||
const list = relays() ?? []
|
||||
const q = query().trim()
|
||||
|
||||
if (!q) return list
|
||||
|
||||
return new Fuse(list, {
|
||||
keys: ["info_name", "subdomain", "tenant"],
|
||||
threshold: 0.35,
|
||||
ignoreLocation: true,
|
||||
}).search(q).map((result) => result.item)
|
||||
return new Fuse(list, { keys: ["info_name", "subdomain", "tenant"], threshold: 0.35, ignoreLocation: true }).search(q).map(r => r.item)
|
||||
})
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 py-2">Relays</h1>
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900 py-2">Relays</h1>
|
||||
<SearchInput value={query()} onInput={setQuery} placeholder="Search relays..." />
|
||||
</div>
|
||||
<div class="relative mb-6">
|
||||
<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="M21 21l-4.3-4.3" />
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
type="search"
|
||||
value={query()}
|
||||
onInput={(e) => setQuery(e.currentTarget.value)}
|
||||
placeholder="Search relays..."
|
||||
class="w-full border border-gray-300 rounded-lg py-2 pl-10 pr-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ResourceState
|
||||
loading={loading()}
|
||||
error={relays.error}
|
||||
loadingText="Loading relays..."
|
||||
errorText="Failed to load relays."
|
||||
/>
|
||||
<ResourceState loading={loading()} error={relays.error} loadingText="Loading relays..." errorText="Failed to load relays." />
|
||||
<Show when={!loading()}>
|
||||
<Show when={(filtered().length ?? 0) > 0} fallback={<p class="py-20 text-center text-gray-500">No relays found.</p>}>
|
||||
<Show when={filtered().length > 0} fallback={<p class="py-20 text-center text-gray-500">No relays found.</p>}>
|
||||
<ul class="space-y-3">
|
||||
<For each={filtered()}>
|
||||
{(relay) => (
|
||||
<li>
|
||||
<A href={`/admin/relays/${relay.id}`} class="block border border-gray-200 rounded-lg p-4 bg-white hover:border-gray-300">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p class="font-medium text-gray-900">{relay.info_name || relay.subdomain}</p>
|
||||
<p class="text-xs text-gray-500">{relay.subdomain}.spaces.coracle.social</p>
|
||||
<p class="text-xs text-gray-500 break-all mt-1">Tenant: {relay.tenant}</p>
|
||||
</div>
|
||||
<p class="text-xs uppercase tracking-wide text-gray-500">{relay.status}</p>
|
||||
</div>
|
||||
</A>
|
||||
</li>
|
||||
)}
|
||||
{(relay) => <RelayListItem relay={relay} href={`/admin/relays/${relay.id}`} showTenant />}
|
||||
</For>
|
||||
</ul>
|
||||
</Show>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useParams, A } from "@solidjs/router"
|
||||
import { useParams } from "@solidjs/router"
|
||||
import { For, Show } from "solid-js"
|
||||
import BackLink from "@/components/BackLink"
|
||||
import PageContainer from "@/components/PageContainer"
|
||||
import RelayListItem from "@/components/RelayListItem"
|
||||
import ResourceState from "@/components/ResourceState"
|
||||
import useMinLoading from "@/components/useMinLoading"
|
||||
import { useAdminTenant, useAdminTenantRelays } from "@/lib/hooks"
|
||||
@@ -17,46 +18,21 @@ export default function AdminTenantDetail() {
|
||||
<PageContainer>
|
||||
<BackLink href="/admin/tenants" label="Tenants" />
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 py-2">Tenant {params.id}</h1>
|
||||
|
||||
<ResourceState
|
||||
loading={loading()}
|
||||
error={tenant.error || relays.error}
|
||||
loadingText="Loading tenant..."
|
||||
errorText="Failed to load tenant."
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<ResourceState loading={loading()} error={tenant.error || relays.error} loadingText="Loading tenant..." errorText="Failed to load tenant." class="mb-4" />
|
||||
<Show when={!loading()}>
|
||||
<div class="space-y-6">
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 class="text-lg font-semibold mb-4">Status</h2>
|
||||
<Show when={tenant()}>
|
||||
<div class="space-y-3">
|
||||
<p class="text-sm text-gray-700">
|
||||
Current: <span class="font-medium uppercase tracking-wide">tenant</span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700">Current: <span class="font-medium uppercase tracking-wide">tenant</span></p>
|
||||
</Show>
|
||||
</section>
|
||||
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 class="text-lg font-semibold mb-4">Relays</h2>
|
||||
<Show when={(relays()?.length ?? 0) > 0} fallback={<p class="text-gray-500">No relays.</p>}>
|
||||
<ul class="space-y-3">
|
||||
<For each={relays() ?? []}>
|
||||
{(relay) => (
|
||||
<li>
|
||||
<A href={`/admin/relays/${relay.id}`} class="block rounded-lg border border-gray-200 p-3 hover:border-gray-300">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<p class="font-medium text-gray-900">{relay.info_name || relay.subdomain}</p>
|
||||
<p class="text-xs text-gray-500">{relay.subdomain}.spaces.coracle.social</p>
|
||||
</div>
|
||||
<span class="text-xs uppercase tracking-wide text-gray-500">{relay.status}</span>
|
||||
</div>
|
||||
</A>
|
||||
</li>
|
||||
)}
|
||||
{(relay) => <RelayListItem relay={relay} href={`/admin/relays/${relay.id}`} />}
|
||||
</For>
|
||||
</ul>
|
||||
</Show>
|
||||
|
||||
@@ -4,40 +4,29 @@ import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "so
|
||||
import { getProfilePicture } from "applesauce-core/helpers/profile"
|
||||
import PageContainer from "@/components/PageContainer"
|
||||
import ResourceState from "@/components/ResourceState"
|
||||
import SearchInput from "@/components/SearchInput"
|
||||
import useMinLoading from "@/components/useMinLoading"
|
||||
import { primeProfiles, useAdminTenants } from "@/lib/hooks"
|
||||
import { eventStore } from "@/lib/state"
|
||||
|
||||
function shortenPubkey(pubkey: string) {
|
||||
if (pubkey.length <= 16) return pubkey
|
||||
return `${pubkey.slice(0, 8)}...${pubkey.slice(-8)}`
|
||||
return pubkey.length <= 16 ? pubkey : `${pubkey.slice(0, 8)}...${pubkey.slice(-8)}`
|
||||
}
|
||||
|
||||
export default function AdminTenantList() {
|
||||
const [query, setQuery] = createSignal("")
|
||||
const [tenants] = useAdminTenants()
|
||||
const [profiles, setProfiles] = createSignal<Record<string, { name?: string, about?: string, nip05?: string, picture?: string }>>({})
|
||||
const [profiles, setProfiles] = createSignal<Record<string, { name?: string; about?: string; nip05?: string; picture?: string }>>({})
|
||||
const loading = useMinLoading(() => tenants.loading)
|
||||
|
||||
const filtered = createMemo(() => {
|
||||
const list = (tenants() ?? []).map((tenant) => {
|
||||
const profile = profiles()[tenant.pubkey]
|
||||
return {
|
||||
...tenant,
|
||||
profileName: profile?.name,
|
||||
profileAbout: profile?.about,
|
||||
profileNip05: profile?.nip05,
|
||||
}
|
||||
return { ...tenant, profileName: profile?.name, profileAbout: profile?.about, profileNip05: profile?.nip05 }
|
||||
})
|
||||
const q = query().trim()
|
||||
|
||||
if (!q) return list
|
||||
|
||||
return new Fuse(list, {
|
||||
keys: ["pubkey", "status", "profileName", "profileAbout", "profileNip05"],
|
||||
threshold: 0.35,
|
||||
ignoreLocation: true,
|
||||
}).search(q).map((result) => result.item)
|
||||
return new Fuse(list, { keys: ["pubkey", "status", "profileName", "profileAbout", "profileNip05"], threshold: 0.35, ignoreLocation: true }).search(q).map(r => r.item)
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
@@ -69,56 +58,37 @@ export default function AdminTenantList() {
|
||||
return (
|
||||
<PageContainer>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 py-2">Tenants</h1>
|
||||
<div class="relative mb-6">
|
||||
<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="M21 21l-4.3-4.3" />
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
type="search"
|
||||
value={query()}
|
||||
onInput={(e) => setQuery(e.currentTarget.value)}
|
||||
placeholder="Search tenants..."
|
||||
class="w-full border border-gray-300 rounded-lg py-2 pl-10 pr-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<div class="mb-6">
|
||||
<SearchInput value={query()} onInput={setQuery} placeholder="Search tenants..." />
|
||||
</div>
|
||||
|
||||
<ResourceState
|
||||
loading={loading()}
|
||||
error={tenants.error}
|
||||
loadingText="Loading tenants..."
|
||||
errorText="Failed to load tenants."
|
||||
/>
|
||||
<ResourceState loading={loading()} error={tenants.error} loadingText="Loading tenants..." errorText="Failed to load tenants." />
|
||||
<Show when={!loading()}>
|
||||
<Show when={(filtered().length ?? 0) > 0} fallback={<p class="py-20 text-center text-gray-500">No tenants found.</p>}>
|
||||
<Show when={filtered().length > 0} fallback={<p class="py-20 text-center text-gray-500">No tenants found.</p>}>
|
||||
<ul class="space-y-3">
|
||||
<For each={filtered()}>
|
||||
{(tenant) => {
|
||||
const profile = () => profiles()[tenant.pubkey]
|
||||
|
||||
return (
|
||||
<li>
|
||||
<A href={`/admin/tenants/${tenant.pubkey}`} class="block border border-gray-200 rounded-lg p-4 bg-white hover:border-gray-300">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0 flex items-start gap-3">
|
||||
<Show
|
||||
when={profile()?.picture}
|
||||
fallback={<div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs">{(profile()?.name || tenant.pubkey).slice(0, 1).toUpperCase()}</div>}
|
||||
>
|
||||
<img src={profile()?.picture} alt="Profile" class="h-10 w-10 rounded-full object-cover" />
|
||||
</Show>
|
||||
<div class="min-w-0">
|
||||
<p class="font-medium text-gray-900 truncate">{profile()?.name || shortenPubkey(tenant.pubkey)}</p>
|
||||
<p class="mt-1 text-sm text-gray-600 line-clamp-2">{profile()?.about || "No profile bio"}</p>
|
||||
<p class="mt-1 text-xs text-gray-500 break-all">{tenant.pubkey}</p>
|
||||
<li>
|
||||
<A href={`/admin/tenants/${tenant.pubkey}`} class="block border border-gray-200 rounded-lg p-4 bg-white hover:border-gray-300">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0 flex items-start gap-3">
|
||||
<Show
|
||||
when={profile()?.picture}
|
||||
fallback={<div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs">{(profile()?.name || tenant.pubkey).slice(0, 1).toUpperCase()}</div>}
|
||||
>
|
||||
<img src={profile()?.picture} alt="Profile" class="h-10 w-10 rounded-full object-cover" />
|
||||
</Show>
|
||||
<div class="min-w-0">
|
||||
<p class="font-medium text-gray-900 truncate">{profile()?.name || shortenPubkey(tenant.pubkey)}</p>
|
||||
<p class="mt-1 text-sm text-gray-600 line-clamp-2">{profile()?.about || "No profile bio"}</p>
|
||||
<p class="mt-1 text-xs text-gray-500 break-all">{tenant.pubkey}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs uppercase tracking-wide text-gray-500">tenant</p>
|
||||
</div>
|
||||
<p class="text-xs uppercase tracking-wide text-gray-500">tenant</p>
|
||||
</div>
|
||||
</A>
|
||||
</li>
|
||||
</A>
|
||||
</li>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
|
||||
Reference in New Issue
Block a user