From fbb847df78e22e95b38d7bcebbac26d7c9856719 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 1 May 2024 19:44:28 -0700
Subject: feat(badges): dropdown designers

---
 src/routes/user/[user]/badges/+page.svelte | 53 ++++++++++++++++++++++++------
 1 file changed, 43 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index f9bdefa7..22182138 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -485,6 +485,10 @@
 
 		return previousBadge;
 	};
+
+	const castAsStringArray = (array: any[]) => array as string[];
+
+	const castBadgesToIndexedBadges = (array: any[]) => array as IndexedBadge[];
 </script>
 
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
@@ -511,7 +515,8 @@
 					<Message message="Parsing badges ..." />
 
 					<Skeleton grid={true} count={100} width="150px" height="170px" />
-				{:then ungroupedBadges}
+				{:then ungroupedBadgesAny}
+					{@const ungroupedBadges = castBadgesToIndexedBadges(ungroupedBadgesAny)}
 					{@const isBadgeSelected =
 						selectedBadge &&
 						selectedBadge !== undefined &&
@@ -656,6 +661,17 @@
 										{@const groups = groupedBadges
 											.map((group) => group[0])
 											.filter((group) => group !== 'Uncategorised')}
+										{@const designers = castAsStringArray([
+											...new Set(
+												ungroupedBadges
+													.map((badge) => badge.designer)
+													.filter((designer) => designer !== undefined && designer !== null)
+													.filter(
+														(designer, index, array) =>
+															array.indexOf(designer) === index && !array.includes(`@${designer}`)
+													)
+											)
+										])}
 
 										<p />
 
@@ -746,15 +762,32 @@
 												size="16"
 												value={selectedBadge ? selectedBadge.source : ''}
 											/>
-											<input
-												type="text"
-												placeholder={$locale().user.badges.editMode.designer}
-												name="designer"
-												minlength="1"
-												maxlength="1000"
-												size="17"
-												value={selectedBadge ? selectedBadge.designer : ''}
-											/>
+											<Dropdown
+												items={designers.map((designer) => ({
+													name: designer,
+													url: '#',
+													onClick: () => {
+														const designerField = document.querySelector('input[name="designer"]');
+
+														if (designerField instanceof HTMLInputElement)
+															designerField.value = designer;
+													}
+												}))}
+												header={false}
+												center={false}
+											>
+												<span slot="title">
+													<input
+														type="text"
+														placeholder={$locale().user.badges.editMode.designer}
+														name="designer"
+														minlength="1"
+														maxlength="1000"
+														size="17"
+														value={selectedBadge ? selectedBadge.designer : ''}
+													/>
+												</span>
+											</Dropdown>
 											<Dropdown
 												items={[false, true].map((hidden) => ({
 													name: hidden ? 'Hidden' : 'Shown',
-- 
cgit v1.2.3