fix: improve profile management focus and reset confirmation

1 files changed, 16 insertions, 1 deletions

diff --git a/src/components/ConfigurationTab.tsx b/src/components/ConfigurationTab.tsx
index 6c4a99a..0d8553c 100644
--- a/src/components/ConfigurationTab.tsx
+++ b/src/components/ConfigurationTab.tsx
@@ -28,14 +28,26 @@ export function ConfigurationTab({
 }: ConfigurationTabProps) {
   const [detailAppId, setDetailAppId] = useState<string | null>(null);
   const [focusFpsMultiplier, setFocusFpsMultiplier] = useState(false);
+  const [focusBackToGames, setFocusBackToGames] = useState(false);
+  const backToGamesRef = useRef<HTMLDivElement>(null);
   const promptedRunningAppId = useRef<string | null>(null);
   const closeDetails = useCallback(() => {
     setFocusFpsMultiplier(false);
+    setFocusBackToGames(false);
     setDetailAppId(null);
   }, []);
   const clearFpsFocusRequest = useCallback(() => setFocusFpsMultiplier(false), []);
 
   useEffect(() => {
+    if (!focusBackToGames) return;
+    const frame = requestAnimationFrame(() => {
+      backToGamesRef.current?.querySelector<HTMLElement>('[role="button"]')?.focus();
+      setFocusBackToGames(false);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [focusBackToGames]);
+
+  useEffect(() => {
     if (!runningGame || runningGame.configured) {
       promptedRunningAppId.current = null;
       return;
@@ -55,6 +67,7 @@ export function ConfigurationTab({
           targets={targets}
           runningGame={runningGame}
           onSelect={(appid) => {
+            setFocusBackToGames(true);
             onSelect(appid);
             setDetailAppId(appid);
           }}
@@ -76,7 +89,9 @@ export function ConfigurationTab({
           <Field label={profileLabel} description={profileDescription} />
         </PanelSectionRow>
         <PanelSectionRow>
-          <ButtonItem layout="below" onClick={closeDetails}>Back to games</ButtonItem>
+          <Focusable ref={backToGamesRef} noFocusRing>
+            <ButtonItem layout="below" onClick={closeDetails}>Back to games</ButtonItem>
+          </Focusable>
         </PanelSectionRow>
       </PanelSection>
       {selectedTarget?.configured && (