From 1dcd45930c3345345dcb940d1bf0022da71c0d88 Mon Sep 17 00:00:00 2001
From: jessy-david-dev <ultralionfr@gmail.com>
Date: Wed, 15 Apr 2026 18:34:02 +0200
Subject: [PATCH] fix(lobby): optimistic toggle for search allowed, fixes
 display always showing blocked

---
 app/components/LobbyScreen.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/components/LobbyScreen.tsx b/app/components/LobbyScreen.tsx
index a25004a..a81f766 100644
--- a/app/components/LobbyScreen.tsx
+++ b/app/components/LobbyScreen.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import type { Room } from "../api/rooms/route";
 
 type LobbyScreenProps = {
@@ -47,6 +47,8 @@ export function LobbyScreen({
   const isHost = room.players.find((p) => p.id === playerId)?.isHost ?? false;
   const [copied, setCopied] = useState(false);
   const [blurred, setBlurred] = useState(true);
+  const [searchAllowed, setSearchAllowed] = useState(room.searchAllowed);
+  useEffect(() => { setSearchAllowed(room.searchAllowed); }, [room.searchAllowed]);
 
   function copyCode() {
     navigator.clipboard.writeText(room.code).then(() => {
@@ -210,14 +212,14 @@ export function LobbyScreen({
             </select>
           </div>
           <button
-            onClick={() => onSetSearchAllowed(!room.searchAllowed)}
-            className={`w-full min-h-11 rounded-xl text-sm font-semibold border transition-colors cursor-pointer flex items-center justify-between px-4 ${room.searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`}
+            onClick={() => { const next = !searchAllowed; setSearchAllowed(next); onSetSearchAllowed(next); }}
+            className={`w-full min-h-11 rounded-xl text-sm font-semibold border transition-colors cursor-pointer flex items-center justify-between px-4 ${searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`}
           >
             <span>🔍 Recherche Ctrl+F</span>
             <span
-              className={`text-xs font-bold px-2 py-0.5 rounded-full ${room.searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`}
+              className={`text-xs font-bold px-2 py-0.5 rounded-full ${searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`}
             >
-              {room.searchAllowed ? "Autorisée" : "Bloquée"}
+              {searchAllowed ? "Autorisée" : "Bloquée"}
             </span>
           </button>
         </div>
@@ -225,13 +227,13 @@ export function LobbyScreen({
 
       {!isHost && (
         <div
-          className={`w-full min-h-11 rounded-xl text-sm font-semibold border flex items-center justify-between px-4 ${room.searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`}
+          className={`w-full min-h-11 rounded-xl text-sm font-semibold border flex items-center justify-between px-4 ${searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`}
         >
           <span>🔍 Recherche Ctrl+F</span>
           <span
-            className={`text-xs font-bold px-2 py-0.5 rounded-full ${room.searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`}
+            className={`text-xs font-bold px-2 py-0.5 rounded-full ${searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`}
           >
-            {room.searchAllowed ? "Autorisée" : "Bloquée"}
+            {searchAllowed ? "Autorisée" : "Bloquée"}
           </span>
         </div>
       )}