/assistants: add user count (#809)

* add user count

* Update formatUserCount.ts

* add 50-99 range

* Update src/lib/utils/formatUserCount.ts

Co-authored-by: Mishig <mishig.davaadorj@coloradocollege.edu>

---------

Co-authored-by: Mishig <mishig.davaadorj@coloradocollege.edu>

src/lib/utils/formatUserCount.ts

@@ -0,0 +1,18 @@
+export function formatUserCount(userCount: number): string {
+	const userCountRanges: { min: number; max: number; label: string }[] = [
+		{ min: 0, max: 1, label: "1" },
+		{ min: 2, max: 9, label: "1-10" },
+		{ min: 10, max: 49, label: "+10" },
+		{ min: 50, max: 99, label: "+50" },
+		{ min: 100, max: 299, label: "+100" },
+		{ min: 300, max: 499, label: "+300" },
+		{ min: 500, max: 999, label: "+500" },
+		{ min: 1_000, max: 2_999, label: "+1k" },
+		{ min: 3_000, max: 4_999, label: "+3k" },
+		{ min: 5_000, max: 9_999, label: "+5k" },
+		{ min: 10_000, max: Infinity, label: "+10k" },
+	];
+
+	const range = userCountRanges.find(({ min, max }) => userCount >= min && userCount <= max);
+	return range?.label ?? "";
+}

src/routes/assistants/+page.svelte

@@ -13,8 +13,9 @@
 	import CarbonClose from "~icons/carbon/close";
 	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
 	import CarbonEarthAmerica from "~icons/carbon/earth-americas-filled";
-	// import CarbonViewOff from "~icons/carbon/view-off-filled";
+	import CarbonUserMultiple from "~icons/carbon/user-multiple";
 	import Pagination from "$lib/components/Pagination.svelte";
+	import { formatUserCount } from "$lib/utils/formatUserCount";
 	import { getHref } from "$lib/utils/getHref";
 
 	export let data: PageData;
@@ -144,13 +145,16 @@
 			{#each data.assistants as assistant (assistant._id)}
 				<a
 					href="{base}/assistant/{assistant._id}"
-					class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
+					class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
 				>
-					<!-- {#if assistant.userCount && assistant.userCount > 1}
-						<div class="absolute right-2 top-2" title="share with others to make it public">
-							<CarbonViewOff class="opacity-70" />
+					{#if assistant.userCount && assistant.userCount > 1}
+						<div
+							class="absolute right-3 top-3 flex items-center gap-1 text-xs text-gray-400"
+							title="Number of users"
+						>
+							<CarbonUserMultiple class="text-xxs" />{formatUserCount(assistant.userCount)}
 						</div>
-					{/if} -->
+					{/if}
 					{#if assistant.avatar}
 						<img
 							src="{base}/settings/assistants/{assistant._id}/avatar.jpg"