show count of users and admin on admin page

src/lib/stores.ts

@@ -1,4 +1,7 @@
 import { persisted } from 'svelte-local-storage-store';
 import type { Writable } from 'svelte/store';
+import { writable } from 'svelte/store';
 
 export const playAudio: Writable<boolean> = persisted('playAudio', false);
+
+export const adminCount: Writable<number> = writable(0);

src/routes/admin/+layout.server.ts

@@ -0,0 +1,12 @@
+import type { LayoutServerLoad } from './$types';
+import { Admin, User } from '$lib/server/database';
+import { getSession } from '$lib/server/session';
+
+export const load: LayoutServerLoad = async ({ cookies }) => {
+	const session = getSession(cookies);
+
+	return {
+		userCount: session?.permissions.userRead() ? await User.count() : 0,
+		adminCount: session?.permissions.adminRead() ? await Admin.count() : 0
+	};
+};

src/routes/admin/+layout.svelte

@@ -4,6 +4,8 @@
 	import { IconOutline } from 'svelte-heros-v2';
 	import { buttonTriggeredRequest } from '$lib/components/utils';
 	import { goto } from '$app/navigation';
+	import type { LayoutData } from './$types';
+	import { adminCount } from '$lib/stores';
 
 	async function logout() {
 		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/logout`, {
@@ -15,6 +17,9 @@
 			throw new Error();
 		}
 	}
+
+	export let data: LayoutData;
+	$adminCount = data.adminCount;
 </script>
 
 {#if $page.url.pathname !== `${env.PUBLIC_BASE_PATH}/admin/login`}
@@ -25,12 +30,14 @@
 					<a href="{env.PUBLIC_BASE_PATH}/admin/users">
 						<IconOutline name="user-group-outline" />
 						<span class="ml-1">Registrierte Nutzer</span>
+						<div class="badge">{data.userCount}</div>
 					</a>
 				</li>
 				<li>
 					<a href="{env.PUBLIC_BASE_PATH}/admin/admin">
 						<IconOutline name="users-outline" />
 						<span class="ml-1">Website Admins</span>
+						<div class="badge">{$adminCount}</div>
 					</a>
 				</li>
 				<li class="mt-auto">

src/routes/admin/admin/+page.svelte

@@ -8,6 +8,7 @@
 	import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
 	import { buttonTriggeredRequest, resizeTableColumn } from '$lib/components/utils';
 	import { goto } from '$app/navigation';
+	import { adminCount } from '$lib/stores';
 
 	let allPermissionBadges = {
 		'Admin Read': Permissions.AdminRead,
@@ -31,6 +32,7 @@
 		});
 		if (response.ok) {
 			let res = await response.json();
+			$adminCount += 1;
 			res.permissions = new Permissions(res.permissions).asArray();
 			data.admins.push(res);
 			data.admins = data.admins;
@@ -74,6 +76,7 @@
 			if (id === data.id) {
 				await goto(`${env.PUBLIC_BASE_PATH}/`);
 			} else {
+				$adminCount -= 1;
 				data.admins.splice(
 					data.admins.findIndex((v) => v.id == id),
 					1
@@ -193,7 +196,7 @@
 			</tr>
 		{/each}
 		<tr>
-			<td>{data.admins.length}</td>
+			<td>{data.admins.length + 1}</td>
 			<td><Input type="text" bind:value={newAdminUsername} size="sm" /></td>
 			<td><Input type="password" bind:value={newAdminPassword} size="sm" /></td>
 			<td