some more styling to the frontend

discord_verificiation/playtime-frontend/components/MapPopulationChart.tsx

@@ -17,6 +17,7 @@ interface PlayerChip {
   steamid: string;
   name: string;
   avatarUrl: string;
+  country?: string | null;
 }
 
 const HEIGHT = 288;

discord_verificiation/playtime-frontend/components/PlayerChipList.tsx

@@ -1,11 +1,13 @@
 'use client';
 
 import Link from 'next/link';
+import { countryCodeToFlag } from '@/lib/steam';
 
 interface PlayerChip {
   steamid: string;
   name: string;
   avatarUrl: string;
+  country?: string | null;
 }
 
 export default function PlayerChipList({
@@ -33,6 +35,11 @@ export default function PlayerChipList({
         >
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img src={p.avatarUrl} alt="" className="w-6 h-6 rounded-full object-cover ring-1 ring-base-border" />
+          {p.country !== undefined && (
+            <span className="text-xs" aria-hidden>
+              {countryCodeToFlag(p.country)}
+            </span>
+          )}
           <span className="text-sm text-ink">{p.name}</span>
         </Link>
       ))}

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>

discord_verificiation/playtime-frontend/components/PlayerTimelineChart.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { formatMinutes } from '@/lib/steam';
+import { formatMinutes, countryCodeToFlag } from '@/lib/steam';
 
 interface Segment {
   startMin: number;
@@ -12,6 +12,7 @@ interface TimelinePlayer {
   steamid: string;
   name: string;
   avatarUrl: string;
+  country?: string | null;
   totalMinutes: number;
   segments: Segment[];
 }
@@ -53,6 +54,11 @@ export default function PlayerTimelineChart({
             >
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src={p.avatarUrl} alt="" className="w-6 h-6 rounded-full object-cover ring-1 ring-base-border shrink-0" />
+              {p.country !== undefined && (
+                <span className="text-xs shrink-0" aria-hidden>
+                  {countryCodeToFlag(p.country)}
+                </span>
+              )}
               <span className="text-sm text-ink truncate">{p.name}</span>
             </Link>
 

discord_verificiation/playtime-frontend/components/PopulationChart.tsx

@@ -21,6 +21,7 @@ interface PlayerChip {
   steamid: string;
   name: string;
   avatarUrl: string;
+  country?: string | null;
 }
 
 const HEIGHT = 320;