some more styling to the frontend

discord_verificiation/playtime-frontend/components/PlayerSearch.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { countryCodeToFlag, formatMinutes } from '@/lib/steam';
+import { formatRelativeTime } from '@/lib/dates';
 
 interface Player {
   steamid: string;
@@ -10,6 +11,8 @@ interface Player {
   current_country: string | null;
   matched_name: string | null;
   total_minutes: number | null;
+  last_connected: string | null;
+  avatarUrl: string;
 }
 
 export default function PlayerSearch() {
@@ -65,9 +68,13 @@ export default function PlayerSearch() {
               className="flex items-center justify-between px-4 py-3 hover:bg-base transition-colors"
             >
               <div className="flex items-center gap-3">
-                <span className="text-lg" aria-hidden>
-                  {countryCodeToFlag(p.current_country)}
-                </span>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={p.avatarUrl}
+                  alt=""
+                  className="w-9 h-9 rounded-full object-cover ring-1 ring-base-border shrink-0"
+                />
+                <span aria-hidden>{countryCodeToFlag(p.current_country)}</span>
                 <div>
                   <div className="text-ink text-sm">{p.current_name}</div>
                   {p.matched_name && p.matched_name !== p.current_name && (
@@ -76,7 +83,12 @@ export default function PlayerSearch() {
                 </div>
               </div>
               <div className="flex items-center gap-4">
-                <span className="mono text-ink-faint text-xs">{formatMinutes(p.total_minutes)}</span>
+                <span className="mono text-ink-faint text-xs w-16 text-right">
+                  {formatRelativeTime(p.last_connected)}
+                </span>
+                <span className="mono text-ink-faint text-xs w-20 text-right">
+                  {formatMinutes(p.total_minutes)}
+                </span>
                 <span className="mono text-ink-faint">{p.steamid}</span>
               </div>
             </Link>