feat(badges): auto-suggest category

1 files changed, 113 insertions, 95 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 9d0063be..22b003d3 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -286,101 +286,6 @@
 	{:then identity}
 		{@const isOwner = identity && identity.name === data.username}
 
-		{#if isOwner}
-			<div class="card">
-				<a href={root(`/user/${data.username}`)}>Back to Profile</a>
-				•
-				<button
-					on:click={() => {
-						if (editMode) selectedBadge = undefined;
-
-						editMode = !editMode;
-					}}
-				>
-					{editMode ? 'Disable' : 'Enable'} Edit Mode
-				</button>
-				•
-				<button
-					disabled={downloadDisabled}
-					on:click={() => (downloadDisabled ? undefined : screenshot())}>Download</button
-				>
-				•
-				<input disabled={downloadDisabled} type="checkbox" bind:checked={dark} /> Dark Mode
-				<input disabled={downloadDisabled} type="checkbox" bind:checked={transparent} /> Transparent
-				Background
-
-				{#if editMode && isOwner}
-					<p />
-
-					{#if error}
-						<p style="color: red;">{error}</p>
-					{/if}
-
-					<input
-						type="text"
-						placeholder="Image URL"
-						name="image_url"
-						minlength="1"
-						maxlength="1000"
-						size="11"
-						value={selectedBadge ? selectedBadge.image : ''}
-					/>
-					<input
-						type="text"
-						placeholder="Activity URL"
-						name="activity_url"
-						minlength="1"
-						maxlength="1000"
-						size="11"
-						value={selectedBadge ? (selectedBadge.post === '#' ? '' : selectedBadge.post) : ''}
-					/>
-					<input
-						type="text"
-						placeholder="Description (Optional)"
-						name="description"
-						minlength="1"
-						maxlength="1000"
-						size="11"
-						value={selectedBadge ? selectedBadge.description : ''}
-					/>
-					<input
-						type="text"
-						placeholder="Category (Optional)"
-						name="category"
-						minlength="1"
-						maxlength="1000"
-						size="11"
-						value={selectedBadge
-							? selectedBadge.category === 'Uncategorised'
-								? ''
-								: selectedBadge.category
-							: ''}
-					/>
-					<button class="button-lined" on:click={submitBadge}
-						>{selectedBadge ? 'Update' : 'Add'}</button
-					>
-					{#if selectedBadge}
-						or
-						<button
-							class="button-lined"
-							on:click={() => {
-								if (selectedBadge) removeBadge(selectedBadge);
-							}}>Delete (click twice)</button
-						>
-					{/if}
-					<span style="float: right;">
-						<input
-							type="datetime-local"
-							value={selectedBadge && selectedBadge.time ? selectedBadge.time : ''}
-						/>
-						<small>Must be full date and time, defaults to now if any fields empty</small>
-					</span>
-				{/if}
-			</div>
-		{/if}
-
-		<p />
-
 		{#await badgesPromise}
 			<Loading type="user identity" percent={60} />
 		{:then badgesResponse}
@@ -392,6 +297,7 @@
 						{#await awcPromise then badges}
 							{#await badges.text() then text}
 								{@const parsedBadges = awcBadgesGrouped(text)}
+
 								{#if parsedBadges.length > 0}
 									{#each parsedBadges as group}
 										<details open>
@@ -431,6 +337,118 @@
 						{:else}
 							{@const groupedBadges = Object.entries(groupBadges(ungroupedBadges))}
 
+							{#if isOwner}
+								<div class="card">
+									<a href={root(`/user/${data.username}`)}>Back to Profile</a>
+									•
+									<button
+										on:click={() => {
+											if (editMode) selectedBadge = undefined;
+
+											editMode = !editMode;
+										}}
+									>
+										{editMode ? 'Disable' : 'Enable'} Edit Mode
+									</button>
+									•
+									<button
+										disabled={downloadDisabled}
+										on:click={() => (downloadDisabled ? undefined : screenshot())}>Download</button
+									>
+									•
+									<input disabled={downloadDisabled} type="checkbox" bind:checked={dark} /> Dark
+									Mode
+									<input disabled={downloadDisabled} type="checkbox" bind:checked={transparent} />
+									Transparent Background
+
+									{#if editMode && isOwner}
+										{@const groups = groupedBadges
+											.map((group) => group[0])
+											.filter((group) => group !== 'Uncategorised')}
+
+										<p />
+
+										{#if error}
+											<p style="color: red;">{error}</p>
+										{/if}
+
+										<input
+											type="text"
+											placeholder="Image URL"
+											name="image_url"
+											minlength="1"
+											maxlength="1000"
+											size="11"
+											value={selectedBadge ? selectedBadge.image : ''}
+										/>
+										<input
+											type="text"
+											placeholder="Activity URL"
+											name="activity_url"
+											minlength="1"
+											maxlength="1000"
+											size="11"
+											value={selectedBadge
+												? selectedBadge.post === '#'
+													? ''
+													: selectedBadge.post
+												: ''}
+										/>
+										<input
+											type="text"
+											placeholder="Description (Optional)"
+											name="description"
+											minlength="1"
+											maxlength="1000"
+											size="11"
+											value={selectedBadge ? selectedBadge.description : ''}
+										/>
+										<input
+											type="text"
+											placeholder="Category (Optional)"
+											name="category"
+											minlength="1"
+											maxlength="1000"
+											size="11"
+											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>
+										{/if}
+										<button class="button-lined" on:click={submitBadge}
+											>{selectedBadge ? 'Update' : 'Add'}</button
+										>
+										{#if selectedBadge}
+											or
+											<button
+												class="button-lined"
+												on:click={() => {
+													if (selectedBadge) removeBadge(selectedBadge);
+												}}>Delete (click twice)</button
+											>
+										{/if}
+										<span style="float: right;">
+											<input
+												type="datetime-local"
+												value={selectedBadge && selectedBadge.time ? selectedBadge.time : ''}
+											/>
+											<small>Must be full date and time, defaults to now if any fields empty</small>
+										</span>
+									{/if}
+								</div>
+							{/if}
+
+							<p />
+
 							{#each groupedBadges as [category, badges]}
 								<details open>
 									<summary>{category}</summary>