1 files changed, 74 insertions, 66 deletions

diff --git a/src/components/ConfigurationTab.tsx b/src/components/ConfigurationTab.tsx
index 8f8690c..a6d4c2a 100644
--- a/src/components/ConfigurationTab.tsx
+++ b/src/components/ConfigurationTab.tsx
@@ -1,4 +1,4 @@
-import { ButtonItem, DialogButton, Focusable, PanelSection, PanelSectionRow, gamepadDialogClasses } from "@decky/ui";
+import { ButtonItem, ConfirmModal, DialogButton, Focusable, PanelSection, PanelSectionRow, ToggleField, gamepadDialogClasses, showModal } from "@decky/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { FaArrowLeft } from "react-icons/fa";
 import { ConfigurationData } from "../config/configSchema";
@@ -11,6 +11,8 @@ interface ConfigurationTabProps {
   config: ConfigurationData;
   targets: GameTarget[];
   runningGame: GameTarget | null;
+  showDebugTab: boolean;
+  onShowDebugTabChange: (value: boolean) => void;
   onSelect: (appid: string) => void;
   onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number | string | string[]) => Promise<void>;
   onEnable: (appid: string) => Promise<boolean>;
@@ -24,6 +26,8 @@ export function ConfigurationTab({
   config,
   targets,
   runningGame,
+  showDebugTab,
+  onShowDebugTabChange,
   onSelect,
   onConfigChange,
   onEnable,
@@ -37,7 +41,6 @@ export function ConfigurationTab({
   const [focusDetailAction, setFocusDetailAction] = useState<"enable" | "fps" | null>(null);
   const [focusConfiguredToggle, setFocusConfiguredToggle] = useState(false);
   const enableRef = useRef<HTMLDivElement>(null);
-  const promptedRunningAppId = useRef<string | null>(null);
   const closeDetails = useCallback(() => {
     setFocusFpsMultiplier(false);
     setFocusDetailAction(null);
@@ -60,58 +63,75 @@ export function ConfigurationTab({
     return () => cancelAnimationFrame(frame);
   }, [focusDetailAction]);
 
-  useEffect(() => {
-    if (!runningGame || runningGame.configured) {
-      promptedRunningAppId.current = null;
-      return;
-    }
-    if (promptedRunningAppId.current !== runningGame.appid && detailAppId === null) {
-      promptedRunningAppId.current = runningGame.appid;
-      setFocusDetailAction("enable");
-      setDetailAppId(runningGame.appid);
-    }
-  }, [detailAppId, runningGame?.appid, runningGame?.configured]);
-
   const selectedTarget = detailAppId ? targets.find((target) => target.appid === detailAppId) : null;
 
   if (detailAppId === null) {
     return (
-      <PanelSection title="Games">
-        <GameConfigurationSelector
-          targets={targets}
-          runningGame={runningGame}
-          onSelect={(appid) => {
-            setFocusConfiguredToggle(false);
-            setFocusDetailAction(targets.find((target) => target.appid === appid)?.configured ? "fps" : "enable");
-            onSelect(appid);
-            setDetailAppId(appid);
-          }}
-          onEnableAll={onEnableAll}
-          onResetAll={onResetAll}
-          focusConfiguredToggle={focusConfiguredToggle}
-          onConfiguredToggleFocused={clearConfiguredToggleFocusRequest}
-        />
-      </PanelSection>
+      <>
+        <PanelSection title="Games">
+          <GameConfigurationSelector
+            targets={targets}
+            runningGame={runningGame}
+            onSelect={(appid) => {
+              setFocusConfiguredToggle(false);
+              setFocusDetailAction(targets.find((target) => target.appid === appid)?.configured ? "fps" : "enable");
+              onSelect(appid);
+              setDetailAppId(appid);
+            }}
+            onEnableAll={onEnableAll}
+            onResetAll={onResetAll}
+            focusConfiguredToggle={focusConfiguredToggle}
+            onConfiguredToggleFocused={clearConfiguredToggleFocusRequest}
+          />
+        </PanelSection>
+        <PanelSection title="Settings">
+          <PanelSectionRow>
+            <ToggleField
+              label="Show debug tab"
+              description="Show the raw configuration and generated files tab for troubleshooting."
+              checked={showDebugTab}
+              onChange={onShowDebugTabChange}
+            />
+          </PanelSectionRow>
+        </PanelSection>
+      </>
     );
   }
 
   const profileLabel = selectedTarget?.name || "Game profile";
-  const profileTransport = selectedTarget
-    ? selectedTarget.transport.kind === "flatpak"
-      ? "Non-Steam · Flatpak"
-      : selectedTarget.nonSteam ? "Non-Steam" : "Steam"
-    : "Game";
+  const profileTransport = selectedTarget?.nonSteam ? "Non-Steam" : "Steam";
   const profileDescription = selectedTarget
     ? `${profileTransport} · App ID ${selectedTarget.appid} · ${selectedTarget.configured ? "LSFG-VK Enabled" : "LSFG-VK not enabled"}`
     : "Game is no longer available";
+  const enableProfile = async (appid: string, quitRunningGame = false) => {
+    if (!(await onEnable(appid))) return;
+    if (quitRunningGame) SteamClient.Apps.TerminateApp(appid, false);
+    setFocusFpsMultiplier(true);
+  };
   const handleProfileAction = async () => {
     if (selectedTarget?.configured) {
-      promptedRunningAppId.current = detailAppId;
       await onReset();
       setFocusConfiguredToggle(true);
       closeDetails();
-    } else if (detailAppId && await onEnable(detailAppId)) {
-      setFocusFpsMultiplier(true);
+    } else if (detailAppId) {
+      const isRunningUnconfigured = runningGame?.appid === detailAppId
+        && runningGame.nonSteam === false
+        && selectedTarget?.nonSteam === false
+        && !runningGame.configured;
+      if (isRunningUnconfigured) {
+        showModal(
+          <ConfirmModal
+            strTitle="Game is running"
+            strDescription="Quit the game now so LSFG-VK is used on its next launch?"
+            strOKButtonText="Quit and enable"
+            strCancelButtonText="Enable without quitting"
+            onOK={() => void enableProfile(detailAppId, true)}
+            onCancel={() => void enableProfile(detailAppId)}
+          />,
+        );
+      } else {
+        await enableProfile(detailAppId);
+      }
     }
   };
 
@@ -121,22 +141,22 @@ export function ConfigurationTab({
         <PanelSectionRow>
           <div style={{ display: "flex", alignItems: "center", width: "100%" }}>
             <Focusable noFocusRing style={{ flex: "none" }}>
-            <DialogButton
-              aria-label="Back to games"
-              onClick={closeDetails}
-              style={{
-                width: "48px",
-                minWidth: "48px",
-                height: "24px",
-                minHeight: "24px",
-                padding: 0,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <FaArrowLeft />
-            </DialogButton>
+              <DialogButton
+                aria-label="Back to games"
+                onClick={closeDetails}
+                style={{
+                  width: "48px",
+                  minWidth: "48px",
+                  height: "24px",
+                  minHeight: "24px",
+                  padding: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <FaArrowLeft />
+              </DialogButton>
             </Focusable>
             <div
               className={gamepadDialogClasses.FieldLabel}
@@ -156,18 +176,6 @@ export function ConfigurationTab({
           </PanelSectionRow>
         )}
       </PanelSection>
-      {selectedTarget?.configured && selectedTarget.transport.kind === "flatpak" && selectedTarget.flatpakSupport?.support_status !== "ready" && (
-        <PanelSection>
-          <PanelSectionRow>
-            <ButtonItem
-              layout="below"
-              onClick={() => void onRepair(selectedTarget.appid)}
-            >
-              Repair Flatpak support
-            </ButtonItem>
-          </PanelSectionRow>
-        </PanelSection>
-      )}
       {selectedTarget?.configured && (
         <GameConfigurationControls
           config={config}