From 5db88b25cb7b7370a12b2ae290893a012a5c2c5a Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Wed, 29 Apr 2026 12:44:02 +0800
Subject: [PATCH] fix: add syncCompleted reset, Escape key handler, and a11y
 attributes to sync overlay

---
 app/(manage)/manage/games/games-client.tsx | 25 ++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/(manage)/manage/games/games-client.tsx b/app/(manage)/manage/games/games-client.tsx
index 639cb0f..5532d9d 100644
--- a/app/(manage)/manage/games/games-client.tsx
+++ b/app/(manage)/manage/games/games-client.tsx
@@ -102,6 +102,7 @@ export function GamesClient() {
     }
 
     setSyncing(true)
+    setSyncCompleted(false)
     setSyncProgress({
       isRunning: true,
       current: 0,
@@ -208,6 +209,7 @@ export function GamesClient() {
         return
       }
 
+      setSyncCompleted(false)
       setSyncProgress({
         isRunning: true,
         current: 0,
@@ -302,6 +304,16 @@ export function GamesClient() {
     })
   }
 
+  // Close sync overlay on Escape key
+  useEffect(() => {
+    if (!syncCompleted) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeSyncOverlay()
+    }
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [syncCompleted])
+
   const isSearchChangeRef = useRef(false)
 
   const handleSearchChange = (value: string) => {
@@ -595,7 +607,12 @@ export function GamesClient() {
       {(syncProgress.isRunning || syncCompleted) &&
         createPortal(
           <div className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center">
-            <div className="w-full max-w-md mx-4 p-6 bg-background border border-border rounded-2xl shadow-2xl max-h-[90vh] overflow-y-auto">
+            <div
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="sync-overlay-title"
+              className="w-full max-w-md mx-4 p-6 bg-background border border-border rounded-2xl shadow-2xl max-h-[90vh] overflow-y-auto"
+            >
               {syncProgress.isRunning ? (
                 <>
                   <div className="flex items-center gap-3 mb-4">
@@ -606,7 +623,7 @@ export function GamesClient() {
                       </div>
                     </div>
                     <div>
-                      <h3 className="font-semibold text-text">Syncing Games</h3>
+                      <h3 id="sync-overlay-title" className="font-semibold text-text">Syncing Games</h3>
                       <p className="text-sm text-text/50">
                         {syncProgress.current} of {syncProgress.total} games
                       </p>
@@ -642,7 +659,7 @@ export function GamesClient() {
                     <div className="flex items-center gap-3">
                       <CheckCircle2Icon className="h-8 w-8 text-green-400" />
                       <div>
-                        <h3 className="font-semibold text-text">Sync Complete</h3>
+                        <h3 id="sync-overlay-title" className="font-semibold text-text">Sync Complete</h3>
                         <p className="text-sm text-text/50">
                           {syncProgress.synced} synced, {syncProgress.failed} failed
                         </p>
@@ -698,7 +715,7 @@ export function GamesClient() {
                           {game?.title || gameId}
                         </span>
                         {!result.success && result.error && (
-                          <span className="text-xs text-red-400/70 ml-auto shrink-0">
+                          <span className="text-xs text-red-400/70 ml-auto shrink-0 truncate max-w-[150px]" title={result.error}>
                             {result.error}
                           </span>
                         )}