forked from coracle/caravel
Switch to different navigation style
This commit is contained in:
Jon Staab
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user