From fc1fcbf71319aea2414647f84738f08034ad8284 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 14 Apr 2024 13:32:26 -0700
Subject: feat(badges): hide category button

---
 src/lib/Popup.svelte                       |  4 ++
 src/routes/api/badges/+server.ts           | 26 ++++++++++++
 src/routes/user/[user]/badges/+page.svelte | 64 +++++++++++++++++++++++++++++-
 3 files changed, 92 insertions(+), 2 deletions(-)

diff --git a/src/lib/Popup.svelte b/src/lib/Popup.svelte
index badd4f2c..2eb799bd 100644
--- a/src/lib/Popup.svelte
+++ b/src/lib/Popup.svelte
@@ -33,6 +33,10 @@
 <style>
 	.popup {
 		z-index: 3;
+
+		position: fixed;
+		top: 5%;
+		left: 50%;
 	}
 
 	.centered {
diff --git a/src/routes/api/badges/+server.ts b/src/routes/api/badges/+server.ts
index 2dc1d7b3..000dfa6c 100644
--- a/src/routes/api/badges/+server.ts
+++ b/src/routes/api/badges/+server.ts
@@ -73,6 +73,32 @@ export const PUT = async ({ cookies, url, request }) => {
 		return await badges(identity.id);
 	}
 
+	if (url.searchParams.get('hide') || undefined) {
+		const allBadges = await getUserBadges(identity.id);
+
+		await Promise.all(
+			allBadges
+				.filter((badge) => badge.category === (url.searchParams.get('category') || ''))
+				.map(async (badge) => {
+					await updateUserBadge(identity.id, badge.id as number, {
+						...badge,
+						hidden:
+							allBadges
+								.filter((badge) => badge.category === (url.searchParams.get('category') || ''))
+								.filter((badge) => badge.hidden).length >
+							allBadges.filter(
+								(badge) => badge.category === (url.searchParams.get('category') || '')
+							).length /
+								2
+								? false
+								: true
+					});
+				})
+		);
+
+		return await badges(identity.id);
+	}
+
 	const badge = {
 		post: url.searchParams.get('post') || undefined,
 		image: url.searchParams.get('image') || undefined,
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 0490dc97..48a10a0c 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -53,6 +53,7 @@
 	let importReplies = false;
 	let badger: Partial<User>;
 	let migrateMode = false;
+	let hideMode = false;
 	let preferences: UserPreferences;
 
 	$: categoryFilter = new URLSearchParams($page.url.searchParams).get('category');
@@ -429,6 +430,19 @@
 		migrateMode = false;
 	};
 
+	const hideCategory = () => {
+		badgesPromise = fetch(
+			`/api/badges?hide=true&category=${encodeURIComponent(
+				(document.querySelector('#category_hide') as HTMLInputElement).value
+			)}`,
+			{
+				method: 'PUT'
+			}
+		);
+
+		hideMode = false;
+	};
+
 	// const exportBadges = (groupedBadges: [string, Badge[]][]) => {
 	// 	const url = URL.createObjectURL(
 	// 		new Blob([JSON.stringify(groupedBadges)], { type: 'application/json' })
@@ -560,8 +574,18 @@
 									>
 										Migrate Category
 									</button>
-									<!-- <span style="margin: 0 0.625rem;">•</span>
-									<button on:click={() => exportBadges(groupedBadges)}>Export Badges</button> -->
+									<span style="margin: 0 0.625rem;">•</span>
+									<button
+										on:click={() => {
+											if (hideMode) selectedBadge = undefined;
+
+											hideMode = !hideMode;
+										}}
+									>
+										Hide Category
+									</button>
+									<!-- <!-- <span style="margin: 0 0.625rem;">•</span> -->
+									<!-- <button on:click={() => exportBadges(groupedBadges)}>Export Badges</button> -->
 
 									{#if editMode && isOwner}
 										{@const groups = groupedBadges
@@ -908,6 +932,42 @@
 	</button>
 </Popup>
 
+<Popup fullscreen onLeave={() => (hideMode = false)} show={hideMode}>
+	Hide Category
+
+	<SettingHint lineBreak>
+		If the majority of the badges in a category are shown, the category will be hidden, and vice
+		versa.
+	</SettingHint>
+
+	<p />
+
+	<input
+		type="text"
+		placeholder="Category"
+		id="category_hide"
+		minlength="1"
+		maxlength="1000"
+		size="20"
+	/>
+	<SettingHint lineBreak>Leave category field empty to hide all.</SettingHint>
+
+	<p />
+
+	<button
+		on:click={() => {
+			hideMode = false;
+			importImages = undefined;
+		}}
+		class="button-lined"
+	>
+		{$locale().user.badges.importMode.cancel}
+	</button>
+	<button on:click={() => hideCategory()} class="button-lined" style="float: right;"
+		>Toggle Visibility</button
+	>
+</Popup>
+
 <style>
 	/* body {
 		margin: 0;
-- 
cgit v1.2.3