From fa1bf1e09dd392b2d539ea077e18c63e5769bda2 Mon Sep 17 00:00:00 2001
From: JCEEE <0xjceee@proton.me>
Date: Tue, 22 Sep 2026 20:35:50 +0100
Subject: [PATCH] compact member card

---
 frontend/src/routes/[fam]/+page.svelte | 109 +++++++++++++------------
 1 file changed, 58 insertions(+), 51 deletions(-)

diff --git a/frontend/src/routes/[fam]/+page.svelte b/frontend/src/routes/[fam]/+page.svelte
index 21b2667..f40df27 100644
--- a/frontend/src/routes/[fam]/+page.svelte
+++ b/frontend/src/routes/[fam]/+page.svelte
@@ -473,52 +473,16 @@
 								<span class="donut-label">Overall</span>
 							</div>
 						</div>
-					<div class="member-stats">
-						<div class="stat-group-lbl">This week</div>
-						<div class="stat-row">
-							<span class="stat-lbl">Points</span>
-							<span class="stat-val pts">{s.pointsEarned}</span>
+					<div class="member-stats compact">
+						<div class="mstat" title="Points this week: {s.pointsEarned} · Cash: £{Number(s.moneyEarned || 0).toFixed(2)} · Pocket money: {pocketMoneyByMember.get(s.memberId) ?? 0}">
+							<span class="mstat-tag">Week</span>
+							<span class="mstat-main"><b class="pts">{s.pointsEarned}</b> pts · <b class="cash">£{Number(s.moneyEarned || 0).toFixed(2)}</b> · {wkDone}/{wkTotal}</span>
+							{#if (goals?.count ?? 0) > 0}<span class="mstat-goals" title={goals?.names.join(' · ')}>🎉{goals?.count}</span>{/if}
 						</div>
-						<div class="stat-row">
-							<span class="stat-lbl">Cash</span>
-							<span class="stat-val cash">£{Number(s.moneyEarned || 0).toFixed(2)}</span>
-						</div>
-						<div class="stat-row">
-							<span class="stat-lbl">Done</span>
-							<span class="stat-val">{wkDone}/{wkTotal}</span>
-						</div>
-						<div class="stat-row">
-							<span class="stat-lbl">Goals 🎉</span>
-							<span class="stat-val goals" title={goals?.names.join(' · ')}
-								>{goals?.count ?? 0}</span
-							>
-						</div>
-						<div class="stat-row">
-							<span class="stat-lbl">Pocket Money</span>
-							<span class="stat-val pm">{pocketMoneyByMember.get(s.memberId) ?? 0}</span>
-						</div>
-						<div class="stat-group-lbl">All time</div>
-						<div class="stat-row">
-							<span class="stat-lbl">Points</span>
-							<span class="stat-val pts">{at?.points ?? s.pointsEarned}</span>
-						</div>
-						<div class="stat-row">
-							<span class="stat-lbl">Cash</span>
-							<span class="stat-val cash">£{Number(at?.cash ?? s.moneyEarned ?? 0).toFixed(2)}</span>
-						</div>
-						<div class="stat-row">
-							<span class="stat-lbl">Done</span>
-							<span class="stat-val">{sc.done}/{sc.total}</span>
-						</div>
-						<div class="stat-row">
-							<span class="stat-lbl">Goals 🎉</span>
-							<span class="stat-val goals" title={goalsAll?.names.join(' · ')}
-								>{goalsAll?.count ?? 0}</span
-							>
-						</div>
-						<div class="stat-row">
-							<span class="stat-lbl">Pocket Money</span>
-							<span class="stat-val pm">{pocketMoneyAllTimeByMember.get(s.memberId) ?? 0}</span>
+						<div class="mstat dim" title="Points all time: {at?.points ?? s.pointsEarned} · Cash: £{Number(at?.cash ?? s.moneyEarned ?? 0).toFixed(2)} · Pocket money: {pocketMoneyAllTimeByMember.get(s.memberId) ?? 0}">
+							<span class="mstat-tag">All time</span>
+							<span class="mstat-main"><b>{at?.points ?? s.pointsEarned}</b> pts · <b>£{Number(at?.cash ?? s.moneyEarned ?? 0).toFixed(2)}</b> · {sc.done}/{sc.total}</span>
+							{#if (goalsAll?.count ?? 0) > 0}<span class="mstat-goals" title={goalsAll?.names.join(' · ')}>🎉{goalsAll?.count}</span>{/if}
 						</div>
 					</div>
 					</div>
@@ -777,18 +741,18 @@
 		display: flex;
 		justify-content: center;
 		flex-wrap: wrap;
-		gap: 0.85rem;
-		margin: 3rem 0;
+		gap: 0.6rem;
+		margin: 0.9rem 0 0.7rem;
 	}
 	.donut-wrap {
 		position: relative;
-		width: 62px;
-		height: 62px;
+		width: 54px;
+		height: 54px;
 		flex-shrink: 0;
 	}
 	.donut-wrap canvas {
-		max-width: 62px;
-		max-height: 62px;
+		max-width: 54px;
+		max-height: 54px;
 	}
 	.donut-center {
 		position: absolute;
@@ -819,6 +783,49 @@
 		gap: 0.3rem;
 		margin-bottom: 0.5rem;
 	}
+	.member-stats.compact .mstat {
+		display: flex;
+		align-items: baseline;
+		gap: 0.4rem;
+		font-size: 0.76rem;
+		color: #374151;
+		background: rgba(255, 255, 255, 0.65);
+		border: 1px solid #e5e7eb;
+		border-radius: 8px;
+		padding: 0.28rem 0.5rem;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+	.member-stats.compact .mstat.dim {
+		opacity: 0.75;
+	}
+	.mstat-tag {
+		font-size: 0.6rem;
+		font-weight: 800;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: #9ca3af;
+		flex-shrink: 0;
+	}
+	.mstat-main {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.mstat-main b {
+		font-weight: 800;
+	}
+	.mstat-main b.pts {
+		color: #7c3aed;
+	}
+	.mstat-main b.cash {
+		color: #059669;
+	}
+	.mstat-goals {
+		margin-left: auto;
+		flex-shrink: 0;
+		font-weight: 700;
+		color: #059669;
+	}
 	.stat-row {
 		display: flex;
 		justify-content: space-between;