Opus refactor

frontend/src/pages/admin/AdminTenantDetail.tsx

@@ -1,7 +1,8 @@
-import { useParams, A } from "@solidjs/router"
+import { useParams } from "@solidjs/router"
 import { For, Show } from "solid-js"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
+import RelayListItem from "@/components/RelayListItem"
 import ResourceState from "@/components/ResourceState"
 import useMinLoading from "@/components/useMinLoading"
 import { useAdminTenant, useAdminTenantRelays } from "@/lib/hooks"
@@ -17,46 +18,21 @@ export default function AdminTenantDetail() {
     <PageContainer>
       <BackLink href="/admin/tenants" label="Tenants" />
       <h1 class="text-2xl font-bold text-gray-900 mb-6 py-2">Tenant {params.id}</h1>
-
-      <ResourceState
-        loading={loading()}
-        error={tenant.error || relays.error}
-        loadingText="Loading tenant..."
-        errorText="Failed to load tenant."
-        class="mb-4"
-      />
-
+      <ResourceState loading={loading()} error={tenant.error || relays.error} loadingText="Loading tenant..." errorText="Failed to load tenant." class="mb-4" />
       <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={tenant()}>
-              <div class="space-y-3">
-                <p class="text-sm text-gray-700">
-                  Current: <span class="font-medium uppercase tracking-wide">tenant</span>
-                </p>
-              </div>
+              <p class="text-sm text-gray-700">Current: <span class="font-medium uppercase tracking-wide">tenant</span></p>
             </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={(relays()?.length ?? 0) > 0} fallback={<p class="text-gray-500">No relays.</p>}>
               <ul class="space-y-3">
                 <For each={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.info_name || relay.subdomain}</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>
-                      </A>
-                    </li>
-                  )}
+                  {(relay) => <RelayListItem relay={relay} href={`/admin/relays/${relay.id}`} />}
                 </For>
               </ul>
             </Show>