From d5a8b16e439c4daf8f6f12cdeb76c29b99703817 Mon Sep 17 00:00:00 2001
From: Alex <$(pass /github/email)>
Date: Thu, 20 Feb 2025 09:07:31 +0100
Subject: [PATCH] frontend:add user count badge on subscriptions page

---
 .../src/routes/auth/admin/users/+page.svelte     | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/auth/admin/users/+page.svelte b/frontend/src/routes/auth/admin/users/+page.svelte
index b5d5eb4..f9c029c 100644
--- a/frontend/src/routes/auth/admin/users/+page.svelte
+++ b/frontend/src/routes/auth/admin/users/+page.svelte
@@ -179,7 +179,6 @@
 							backgroundColor="--base"
 						/>
 					</div>
-					<!-- <input type="text" bind:value={searchTerm} placeholder={$t('placeholder.search')} /> -->
 					<div>
 						<button
 							class="btn primary"
@@ -201,7 +200,7 @@
 						<details class="accordion-item">
 							<summary class="accordion-header">
 								{user.first_name}
-								{user.last_name} - {user.email}
+								{user.last_name}
 							</summary>
 							<div class="accordion-content">
 								<table class="table">
@@ -218,6 +217,10 @@
 											<th>{$t('user.email')}</th>
 											<td>{user.email}</td>
 										</tr>
+										<tr>
+											<th>{$t('subscription.subscription')}</th>
+											<td>{user.membership?.subscription_model?.name}</td>
+										</tr>
 										<tr>
 											<th>{$t('status')}</th>
 											<td>{$t('userStatus.' + user.status)}</td>
@@ -281,6 +284,12 @@
 						<details class="accordion-item">
 							<summary class="accordion-header">
 								{subscription.name}
+								<span class="nav-badge"
+									>{users.filter(
+										(/** @type{App.Locals['user']}*/ user) =>
+											user.membership?.subscription_model?.name === subscription.name
+									).length}</span
+								>
 							</summary>
 							<div class="accordion-content">
 								<table class="table">
@@ -507,6 +516,7 @@
 	}
 
 	.accordion-header {
+		display: flex;
 		padding: 1rem;
 		cursor: pointer;
 		font-family: 'Roboto Mono', monospace;
@@ -586,7 +596,6 @@
 		gap: 0.5rem;
 	}
 
-	/* Style for the nav badge */
 	.nav-badge {
 		background: var(--surface2);
 		color: var(--text);
@@ -596,7 +605,6 @@
 		margin-left: auto;
 	}
 
-	/* Improved focus states */
 	.nav-link:focus,
 	.accordion-header:focus {
 		outline: 2px solid var(--mauve);