feat: cute pfp stuff

client/src/components/activity/Activity.tsx

@@ -37,6 +37,7 @@ import {
 	ClumpedActivitySession,
 } from "types/tachi";
 import { InnerQuestSectionGoal } from "components/targets/quests/Quest";
+import ProfilePicture, { ProfilePictureSmall } from "components/user/ProfilePicture";
 
 // Records activity for a group of users on a GPT. Also used for single users.
 export default function Activity({
@@ -298,6 +299,9 @@ function ScoresActivity({
 			<div className="timeline-content">
 				<div className="timeline-content-inner" onClick={() => setShow(!show)}>
 					<div className="timeline-content-title">
+						<span className="mr-2">
+							<ProfilePictureSmall user={user} toGPT={`${game}/${playtype}`} />
+						</span>
 						<Icon
 							type={`chevron-${show ? "down" : "right"}`}
 							style={{
@@ -377,6 +381,9 @@ function GoalActivity({
 			<div className="timeline-content">
 				<div className="timeline-content-inner" onClick={() => setShow(!show)}>
 					<div className="timeline-content-title">
+						<span className="mr-2">
+							<ProfilePictureSmall user={user} toGPT={`${game}/${playtype}`} />
+						</span>
 						<Icon
 							type={`chevron-${show ? "down" : "right"}`}
 							style={{
@@ -443,6 +450,9 @@ function QuestActivity({
 				<div className="timeline-content-inner">
 					<div className="timeline-content-title">
 						<span style={{ fontSize: "1.15rem" }}>
+							<span className="mr-2">
+								<ProfilePictureSmall user={user} toGPT={`${game}/${playtype}`} />
+							</span>
 							<UGPTLink reqUser={user} game={game} playtype={playtype} /> completed
 							the{" "}
 							<Link
@@ -484,12 +494,17 @@ function SessionActivity({
 
 	const isProbablyActive = Date.now() - data.timeEnded < ONE_HOUR;
 
+	const { game, playtype } = data;
+
 	return (
 		<div className="timeline-item timeline-hover">
 			<div className={`timeline-badge bg-${data.highlight ? "warning" : "secondary"}`}></div>
 			<div className="timeline-content d-flex">
 				<div className="timeline-content-inner" onClick={() => setShow(!show)}>
 					<div className="timeline-content-title">
+						<span className="mr-2">
+							<ProfilePictureSmall user={user} toGPT={`${game}/${playtype}`} />
+						</span>
 						<Icon
 							type={`chevron-${show ? "down" : "right"}`}
 							style={{
@@ -633,6 +648,12 @@ function ClassAchievementActivity({
 			<div className="timeline-content d-flex">
 				<div className="timeline-content-inner">
 					<div className="timeline-content-title">
+						<span className="mr-2">
+							<ProfilePictureSmall
+								user={user}
+								toGPT={`${data.game}/${data.playtype}`}
+							/>
+						</span>
 						<UGPTLink reqUser={user} game={data.game} playtype={data.playtype} />{" "}
 						achieved{" "}
 						<ClassBadge

client/src/components/user/ProfilePicture.tsx

@@ -48,3 +48,49 @@ export default function ProfilePicture({
 		</Link>
 	);
 }
+
+export function ProfilePictureSmall({
+	user,
+	src,
+	toGPT = "",
+}: {
+	user: UserDocument | string;
+	src?: string;
+
+	/**
+	 * When clicking this this profile, should it take you to a UGPT page?
+	 */
+	toGPT?: string;
+}) {
+	if (typeof user === "string") {
+		return (
+			<Link to={`/u/${user}/${toGPT}`}>
+				<img
+					src={src ? src : ToAPIURL(`/users/${user}/pfp`)}
+					alt={`${user}'s Profile Picture`}
+					className="rounded"
+					style={{
+						width: "32px",
+						height: "32px",
+						boxShadow: "0px 0px 10px 0px #000000",
+					}}
+				/>
+			</Link>
+		);
+	}
+
+	return (
+		<Link to={`/u/${user.username}/${toGPT}`}>
+			<img
+				src={src ? src : ToAPIURL(`/users/${user.id}/pfp`)}
+				alt={`${user.username}'s Profile Picture`}
+				className="rounded"
+				style={{
+					width: "32px",
+					height: "32px",
+					boxShadow: "0px 0px 10px 0px #000000",
+				}}
+			/>
+		</Link>
+	);
+}