use server name where possible and add a list of aliases

src/app/players/[id]/games.tsx

@@ -1,97 +0,0 @@
-'use client'
-
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import { cn } from '@/lib/utils'
-import { api } from '@/trpc/react'
-import { useFormatter } from 'next-intl'
-import { useParams } from 'next/navigation'
-
-export function PlayerGames() {
-  const { id } = useParams()
-  if (!id || typeof id !== 'string') {
-    return null
-  }
-  const [games] = api.history.user_games.useSuspenseQuery({ user_id: id })
-
-  const format = useFormatter()
-
-  return (
-    <Table>
-      <TableCaption>User's latest games</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead className='w-[100px]'>Game type</TableHead>
-          <TableHead>Opponent</TableHead>
-          <TableHead className='text-right'>Opponent MMR</TableHead>
-          <TableHead className='text-right'>MMR</TableHead>
-          <TableHead className='text-right'>Result</TableHead>
-          <TableHead>Date</TableHead>
-          <TableHead className='text-right'>Time</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {games.map((game) => {
-          return (
-            <TableRow key={game.gameId}>
-              <TableCell className='font-medium'>{game.gameType}</TableCell>
-              <TableCell>{game.opponentName}</TableCell>
-              <TableCell className='text-right font-mono'>
-                {Math.trunc(game.opponentMmr)}
-              </TableCell>
-              <TableCell className='text-right font-mono'>
-                {Math.trunc(game.playerMmr)}
-              </TableCell>
-              <GameResultCell result={game.result} mmrChange={game.mmrChange} />
-              <TableCell className='text-right font-mono'>
-                <time dateTime={game.gameTime.toISOString()}>
-                  {format.dateTime(game.gameTime, {
-                    year: 'numeric',
-                    month: '2-digit',
-                    day: '2-digit',
-                  })}
-                </time>
-              </TableCell>
-              <TableCell className='text-right font-mono'>
-                {format.dateTime(game.gameTime, {
-                  hour: '2-digit',
-                  minute: '2-digit',
-                })}
-              </TableCell>
-            </TableRow>
-          )
-        })}
-      </TableBody>
-    </Table>
-  )
-}
-
-const numberFormatter = new Intl.NumberFormat('en-US', {
-  signDisplay: 'exceptZero',
-})
-
-function GameResultCell({
-  result,
-  mmrChange,
-}: { result: string; mmrChange: number }) {
-  return (
-    <TableCell
-      className={cn(
-        'text-right',
-        'font-mono',
-        result === 'win' && 'text-green-600',
-        result === 'loss' && 'text-red-500',
-        result === 'tie' && 'text-yellow-500'
-      )}
-    >
-      {numberFormatter.format(Math.trunc(mmrChange))}
-    </TableCell>
-  )
-}

src/app/players/[id]/user.tsx

@@ -1,5 +1,11 @@
 'use client'
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import type React from 'react'
 import { useState } from 'react'
 
@@ -26,6 +32,7 @@ import {
   ChevronUp,
   Filter,
   IceCreamCone,
+  InfoIcon,
   MinusCircle,
   ShieldHalf,
   Star,
@@ -104,8 +111,13 @@ export function UserInfo() {
     }
   }
 
+  const aliases = [...new Set(games.map((g) => g.playerName))]
+  console.log(aliases)
+  const lastGame = games.at(0)
+
+  const currentName = lastGame?.playerName ?? discord_user.username
   const profileData = {
-    username: discord_user.username,
+    username: currentName,
     avatar: discord_user.avatar_url,
     games: games_played,
     wins,
@@ -114,7 +126,6 @@ export function UserInfo() {
     winRate: games_played > 0 ? Math.round((wins / games_played) * 100) : 0,
   }
 
-  const lastGame = games.at(0)
   const firstGame = games.at(-1)
 
   // Get last games for each leaderboard
@@ -144,9 +155,29 @@ export function UserInfo() {
               </div>
 
               <div className='text-center md:text-left'>
-                <h1 className='font-bold text-3xl text-gray-900 dark:text-white'>
-                  {profileData.username}
-                </h1>
+                <div className={'flex items-start gap-2'}>
+                  <h1 className='font-bold text-3xl text-gray-900 dark:text-white'>
+                    {profileData.username}
+                  </h1>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <InfoIcon className={'size-4'} />
+                      </TooltipTrigger>
+                      <TooltipContent align={'center'} sideOffset={5}>
+                        <div>
+                          <p>Also known as:</p>
+                          <ul className={'list-disc pl-4'}>
+                            {aliases.map((alias) => (
+                              <li key={alias}>{alias}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+
                 <p className='text-gray-500 text-sm dark:text-zinc-400'>
                   {firstGame ? (
                     <>First game: {dateFormatter.format(firstGame.gameTime)}</>