Frontend: pridavanie botov v lobby

Hostitel prida na volne sedadlo bota (+ Bot = heuristika, + AI bot =
natrenovana siet) alebo bota odoberie; boti maju vlastnu ikonu a flag
is_bot v rosteroch. Surove ucty bot:<kind>-<n> sa vsade zobrazuju cez
displayName ako "Bot 2" / "AI bot 1" (stol, kopka, tabulky, historia).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/pages/GameTable.tsx

@@ -5,6 +5,7 @@ import { emit } from '../lib/socket';
 import { leaveGame } from '../lib/leaveGame';
 import { computePlayable, stashWinner } from '../lib/gameRules';
 import { computeTotal } from '../lib/standings';
+import { displayName } from '../lib/names';
 import { useIsDesktop } from '../lib/useIsDesktop';
 import { useFitScale } from '../lib/useFitScale';
 import Hand from '../components/Hand';
@@ -123,7 +124,7 @@ export default function GameTable() {
     ? computePlayable(hand, active_stash.cards[String(active_stash.first_player)]?.color ?? null)
     : undefined;
 
-  const activePlayerName = players.find((p) => p.order === active_player)?.name ?? '';
+  const activePlayerName = displayName(players.find((p) => p.order === active_player)?.name);
 
   // Seat mapping relative to "Ty": left / across / right.
   const seat = (offset: number): PlayerInfo | undefined =>
@@ -183,7 +184,7 @@ export default function GameTable() {
       {opponents.map((p) => (
         <div key={p.order} className="text-center">
           <div className="uppercase tracking-[.1em] text-green-dim mb-0.5" style={{ fontSize: 11 }}>
-            {p.name}
+            {displayName(p.name)}
           </div>
           <div className="font-serif text-green-score leading-none" style={{ fontSize: compact ? 16 : 20 }}>
             {computeTotal(standings, p.order)}
@@ -224,14 +225,14 @@ export default function GameTable() {
 
   const topSeat = (
     <div className="flex flex-col items-center gap-1.5">
-      <PlayerCircle name={topP?.name ?? '—'} {...seatProps(topP?.order)} size={desktop ? 64 : 52} />
+      <PlayerCircle name={displayName(topP?.name) || '—'} {...seatProps(topP?.order)} size={desktop ? 64 : 52} />
       <FaceDownCards count={cardsInHandOf(topP?.order)} direction="row" desktop={desktop} />
     </div>
   );
 
   const sideSeat = (p?: PlayerInfo) => (
     <div className="flex flex-col items-center gap-1.5">
-      <PlayerCircle name={p?.name ?? '—'} {...seatProps(p?.order)} size={desktop ? 60 : 48} />
+      <PlayerCircle name={displayName(p?.name) || '—'} {...seatProps(p?.order)} size={desktop ? 60 : 48} />
       <FaceDownCards count={cardsInHandOf(p?.order)} direction="col" desktop={desktop} />
     </div>
   );