From 6fd24b656cdb038e7a7f93e254fc6d8c147b568f Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 31 Jan 2024 18:16:24 -0800
Subject: feat(badges): use custom dropdown

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

(limited to 'src/routes')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index b2efceef..36a23f73 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -14,6 +14,7 @@
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import RateLimited from '$lib/Error/RateLimited.svelte';
 	import Message from '$lib/Loading/Message.svelte';
+	import Dropdown from '$lib/Dropdown.svelte';
 	// import { io } from 'socket.io-client';
 
 	export let data;
@@ -419,26 +420,37 @@
 											size="15"
 											value={selectedBadge ? selectedBadge.description : ''}
 										/>
-										<input
-											type="text"
-											placeholder={$locale().user.badges.editMode.category}
-											name="category"
-											minlength="1"
-											maxlength="1000"
-											size="15"
-											value={selectedBadge
-												? selectedBadge.category === 'Uncategorised'
-													? ''
-													: selectedBadge.category
-												: ''}
-											list="categories"
-										/>
 										{#if groups.length > 0}
-											<datalist id="categories">
-												{#each groups as group}
-													<option value={group} />
-												{/each}
-											</datalist>
+											<Dropdown
+												items={groups.map((group) => ({
+													name: group,
+													url: '#',
+													onClick: () => {
+														const category = document.querySelector('input[name="category"]');
+
+														if (category instanceof HTMLInputElement) category.value = group;
+													}
+												}))}
+												header={false}
+												center={false}
+											>
+												<span slot="title">
+													<input
+														type="text"
+														placeholder={$locale().user.badges.editMode.category}
+														name="category"
+														minlength="1"
+														maxlength="1000"
+														size="15"
+														value={selectedBadge
+															? selectedBadge.category === 'Uncategorised'
+																? ''
+																: selectedBadge.category
+															: ''}
+														list="categories"
+													/>
+												</span>
+											</Dropdown>
 										{/if}
 										<button class="button-lined" on:click={submitBadge}
 											>{selectedBadge
-- 
cgit v1.2.3