feat: move port mappings to networks tab for container details (#1723)

Author: kmendell

frontend/src/routes/(app)/containers/[containerId]/+page.svelte

@@ -4,7 +4,7 @@
 	import ActionButtons from '$lib/components/action-buttons.svelte';
 	import StatusBadge from '$lib/components/badges/status-badge.svelte';
 	import bytes from 'bytes';
-	import { onDestroy, untrack } from 'svelte';
+	import { onDestroy, tick, untrack } from 'svelte';
 	import { page } from '$app/state';
 	import type {
 		ContainerDetailsDto,
@@ -213,11 +213,12 @@
 	const hasEnvVars = $derived(!!(container?.config?.env && container.config.env.length > 0));
 	const hasPorts = $derived(!!(container?.ports && container.ports.length > 0));
 	const hasLabels = $derived(!!(container?.labels && Object.keys(container.labels).length > 0));
-	const showConfiguration = $derived(hasEnvVars || hasPorts || hasLabels);
+	const showConfiguration = $derived(hasEnvVars || hasLabels);
 
 	const hasNetworks = $derived(
 		!!(container?.networkSettings?.networks && Object.keys(container.networkSettings.networks).length > 0)
 	);
+	const showNetworkTab = $derived(hasNetworks || hasPorts);
 	const hasMounts = $derived(!!(container?.mounts && container.mounts.length > 0));
 	const showStats = $derived(!!container?.state?.running);
 	const showShell = $derived(!!container?.state?.running);
@@ -228,7 +229,7 @@
 		{ value: 'logs', label: m.containers_nav_logs(), icon: FileTextIcon },
 		...(showShell ? [{ value: 'shell', label: m.common_shell(), icon: TerminalIcon }] : []),
 		...(showConfiguration ? [{ value: 'config', label: m.common_configuration(), icon: SettingsIcon }] : []),
-		...(hasNetworks ? [{ value: 'network', label: m.containers_nav_networks(), icon: NetworksIcon }] : []),
+		...(showNetworkTab ? [{ value: 'network', label: m.containers_nav_networks(), icon: NetworksIcon }] : []),
 		...(hasMounts ? [{ value: 'storage', label: m.containers_nav_storage(), icon: VolumesIcon }] : [])
 	]);
 
@@ -242,6 +243,17 @@
 		selectedTab = value;
 	}
 
+	async function navigateToNetworkPortMappings() {
+		if (!showNetworkTab) return;
+
+		selectedTab = 'network';
+		await tick();
+
+		requestAnimationFrame(() => {
+			document.getElementById('container-port-mappings')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+		});
+	}
+
 	function parseDockerDate(input: string | Date | undefined | null): Date | null {
 		if (!input) return null;
 		if (input instanceof Date) return isNaN(input.getTime()) ? null : input;
@@ -310,7 +322,11 @@
 
 		{#snippet tabContent(activeTab)}
 			<Tabs.Content value="overview" class="h-full">
-				<ContainerOverview {container} {primaryIpAddress} />
+				<ContainerOverview
+					{container}
+					{primaryIpAddress}
+					onViewPortMappings={showNetworkTab ? navigateToNetworkPortMappings : undefined}
+				/>
 			</Tabs.Content>
 
 			{#if showStats}
@@ -357,7 +373,7 @@
 				</Tabs.Content>
 			{/if}
 
-			{#if hasNetworks}
+			{#if showNetworkTab}
 				<Tabs.Content value="network" class="h-full">
 					<ContainerNetwork {container} />
 				</Tabs.Content>

frontend/src/routes/(app)/containers/components/ContainerNetwork.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
+	import { PortBadge } from '$lib/components/badges';
 	import { m } from '$lib/paraglide/messages';
 	import type { ContainerDetailsDto } from '$lib/types/container.type';
 	import { NetworksIcon } from '$lib/icons';
@@ -22,6 +23,27 @@
 </script>
 
 <div class="space-y-6">
+	<Card.Root id="container-port-mappings">
+		<Card.Header icon={NetworksIcon}>
+			<div class="flex flex-col space-y-1.5">
+				<Card.Title>
+					<h2>
+						{m.common_port_mappings()}
+					</h2>
+				</Card.Title>
+			</div>
+		</Card.Header>
+		<Card.Content class="p-4">
+			{#if container.ports && container.ports.length > 0}
+				<PortBadge ports={container.ports} />
+			{:else}
+				<div class="text-muted-foreground rounded-lg border border-dashed py-12 text-center">
+					<div class="text-sm">{m.containers_no_ports()}</div>
+				</div>
+			{/if}
+		</Card.Content>
+	</Card.Root>
+
 	<Card.Root>
 		<Card.Header icon={NetworksIcon}>
 			<div class="flex flex-col space-y-1.5">
@@ -141,7 +163,7 @@
 													{m.containers_aliases()}
 												</div>
 												<div class="text-foreground space-y-1 text-sm font-medium">
-													{#each rawNetworkConfig.aliases as alias}
+													{#each rawNetworkConfig.aliases as alias, index (index)}
 														<div class="cursor-pointer font-mono break-all select-all" title="Click to select">
 															{alias}
 														</div>

frontend/src/routes/(app)/containers/components/ContainerOverview.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
 	import StatusBadge from '$lib/components/badges/status-badge.svelte';
-	import { PortBadge } from '$lib/components/badges';
 	import { m } from '$lib/paraglide/messages';
 	import type { ContainerDetailsDto } from '$lib/types/container.type';
 	import { format, formatDistanceToNow } from 'date-fns';
@@ -10,9 +9,10 @@
 	interface Props {
 		container: ContainerDetailsDto;
 		primaryIpAddress: string;
+		onViewPortMappings?: () => void;
 	}
 
-	let { container, primaryIpAddress }: Props = $props();
+	let { container, primaryIpAddress, onViewPortMappings }: Props = $props();
 
 	function parseDockerDate(input: string | Date | undefined | null): Date | null {
 		if (!input) return null;
@@ -256,6 +256,11 @@
 							{m.containers_ports_exposed({ exposed: uniquePorts.exposed })}
 						{/if}
 					</div>
+					{#if onViewPortMappings && uniquePorts.total > 0}
+						<button type="button" class="text-primary w-fit text-xs font-medium hover:underline" onclick={onViewPortMappings}>
+							{m.common_view_details()} → {m.containers_nav_networks()}
+						</button>
+					{/if}
 				</Card.Content>
 			</Card.Root>
 
@@ -345,14 +350,5 @@
 				</Card.Root>
 			{/if}
 		</div>
-
-		{#if container.ports && container.ports.length > 0}
-			<div class="mt-6">
-				<div class="text-muted-foreground mb-3 text-xs font-semibold tracking-wide uppercase">
-					{m.common_port_mappings()}
-				</div>
-				<PortBadge ports={container.ports} />
-			</div>
-		{/if}
 	</Card.Content>
 </Card.Root>