From 2da2fadcda7121c80f301e414d883c609e1600f2 Mon Sep 17 00:00:00 2001
From: itzaname <me@sliving.io>
Date: Thu, 25 Dec 2025 23:31:11 -0500
Subject: [PATCH] Populate username for map fixes by author id

---
 web/src/app/_components/mapCard.tsx | 30 +++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/web/src/app/_components/mapCard.tsx b/web/src/app/_components/mapCard.tsx
index f52596d..a6cdc29 100644
--- a/web/src/app/_components/mapCard.tsx
+++ b/web/src/app/_components/mapCard.tsx
@@ -3,6 +3,7 @@ import {Explore, Person2} from "@mui/icons-material";
 import {StatusChip} from "@/app/_components/statusChip";
 import {Link} from "react-router-dom";
 import {useAssetThumbnail, useUserThumbnail} from "@/app/hooks/useThumbnails";
+import {useUsername} from "@/app/hooks/useUsername";
 
 interface MapCardProps {
 	displayName: string;
@@ -20,6 +21,7 @@ interface MapCardProps {
 export function MapCard(props: MapCardProps) {
 	const { thumbnailUrl: assetThumbnail, isLoading: assetLoading } = useAssetThumbnail(props.assetId);
 	const { thumbnailUrl: userThumbnail, isLoading: userLoading } = useUserThumbnail(props.authorId);
+	const { username, isLoading: usernameLoading } = useUsername(props.type === 'mapfix' ? props.authorId : undefined);
 
 	return (
 		<Card sx={{ height: '100%' }}>
@@ -100,18 +102,22 @@ export function MapCard(props: MapCardProps) {
 									</Box>
 									<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
 										<Person2 sx={{ fontSize: '1rem', color: '#8b5cf6' }} />
-										<Typography
-											variant="body2"
-											color="text.secondary"
-											fontSize="0.875rem"
-											sx={{
-												overflow: 'hidden',
-												textOverflow: 'ellipsis',
-												whiteSpace: 'nowrap',
-											}}
-										>
-											{props.author}
-										</Typography>
+										{props.type === 'mapfix' && usernameLoading ? (
+											<Skeleton variant="text" width={80} />
+										) : (
+											<Typography
+												variant="body2"
+												color="text.secondary"
+												fontSize="0.875rem"
+												sx={{
+													overflow: 'hidden',
+													textOverflow: 'ellipsis',
+													whiteSpace: 'nowrap',
+												}}
+											>
+												{props.type === 'mapfix' && username ? `@${username}` : props.author}
+											</Typography>
+										)}
 									</Box>
 								</Box>
 							</Box>