From b69f2dd0e42d298d78c4a62cf9ee43177a5d91c9 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Mon, 30 Mar 2026 15:18:37 +0700
Subject: [PATCH] Enhance IP server display in IP details page

- Improved the rendering of active and recent servers associated with each IP, providing clearer visual feedback.
- Introduced badges for active and recent servers, including a distinction for primary servers, enhancing user understanding of server status.
- Refactored the UI logic to conditionally display server information, improving overall clarity and usability in the IP details table.
---
 web/src/routes/ips/+page.svelte | 35 +++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/web/src/routes/ips/+page.svelte b/web/src/routes/ips/+page.svelte
index e4f16af..fdbd4a0 100644
--- a/web/src/routes/ips/+page.svelte
+++ b/web/src/routes/ips/+page.svelte
@@ -96,13 +96,36 @@
 										<Badge variant="outline" class="ml-1">AS{ip.asn}</Badge>
 									{/if}
 								</Table.Cell>
-								<Table.Cell class="max-w-[240px] text-xs text-muted-foreground">
-									active: {(ip.active_on_servers ?? []).join(', ') || '—'}
-									{#if (ip.recent_on_servers?.length ?? 0) > 0}
-										<br />recent: {(ip.recent_on_servers ?? []).join(', ')}
+								<Table.Cell class="max-w-[240px] text-xs">
+									{@const activeServers = (ip.active_on_servers ?? []).filter(Boolean)}
+									{@const recentServers = (ip.recent_on_servers ?? []).filter(Boolean)}
+									{@const primaryServer = ip.primary_server ?? null}
+									{@const recentOnly = recentServers.filter((s) => !activeServers.includes(s))}
+
+									{#if activeServers.length === 0}
+										<span class="text-muted-foreground">—</span>
+									{:else}
+										<div class="flex flex-wrap items-center gap-1">
+											{#each activeServers as srv (srv)}
+												<Badge variant="secondary" class="font-normal px-2 py-0.5">
+													{srv}
+												</Badge>
+												{#if primaryServer && srv === primaryServer}
+													<Badge class="font-normal px-2 py-0.5">primary</Badge>
+												{/if}
+											{/each}
+										</div>
 									{/if}
-									{#if ip.primary_server}
-										<br />primary: {ip.primary_server}
+
+									{#if recentOnly.length > 0}
+										<div class="mt-1 flex flex-wrap items-center gap-1">
+											<Badge variant="outline" class="font-normal px-2 py-0.5">recent</Badge>
+											{#each recentOnly as srv (srv)}
+												<Badge variant="outline" class="font-normal px-2 py-0.5">
+													{srv}
+												</Badge>
+											{/each}
+										</div>
 									{/if}
 								</Table.Cell>
 							</Table.Row>