feat(tools): add toggle to see unfeatured tools for admins (#1474)

feat(tools): add toggle to see unfeatured tools

Author: nsarrazin

src/routes/tools/+page.server.ts

@@ -23,6 +23,7 @@ export const load = async ({ url, locals }) => {
 	const sort = url.searchParams.get("sort")?.trim() ?? SortKey.TRENDING;
 	const createdByCurrentUser = locals.user?.username && locals.user.username === username;
 	const activeOnly = url.searchParams.get("active") === "true";
+	const showUnfeatured = url.searchParams.get("showUnfeatured") === "true";
 
 	let user: Pick<User, "_id"> | null = null;
 	if (username) {
@@ -44,7 +45,9 @@ export const load = async ({ url, locals }) => {
 	const queryTokens = !!query && generateQueryTokens(query);
 
 	const filter: Filter<CommunityToolDB> = {
-		...(!createdByCurrentUser && !activeOnly && !locals.user?.isAdmin && { featured: true }),
+		...(!createdByCurrentUser &&
+			!activeOnly &&
+			!(locals.user?.isAdmin && showUnfeatured) && { featured: true }),
 		...(user && { createdById: user._id }),
 		...(queryTokens && { searchTokens: { $all: queryTokens } }),
 		...(activeOnly && {
@@ -90,5 +93,6 @@ export const load = async ({ url, locals }) => {
 		numItemsPerPage: NUM_PER_PAGE,
 		query,
 		sort,
+		showUnfeatured,
 	};
 };

src/routes/tools/+page.svelte

@@ -36,6 +36,8 @@
 	let isFilterInPorgress = false;
 	let sortValue = data.sort as SortKey;
 
+	let showUnfeatured = data.showUnfeatured;
+
 	const resetFilter = () => {
 		filterValue = "";
 		isFilterInPorgress = false;
@@ -73,6 +75,15 @@
 		goto(newUrl);
 	};
 
+	const toggleShowUnfeatured = () => {
+		showUnfeatured = !showUnfeatured;
+		const newUrl = getHref($page.url, {
+			newKeys: { showUnfeatured: showUnfeatured ? "true" : undefined },
+			existingKeys: { behaviour: "delete", keys: [] },
+		});
+		goto(newUrl);
+	};
+
 	const goToActiveUrl = () => {
 		return getHref($page.url, {
 			newKeys: { active: "true" },
@@ -112,6 +123,12 @@
 			>. Consider sharing your feedback with us!
 		</h4>
 		<div class="ml-auto mt-6 flex justify-between gap-2 max-sm:flex-col sm:items-center">
+			{#if data.user?.isAdmin}
+				<label class="mr-auto flex items-center gap-1 text-red-500" title="Admin only feature">
+					<input type="checkbox" checked={showUnfeatured} on:change={toggleShowUnfeatured} />
+					Show unfeatured tools
+				</label>
+			{/if}
 			<a
 				href={`${base}/tools/new`}
 				class="flex items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
@@ -211,7 +228,10 @@
 				{@const isOfficial = !tool.createdByName}
 				<a
 					href="{base}/tools/{tool._id.toString()}"
-					class="relative flex flex-row items-center gap-4 overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 text-center shadow hover:bg-gray-50 hover:shadow-inner dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40 max-sm:px-4 sm:h-24"
+					class="relative flex flex-row items-center gap-4 overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 text-center shadow hover:bg-gray-50 hover:shadow-inner dark:bg-gray-950/20 dark:hover:bg-gray-950/40 max-sm:px-4 sm:h-24 {!tool.featured &&
+					!isOfficial
+						? ' border-red-500/30'
+						: 'dark:border-gray-800/70'}"
 					class:!border-blue-600={isActive}
 				>
 					<ToolLogo color={tool.color} icon={tool.icon} />