Switch to different navigation style

2026-02-27 14:40:51 -08:00
parent 247a5c0ec0
commit 034572cb58
24 changed files with 724 additions and 335 deletions
@@ -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>