diff options
| -rw-r--r-- | src/components/ConfigurationTab.tsx | 17 | ||||
| -rw-r--r-- | src/components/GameConfigurationSelector.tsx | 15 |
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 |