Switch to different navigation style
This commit is contained in:
Jon Staab
@@ -1,7 +1,8 @@
|
||||
import { createMemo, createResource, createSignal, For, Show } from "solid-js"
|
||||
import { createEffect, createMemo, createResource, createSignal, For, Show } from "solid-js"
|
||||
import { getTenant, listTenantInvoices, updateTenantBilling } from "../lib/api"
|
||||
import PageContainer from "../components/PageContainer"
|
||||
import ResourceState from "../components/ResourceState"
|
||||
import LoadingState from "../components/LoadingState"
|
||||
import useMinLoading from "../components/useMinLoading"
|
||||
|
||||
export default function Account() {
|
||||
const [tenant, { refetch: refetchTenant }] = createResource(getTenant)
|
||||
@@ -9,15 +10,24 @@ export default function Account() {
|
||||
const [nwcUrl, setNwcUrl] = createSignal("")
|
||||
const [saving, setSaving] = createSignal(false)
|
||||
const [error, setError] = createSignal("")
|
||||
const invoicesLoading = useMinLoading(() => invoices.loading)
|
||||
|
||||
const recurringEnabled = createMemo(() => !!tenant()?.tenant_nwc_url?.trim())
|
||||
const hasBillingChanges = createMemo(() => {
|
||||
const current = tenant()?.tenant_nwc_url?.trim() ?? ""
|
||||
const next = nwcUrl().trim()
|
||||
return current !== next
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
setNwcUrl(tenant()?.tenant_nwc_url ?? "")
|
||||
})
|
||||
|
||||
async function saveBilling() {
|
||||
setError("")
|
||||
setSaving(true)
|
||||
try {
|
||||
await updateTenantBilling(nwcUrl().trim())
|
||||
setNwcUrl("")
|
||||
const next = nwcUrl().trim()
|
||||
await updateTenantBilling(next)
|
||||
await refetchTenant()
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Failed to update billing")
|
||||
@@ -28,7 +38,7 @@ export default function Account() {
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">My Account</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 py-4">My Account</h1>
|
||||
|
||||
<div class="space-y-6">
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
@@ -42,12 +52,6 @@ export default function Account() {
|
||||
)}
|
||||
</Show>
|
||||
</div>
|
||||
<ResourceState
|
||||
loading={tenant.loading}
|
||||
error={undefined}
|
||||
loadingText="Loading account..."
|
||||
errorText=""
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
@@ -66,22 +70,11 @@ export default function Account() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={saveBilling}
|
||||
disabled={saving()}
|
||||
disabled={saving() || !hasBillingChanges()}
|
||||
class="py-2 px-4 bg-blue-600 text-white rounded-lg disabled:opacity-50"
|
||||
>
|
||||
{saving() ? "Saving..." : "Save"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setNwcUrl("")
|
||||
void saveBilling()
|
||||
}}
|
||||
disabled={saving() || !recurringEnabled()}
|
||||
class="py-2 px-4 border border-gray-300 rounded-lg disabled:opacity-50"
|
||||
>
|
||||
Disable
|
||||
</button>
|
||||
</div>
|
||||
<Show when={error()}>
|
||||
<p class="mt-3 text-sm text-red-600">{error()}</p>
|
||||
@@ -90,24 +83,26 @@ export default function Account() {
|
||||
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Invoice History</h2>
|
||||
<Show when={invoices.loading}>
|
||||
<p class="text-gray-500">Loading invoices...</p>
|
||||
<Show when={invoicesLoading()}>
|
||||
<LoadingState message="Loading invoices..." paddingClass="py-8" />
|
||||
</Show>
|
||||
<Show when={(invoices()?.length ?? 0) > 0} fallback={<p class="text-gray-500">No invoices yet.</p>}>
|
||||
<ul class="space-y-3">
|
||||
<For each={invoices()}>
|
||||
{(invoice) => (
|
||||
<li class="rounded-lg border border-gray-200 p-3 text-sm text-gray-700">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<span class="font-medium">{invoice.amount.toLocaleString()} sats</span>
|
||||
<span class="uppercase text-xs tracking-wide text-gray-500">{invoice.status}</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1">{new Date(invoice.created_at).toLocaleString()}</p>
|
||||
<p class="text-xs mt-2 break-all">{invoice.invoice}</p>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
<Show when={!invoicesLoading()}>
|
||||
<Show when={(invoices()?.length ?? 0) > 0} fallback={<p class="text-gray-500">No invoices yet.</p>}>
|
||||
<ul class="space-y-3">
|
||||
<For each={invoices()}>
|
||||
{(invoice) => (
|
||||
<li class="rounded-lg border border-gray-200 p-3 text-sm text-gray-700">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<span class="font-medium">{invoice.amount.toLocaleString()} sats</span>
|
||||
<span class="uppercase text-xs tracking-wide text-gray-500">{invoice.status}</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1">{new Date(invoice.created_at).toLocaleString()}</p>
|
||||
<p class="text-xs mt-2 break-all">{invoice.invoice}</p>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</Show>
|
||||
</Show>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ export default function Home() {
|
||||
<div class="min-h-screen bg-white">
|
||||
{/* Hero */}
|
||||
<div class="max-w-4xl mx-auto px-4 py-24 text-center">
|
||||
<h1 class="text-5xl font-bold text-gray-900 mb-4">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-4 py-4">
|
||||
Host Your Own Nostr Community Relay
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
@@ -22,7 +22,7 @@ export default function Home() {
|
||||
|
||||
{/* Pricing */}
|
||||
<div class="max-w-4xl mx-auto px-4 pb-24">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Pricing</h2>
|
||||
<h2 class="text-2xl font-bold text-center text-gray-900 mb-12">Pricing</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold mb-2">Free</h3>
|
||||
|
||||
@@ -206,7 +206,7 @@ export default function Login() {
|
||||
Secure Nostr Login
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-semibold text-gray-900 md:text-4xl">Welcome back</h1>
|
||||
<h1 class="text-2xl font-semibold text-gray-900 py-4">Welcome back</h1>
|
||||
<p class="mt-3 text-sm leading-6 text-gray-600">
|
||||
Connect your Nostr account to manage relay hosting, billing, and access in one place.
|
||||
</p>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { adminDeactivateRelay, adminGetRelay } from "../../lib/api"
|
||||
import BackLink from "../../components/BackLink"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
import ResourceState from "../../components/ResourceState"
|
||||
import useMinLoading from "../../components/useMinLoading"
|
||||
|
||||
export default function AdminRelayDetail() {
|
||||
const params = useParams()
|
||||
@@ -11,6 +12,7 @@ export default function AdminRelayDetail() {
|
||||
const [relay, { refetch }] = createResource(relayId, adminGetRelay)
|
||||
const [busy, setBusy] = createSignal(false)
|
||||
const [error, setError] = createSignal("")
|
||||
const loading = useMinLoading(() => relay.loading)
|
||||
|
||||
async function handleDeactivate() {
|
||||
if (busy()) return
|
||||
@@ -31,17 +33,17 @@ export default function AdminRelayDetail() {
|
||||
<BackLink href="/admin/relays" label="Relays" />
|
||||
|
||||
<ResourceState
|
||||
loading={relay.loading}
|
||||
loading={loading()}
|
||||
error={relay.error}
|
||||
loadingText="Loading relay..."
|
||||
errorText="Failed to load relay."
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<Show when={relay()}>
|
||||
<Show when={!loading() && relay()}>
|
||||
{(r) => (
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-1">{r().name}</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-1 py-4">{r().name}</h1>
|
||||
<p class="text-sm text-gray-500">{r().subdomain}.spaces.coracle.social</p>
|
||||
<p class="text-sm text-gray-500 mt-2 break-all">Tenant: {r().tenant}</p>
|
||||
<p class="text-sm text-gray-700 mt-2">Plan: <span class="uppercase">{r().plan}</span></p>
|
||||
|
||||
@@ -7,12 +7,14 @@ 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"
|
||||
|
||||
export default function AdminRelayEdit() {
|
||||
const navigate = useNavigate()
|
||||
const params = useParams()
|
||||
const relayId = () => params.id ?? ""
|
||||
const [relay] = createResource(relayId, adminGetRelay)
|
||||
const loading = useMinLoading(() => relay.loading)
|
||||
|
||||
const [name, setName] = createSignal("")
|
||||
const [subdomain, setSubdomain] = createSignal("")
|
||||
@@ -55,16 +57,16 @@ export default function AdminRelayEdit() {
|
||||
return (
|
||||
<PageContainer size="narrow">
|
||||
<BackLink href={`/admin/relays/${params.id}`} label="Back" />
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">Edit Relay (Admin)</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 py-4">Edit Relay (Admin)</h1>
|
||||
|
||||
<ResourceState
|
||||
loading={relay.loading}
|
||||
loading={loading()}
|
||||
error={relay.error}
|
||||
loadingText="Loading relay..."
|
||||
errorText="Failed to load relay."
|
||||
/>
|
||||
|
||||
<Show when={relay() && !relay.loading}>
|
||||
<Show when={relay() && !loading()}>
|
||||
<RelayForm
|
||||
name={name()}
|
||||
setName={setName}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import { A } from "@solidjs/router"
|
||||
import Fuse from "fuse.js"
|
||||
import { createMemo, createResource, createSignal, For, Show } from "solid-js"
|
||||
import { adminListRelays } from "../../lib/api"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
import ResourceState from "../../components/ResourceState"
|
||||
import useMinLoading from "../../components/useMinLoading"
|
||||
|
||||
export default function AdminRelayList() {
|
||||
const [query, setQuery] = createSignal("")
|
||||
const [relays] = createResource(adminListRelays)
|
||||
const loading = useMinLoading(() => relays.loading)
|
||||
|
||||
const filtered = createMemo(() => {
|
||||
const list = relays() ?? []
|
||||
const q = query().trim()
|
||||
|
||||
if (!q) return list
|
||||
|
||||
return new Fuse(list, {
|
||||
keys: ["name", "subdomain", "tenant"],
|
||||
threshold: 0.35,
|
||||
ignoreLocation: true,
|
||||
}).search(q).map((result) => result.item)
|
||||
})
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900 py-4">Relays</h1>
|
||||
</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."
|
||||
/>
|
||||
<Show when={!loading()}>
|
||||
<Show when={(filtered().length ?? 0) > 0} fallback={<p class="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.name}</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>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</Show>
|
||||
</Show>
|
||||
</PageContainer>
|
||||
)
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
import { A } from "@solidjs/router"
|
||||
import { createMemo, createResource, createSignal, For, Show } from "solid-js"
|
||||
import { adminListRelays } from "../../lib/api"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
import ResourceState from "../../components/ResourceState"
|
||||
|
||||
export default function AdminRelays() {
|
||||
const [query, setQuery] = createSignal("")
|
||||
const [relays] = createResource(adminListRelays)
|
||||
|
||||
const filtered = createMemo(() => {
|
||||
const q = query().trim().toLowerCase()
|
||||
return (relays() ?? []).filter((relay) => {
|
||||
if (!q) return true
|
||||
return (
|
||||
relay.name.toLowerCase().includes(q)
|
||||
|| relay.subdomain.toLowerCase().includes(q)
|
||||
|| relay.tenant.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">All Relays</h1>
|
||||
<input
|
||||
type="search"
|
||||
value={query()}
|
||||
onInput={(e) => setQuery(e.currentTarget.value)}
|
||||
placeholder="Search relays..."
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
|
||||
<ResourceState
|
||||
loading={relays.loading}
|
||||
error={relays.error}
|
||||
loadingText="Loading relays..."
|
||||
errorText="Failed to load relays."
|
||||
/>
|
||||
<Show when={(filtered().length ?? 0) > 0} fallback={<p class="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.name}</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>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</Show>
|
||||
</PageContainer>
|
||||
)
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { adminGetTenant, adminUpdateTenantStatus } from "../../lib/api"
|
||||
import BackLink from "../../components/BackLink"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
import ResourceState from "../../components/ResourceState"
|
||||
import useMinLoading from "../../components/useMinLoading"
|
||||
|
||||
export default function AdminTenantDetail() {
|
||||
const params = useParams()
|
||||
@@ -11,6 +12,7 @@ export default function AdminTenantDetail() {
|
||||
const [detail, { refetch }] = createResource(tenantId, adminGetTenant)
|
||||
const [busy, setBusy] = createSignal(false)
|
||||
const [error, setError] = createSignal("")
|
||||
const loading = useMinLoading(() => detail.loading)
|
||||
|
||||
async function setStatus(status: string) {
|
||||
if (busy()) return
|
||||
@@ -29,72 +31,74 @@ export default function AdminTenantDetail() {
|
||||
return (
|
||||
<PageContainer>
|
||||
<BackLink href="/admin/tenants" label="Tenants" />
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">Tenant {params.id}</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 py-4">Tenant {params.id}</h1>
|
||||
|
||||
<ResourceState
|
||||
loading={detail.loading}
|
||||
loading={loading()}
|
||||
error={detail.error}
|
||||
loadingText="Loading tenant..."
|
||||
errorText="Failed to load tenant."
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<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={detail()}>
|
||||
{(d) => (
|
||||
<div class="space-y-3">
|
||||
<p class="text-sm text-gray-700">
|
||||
Current: <span class="font-medium uppercase tracking-wide">{d().tenant.status}</span>
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="py-2 px-4 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50"
|
||||
onClick={() => void setStatus("active")}
|
||||
disabled={busy()}
|
||||
>
|
||||
Activate
|
||||
</button>
|
||||
<button
|
||||
class="py-2 px-4 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 disabled:opacity-50"
|
||||
onClick={() => void setStatus("deactivated")}
|
||||
disabled={busy()}
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
<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={detail()}>
|
||||
{(d) => (
|
||||
<div class="space-y-3">
|
||||
<p class="text-sm text-gray-700">
|
||||
Current: <span class="font-medium uppercase tracking-wide">{d().tenant.status}</span>
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="py-2 px-4 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50"
|
||||
onClick={() => void setStatus("active")}
|
||||
disabled={busy()}
|
||||
>
|
||||
Activate
|
||||
</button>
|
||||
<button
|
||||
class="py-2 px-4 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 disabled:opacity-50"
|
||||
onClick={() => void setStatus("deactivated")}
|
||||
disabled={busy()}
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
</section>
|
||||
)}
|
||||
</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={(detail()?.relays.length ?? 0) > 0} fallback={<p class="text-gray-500">No relays.</p>}>
|
||||
<ul class="space-y-3">
|
||||
<For each={detail()?.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.name}</p>
|
||||
<p class="text-xs text-gray-500">{relay.subdomain}.spaces.coracle.social</p>
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 class="text-lg font-semibold mb-4">Relays</h2>
|
||||
<Show when={(detail()?.relays.length ?? 0) > 0} fallback={<p class="text-gray-500">No relays.</p>}>
|
||||
<ul class="space-y-3">
|
||||
<For each={detail()?.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.name}</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>
|
||||
<span class="text-xs uppercase tracking-wide text-gray-500">{relay.status}</span>
|
||||
</div>
|
||||
</A>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</A>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</Show>
|
||||
</section>
|
||||
<Show when={error()}>
|
||||
<p class="text-sm text-red-600">{error()}</p>
|
||||
</Show>
|
||||
</section>
|
||||
<Show when={error()}>
|
||||
<p class="text-sm text-red-600">{error()}</p>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</PageContainer>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
import { A } from "@solidjs/router"
|
||||
import Fuse from "fuse.js"
|
||||
import { createEffect, createMemo, createResource, createSignal, For, onCleanup, Show } from "solid-js"
|
||||
import { getProfilePicture } from "applesauce-core/helpers/profile"
|
||||
import { adminListTenants } from "../../lib/api"
|
||||
import { eventStore, primeProfiles } from "../../lib/nostr"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
import ResourceState from "../../components/ResourceState"
|
||||
import useMinLoading from "../../components/useMinLoading"
|
||||
|
||||
function shortenPubkey(pubkey: string) {
|
||||
if (pubkey.length <= 16) return pubkey
|
||||
return `${pubkey.slice(0, 8)}...${pubkey.slice(-8)}`
|
||||
}
|
||||
|
||||
export default function AdminTenantList() {
|
||||
const [query, setQuery] = createSignal("")
|
||||
const [tenants] = createResource(adminListTenants)
|
||||
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,
|
||||
}
|
||||
})
|
||||
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)
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
const list = tenants() ?? []
|
||||
if (!list.length) return
|
||||
|
||||
const pubkeys = list.map(t => t.pubkey)
|
||||
const reqSub = primeProfiles(pubkeys)
|
||||
const profileSubs = pubkeys.map((pubkey) =>
|
||||
eventStore.profile(pubkey).subscribe((profile) => {
|
||||
setProfiles(prev => ({
|
||||
...prev,
|
||||
[pubkey]: {
|
||||
name: profile?.name || profile?.display_name,
|
||||
about: profile?.about,
|
||||
nip05: profile?.nip05,
|
||||
picture: getProfilePicture(profile),
|
||||
},
|
||||
}))
|
||||
}),
|
||||
)
|
||||
|
||||
onCleanup(() => {
|
||||
reqSub.unsubscribe()
|
||||
for (const sub of profileSubs) sub.unsubscribe()
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 py-4">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>
|
||||
|
||||
<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="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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs uppercase tracking-wide text-gray-500">{tenant.status}</p>
|
||||
</div>
|
||||
</A>
|
||||
</li>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</ul>
|
||||
</Show>
|
||||
</Show>
|
||||
</PageContainer>
|
||||
)
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
import { A } from "@solidjs/router"
|
||||
import { createEffect, createMemo, createResource, createSignal, For, onCleanup, Show } from "solid-js"
|
||||
import { getProfilePicture } from "applesauce-core/helpers/profile"
|
||||
import { adminListTenants } from "../../lib/api"
|
||||
import { eventStore, primeProfiles } from "../../lib/nostr"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
import ResourceState from "../../components/ResourceState"
|
||||
|
||||
function shortenPubkey(pubkey: string) {
|
||||
if (pubkey.length <= 16) return pubkey
|
||||
return `${pubkey.slice(0, 8)}...${pubkey.slice(-8)}`
|
||||
}
|
||||
|
||||
export default function AdminTenants() {
|
||||
const [query, setQuery] = createSignal("")
|
||||
const [tenants] = createResource(adminListTenants)
|
||||
const [profiles, setProfiles] = createSignal<Record<string, { name?: string, about?: string, picture?: string }>>({})
|
||||
|
||||
const filtered = createMemo(() => {
|
||||
const q = query().trim().toLowerCase()
|
||||
return (tenants() ?? []).filter((tenant) => {
|
||||
if (!q) return true
|
||||
return tenant.pubkey.toLowerCase().includes(q) || tenant.status.toLowerCase().includes(q)
|
||||
})
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
const list = tenants() ?? []
|
||||
if (!list.length) return
|
||||
|
||||
const pubkeys = list.map(t => t.pubkey)
|
||||
const reqSub = primeProfiles(pubkeys)
|
||||
const profileSubs = pubkeys.map((pubkey) =>
|
||||
eventStore.profile(pubkey).subscribe((profile) => {
|
||||
setProfiles(prev => ({
|
||||
...prev,
|
||||
[pubkey]: {
|
||||
name: profile?.name || profile?.display_name,
|
||||
about: profile?.about,
|
||||
picture: getProfilePicture(profile),
|
||||
},
|
||||
}))
|
||||
}),
|
||||
)
|
||||
|
||||
onCleanup(() => {
|
||||
reqSub.unsubscribe()
|
||||
for (const sub of profileSubs) sub.unsubscribe()
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">Tenants</h1>
|
||||
<input
|
||||
type="search"
|
||||
value={query()}
|
||||
onInput={(e) => setQuery(e.currentTarget.value)}
|
||||
placeholder="Search tenants..."
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
|
||||
<ResourceState
|
||||
loading={tenants.loading}
|
||||
error={tenants.error}
|
||||
loadingText="Loading tenants..."
|
||||
errorText="Failed to load tenants."
|
||||
/>
|
||||
<Show when={(filtered().length ?? 0) > 0} fallback={<p class="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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs uppercase tracking-wide text-gray-500">{tenant.status}</p>
|
||||
</div>
|
||||
</A>
|
||||
</li>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</ul>
|
||||
</Show>
|
||||
</PageContainer>
|
||||
)
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { deactivateTenantRelay, getTenantRelay } from "../../lib/api"
|
||||
import BackLink from "../../components/BackLink"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
import ResourceState from "../../components/ResourceState"
|
||||
import useMinLoading from "../../components/useMinLoading"
|
||||
|
||||
export default function RelayDetail() {
|
||||
const params = useParams()
|
||||
@@ -11,6 +12,7 @@ export default function RelayDetail() {
|
||||
const [relay, { refetch }] = createResource(relayId, getTenantRelay)
|
||||
const [busy, setBusy] = createSignal(false)
|
||||
const [error, setError] = createSignal("")
|
||||
const loading = useMinLoading(() => relay.loading)
|
||||
|
||||
async function handleDeactivate() {
|
||||
if (busy()) return
|
||||
@@ -31,17 +33,17 @@ export default function RelayDetail() {
|
||||
<BackLink href="/relays" label="Relays" />
|
||||
|
||||
<ResourceState
|
||||
loading={relay.loading}
|
||||
loading={loading()}
|
||||
error={relay.error}
|
||||
loadingText="Loading relay..."
|
||||
errorText="Failed to load relay."
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<Show when={relay()}>
|
||||
<Show when={!loading() && relay()}>
|
||||
{(loadedRelay) => (
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">{loadedRelay().name}</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-900 py-4">{loadedRelay().name}</h1>
|
||||
<p class="mt-1 text-sm text-gray-500">https://{loadedRelay().subdomain}.spaces.coracle.social</p>
|
||||
<Show when={loadedRelay().description.trim()}>
|
||||
<p class="mt-3 text-gray-700">{loadedRelay().description}</p>
|
||||
|
||||
@@ -7,12 +7,14 @@ 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"
|
||||
|
||||
export default function RelayEdit() {
|
||||
const navigate = useNavigate()
|
||||
const params = useParams()
|
||||
const relayId = () => params.id ?? ""
|
||||
const [relay] = createResource(relayId, getTenantRelay)
|
||||
const loading = useMinLoading(() => relay.loading)
|
||||
|
||||
const [name, setName] = createSignal("")
|
||||
const [subdomain, setSubdomain] = createSignal("")
|
||||
@@ -55,16 +57,16 @@ export default function RelayEdit() {
|
||||
return (
|
||||
<PageContainer size="narrow">
|
||||
<BackLink href={`/relays/${params.id}`} label="Back" />
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">Edit Relay</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 py-4">Edit Relay</h1>
|
||||
|
||||
<ResourceState
|
||||
loading={relay.loading}
|
||||
loading={loading()}
|
||||
error={relay.error}
|
||||
loadingText="Loading relay..."
|
||||
errorText="Failed to load relay."
|
||||
/>
|
||||
|
||||
<Show when={relay() && !relay.loading}>
|
||||
<Show when={relay() && !loading()}>
|
||||
<RelayForm
|
||||
name={name()}
|
||||
setName={setName}
|
||||
|
||||
@@ -1,30 +1,38 @@
|
||||
import { A } from "@solidjs/router"
|
||||
import Fuse from "fuse.js"
|
||||
import { createMemo, createResource, createSignal, For, Show } from "solid-js"
|
||||
import { listTenantRelays } from "../../lib/api"
|
||||
import PageContainer from "../../components/PageContainer"
|
||||
import ResourceState from "../../components/ResourceState"
|
||||
import useMinLoading from "../../components/useMinLoading"
|
||||
|
||||
export default function RelayList() {
|
||||
const [relays] = createResource(listTenantRelays)
|
||||
const [query, setQuery] = createSignal("")
|
||||
const [status, setStatus] = createSignal("all")
|
||||
const loading = useMinLoading(() => relays.loading)
|
||||
|
||||
const filtered = createMemo(() => {
|
||||
const q = query().trim().toLowerCase()
|
||||
return (relays() ?? []).filter((relay) => {
|
||||
const matchesQuery =
|
||||
!q ||
|
||||
relay.name.toLowerCase().includes(q) ||
|
||||
relay.subdomain.toLowerCase().includes(q)
|
||||
const list = relays() ?? []
|
||||
const q = query().trim()
|
||||
const searched = q
|
||||
? new Fuse(list, {
|
||||
keys: ["name", "subdomain"],
|
||||
threshold: 0.35,
|
||||
ignoreLocation: true,
|
||||
}).search(q).map((result) => result.item)
|
||||
: list
|
||||
|
||||
return searched.filter((relay) => {
|
||||
const matchesStatus = status() === "all" || relay.status === status()
|
||||
return matchesQuery && matchesStatus
|
||||
return matchesStatus
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">My Relays</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-900 py-4">My Relays</h1>
|
||||
<A
|
||||
href="/relays/new"
|
||||
class="py-2 px-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors"
|
||||
@@ -34,13 +42,21 @@ export default function RelayList() {
|
||||
</div>
|
||||
|
||||
<div class="mb-6 grid gap-3 sm:grid-cols-[1fr_auto]">
|
||||
<input
|
||||
type="search"
|
||||
value={query()}
|
||||
onInput={(e) => setQuery(e.currentTarget.value)}
|
||||
placeholder="Search by name or subdomain"
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
/>
|
||||
<div class="relative">
|
||||
<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 by name or subdomain"
|
||||
class="w-full border border-gray-300 rounded-lg py-2 pl-10 pr-3"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={status()}
|
||||
onChange={(e) => setStatus(e.currentTarget.value)}
|
||||
@@ -56,33 +72,35 @@ export default function RelayList() {
|
||||
</div>
|
||||
|
||||
<ResourceState
|
||||
loading={relays.loading}
|
||||
loading={loading()}
|
||||
error={relays.error}
|
||||
loadingText="Loading relays..."
|
||||
errorText="Failed to load relays."
|
||||
/>
|
||||
|
||||
<Show when={(filtered().length ?? 0) > 0} fallback={<p class="text-gray-500">No relays match your filters.</p>}>
|
||||
<ul class="space-y-3">
|
||||
<For each={filtered()}>
|
||||
{(relay) => (
|
||||
<li>
|
||||
<A
|
||||
href={`/relays/${relay.id}`}
|
||||
class="block rounded-lg border border-gray-200 bg-white p-4 hover:border-gray-300"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium text-gray-900">{relay.name}</p>
|
||||
<p class="text-sm text-gray-500">https://{relay.subdomain}.spaces.coracle.social</p>
|
||||
<Show when={!loading()}>
|
||||
<Show when={(filtered().length ?? 0) > 0} fallback={<p class="text-gray-500">No relays match your filters.</p>}>
|
||||
<ul class="space-y-3">
|
||||
<For each={filtered()}>
|
||||
{(relay) => (
|
||||
<li>
|
||||
<A
|
||||
href={`/relays/${relay.id}`}
|
||||
class="block rounded-lg border border-gray-200 bg-white p-4 hover:border-gray-300"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium text-gray-900">{relay.name}</p>
|
||||
<p class="text-sm text-gray-500">https://{relay.subdomain}.spaces.coracle.social</p>
|
||||
</div>
|
||||
<p class="text-xs uppercase tracking-wide text-gray-500">{relay.status}</p>
|
||||
</div>
|
||||
<p class="text-xs uppercase tracking-wide text-gray-500">{relay.status}</p>
|
||||
</div>
|
||||
</A>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</A>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</Show>
|
||||
</Show>
|
||||
</PageContainer>
|
||||
)
|
||||
|
||||
@@ -51,7 +51,7 @@ export default function RelayNew() {
|
||||
|
||||
return (
|
||||
<div class="max-w-2xl mx-auto px-4 py-8">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">New Relay</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 py-4">New Relay</h1>
|
||||
<form onSubmit={handleSubmit} class="space-y-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
|
||||
|
||||
Reference in New Issue
Block a user