Show plan on the relay list

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
+          <div class="flex flex-col items-end gap-1.5 shrink-0">
-            when={props.relay.sync_error}
+            <Show
-            fallback={<p class="text-xs uppercase tracking-wide text-gray-500">{props.relay.status}</p>}
+              when={props.relay.sync_error}
-          >
+              fallback={<StatusBadge status={props.relay.status} />}
-            <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
-            </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"
-          </Show>
+                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>