server node, vm & lxc details pages at unique routes

src/routes/servers/+page.svelte

@@ -3,6 +3,9 @@
 	import PageHeader from '$lib/components/PageHeader.svelte';
 	import ServerComp from '$lib/components/Server.svelte';
 	import ServerSummary from '$lib/components/ServerSummary.svelte';
+	import VMComp from '$lib/components/VM.svelte';
+	import LXCComp from '$lib/components/LXC.svelte';
+	import type { VM, LXC } from '$lib/components/VM.svelte';
 	import type { PageData } from './$types';
 
 	let { data }: { data: PageData } = $props();
@@ -16,26 +19,25 @@
 			...allVms
 				.map((vm) => {
 					return {
-						link: `/servers/vm/${vm.name}`,
+						link: `/servers/vm/${vm.vmid}`,
 						...vm
 					};
 				})
 				.filter((d) => d.name),
-			...nodes.map(node => {
+			...nodes.map((node) => {
 				return {
 					link: `/servers/node/${node.name}`,
 					...node
-				}
+				};
 			}),
-			...allLxcs.map(lxc => {
+			...allLxcs.map((lxc) => {
 				return {
-					link: `/servers/lxc/${lxc.name}`,
+					link: `/servers/lxc/${lxc.vmid}`,
 					...lxc
-				}
+				};
 			})
 		];
 	});
-console.log(allLxcs)
 </script>
 
 <PageHeader>Servers</PageHeader>
@@ -44,18 +46,63 @@ console.log(allLxcs)
 
 <div class="server-list">
 	{#each nodes as node (node.name)}
-		<div>
-			<ServerComp {node} />
-		</div>
+		<ServerComp {node} />
 	{/each}
 </div>
 
+<details open>
+	<summary>
+		<h2>VMs</h2>
+	</summary>
+
+	<div class="vm-list">
+		{#each allVms as vm (vm.vmid)}
+			<VMComp {vm} />
+		{/each}
+	</div>
+</details>
+
+<details open>
+	<summary>
+		<h2>LXCs</h2>
+	</summary>
+
+	<div class="vm-list">
+		{#each allLxcs as lxc (lxc)}
+			<LXCComp {lxc} />
+		{/each}
+	</div>
+</details>
+
 <style lang="scss">
-	.server-list {
+	*:not(:last-child) {
+		margin-bottom: 2rem;
+	}
+
+	.server-list,
+	.vm-list {
 		display: flex;
 		flex-direction: row;
 		flex-wrap: wrap;
 		align-items: left;
 		gap: 2rem;
+
+		&:not(:last-of-type) {
+			margin-bottom: 2rem;
+		}
+	}
+
+	h2 {
+		font-weight: 500;
+	}
+
+	details summary::-webkit-details-marker,
+	details summary::marker {
+		display: none;
+	}
+
+	details > summary {
+		list-style: none;
+		cursor: pointer;
 	}
 </style>