Populate username for map fixes by author id

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>