From 47c390944be6b94282d57654d7ae8c55c2ed60f4 Mon Sep 17 00:00:00 2001
From: Coracle-Bot <npub1klq6260@nostr.local>
Date: Tue, 22 Sep 2026 18:16:19 +0000
Subject: [PATCH] Show only name, host and status in the home hosting rows
 (#618)

---
 src/app/components/HomeHosting.svelte         |  2 +-
 .../components/hosting/RelayListItem.svelte   | 21 +++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/components/HomeHosting.svelte b/src/app/components/HomeHosting.svelte
index f39e4bfb..3c19d35b 100644
--- a/src/app/components/HomeHosting.svelte
+++ b/src/app/components/HomeHosting.svelte
@@ -50,7 +50,7 @@
     {#if relays.length > 0}
       <div class="flex flex-col divide-y divide-line border-y border-line">
         {#each relays as relay (relay.id)}
-          <RelayListItem {relay} class="px-4 py-3" />
+          <RelayListItem {relay} compact class="px-4 py-3" />
         {/each}
       </div>
     {/if}
diff --git a/src/app/components/hosting/RelayListItem.svelte b/src/app/components/hosting/RelayListItem.svelte
index 583e9e29..5a1d4edf 100644
--- a/src/app/components/hosting/RelayListItem.svelte
+++ b/src/app/components/hosting/RelayListItem.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import Server from "@assets/icons/server.svg?dataurl"
   import {ucFirst} from "@lib/util"
   import Badge from "@lib/components/Badge.svelte"
@@ -9,17 +10,23 @@
 
   type Props = {
     relay: HostedRelay
+    compact?: boolean
     class?: string
   }
 
-  const {relay, class: className = "card p-3 sm:p-4"}: Props = $props()
+  const {relay, compact = false, class: className = "card p-3 sm:p-4"}: Props = $props()
 
   const name = $derived(relay.info_name || relay.subdomain)
   const host = $derived(canonicalRelayHost(relay))
   const href = $derived(makeSpacePath(getHostedRelayUrl(relay), "admin"))
 </script>
 
-<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4 {className}">
+<div
+  class={cx(
+    "flex gap-3",
+    className,
+    compact ? "items-center" : "flex-col sm:flex-row sm:items-center sm:gap-4",
+  )}>
   <div class="flex min-w-0 flex-1 items-center gap-3">
     <ImageIcon size={8} alt="" class="rounded-xl" src={relay.info_icon || Server} />
     <div class="min-w-0">
@@ -35,9 +42,11 @@
         {ucFirst(relay.status.replace(/_/g, " "))}
       </Badge>
     {/if}
-    <Badge variant={relay.plan_id === "free" ? "neutral" : "primary"}>
-      {ucFirst(relay.plan_id)}
-    </Badge>
-    <Link class="button button-neutral button-sm ml-auto" {href}>Manage</Link>
+    {#if !compact}
+      <Badge variant={relay.plan_id === "free" ? "neutral" : "primary"}>
+        {ucFirst(relay.plan_id)}
+      </Badge>
+      <Link class="button button-neutral button-sm ml-auto" {href}>Manage</Link>
+    {/if}
   </div>
 </div>