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,3 +1,4 @@
 ref
 target
 .agents
+.playwright-cli
@@ -17,6 +17,7 @@
        "applesauce-relay": "^5.1.0",
        "applesauce-signers": "^5.1.0",
        "applesauce-wallet-connect": "^5.0.1",
+        "fuse.js": "^7.1.0",
        "preline": "^4.1.1",
        "qr-scanner": "^1.4.2",
        "qrcode": "^1.5.4",
@@ -348,6 +349,8 @@

    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],

+    "fuse.js": ["fuse.js@7.1.0", "", {}, "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ=="],
+
    "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],

    "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
@@ -21,6 +21,7 @@
    "applesauce-relay": "^5.1.0",
    "applesauce-signers": "^5.1.0",
    "applesauce-wallet-connect": "^5.0.1",
+    "fuse.js": "^7.1.0",
    "preline": "^4.1.1",
    "qr-scanner": "^1.4.2",
    "qrcode": "^1.5.4",
@@ -1,7 +1,7 @@
-import { createEffect, createResource, Show } from "solid-js"
+import { createEffect, Show } from "solid-js"
 import { Router, Route, useLocation, useNavigate } from "@solidjs/router"
 import type { Component } from "solid-js"
-import Navbar from "./components/Navbar"
+import AppShell from "./components/AppShell"
 import Home from "./pages/Home"
 import Login from "./pages/Login"
 import RelayList from "./pages/relays/RelayList"
@@ -9,16 +9,21 @@ import RelayNew from "./pages/relays/RelayNew"
 import RelayDetail from "./pages/relays/RelayDetail"
 import RelayEdit from "./pages/relays/RelayEdit"
 import Account from "./pages/Account"
-import AdminTenants from "./pages/admin/AdminTenants"
+import AdminTenantList from "./pages/admin/AdminTenantList"
 import AdminTenantDetail from "./pages/admin/AdminTenantDetail"
-import AdminRelays from "./pages/admin/AdminRelays"
+import AdminRelayList from "./pages/admin/AdminRelayList"
 import AdminRelayDetail from "./pages/admin/AdminRelayDetail"
 import AdminRelayEdit from "./pages/admin/AdminRelayEdit"
 import { useActiveAccount } from "./lib/nostr"
-import { adminCheck as fetchAdminCheck } from "./lib/api"

 function Layout(props: { children?: any }) {
  const location = useLocation()
+  const account = useActiveAccount()
+
+  const usesAppShell = () => {
+    const path = location.pathname
+    return path.startsWith("/relays") || path.startsWith("/account") || path.startsWith("/admin")
+  }

  createEffect(() => {
    // Reinitialize Preline components on route change
@@ -28,8 +33,9 @@ function Layout(props: { children?: any }) {

  return (
    <div class="min-h-screen bg-gray-50">
-      <Navbar />
-      <main>{props.children}</main>
+      <Show when={account() && usesAppShell()} fallback={<main>{props.children}</main>}>
+        <AppShell>{props.children}</AppShell>
+      </Show>
    </div>
  )
 }
@@ -52,10 +58,6 @@ export default function App() {
    return () => {
      const navigate = useNavigate()
      const account = useActiveAccount()
-      const [adminCheck] = createResource(
-        () => account()?.id,
-        () => fetchAdminCheck(),
-      )

      createEffect(() => {
        if (!account()) navigate("/login", { replace: true })
@@ -63,14 +65,7 @@ export default function App() {

      return (
        <Show when={account()}>
-          <Show when={!adminCheck.loading} fallback={<div class="max-w-4xl mx-auto px-4 py-8 text-gray-500">Checking admin access...</div>}>
-            <Show
-              when={!adminCheck.error && !!adminCheck()?.is_admin}
-              fallback={<div class="max-w-4xl mx-auto px-4 py-8 text-red-600">You do not have admin access.</div>}
-            >
-              <Page />
-            </Show>
-          </Show>
+          <Page />
        </Show>
      )
    }
@@ -85,9 +80,9 @@ export default function App() {
      <Route path="/relays/:id" component={withTenantAuth(RelayDetail)} />
      <Route path="/relays/:id/edit" component={withTenantAuth(RelayEdit)} />
      <Route path="/account" component={withTenantAuth(Account)} />
-      <Route path="/admin/tenants" component={withAdminAuth(AdminTenants)} />
+      <Route path="/admin/tenants" component={withAdminAuth(AdminTenantList)} />
      <Route path="/admin/tenants/:id" component={withAdminAuth(AdminTenantDetail)} />
-      <Route path="/admin/relays" component={withAdminAuth(AdminRelays)} />
+      <Route path="/admin/relays" component={withAdminAuth(AdminRelayList)} />
      <Route path="/admin/relays/:id" component={withAdminAuth(AdminRelayDetail)} />
      <Route path="/admin/relays/:id/edit" component={withAdminAuth(AdminRelayEdit)} />
    </Router>
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 17C2 15.1144 2 14.1716 2.58579 13.5858C3.17157 13 4.11438 13 6 13H18C19.8856 13 20.8284 13 21.4142 13.5858C22 14.1716 22 15.1144 22 17C22 18.8856 22 19.8284 21.4142 20.4142C20.8284 21 19.8856 21 18 21H6C4.11438 21 3.17157 21 2.58579 20.4142C2 19.8284 2 18.8856 2 17Z" stroke="#000000" stroke-width="1.5"/>
+<path d="M2 6C2 4.11438 2 3.17157 2.58579 2.58579C3.17157 2 4.11438 2 6 2H18C19.8856 2 20.8284 2 21.4142 2.58579C22 3.17157 22 4.11438 22 6C22 7.88562 22 8.82843 21.4142 9.41421C20.8284 10 19.8856 10 18 10H6C4.11438 10 3.17157 10 2.58579 9.41421C2 8.82843 2 7.88562 2 6Z" stroke="#000000" stroke-width="1.5"/>
+<path d="M11 6H18" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6 6H8" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M11 17H18" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6 17H8" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,253 @@
+import { A, useLocation } from "@solidjs/router"
+import { createEffect, createMemo, createResource, createSignal, For, onCleanup, Show } from "solid-js"
+import Fuse from "fuse.js"
+import { adminCheck as fetchAdminCheck, listTenantRelays, type Relay } from "../lib/api"
+import { eventStore, primeProfiles, useActiveAccount, useProfilePicture } from "../lib/nostr"
+import serverIcon from "../assets/server.svg"
+
+type Profile = {
+  name?: string
+  display_name?: string
+  nip05?: string
+}
+
+function shortenPubkey(pubkey?: string) {
+  if (!pubkey) return ""
+  return `${pubkey.slice(0, 8)}…${pubkey.slice(-6)}`
+}
+
+function SearchIcon() {
+  return (
+    <svg class="h-5 w-5" 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>
+  )
+}
+
+function RelayIcon() {
+  return <img src={serverIcon} alt="" aria-hidden="true" class="h-5 w-5" />
+}
+
+export default function AppShell(props: { children?: any }) {
+  const location = useLocation()
+  const account = useActiveAccount()
+  const picture = useProfilePicture(() => account()?.pubkey)
+  const [adminCheck] = createResource(() => account()?.id, () => fetchAdminCheck())
+  const [tenantRelays] = createResource(() => account()?.id, () => listTenantRelays())
+  const [profile, setProfile] = createSignal<Profile>({})
+  const [searchOpen, setSearchOpen] = createSignal(false)
+  const [searchEntered, setSearchEntered] = createSignal(false)
+  const [searchQuery, setSearchQuery] = createSignal("")
+  let searchTransitionTimer: number | undefined
+
+  const isAdmin = createMemo(() => !!adminCheck()?.is_admin)
+  const username = createMemo(() => profile().name || profile().display_name || shortenPubkey(account()?.pubkey))
+  const nip05 = createMemo(() => profile().nip05 || "No NIP-05")
+  const searchedRelays = createMemo<Relay[]>(() => {
+    const list = tenantRelays() ?? []
+    const query = searchQuery().trim()
+
+    if (!query) return list
+
+    const fuse = new Fuse(list, {
+      keys: ["name", "subdomain"],
+      threshold: 0.35,
+      ignoreLocation: true,
+    })
+
+    return fuse.search(query).map((result) => result.item)
+  })
+
+  createEffect(() => {
+    const pubkey = account()?.pubkey
+
+    if (!pubkey) {
+      setProfile({})
+      return
+    }
+
+    const profileSub = eventStore.profile(pubkey).subscribe((metadata) => {
+      setProfile({
+        name: metadata?.name,
+        display_name: metadata?.display_name,
+        nip05: metadata?.nip05,
+      })
+    })
+
+    const primeSub = primeProfiles([pubkey])
+
+    onCleanup(() => {
+      profileSub.unsubscribe()
+      primeSub.unsubscribe()
+    })
+  })
+
+  const myResources = [{ href: "/relays", label: "My Relays" }]
+  const adminResources = [
+    { href: "/admin/tenants", label: "Tenants" },
+    { href: "/admin/relays", label: "Relays" },
+  ]
+
+  const navItemClass = (href: string) => {
+    const active = location.pathname === href || location.pathname.startsWith(`${href}/`)
+    return active
+      ? "block rounded-lg bg-white/15 px-3 py-2 text-sm font-medium text-white"
+      : "block rounded-lg px-3 py-2 text-sm text-white/80 hover:bg-white/10 hover:text-white"
+  }
+
+  const openSearchModal = () => {
+    if (searchTransitionTimer) window.clearTimeout(searchTransitionTimer)
+    setSearchOpen(true)
+    setSearchEntered(false)
+    window.requestAnimationFrame(() => setSearchEntered(true))
+  }
+
+  const closeSearchModal = () => {
+    setSearchEntered(false)
+    searchTransitionTimer = window.setTimeout(() => {
+      setSearchOpen(false)
+      setSearchQuery("")
+    }, 200)
+  }
+
+  onCleanup(() => {
+    if (searchTransitionTimer) window.clearTimeout(searchTransitionTimer)
+  })
+
+  return (
+    <div class="min-h-screen bg-gray-50 md:grid md:grid-cols-[260px_minmax(0,1fr)]">
+      <aside class="hidden bg-slate-900 text-white md:flex md:min-h-screen md:flex-col">
+        <div class="flex-1 px-4 py-6">
+          <h2 class="px-3 text-xs font-semibold uppercase tracking-wider text-white/60">Resources</h2>
+          <ul class="mt-2 space-y-1">
+            <For each={myResources}>{(item) => <li><A href={item.href} class={navItemClass(item.href)}>{item.label}</A></li>}</For>
+          </ul>
+
+          <Show when={isAdmin()}>
+            <div class="mt-8">
+              <h2 class="px-3 text-xs font-semibold uppercase tracking-wider text-white/60">Administration</h2>
+              <ul class="mt-2 space-y-1">
+                <For each={adminResources}>{(item) => <li><A href={item.href} class={navItemClass(item.href)}>{item.label}</A></li>}</For>
+              </ul>
+            </div>
+          </Show>
+        </div>
+
+        <div class="border-t border-white/15 p-4">
+          <A href="/account" class="flex items-center gap-3 rounded-lg p-2 hover:bg-white/10">
+            <Show
+              when={picture()}
+              fallback={
+                <div class="h-10 w-10 rounded-full bg-white/15 text-sm font-medium text-white flex items-center justify-center">
+                  {username().slice(0, 1).toUpperCase()}
+                </div>
+              }
+            >
+              <img src={picture()} alt="Profile" class="h-10 w-10 rounded-full object-cover" />
+            </Show>
+            <div class="min-w-0">
+              <p class="truncate text-sm font-medium text-white">{username()}</p>
+              <p class="truncate text-xs text-white/60">{nip05()}</p>
+            </div>
+          </A>
+        </div>
+      </aside>
+
+      <div class="min-h-screen pb-20 md:pb-0">
+        <main>{props.children}</main>
+      </div>
+
+      <nav class="fixed inset-x-0 bottom-0 z-20 border-t border-gray-200 bg-white md:hidden">
+        <div class="mx-auto flex h-16 max-w-md items-center justify-between px-6">
+          <div class="flex items-center gap-3">
+            <button
+              type="button"
+              aria-label="Search"
+              class="rounded-lg p-2 text-gray-700 hover:bg-gray-100"
+              onClick={openSearchModal}
+            >
+              <SearchIcon />
+            </button>
+            <A href="/relays" aria-label="Relays" class="rounded-lg p-2 text-gray-700 hover:bg-gray-100">
+              <RelayIcon />
+            </A>
+          </div>
+          <A href="/account" aria-label="Account settings" class="rounded-full">
+            <Show
+              when={picture()}
+              fallback={<div class="h-9 w-9 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center text-sm font-medium">{username().slice(0, 1).toUpperCase()}</div>}
+            >
+              <img src={picture()} alt="Profile" class="h-9 w-9 rounded-full object-cover" />
+            </Show>
+          </A>
+        </div>
+      </nav>
+
+      <Show when={searchOpen()}>
+        <div
+          class={`fixed inset-x-0 top-0 bottom-16 z-30 flex items-end bg-black/40 p-0 transition-opacity duration-200 md:hidden ${searchEntered() ? "opacity-100" : "opacity-0"}`}
+          role="dialog"
+          aria-modal="true"
+          onClick={closeSearchModal}
+        >
+          <div
+            class={`max-h-[80vh] w-full overflow-hidden rounded-t-2xl bg-white transition-all duration-200 ${searchEntered() ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"}`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div class="border-b border-gray-200 p-4">
+              <div class="flex items-center gap-2">
+                <div class="relative flex-1">
+                  <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={searchQuery()}
+                    onInput={(e) => setSearchQuery(e.currentTarget.value)}
+                    placeholder="Search your relays"
+                    class="w-full rounded-lg border border-gray-300 py-2 pl-10 pr-3"
+                    autofocus
+                  />
+                </div>
+                <button
+                  type="button"
+                  class="rounded-lg px-3 py-2 text-sm text-gray-600 hover:bg-gray-100"
+                  onClick={closeSearchModal}
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+
+            <div class="max-h-[calc(80vh-73px)] overflow-y-auto p-4">
+              <Show when={!tenantRelays.loading} fallback={<p class="text-sm text-gray-500">Loading relays...</p>}>
+                <Show when={(searchedRelays().length ?? 0) > 0} fallback={<p class="text-sm text-gray-500">No relays found.</p>}>
+                  <ul class="space-y-2">
+                    <For each={searchedRelays()}>
+                      {(relay) => (
+                        <li>
+                          <A
+                            href={`/relays/${relay.id}`}
+                            class="block rounded-lg border border-gray-200 bg-white p-3"
+                            onClick={closeSearchModal}
+                          >
+                            <p class="text-sm font-medium text-gray-900">{relay.name}</p>
+                            <p class="text-xs text-gray-500">{relay.subdomain}.spaces.coracle.social</p>
+                          </A>
+                        </li>
+                      )}
+                    </For>
+                  </ul>
+                </Show>
+              </Show>
+            </div>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}
@@ -0,0 +1,15 @@
+type LoadingStateProps = {
+  message: string
+  class?: string
+  paddingClass?: string
+}
+
+export default function LoadingState(props: LoadingStateProps) {
+  const paddingClass = () => props.paddingClass ?? "py-20"
+  return (
+    <div class={`flex items-center justify-center gap-2 ${paddingClass()} text-gray-500 ${props.class ?? ""}`.trim()}>
+      <div class="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-gray-700" />
+      <p class="text-sm text-gray-500">{props.message}</p>
+    </div>
+  )
+}
@@ -1,4 +1,5 @@
 import { Show } from "solid-js"
+import LoadingState from "./LoadingState"

 type ResourceStateProps = {
  loading: boolean
@@ -12,10 +13,10 @@ export default function ResourceState(props: ResourceStateProps) {
  return (
    <>
      <Show when={props.loading}>
-        <p class={`text-gray-500 ${props.class ?? ""}`.trim()}>{props.loadingText}</p>
+        <LoadingState message={props.loadingText} class={props.class} />
      </Show>
      <Show when={props.error && !props.loading}>
-        <p class={`text-red-600 ${props.class ?? ""}`.trim()}>{props.errorText}</p>
+        <p class={`text-center text-red-600 ${props.class ?? ""}`.trim()}>{props.errorText}</p>
      </Show>
    </>
  )
@@ -0,0 +1,41 @@
+import { createEffect, createSignal, onCleanup } from "solid-js"
+
+export default function useMinLoading(loading: () => boolean, minDurationMs = 200) {
+  const [visible, setVisible] = createSignal(false)
+  let startTime = 0
+  let timeout: number | undefined
+
+  createEffect(() => {
+    if (timeout) {
+      window.clearTimeout(timeout)
+      timeout = undefined
+    }
+
+    if (loading()) {
+      startTime = Date.now()
+      setVisible(true)
+      return
+    }
+
+    if (!visible()) return
+
+    const elapsed = Date.now() - startTime
+    const remaining = Math.max(minDurationMs - elapsed, 0)
+
+    if (remaining === 0) {
+      setVisible(false)
+      return
+    }
+
+    timeout = window.setTimeout(() => {
+      setVisible(false)
+      timeout = undefined
+    }, remaining)
+
+    onCleanup(() => {
+      if (timeout) window.clearTimeout(timeout)
+    })
+  })
+
+  return visible
+}
@@ -74,6 +74,9 @@ async function request<T>(path: string, init?: RequestInit): Promise<T> {
    } catch {
      // ignored
    }
+    if (response.status === 403 && path.startsWith("/admin/") && typeof window !== "undefined") {
+      window.location.replace("/relays")
+    }
    throw new ApiError(message, response.status)
  }

@@ -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>