Unify UI workflows and streamline fleet management

src/lib/ui/components/ServerIdentity.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { serverIdentity } from '../server-labels.js';
+    let { name, mapLabel, showGame = true }: { name: string; mapLabel?: string; showGame?: boolean } = $props();
+    const identity = $derived(serverIdentity(name));
+</script>
+<span class="identity" title={name}><span class="map">{mapLabel ?? identity.map}</span>{#if identity.lobby !== null}<span class="lobby">Lobby {identity.lobby}</span>{/if}{#if showGame && identity.game}<small>{identity.game}</small>{/if}</span>
+<style>
+    .identity { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
+    .map { overflow-wrap: anywhere; }
+    .lobby { white-space: nowrap; font-size: .85em; color: var(--text-secondary); font-weight: var(--weight-medium); }
+    small { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; font-weight: var(--weight-regular); }
+</style>