From 9f91856c534bc3e5b4c44fe5cf319d89c2777b7f Mon Sep 17 00:00:00 2001
From: Valentin ROBIN <valentin_rbn@Valentins-MacBook-Pro-2.local>
Date: Tue, 25 Aug 2026 17:02:14 +0200
Subject: [PATCH] =?UTF-8?q?Am=C3=A9liore=20la=20lisibilit=C3=A9=20de=20la?=
 =?UTF-8?q?=20D=C3=A9tection=20de=20triche=20sur=20/admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajoute l'avatar du joueur signalé (admin_list_members() le renvoyait déjà, juste jamais propagé), l'heure de début/fin de la partie (déduite de created_at et de la durée annoncée), et remplace la ligne de détails en flex-wrap par une grille à étiquettes qui reste lisible sur mobile.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app/admin/admin-cheat-flags.tsx | 71 +++++++++++++++++++++--------
 src/app/admin/page.tsx              |  5 +-
 2 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/src/app/admin/admin-cheat-flags.tsx b/src/app/admin/admin-cheat-flags.tsx
index 702f510..6e3e979 100644
--- a/src/app/admin/admin-cheat-flags.tsx
+++ b/src/app/admin/admin-cheat-flags.tsx
@@ -1,11 +1,13 @@
 "use client";
 
 import { useMemo, useState } from "react";
+import { Avatar } from "@/components/avatar";
 
 type CheatFlag = {
   id: number;
   user_id: string;
   pseudo: string;
+  avatar_url: string | null;
   game: "icarus" | "melon";
   score: number;
   severity: "warning" | "high";
@@ -25,6 +27,16 @@ const GAME_LABELS: Record<CheatFlag["game"], string> = {
   melon: "Corne d'Abondance",
 };
 
+const TIME_FORMATTER = new Intl.DateTimeFormat("fr-FR", {
+  timeZone: "Europe/Paris",
+  timeStyle: "medium",
+});
+
+const DATE_FORMATTER = new Intl.DateTimeFormat("fr-FR", {
+  timeZone: "Europe/Paris",
+  dateStyle: "short",
+});
+
 function formatDuration(durationMs: number | null | undefined): string | null {
   if (durationMs == null || !Number.isFinite(durationMs)) return null;
   if (durationMs < 1000) return `${Math.round(durationMs)} ms`;
@@ -35,19 +47,35 @@ function formatDuration(durationMs: number | null | undefined): string | null {
   return `${minutes} min ${remainingSeconds.toString().padStart(2, "0")} s`;
 }
 
+function DetailCell({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <dt className="text-[0.65rem] tracking-wide text-text-mut uppercase">{label}</dt>
+      <dd className="text-text-marble">{value}</dd>
+    </div>
+  );
+}
+
 function FlagRow({ flag }: { flag: CheatFlag }) {
   const duration = formatDuration(flag.details?.duration_ms);
-  const happenedAt = new Intl.DateTimeFormat("fr-FR", {
-    timeZone: "Europe/Paris",
-    dateStyle: "short",
-    timeStyle: "medium",
-  }).format(new Date(flag.created_at));
+  // Le signalement est écrit au moment de la soumission du score, donc
+  // quasi simultané à la fin réelle de la partie (délai réseau négligeable)
+  // — sert directement de proxy pour "heure de fin". "Début" s'en déduit en
+  // retranchant la durée annoncée, seulement quand elle est connue (jamais
+  // le cas pour missing_run_telemetry, où aucune télémétrie n'a été reçue).
+  const endedAt = new Date(flag.created_at);
+  const startedAt =
+    flag.details?.duration_ms != null && Number.isFinite(flag.details.duration_ms)
+      ? new Date(endedAt.getTime() - flag.details.duration_ms)
+      : null;
 
   return (
-    <li className="marble-surface rounded-lg border border-gold/25 px-4 py-3 shadow-sm">
-      <div className="flex flex-wrap items-start justify-between gap-2">
-        <div>
-          <div className="flex flex-wrap items-center gap-2">
+    <li className="marble-surface rounded-lg border border-gold/25 p-3 shadow-sm sm:p-4">
+      <div className="flex items-start gap-3">
+        <Avatar pseudo={flag.pseudo} avatarUrl={flag.avatar_url} size="sm" />
+
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-1.5">
             <span
               className={
                 flag.severity === "high"
@@ -57,24 +85,29 @@ function FlagRow({ flag }: { flag: CheatFlag }) {
             >
               {flag.severity === "high" ? "Fort" : "À vérifier"}
             </span>
-            <span className="font-heading text-sm text-text-marble">{flag.pseudo}</span>
+            <span className="truncate font-heading text-sm text-text-marble">{flag.pseudo}</span>
             <span className="text-xs text-text-mut">· {GAME_LABELS[flag.game]}</span>
           </div>
           <p className="mt-1 text-sm text-text-marble">{flag.reason}</p>
         </div>
 
-        <div className="text-right">
-          <p className="font-heading text-lg text-sea">{flag.score}</p>
-          <p className="text-[0.7rem] text-text-mut">{happenedAt}</p>
-        </div>
+        <p className="shrink-0 font-heading text-lg text-sea">{flag.score}</p>
       </div>
 
-      <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-text-mut">
-        {duration && <span>durée : {duration}</span>}
-        {flag.details?.actions != null && <span>actions : {flag.details.actions}</span>}
-        {flag.details?.merges != null && <span>fusions : {flag.details.merges}</span>}
-        {flag.details?.previous_best != null && <span>ancien record : {flag.details.previous_best}</span>}
+      <dl className="mt-3 grid grid-cols-2 gap-x-3 gap-y-2 border-t border-gold/15 pt-3 text-xs sm:grid-cols-4">
+        <DetailCell label="Début" value={startedAt ? TIME_FORMATTER.format(startedAt) : "—"} />
+        <DetailCell label="Fin" value={TIME_FORMATTER.format(endedAt)} />
+        <DetailCell label="Durée" value={duration ?? "—"} />
+        {flag.details?.actions != null && <DetailCell label="Actions" value={String(flag.details.actions)} />}
+        {flag.details?.merges != null && <DetailCell label="Fusions" value={String(flag.details.merges)} />}
+        {flag.details?.previous_best != null && (
+          <DetailCell label="Ancien record" value={String(flag.details.previous_best)} />
+        )}
+      </dl>
+
+      <div className="mt-2 flex items-center justify-between text-[0.7rem] text-text-mut">
         <span className="font-mono opacity-60">{flag.trigger_code}</span>
+        <span>{DATE_FORMATTER.format(endedAt)}</span>
       </div>
     </li>
   );
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index f82fcc5..bdc9122 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -63,10 +63,11 @@ export default async function AdminPage() {
 
   const memberRows = (members ?? []) as AdminMember[];
   const flagRows = (cheatFlags ?? []) as CheatFlagRow[];
-  const pseudoById = new Map(memberRows.map((member) => [member.id, member.pseudo]));
+  const memberById = new Map(memberRows.map((member) => [member.id, member]));
   const flagsWithPseudo = flagRows.map((flag) => ({
     ...flag,
-    pseudo: pseudoById.get(flag.user_id) ?? "Un Citoyen",
+    pseudo: memberById.get(flag.user_id)?.pseudo ?? "Un Citoyen",
+    avatar_url: memberById.get(flag.user_id)?.avatar_url ?? null,
   }));
 
   return (