- Updated the `IpServerPresence` component to improve the display of active and recent servers for IPs, enhancing code clarity. - Added tooltips to the "Servers" column in various tables, providing users with additional context about the displayed server lists. - Refactored server-related data handling to ensure consistency and better user experience across multiple routes.
36 lines
884 B
Svelte
36 lines
884 B
Svelte
<script lang="ts">
|
|
import { Badge, type BadgeVariant } from '$lib/components/ui/badge/index.js';
|
|
import { cn } from '$lib/utils.js';
|
|
|
|
let {
|
|
aliases,
|
|
variant = 'outline',
|
|
linkToServer = true,
|
|
class: className
|
|
}: {
|
|
aliases: string[] | null | undefined;
|
|
variant?: BadgeVariant;
|
|
linkToServer?: boolean;
|
|
class?: string;
|
|
} = $props();
|
|
|
|
const list = $derived(((aliases ?? []) as string[]).filter(Boolean));
|
|
|
|
function href(alias: string): string | undefined {
|
|
if (!linkToServer) return undefined;
|
|
return `/servers/${encodeURIComponent(alias)}`;
|
|
}
|
|
</script>
|
|
|
|
{#if list.length === 0}
|
|
<span class="text-muted-foreground">—</span>
|
|
{:else}
|
|
<div class={cn('flex flex-wrap items-center gap-1', className)}>
|
|
{#each list as alias (alias)}
|
|
<Badge variant={variant} class="font-normal px-2 py-0.5" href={href(alias)}>
|
|
{alias}
|
|
</Badge>
|
|
{/each}
|
|
</div>
|
|
{/if}
|