Switch to different navigation style

frontend/src/pages/relays/RelayDetail.tsx

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

frontend/src/pages/relays/RelayEdit.tsx

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

frontend/src/pages/relays/RelayList.tsx

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

frontend/src/pages/relays/RelayNew.tsx

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