opnsense connections page ui improvements

src/lib/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import Minus from "lucide-svelte/icons/minus";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CheckboxPrimitive.Props;
+	type $$Events = CheckboxPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = false;
+	export { className as class };
+</script>
+
+<CheckboxPrimitive.Root
+	class={cn(
+		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		className
+	)}
+	bind:checked
+	{...$$restProps}
+	on:click
+>
+	<CheckboxPrimitive.Indicator
+		class={cn("flex h-4 w-4 items-center justify-center text-current")}
+		let:isChecked
+		let:isIndeterminate
+	>
+		{#if isChecked}
+			<Check class="h-3.5 w-3.5" />
+		{:else if isIndeterminate}
+			<Minus class="h-3.5 w-3.5" />
+		{/if}
+	</CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>

src/lib/components/ui/checkbox/index.ts

@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};

src/lib/components/ui/table/index.ts

@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};

src/lib/components/ui/table/table-body.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<tbody class={cn("[&_tr:last-child]:border-0", className)} {...$$restProps}>
+	<slot />
+</tbody>

src/lib/components/ui/table/table-caption.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<caption class={cn("text-muted-foreground mt-4 text-sm", className)} {...$$restProps}>
+	<slot />
+</caption>

src/lib/components/ui/table/table-cell.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { HTMLTdAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLTdAttributes;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<td
+	class={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</td>

src/lib/components/ui/table/table-footer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<tfoot class={cn("bg-muted/50 text-primary-foreground font-medium", className)} {...$$restProps}>
+	<slot />
+</tfoot>

src/lib/components/ui/table/table-head.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLThAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLThAttributes;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<th
+	class={cn(
+		"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</th>

src/lib/components/ui/table/table-header.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<thead class={cn("[&_tr]:border-b", className)} {...$$restProps} on:click on:keydown>
+	<slot />
+</thead>

src/lib/components/ui/table/table-row.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
+		"data-state"?: unknown;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<tr
+	class={cn(
+		"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</tr>

src/lib/components/ui/table/table.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLTableAttributes;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class="relative w-full overflow-auto">
+	<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
+		<slot />
+	</table>
+</div>

src/routes/connections/+page.svelte

@@ -2,8 +2,13 @@
 	import type { PageData } from './$types';
 	import { invalidate } from '$app/navigation';
 	import { onMount } from 'svelte';
+	import * as Table from '$lib/components/ui/table';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { Label } from '$lib/components/ui/label';
 
 	const { data }: { data: PageData } = $props();
+	let showOnlyActive = $state(false);
+	const peerRows = $derived(data.peers.rows.filter((peer) => showOnlyActive ? peer['latest-handshake'] : true));
 
 	onMount(() => {
 		// refresh every 5 seconds
@@ -30,37 +35,45 @@
 	<title>Connections</title>
 </svelte:head>
 
-<table>
-	<thead>
-	<tr>
-		<th>Public Key</th>
-		<th>Endpoint</th>
-		<th>Allowed IPs</th>
-		<th>Latest Handshake</th>
-		<th>RX</th>
-		<th>TX</th>
-		<th>Persistent Keepalive</th>
-		<th>Name</th>
-		<th>Interface Name</th>
-	</tr>
-	</thead>
-	<tbody>
-	{#each data.peers.rows as peer}
-		<tr>
-			<td>{peer['public-key'].substring(0, 10)}</td>
-			<td>{peer.endpoint}</td>
-			<td>{peer['allowed-ips']}</td>
-			{#if peer['latest-handshake']}
-				<td>{new Date(peer['latest-handshake'] * 1000)}</td>
-			{:else}
-				<td>Never</td>
-			{/if}
-			<td>{getSize(peer['transfer-rx'])}</td>
-			<td>{getSize(peer['transfer-tx'])}</td>
-			<td>{peer['persistent-keepalive']}</td>
-			<td>{peer.name}</td>
-			<td>{peer.ifname}</td>
-		</tr>
-	{/each}
-	</tbody>
-</table>
+<Checkbox id="showOnlyActive" bind:checked={showOnlyActive} />
+<Label for="showOnlyActive">Show only active connections</Label>
+
+{#if peerRows.length === 0}
+	<p>No active connections</p>
+
+{:else}
+	<Table.Root class="bg-accent rounded-xl">
+		<Table.Header>
+			<Table.Head>Name</Table.Head>
+			<Table.Head>Public Key</Table.Head>
+			<Table.Head>Endpoint</Table.Head>
+			<Table.Head>Allowed IPs</Table.Head>
+			<Table.Head>Latest Handshake</Table.Head>
+			<Table.Head>RX</Table.Head>
+			<Table.Head>TX</Table.Head>
+			<Table.Head>Persistent Keepalive</Table.Head>
+			<Table.Head>Interface Name</Table.Head>
+		</Table.Header>
+		<Table.Body>
+			{#each peerRows as peer}
+				<Table.Row class="border-y-2 border-background">
+					<Table.Cell>{peer.name}</Table.Cell>
+					<Table.Cell>{peer['public-key'].substring(0, 10)}</Table.Cell>
+					<Table.Cell>{peer.endpoint}</Table.Cell>
+					<Table.Cell>{peer['allowed-ips']}</Table.Cell>
+					{#if peer['latest-handshake']}
+						<Table.Cell>{new Date(peer['latest-handshake'] * 1000).toLocaleString()}</Table.Cell>
+						<Table.Cell>{getSize(peer['transfer-rx'])}</Table.Cell>
+						<Table.Cell>{getSize(peer['transfer-tx'])}</Table.Cell>
+					{:else}
+						<Table.Cell>Never</Table.Cell>
+						<Table.Cell>--</Table.Cell>
+						<Table.Cell>--</Table.Cell>
+					{/if}
+					<Table.Cell>{peer['persistent-keepalive']}</Table.Cell>
+					<Table.Cell>{peer.ifname}</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+{/if}