fix: improve profile management focus and reset confirmation

2 files changed, 29 insertions, 3 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 && (
diff --git a/src/components/GameConfigurationSelector.tsx b/src/components/GameConfigurationSelector.tsx
index 982fcef..91fdc39 100644
--- a/src/components/GameConfigurationSelector.tsx
+++ b/src/components/GameConfigurationSelector.tsx
@@ -1,4 +1,4 @@
-import { ButtonItem, Field, PanelSectionRow } from "@decky/ui";
+import { ButtonItem, ConfirmModal, Field, PanelSectionRow, showModal } from "@decky/ui";
 import { useEffect, useState } from "react";
 import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
 import { GameTarget } from "../hooks/useGameConfiguration";
@@ -83,6 +83,17 @@ export function GameConfigurationSelector({ targets, runningGame, onSelect, onRe
   const availableGames = sortGames(targets.filter((game) => !game.configured));
   const [configuredCollapsed, toggleConfigured] = usePersistentCollapsed(CONFIGURED_COLLAPSED_KEY);
   const [availableCollapsed, toggleAvailable] = usePersistentCollapsed(AVAILABLE_COLLAPSED_KEY);
+  const confirmResetAll = () => {
+    showModal(
+      <ConfirmModal
+        strTitle="Remove all profiles?"
+        strOKButtonText="Remove all"
+        strCancelButtonText="Cancel"
+        onOK={() => void onResetAll()}
+        onCancel={() => {}}
+      />,
+    );
+  };
 
   return (
     <>
@@ -108,7 +119,7 @@ export function GameConfigurationSelector({ targets, runningGame, onSelect, onRe
       <PanelSectionRow>
         <ButtonItem
           layout="below"
-          onClick={() => void onResetAll()}
+          onClick={confirmResetAll}
           disabled={!targets.some((target) => target.configured)}
         >
           Remove all profiles