feat(badges): source and designer fields

8 files changed, 116 insertions, 54 deletions

diff --git a/src/lib/Database/userBadges.ts b/src/lib/Database/userBadges.ts
index c6cb4919..36bf7955 100644
--- a/src/lib/Database/userBadges.ts
+++ b/src/lib/Database/userBadges.ts
@@ -9,6 +9,8 @@ export interface Badge {
 	time?: string;
 	category?: string;
 	hidden?: boolean;
+	source: string;
+	designer: string;
 }
 
 export const getUserBadges = async (userId: number): Promise<Badge[]> => {
@@ -25,18 +27,28 @@ export const getUserBadges = async (userId: number): Promise<Badge[]> => {
 };
 
 export const addUserBadge = async (userId: number, badge: Badge) => {
-	const { post, image, description, time, category, hidden } = badge;
+	const { post, image, description, time, category, hidden, source, designer } = badge;
 
 	if (post === undefined || image === undefined) return;
 
 	if (time) {
 		await supabase
 			.from('user_badges')
-			.insert({ user_id: userId, post, image, description, time, category, hidden });
+			.insert({
+				user_id: userId,
+				post,
+				image,
+				description,
+				time,
+				category,
+				hidden,
+				source,
+				designer
+			});
 	} else {
 		await supabase
 			.from('user_badges')
-			.insert({ user_id: userId, post, image, description, category, hidden });
+			.insert({ user_id: userId, post, image, description, category, hidden, source, designer });
 	}
 };
 
@@ -55,7 +67,9 @@ export const updateUserBadge = async (userId: number, id: number, badge: Badge)
 			description: badge.description,
 			category: badge.category,
 			time: badge.time,
-			hidden: badge.hidden
+			hidden: badge.hidden,
+			source: badge.source,
+			designer: badge.designer
 		})
 		.eq('id', id)
 		.eq('user_id', userId);
diff --git a/src/lib/Dropdown.svelte b/src/lib/Dropdown.svelte
index 39d9ecec..dd48af45 100644
--- a/src/lib/Dropdown.svelte
+++ b/src/lib/Dropdown.svelte
@@ -92,6 +92,7 @@
 		transition: opacity $delay ease, transform $delay ease, visibility 0s linear $delay;
 		left: var(--dropdown-left);
 		transform: var(--dropdown-transform);
+		z-index: 1;
 	}
 
 	.dropdown-open {
diff --git a/src/lib/FallbackBadge.svelte b/src/lib/FallbackBadge.svelte
index 470f5d8c..3f87b9f2 100644
--- a/src/lib/FallbackBadge.svelte
+++ b/src/lib/FallbackBadge.svelte
@@ -52,9 +52,12 @@
 		id={`badge-${badge.id}`}
 		class="badge-container badge"
 		title={`${badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''}${
-			badge.description ? `\n${badge.description}` : ''
+			badge.description ? `, ${badge.description}` : ''
+		}${badge.designer ? `\nDesigner: ${badge.designer}` : ''}${
+			badge.source ? `\nSource: ${badge.source}` : ''
 		}`}
 		use:tooltip
+		data-tooltipPin={`badge-${badge.id}`}
 	>
 		<img
 			src={source}
diff --git a/src/lib/Locale/english.ts b/src/lib/Locale/english.ts
index 7400ae82..794a97d5 100644
--- a/src/lib/Locale/english.ts
+++ b/src/lib/Locale/english.ts
@@ -175,7 +175,9 @@ const English: Locale = {
 				add: 'Add',
 				update: 'Update',
 				or: 'or',
-				delete: 'Delete (Click Twice)'
+				delete: 'Delete (Click Twice)',
+				source: 'Source (Recommended)',
+				designer: 'Designer (Recommended)'
 			},
 			importMode: {
 				enable: 'Import from AniList',
diff --git a/src/lib/Locale/japanese.ts b/src/lib/Locale/japanese.ts
index 177acd51..5986395b 100644
--- a/src/lib/Locale/japanese.ts
+++ b/src/lib/Locale/japanese.ts
@@ -176,7 +176,9 @@ const Japanese: Locale = {
 				add: 'バッジを追加',
 				update: 'バッジを更新',
 				or: 'または',
-				delete: 'バッジを削除する（2回クリック）'
+				delete: 'バッジを削除する（2回クリック）',
+				source: 'ソース（推奨）',
+				designer: 'デザイナー（推奨）'
 			},
 			importMode: {
 				enable: 'AniListからインポートする',
diff --git a/src/lib/Locale/layout.ts b/src/lib/Locale/layout.ts
index c1a0df5f..0e1bdecc 100644
--- a/src/lib/Locale/layout.ts
+++ b/src/lib/Locale/layout.ts
@@ -178,6 +178,8 @@ export interface Locale {
 				update: LocaleValue;
 				or: LocaleValue;
 				delete: LocaleValue;
+				source: LocaleValue;
+				designer: LocaleValue;
 			};
 			importMode: {
 				enable: LocaleValue;
diff --git a/src/routes/api/badges/+server.ts b/src/routes/api/badges/+server.ts
index 000dfa6c..31d7dc26 100644
--- a/src/routes/api/badges/+server.ts
+++ b/src/routes/api/badges/+server.ts
@@ -105,7 +105,9 @@ export const PUT = async ({ cookies, url, request }) => {
 		description: url.searchParams.get('description') || undefined,
 		time: url.searchParams.get('time') || undefined,
 		category: url.searchParams.get('category') || undefined,
-		hidden: url.searchParams.get('hidden') || undefined
+		hidden: url.searchParams.get('hidden') || undefined,
+		source: url.searchParams.get('source') || undefined,
+		designer: url.searchParams.get('designer') || undefined
 	};
 
 	if (
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index d55068e4..4aa205d9 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -66,6 +66,8 @@
 		link: string;
 		description: string;
 		image: string;
+		source: string;
+		designer: string;
 	}
 
 	interface AWCBadgesGroup {
@@ -208,6 +210,8 @@
 		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;
+		const source = document.querySelector('input[name="source"]') as HTMLInputElement;
+		const designer = document.querySelector('input[name="designer"]') as HTMLInputElement;
 
 		if (!imageURL.value) {
 			error = 'Image URL cannot be empty.';
@@ -235,7 +239,9 @@
 					: ''
 			}${
 				selectedBadge && selectedBadge.id ? `&update=${encodeURIComponent(selectedBadge.id)}` : ''
-			}&hidden=${hidden.value === 'Hidden'}`,
+			}&hidden=${hidden.value === 'Hidden'}${
+				source.value.length > 0 ? `&source=${encodeURIComponent(source.value)}` : ''
+			}${designer.value.length > 0 ? `&designer=${encodeURIComponent(designer.value)}` : ''}`,
 			{
 				method: 'PUT'
 			}
@@ -659,50 +665,6 @@
 												/>
 											</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
-												: $locale().user.badges.editMode.add}</button
-										>
-										{#if selectedBadge}
-											{$locale().user.badges.editMode.or}
-											<button
-												class="button-lined"
-												on:click={() => {
-													if (selectedBadge) removeBadge(selectedBadge);
-												}}>{$locale().user.badges.editMode.delete}</button
-											>
-										{/if}
 										<span style="float: right;">
 											<input
 												type="datetime-local"
@@ -712,6 +674,73 @@
 											/>
 											<small>Must be full date and time, defaults to now if any fields empty</small>
 										</span>
+
+										<p />
+
+										<div class="edit-row-2">
+											<input
+												type="text"
+												placeholder={$locale().user.badges.editMode.source}
+												name="source"
+												minlength="1"
+												maxlength="1000"
+												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={[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
+													: $locale().user.badges.editMode.add}</button
+											>
+											{#if selectedBadge}
+												{$locale().user.badges.editMode.or}
+												<button
+													class="button-lined"
+													on:click={() => {
+														if (selectedBadge) removeBadge(selectedBadge);
+													}}>{$locale().user.badges.editMode.delete}</button
+												>
+											{/if}
+										</div>
 									{/if}
 								</div>
 							{/if}
@@ -753,8 +782,11 @@
 														badge.time
 															? $locale().dateFormatter(databaseTimeToDate(badge.time))
 															: ''
-													}${badge.description ? `\n${badge.description}` : ''}`}
+													}${badge.description ? `, ${badge.description}` : ''}${
+														badge.designer ? `\nDesigner: ${badge.designer}` : ''
+													}${badge.source ? `\nSource: ${badge.source}` : ''}`}
 													use:tooltip
+													data-tooltipPin={`badge-${badge.id}`}
 												>
 													<FallbackImage
 														source={cdn(thumbnail(badge.image))}
@@ -982,4 +1014,8 @@
 		grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
 		gap: 0.25rem;
 	}
+
+	.edit-row-2 {
+		margin-top: -1.25rem;
+	}
 </style>