feat(user): pinned category ui

3 files changed, 100 insertions, 9 deletions

diff --git a/src/lib/Database/userPreferences.ts b/src/lib/Database/userPreferences.ts
index ba1eb1d8..9f55e110 100644
--- a/src/lib/Database/userPreferences.ts
+++ b/src/lib/Database/userPreferences.ts
@@ -19,6 +19,7 @@ interface NewUserPreferences {
 	badge_wall_css?: string;
 	biography?: string;
 	hide_awc_badges?: boolean;
+	pinned_badge_wall_categories?: string;
 }
 
 export const getUserPreferences = async (userId: number) => {
@@ -45,9 +46,9 @@ export const setUserPreferences = async (userId: number, preferences: NewUserPre
 				badge_wall_css:
 					preferences.badge_wall_css || (userPreferences ? userPreferences.badge_wall_css : ''),
 				hide_awc_badges: preferences.hide_awc_badges || false,
-				pinned_badge_wall_categories: userPreferences
-					? userPreferences.pinned_badge_wall_categories
-					: ''
+				pinned_badge_wall_categories:
+					preferences.pinned_badge_wall_categories ||
+					(userPreferences ? userPreferences.pinned_badge_wall_categories : '')
 			},
 			{ onConflict: 'user_id' }
 		)
@@ -119,3 +120,23 @@ export const setBiography = async (userId: number, biography: string) => {
 		biography: biography || '\n'
 	});
 };
+
+export const togglePinnedBadgeWallCategory = async (userId: number, category: string) => {
+	const userPreferences = await getUserPreferences(userId);
+
+	if (!userPreferences) return null;
+
+	const pinnedCategories = userPreferences.pinned_badge_wall_categories.split(',');
+	const index = pinnedCategories.indexOf(category);
+
+	if (index === -1) pinnedCategories.push(category);
+	else pinnedCategories.splice(index, 1);
+
+	return await setUserPreferences(userId, {
+		updated_at: new Date().toISOString(),
+		pinned_hololive_streams: userPreferences.pinned_hololive_streams,
+		hide_missing_badges: userPreferences.hide_missing_badges,
+		badge_wall_css: userPreferences.badge_wall_css,
+		pinned_badge_wall_categories: pinnedCategories.join(',')
+	});
+};
diff --git a/src/routes/api/preferences/+server.ts b/src/routes/api/preferences/+server.ts
index 379f33c5..2fe2ccfe 100644
--- a/src/routes/api/preferences/+server.ts
+++ b/src/routes/api/preferences/+server.ts
@@ -4,7 +4,8 @@ import {
 	toggleHideMissingBadges,
 	setCSS,
 	setBiography,
-	toggleHideAWCBadges
+	toggleHideAWCBadges,
+	togglePinnedBadgeWallCategory
 } from '$lib/Database/userPreferences';
 
 const unauthorised = new Response('Unauthorised', { status: 401 });
@@ -55,6 +56,16 @@ export const PUT = async ({ url, cookies, request }) => {
 			}
 		});
 
+	if (url.searchParams.get('toggleCategory') !== null)
+		return Response.json(
+			await togglePinnedBadgeWallCategory(userId, url.searchParams.get('toggleCategory') || ''),
+			{
+				headers: {
+					'Access-Control-Allow-Origin': 'https://due.moe'
+				}
+			}
+		);
+
 	if (url.searchParams.get('biography') !== null)
 		return Response.json(await setBiography(userId, (await request.text()).slice(0, 3000)), {
 			headers: {
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 2dd8dc2b..097007f0 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -68,6 +68,11 @@
 	const getBiography = () =>
 		(document.getElementById('biography') as HTMLTextAreaElement).value.slice(0, 3000);
 
+	const refreshPreferences = () =>
+		fetch(root(`/api/preferences?id=${userData?.id}`))
+			.then((rawPreferences) => rawPreferences.json())
+			.then((JSONpreferences) => (preferences = JSONpreferences));
+
 	// 8.5827814569536423841e0
 </script>
 
@@ -239,6 +244,49 @@
 
 			<p />
 
+			Pinned Categories
+
+			<div class="pinned-categories">
+				{#each preferences.pinned_badge_wall_categories.split(',') as category}
+					<span class="card card-small pinned-category">
+						<span class="pinned-category-name">
+							{category}
+						</span>
+						<button
+							on:click={() => {
+								if (userData)
+									fetch(root(`/api/preferences?id=${userData.id}&toggleCategory=${category}`), {
+										method: 'PUT'
+									}).then(refreshPreferences);
+							}}>Remove</button
+						>
+					</span>
+				{/each}
+
+				<span class="card card-small pinned-category">
+					<span class="pinned-category-name">
+						<input type="text" id="category" placeholder="Category" style="width: 10em;" />
+					</span>
+
+					<button
+						class="button-lined"
+						on:click={() => {
+							if (userData) {
+								const category = document.getElementById('category').value;
+
+								fetch(root(`/api/preferences?id=${userData.id}&toggleCategory=${category}`), {
+									method: 'PUT'
+								}).then(refreshPreferences);
+
+								document.getElementById('category').value = '';
+							}
+						}}>Add</button
+					>
+				</span>
+			</div>
+
+			<p />
+
 			Biography
 
 			<button
@@ -247,11 +295,7 @@
 						fetch(root(`/api/preferences?id=${userData.id}&biography`), {
 							method: 'PUT',
 							body: getBiography()
-						}).then(() =>
-							fetch(root(`/api/preferences?id=${userData?.id}`))
-								.then((rawPreferences) => rawPreferences.json())
-								.then((JSONpreferences) => (preferences = JSONpreferences))
-						);
+						}).then(refreshPreferences);
 				}}>Save</button
 			>
 			<textarea
@@ -355,4 +399,19 @@
 	.user-grid-rest {
 		flex: 1;
 	}
+
+	.pinned-categories {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+	}
+
+	.pinned-category {
+		display: flex;
+		align-items: center;
+	}
+
+	.pinned-category-name {
+		margin-right: 0.5em;
+	}
 </style>