From 4d1ad0beb1609fbcd28d578b24728d4b798a9e3d Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 13 Apr 2024 23:12:50 -0700
Subject: feat(badges): badge hiding

---
 src/routes/user/[user]/badges/+page.svelte | 50 ++++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 3 deletions(-)

(limited to 'src/routes/user')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 1d0896fc..18f014be 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -206,6 +206,7 @@
 		const description = document.querySelector('input[name="description"]') as HTMLInputElement;
 		const time = document.querySelector('input[type="datetime-local"]') as HTMLInputElement;
 		const category = document.querySelector('input[name="category"]') as HTMLInputElement;
+		const hidden = document.querySelector('input[name="hidden"]') as HTMLInputElement;
 
 		if (!imageURL.value) {
 			error = 'Image URL cannot be empty.';
@@ -233,7 +234,7 @@
 					: ''
 			}${
 				selectedBadge && selectedBadge.id ? `&update=${encodeURIComponent(selectedBadge.id)}` : ''
-			}`,
+			}&hidden=${hidden.value === 'Hidden'}`,
 			{
 				method: 'PUT'
 			}
@@ -244,6 +245,7 @@
 		activityURL.value = '';
 		description.value = '';
 		category.value = '';
+		hidden.value = 'Shown';
 		selectedBadge = undefined;
 	};
 
@@ -441,6 +443,9 @@
 		downloadAnchor.remove();
 		URL.revokeObjectURL(url);
 	};
+
+	const removeHiddenBadges = (badges: Badge[]) =>
+		editMode ? badges : badges.filter((b) => !b.hidden);
 </script>
 
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
@@ -519,7 +524,9 @@
 
 							<Skeleton grid={true} count={10} width="150px" height="170px" />
 						{:else}
-							{@const groupedBadges = Object.entries(groupBadges(ungroupedBadges))}
+							{@const groupedBadges = Object.entries(
+								groupBadges(removeHiddenBadges(ungroupedBadges))
+							)}
 
 							{#if isOwner}
 								<div class="card">
@@ -631,6 +638,36 @@
 												/>
 											</span>
 										</Dropdown>
+										<Dropdown
+											items={[false, true].map((hidden) => ({
+												name: hidden ? 'Hidden' : 'Shown',
+												url: '#',
+												onClick: () => {
+													const hiddenInput = document.querySelector('input[name="hidden"]');
+
+													if (hiddenInput instanceof HTMLInputElement)
+														hiddenInput.value = hidden ? 'Hidden' : 'Shown';
+												}
+											}))}
+											header={false}
+											center={false}
+										>
+											<span slot="title">
+												<input
+													type="text"
+													placeholder="Shown"
+													name="hidden"
+													minlength="1"
+													maxlength="1000"
+													size="15"
+													value={selectedBadge
+														? selectedBadge.hidden
+															? 'Hidden'
+															: 'Shown'
+														: 'Shown'}
+												/>
+											</span>
+										</Dropdown>
 										<button class="button-lined" on:click={submitBadge}
 											>{selectedBadge
 												? $locale().user.badges.editMode.update
@@ -682,7 +719,14 @@
 											{#if editMode}
 												<a
 													href={`#`}
-													on:click={() => (selectedBadge = badge)}
+													on:click={() => {
+														selectedBadge = badge;
+
+														const hiddenInput = document.querySelector('input[name="hidden"]');
+
+														if (hiddenInput instanceof HTMLInputElement)
+															hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown';
+													}}
 													id={`badge-${badge.id}`}
 													title={`${
 														badge.time
-- 
cgit v1.2.3