Show tenant links, remove plan from relay edit form

frontend/src/pages/admin/AdminTenantDetail.tsx

@@ -1,11 +1,17 @@
 import { useParams } from "@solidjs/router"
-import { For, Show } from "solid-js"
+import { createEffect, createSignal, For, onCleanup, Show } from "solid-js"
+import { getProfilePicture } from "applesauce-core/helpers/profile"
 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"
+import { primeProfiles, useAdminTenant, useAdminTenantRelays } from "@/lib/hooks"
+import { eventStore } from "@/lib/state"
+
+function shortenPubkey(pubkey: string) {
+  return pubkey.length <= 16 ? pubkey : `${pubkey.slice(0, 8)}...${pubkey.slice(-8)}`
+}
 
 export default function AdminTenantDetail() {
   const params = useParams()
@@ -13,6 +19,28 @@ export default function AdminTenantDetail() {
   const [tenant] = useAdminTenant(tenantId)
   const [relays] = useAdminTenantRelays(tenantId)
   const loading = useMinLoading(() => tenant.loading || relays.loading)
+  const [profile, setProfile] = createSignal<{ name?: string; picture?: string }>({})
+
+  createEffect(() => {
+    const pubkey = tenantId()
+    if (!pubkey) {
+      setProfile({})
+      return
+    }
+
+    const profileSub = eventStore.profile(pubkey).subscribe((metadata) => {
+      setProfile({
+        name: metadata?.name || metadata?.display_name,
+        picture: getProfilePicture(metadata),
+      })
+    })
+    const primeSub = primeProfiles([pubkey])
+
+    onCleanup(() => {
+      profileSub.unsubscribe()
+      primeSub.unsubscribe()
+    })
+  })
 
   const churnedLabel = () => {
     const ts = tenant()?.churned_at
@@ -23,7 +51,22 @@ export default function AdminTenantDetail() {
   return (
     <PageContainer>
       <BackLink href="/admin/tenants" label="Tenants" />
-      <h1 class="text-2xl font-bold text-gray-900 mb-6 py-2">Tenant {params.id}</h1>
+      <div class="flex items-center gap-4 mb-6 py-2">
+        <Show
+          when={profile().picture}
+          fallback={
+            <div class="h-14 w-14 flex-shrink-0 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-lg">
+              {(profile().name || tenantId()).slice(0, 1).toUpperCase()}
+            </div>
+          }
+        >
+          <img src={profile().picture} alt="Profile" class="h-14 w-14 flex-shrink-0 rounded-full object-cover" />
+        </Show>
+        <div class="min-w-0">
+          <h1 class="text-2xl font-bold text-gray-900 truncate">{profile().name || shortenPubkey(tenantId())}</h1>
+          <p class="text-xs text-gray-500 break-all">{tenantId()}</p>
+        </div>
+      </div>
       <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">
@@ -32,14 +75,18 @@ export default function AdminTenantDetail() {
             <Show when={tenant()}>
               {(t) => (
                 <dl class="grid gap-y-3 text-sm">
-                  <div class="flex gap-2">
+                  <div class="flex gap-2 items-center">
                     <dt class="text-gray-500">Status:</dt>
-                    <dd class="font-medium uppercase tracking-wide">{t().churned_at ? "delinquent" : "active"}</dd>
+                    <dd>
+                      <span class={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${t().churned_at ? "bg-red-50 text-red-700 border-red-200" : "bg-green-50 text-green-700 border-green-200"}`}>
+                        {t().churned_at ? "delinquent" : "active"}
+                      </span>
+                    </dd>
                   </div>
                   <Show when={t().stripe_customer_id}>
                     <div class="flex gap-2">
                       <dt class="text-gray-500">Stripe Customer:</dt>
-                      <dd class="font-mono text-xs">{t().stripe_customer_id}</dd>
+                      <dd class="font-mono">{t().stripe_customer_id}</dd>
                     </div>
                   </Show>
                   <Show when={churnedLabel()}>