From 47e5c2854ec5f95722a18aef09333dffb17aba62 Mon Sep 17 00:00:00 2001
From: AyoubBenziza <ayoub.cbenziza@gmail.com>
Date: Thu, 11 Jun 2026 18:17:47 +0200
Subject: [PATCH] fix(web): center end-screen recap + shadcn tooltips

- results page: when there are no tracks (quiz-only game), the recap was sitting
  in the left column of a 2-col grid; now a single section is centered (2 columns
  only when both tracks and recap exist)
- add a shadcn Tooltip component (@workspace/ui, via radix-ui) and replace native
  browser title= tooltips: connection dot, back-office active toggle, and the
  locked blindtest tiles (now aria-disabled so the tooltip still triggers)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/game-end-view.tsx | 24 +++++----
 apps/web/src/components/lobby-view.tsx    | 47 ++++++++++++++----
 apps/web/src/pages/admin.tsx              | 21 +++++---
 apps/web/src/pages/room.tsx               | 19 ++++++--
 packages/ui/src/components/tooltip.tsx    | 59 +++++++++++++++++++++++
 5 files changed, 139 insertions(+), 31 deletions(-)
 create mode 100644 packages/ui/src/components/tooltip.tsx

diff --git a/apps/web/src/components/game-end-view.tsx b/apps/web/src/components/game-end-view.tsx
index ce64d4d..cb18a90 100644
--- a/apps/web/src/components/game-end-view.tsx
+++ b/apps/web/src/components/game-end-view.tsx
@@ -178,6 +178,8 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
 
   const [first, second, third] = ranked
   const rest = ranked.slice(3)
+  const hasTracks = !!gameTracks && gameTracks.length > 0
+  const hasRecap = !!gameRecap && gameRecap.length > 0
 
   return (
     <div className="flex w-full flex-col items-center gap-6">
@@ -256,15 +258,19 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
       )}
       </div>
 
-      {/* Détails (musiques + récap) côte à côte sur desktop. */}
-      {((gameTracks && gameTracks.length > 0) ||
-        (gameRecap && gameRecap.length > 0)) && (
-        <div className="grid w-full gap-6 md:grid-cols-2 md:items-start">
-          {gameTracks && gameTracks.length > 0 && (
-            <TracksRecap tracks={gameTracks} />
-          )}
-          {gameRecap && gameRecap.length > 0 && (
-            <RoundsRecap recap={gameRecap} nameOf={nameOf} playerId={playerId} />
+      {/* Détails : musiques + récap côte à côte sur desktop s'il y a les deux,
+          sinon une seule colonne centrée (sinon le récap se calait à gauche). */}
+      {(hasTracks || hasRecap) && (
+        <div
+          className={
+            hasTracks && hasRecap
+              ? "grid w-full gap-6 md:grid-cols-2 md:items-start"
+              : "flex w-full max-w-xl flex-col gap-6"
+          }
+        >
+          {hasTracks && <TracksRecap tracks={gameTracks!} />}
+          {hasRecap && (
+            <RoundsRecap recap={gameRecap!} nameOf={nameOf} playerId={playerId} />
           )}
         </div>
       )}
diff --git a/apps/web/src/components/lobby-view.tsx b/apps/web/src/components/lobby-view.tsx
index 9b42c82..c04740f 100644
--- a/apps/web/src/components/lobby-view.tsx
+++ b/apps/web/src/components/lobby-view.tsx
@@ -31,9 +31,16 @@ const MIX_LABELS: Record<MixMode, string> = {
   blindtest: "Blindtest",
 }
 import { Button } from "@workspace/ui/components/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@workspace/ui/components/tooltip"
 import { useRoomStore } from "@/store/room"
 import { Avatar } from "@/components/avatar"
 
+const BLINDTEST_LOCK_HINT = "3 joueurs dont 2 réels (un bot ne peut pas être DJ)"
+
 const MAX_TRACKS = 10
 const GAME_TYPES: {
   value: GameType
@@ -309,13 +316,15 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
               {GAME_TYPES.map(({ value, label, Icon, needsThree }) => {
                 const locked = needsThree && !blindtestAvailable
                 const active = effectiveType === value
-                return (
+                const tile = (
                   <button
                     key={value}
-                    disabled={locked}
-                    title={locked ? "3 joueurs dont 2 réels" : undefined}
-                    onClick={() => updateSettings({ gameType: value })}
-                    className={`flex flex-col items-center gap-1.5 rounded-lg border p-2.5 text-xs font-medium transition-colors disabled:opacity-40 ${
+                    aria-disabled={locked}
+                    onClick={() => {
+                      if (locked) return
+                      updateSettings({ gameType: value })
+                    }}
+                    className={`flex flex-col items-center gap-1.5 rounded-lg border p-2.5 text-xs font-medium transition-colors aria-disabled:cursor-not-allowed aria-disabled:opacity-40 ${
                       active
                         ? "border-primary bg-primary/10"
                         : "border-input hover:bg-muted/60"
@@ -325,6 +334,14 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
                     {label}
                   </button>
                 )
+                return locked ? (
+                  <Tooltip key={value}>
+                    <TooltipTrigger asChild>{tile}</TooltipTrigger>
+                    <TooltipContent>{BLINDTEST_LOCK_HINT}</TooltipContent>
+                  </Tooltip>
+                ) : (
+                  tile
+                )
               })}
             </div>
             {!blindtestAvailable && (
@@ -343,13 +360,15 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
                 {(["quiz", "image", "blindtest"] as const).map((m) => {
                   const locked = m === "blindtest" && !blindtestAvailable
                   const on = mixedModes.includes(m) && !locked
-                  return (
+                  const tile = (
                     <button
                       key={m}
-                      disabled={locked}
-                      title={locked ? "3 joueurs dont 2 réels" : undefined}
-                      onClick={() => toggleMix(m)}
-                      className={`flex-1 rounded-lg border px-2 py-1.5 text-xs font-medium transition-colors disabled:opacity-40 ${
+                      aria-disabled={locked}
+                      onClick={() => {
+                        if (locked) return
+                        toggleMix(m)
+                      }}
+                      className={`flex-1 rounded-lg border px-2 py-1.5 text-xs font-medium transition-colors aria-disabled:cursor-not-allowed aria-disabled:opacity-40 ${
                         on
                           ? "border-primary bg-primary/10"
                           : "border-input hover:bg-muted/60"
@@ -358,6 +377,14 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
                       {MIX_LABELS[m]}
                     </button>
                   )
+                  return locked ? (
+                    <Tooltip key={m}>
+                      <TooltipTrigger asChild>{tile}</TooltipTrigger>
+                      <TooltipContent>{BLINDTEST_LOCK_HINT}</TooltipContent>
+                    </Tooltip>
+                  ) : (
+                    tile
+                  )
                 })}
               </div>
             </div>
diff --git a/apps/web/src/pages/admin.tsx b/apps/web/src/pages/admin.tsx
index 6e19c64..8550948 100644
--- a/apps/web/src/pages/admin.tsx
+++ b/apps/web/src/pages/admin.tsx
@@ -4,6 +4,11 @@ import { Link } from "wouter"
 import { Eye, EyeOff, Trash2, Upload } from "lucide-react"
 import type { QuizFormat } from "@nerdware/shared"
 import { Button } from "@workspace/ui/components/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@workspace/ui/components/tooltip"
 import {
   adminApi,
   assetUrl,
@@ -187,14 +192,14 @@ function QuestionRow({
           </p>
         )}
       </div>
-      <Button
-        size="icon-sm"
-        variant="secondary"
-        onClick={onToggle}
-        title={q.active ? "Désactiver" : "Activer"}
-      >
-        {q.active ? <Eye /> : <EyeOff />}
-      </Button>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button size="icon-sm" variant="secondary" onClick={onToggle}>
+            {q.active ? <Eye /> : <EyeOff />}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{q.active ? "Désactiver" : "Activer"}</TooltipContent>
+      </Tooltip>
       <Button
         size="icon-sm"
         variant="secondary"
diff --git a/apps/web/src/pages/room.tsx b/apps/web/src/pages/room.tsx
index 12e82a4..4f46d49 100644
--- a/apps/web/src/pages/room.tsx
+++ b/apps/web/src/pages/room.tsx
@@ -2,6 +2,11 @@ import { Link, useLocation } from "wouter"
 import { AnimatePresence, motion } from "framer-motion"
 import { LogOut } from "lucide-react"
 import { Button } from "@workspace/ui/components/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@workspace/ui/components/tooltip"
 import { useRoomStore } from "@/store/room"
 import { LobbyView } from "@/components/lobby-view"
 import { QuizView } from "@/components/quiz-view"
@@ -84,10 +89,16 @@ export function RoomPage({ code }: { code: string }) {
         <header className="flex items-center justify-between">
           <RoomCode code={snapshot.code} />
           <div className="flex items-center gap-3">
-            <span
-              className={`size-2.5 rounded-full ${connected ? "bg-green-500" : "bg-red-500"}`}
-              title={connected ? "Connecté" : "Déconnecté"}
-            />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  className={`size-2.5 rounded-full ${connected ? "bg-green-500" : "bg-red-500"}`}
+                />
+              </TooltipTrigger>
+              <TooltipContent>
+                {connected ? "Connecté" : "Déconnecté"}
+              </TooltipContent>
+            </Tooltip>
             <Button
               size="sm"
               variant="secondary"
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
new file mode 100644
index 0000000..d2577cd
--- /dev/null
+++ b/packages/ui/src/components/tooltip.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@workspace/ui/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }