1 files changed, 32 insertions, 2 deletions
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index 578f984..43720c0 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -17,6 +17,29 @@ const tabIcons = {
   setup: <FaTools size={18} />,
 };
 
+const DEBUG_TAB_VISIBILITY_KEY = "lsfg-debug-tab-visible-v1";
+
+function usePersistentBoolean(key: string, defaultValue: boolean) {
+  const [value, setValue] = useState(() => {
+    try {
+      const stored = localStorage.getItem(key);
+      return stored === null ? defaultValue : stored === "true";
+    } catch {
+      return defaultValue;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(key, String(value));
+    } catch {
+      // Persisting the visibility preference is optional.
+    }
+  }, [key, value]);
+
+  return [value, setValue] as const;
+}
+
 export function Content() {
   const {
     config,
@@ -43,6 +66,7 @@ export function Content() {
     uninstall,
   } = useInstallation(reload);
   const [tab, setTab] = useState("Setup");
+  const [showDebugTab, setShowDebugTab] = usePersistentBoolean(DEBUG_TAB_VISIBILITY_KEY, true);
   const previousRunningAppId = useRef<string | null>(null);
   const setupComplete =
     isInstalled &&
@@ -74,6 +98,10 @@ export function Content() {
     if (isInstalled) void reload();
   }, [isInstalled, reload]);
 
+  useEffect(() => {
+    if (!showDebugTab && tab === "ConfigFile") setTab("Games");
+  }, [showDebugTab, tab]);
+
   const handleConfigChange = async (
     fieldName: keyof ConfigurationData,
     value: boolean | number | string | string[],
@@ -116,6 +144,8 @@ export function Content() {
               config={config}
               targets={targets}
               runningGame={runningGame}
+              showDebugTab={showDebugTab}
+              onShowDebugTabChange={setShowDebugTab}
               onSelect={setSelectedAppId}
               onConfigChange={(field, value) => handleConfigChange(field, value, true)}
               onEnable={enable}
@@ -126,7 +156,7 @@ export function Content() {
             />
           ),
         },
-        { id: "ConfigFile", title: tabIcons.configFile, content: <ConfigFileTab /> },
+        ...(showDebugTab ? [{ id: "ConfigFile", title: tabIcons.configFile, content: <ConfigFileTab /> }] : []),
         { id: "Setup", title: tabIcons.setup, content: setup },
       ]
     : [{ id: "Setup", title: tabIcons.setup, content: setup }];
@@ -137,7 +167,7 @@ export function Content() {
       style={{ height: "95%", width: "300px", position: "fixed", marginTop: "-12px", overflow: "hidden" }}
     >
       <style>{tabStyles}</style>
-      <Tabs activeTab={tab} onShowTab={setTab} tabs={tabs} />
+      <Tabs activeTab={!showDebugTab && tab === "ConfigFile" ? "Games" : tab} onShowTab={setTab} tabs={tabs} />
     </div>
   );
 }