feat(badges): disable download if too many

1 files changed, 12 insertions, 3 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index e0ca15d5..91c95e72 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -22,6 +22,9 @@
 	let confirmDelete = 0;
 	let selectedBadge: Badge | undefined = undefined;
 	let loadError: string | null = null;
+	let badgeCount = 0;
+
+	$: downloadDisabled = badgeCount > 20;
 
 	type GroupedBadges = { [key: string]: Badge[] };
 
@@ -173,6 +176,8 @@
 	const groupBadges = (badges: Badge[]) => {
 		const groupedBadges: GroupedBadges = {};
 
+		badgeCount = badges.length;
+
 		badges.forEach((badge) => {
 			if (!badge.category) badge.category = 'Uncategorised';
 
@@ -217,10 +222,14 @@
 					{editMode ? 'Disable' : 'Enable'} Edit Mode
 				</button>
 				•
-				<button on:click={() => screenshot()}>Download</button>
+				<button
+					disabled={downloadDisabled}
+					on:click={() => (downloadDisabled ? undefined : screenshot())}>Download</button
+				>
 				•
-				<input type="checkbox" bind:checked={dark} /> Dark Mode
-				<input type="checkbox" bind:checked={transparent} /> Transparent Background
+				<input disabled={downloadDisabled} type="checkbox" bind:checked={dark} /> Dark Mode
+				<input disabled={downloadDisabled} type="checkbox" bind:checked={transparent} /> Transparent
+				Background
 			{/if}
 
 			{#if editMode && isOwner}