From ada9e105704e5001dbbb37c0a02f305b72e431e3 Mon Sep 17 00:00:00 2001
From: Jon Staab <jstaab@protonmail.com>
Date: Thu, 11 Jun 2026 17:44:25 -0700
Subject: [PATCH] Show plan on the relay list

---
 frontend/src/components/RelayListItem.tsx | 24 +++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/RelayListItem.tsx b/frontend/src/components/RelayListItem.tsx
index 6f97695..378bf44 100644
--- a/frontend/src/components/RelayListItem.tsx
+++ b/frontend/src/components/RelayListItem.tsx
@@ -2,6 +2,7 @@ import { A } from "@solidjs/router"
 import { Show } from "solid-js"
 import { getProfilePicture } from "applesauce-core/helpers/profile"
 import type { Relay } from "@/lib/api"
+import { StatusBadge } from "@/components/relay/RelayCardHeader"
 import { useProfileMetadata } from "@/lib/hooks"
 import { shortenPubkey } from "@/lib/pubkey"
 import { RELAY_DOMAIN } from "@/lib/subdomain"
@@ -41,17 +42,20 @@ export default function RelayListItem(props: RelayListItemProps) {
               </div>
             </Show>
           </div>
-          <Show
-            when={props.relay.sync_error}
-            fallback={<p class="text-xs uppercase tracking-wide text-gray-500">{props.relay.status}</p>}
-          >
-            <span
-              class="inline-flex items-center rounded-full border border-red-200 bg-red-50 px-2.5 py-0.5 text-xs font-medium text-red-700 max-w-56 truncate"
-              title={props.relay.sync_error}
+          <div class="flex flex-col items-end gap-1.5 shrink-0">
+            <Show
+              when={props.relay.sync_error}
+              fallback={<StatusBadge status={props.relay.status} />}
             >
-              Failed to sync
-            </span>
-          </Show>
+              <span
+                class="inline-flex items-center rounded-full border border-red-200 bg-red-50 px-2.5 py-0.5 text-xs font-medium text-red-700 max-w-56 truncate"
+                title={props.relay.sync_error}
+              >
+                Failed to sync
+              </span>
+            </Show>
+            <span class="text-xs capitalize text-gray-500">{props.relay.plan_id}</span>
+          </div>
         </div>
       </A>
     </li>