From d526839bfa19bd7576993bc94611301f56097f2d Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Sat, 2 Nov 2024 01:53:11 -0700
Subject: [PATCH] opnsense connections page ui improvements

---
 bun.lockb                                     | Bin 164427 -> 164427 bytes
 .../components/ui/checkbox/checkbox.svelte    |  35 ++++++++
 src/lib/components/ui/checkbox/index.ts       |   6 ++
 src/lib/components/ui/table/index.ts          |  28 ++++++
 src/lib/components/ui/table/table-body.svelte |  13 +++
 .../components/ui/table/table-caption.svelte  |  13 +++
 src/lib/components/ui/table/table-cell.svelte |  18 ++++
 .../components/ui/table/table-footer.svelte   |  13 +++
 src/lib/components/ui/table/table-head.svelte |  19 ++++
 .../components/ui/table/table-header.svelte   |  14 +++
 src/lib/components/ui/table/table-row.svelte  |  23 +++++
 src/lib/components/ui/table/table.svelte      |  15 ++++
 src/routes/connections/+page.svelte           |  81 ++++++++++--------
 13 files changed, 244 insertions(+), 34 deletions(-)
 create mode 100644 src/lib/components/ui/checkbox/checkbox.svelte
 create mode 100644 src/lib/components/ui/checkbox/index.ts
 create mode 100644 src/lib/components/ui/table/index.ts
 create mode 100644 src/lib/components/ui/table/table-body.svelte
 create mode 100644 src/lib/components/ui/table/table-caption.svelte
 create mode 100644 src/lib/components/ui/table/table-cell.svelte
 create mode 100644 src/lib/components/ui/table/table-footer.svelte
 create mode 100644 src/lib/components/ui/table/table-head.svelte
 create mode 100644 src/lib/components/ui/table/table-header.svelte
 create mode 100644 src/lib/components/ui/table/table-row.svelte
 create mode 100644 src/lib/components/ui/table/table.svelte

diff --git a/bun.lockb b/bun.lockb
index e5bf7c4e17a6d4c4abfb3563843516882700f59f..ec7b8fcee49b6dd7f2f37a54054d3088319f4b6c 100755
GIT binary patch
delta 46
scmX@z!gacZt6>Y{;T@bz3{bHB%nn9hCUz))y1{2g(e0+Y8O4qR05z2iR{#J2

delta 43
wcmX@z!gacZt6>Y{;T@ceaRz!uhI)o(+t2J^^ko9`O-xPn47MxnX4E_m089@J@&Et;

diff --git a/src/lib/components/ui/checkbox/checkbox.svelte b/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 0000000..f4b906f
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/ui/checkbox/index.ts b/src/lib/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..6d92d94
--- /dev/null
+++ b/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};
diff --git a/src/lib/components/ui/table/index.ts b/src/lib/components/ui/table/index.ts
new file mode 100644
index 0000000..14695c8
--- /dev/null
+++ b/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,
+};
diff --git a/src/lib/components/ui/table/table-body.svelte b/src/lib/components/ui/table/table-body.svelte
new file mode 100644
index 0000000..f2109d6
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/ui/table/table-caption.svelte b/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 0000000..b838270
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/ui/table/table-cell.svelte b/src/lib/components/ui/table/table-cell.svelte
new file mode 100644
index 0000000..fcb04f6
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/ui/table/table-footer.svelte b/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 0000000..a2ba75d
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/ui/table/table-head.svelte b/src/lib/components/ui/table/table-head.svelte
new file mode 100644
index 0000000..49ab7a9
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/ui/table/table-header.svelte b/src/lib/components/ui/table/table-header.svelte
new file mode 100644
index 0000000..a3e59ee
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/ui/table/table-row.svelte b/src/lib/components/ui/table/table-row.svelte
new file mode 100644
index 0000000..731c5d5
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/ui/table/table.svelte b/src/lib/components/ui/table/table.svelte
new file mode 100644
index 0000000..788d4ee
--- /dev/null
+++ b/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>
diff --git a/src/routes/connections/+page.svelte b/src/routes/connections/+page.svelte
index 6084fc7..e6eff51 100644
--- a/src/routes/connections/+page.svelte
+++ b/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}
\ No newline at end of file