1 files changed, 95 insertions, 28 deletions

diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index 578f984..ce3c018 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -1,29 +1,56 @@
 import { Tabs } from "@decky/ui";
 import { useEffect, useRef, useState } from "react";
-import { FaFileAlt, FaGamepad, FaList, FaTools } from "react-icons/fa";
+import { FaCube, FaFileAlt, FaGamepad, FaList, FaTools } from "react-icons/fa";
 import { ConfigurationData } from "../config/configSchema";
+import { useFlatpakConfiguration } from "../hooks/useFlatpakConfiguration";
 import { useGameConfiguration } from "../hooks/useGameConfiguration";
 import { useInstallation } from "../hooks/useLsfgHooks";
 import { tabStyles } from "../styles";
 import { ConfigFileTab } from "./ConfigFileTab";
 import { ConfigurationTab } from "./ConfigurationTab";
+import { FlatpakNowPlayingTab } from "./FlatpakNowPlayingTab";
+import { FlatpakTab } from "./FlatpakTab";
 import { NowPlayingTab } from "./NowPlayingTab";
 import { SetupTab } from "./SetupTab";
 
 const tabIcons = {
   nowPlaying: <FaGamepad size={18} />,
   games: <FaList size={18} />,
+  flatpak: <FaCube size={18} />,
   configFile: <FaFileAlt size={18} />,
   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 {}
+  }, [key, value]);
+
+  return [value, setValue] as const;
+}
+
 export function Content() {
   const {
     config,
+    runningConfig,
     targets,
     runningGame,
     setSelectedAppId,
     save,
+    saveFor,
     enable,
     enableAll,
     repair,
@@ -42,43 +69,58 @@ export function Content() {
     install,
     uninstall,
   } = useInstallation(reload);
-  const [tab, setTab] = useState("Setup");
-  const previousRunningAppId = useRef<string | null>(null);
   const setupComplete =
     isInstalled &&
     losslessScalingInstalled &&
     steamBranchStatus?.success === true &&
     steamBranchStatus.installed &&
     !steamBranchStatus.needs_switch;
+  const flatpak = useFlatpakConfiguration(setupComplete);
+  const [tab, setTab] = useState("Setup");
+  const [showDebugTab, setShowDebugTab] = usePersistentBoolean(DEBUG_TAB_VISIBILITY_KEY, true);
+  const previousRunningWorkload = useRef<string | null>(null);
+  const runningFlatpak = flatpak.runningApp;
+  const hasNowPlaying = Boolean(runningGame?.configured || runningFlatpak);
+  const runningWorkload = runningGame?.configured
+    ? `steam:${runningGame.appid}`
+    : runningFlatpak ? `flatpak:${runningFlatpak.app_id}` : null;
 
   useEffect(() => {
     if (!setupComplete) {
       setTab("Setup");
       return;
     }
-    setTab((current) => current === "Setup" ? (runningGame?.configured ? "NowPlaying" : "Games") : current);
-  }, [runningGame?.appid, runningGame?.configured, setupComplete]);
+    setTab((current) => current === "Setup" ? (hasNowPlaying ? "NowPlaying" : "Games") : current);
+  }, [hasNowPlaying, setupComplete]);
 
   useEffect(() => {
     if (!setupComplete) return;
-    const appid = runningGame?.appid || null;
-    const previous = previousRunningAppId.current;
-    previousRunningAppId.current = appid;
-    if (appid && appid !== previous) setTab(runningGame?.configured ? "NowPlaying" : "Games");
-    else if (!appid && previous) {
+    const previous = previousRunningWorkload.current;
+    previousRunningWorkload.current = runningWorkload;
+    if (runningWorkload && runningWorkload !== previous) setTab("NowPlaying");
+    else if (!runningWorkload && previous) {
       setTab((current) => current === "NowPlaying" ? "Games" : current);
     }
-  }, [runningGame?.appid, runningGame?.configured, setupComplete]);
+  }, [runningWorkload, setupComplete]);
+
+  useEffect(() => {
+    if (isInstalled) {
+      void reload();
+      void flatpak.reload();
+    }
+  }, [isInstalled, reload, flatpak.reload]);
 
   useEffect(() => {
-    if (isInstalled) void reload();
-  }, [isInstalled, reload]);
+    if (!showDebugTab && tab === "ConfigFile") setTab("Games");
+  }, [showDebugTab, tab]);
 
   const handleConfigChange = async (
     fieldName: keyof ConfigurationData,
     value: boolean | number | string | string[],
     cleanupLaunchOptions = false,
-  ) => save({ ...config, [fieldName]: value }, cleanupLaunchOptions);
+  ) => {
+    await save({ ...config, [fieldName]: value }, cleanupLaunchOptions);
+  };
 
   const setup = (
     <SetupTab
@@ -94,20 +136,26 @@ export function Content() {
     />
   );
 
+  const nowPlaying = runningGame?.configured ? (
+    <NowPlayingTab
+      game={runningGame}
+      config={runningConfig}
+      onConfigChange={async (field, value) => {
+        await saveFor(runningGame.appid, { ...runningConfig, [field]: value }, true);
+      }}
+    />
+  ) : runningFlatpak ? (
+    <FlatpakNowPlayingTab
+      app={runningFlatpak}
+      busy={flatpak.busyAppId === runningFlatpak.app_id}
+      onConfigChange={flatpak.updateConfig}
+      onWorkaroundChange={flatpak.updateWorkarounds}
+    />
+  ) : null;
+
   const tabs = setupComplete
     ? [
-        ...(runningGame?.configured ? [{
-          id: "NowPlaying",
-          title: tabIcons.nowPlaying,
-          content: (
-            <NowPlayingTab
-              game={runningGame}
-              config={config}
-              onConfigChange={(field, value) => handleConfigChange(field, value)}
-              onRepair={repair}
-            />
-          ),
-        }] : []),
+        ...(nowPlaying ? [{ id: "NowPlaying", title: tabIcons.nowPlaying, content: nowPlaying }] : []),
         {
           id: "Games",
           title: tabIcons.games,
@@ -116,6 +164,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 +176,24 @@ export function Content() {
             />
           ),
         },
-        { id: "ConfigFile", title: tabIcons.configFile, content: <ConfigFileTab /> },
+        {
+          id: "Flatpak",
+          title: tabIcons.flatpak,
+          content: (
+            <FlatpakTab
+              apps={flatpak.apps}
+              runningApp={runningFlatpak}
+              loading={flatpak.loading}
+              busyAppId={flatpak.busyAppId}
+              onRefresh={flatpak.reload}
+              onEnable={flatpak.enableApp}
+              onRemove={flatpak.removeApp}
+              onConfigChange={flatpak.updateConfig}
+              onWorkaroundChange={flatpak.updateWorkarounds}
+            />
+          ),
+        },
+        ...(showDebugTab ? [{ id: "ConfigFile", title: tabIcons.configFile, content: <ConfigFileTab /> }] : []),
         { id: "Setup", title: tabIcons.setup, content: setup },
       ]
     : [{ id: "Setup", title: tabIcons.setup, content: setup }];
@@ -137,7 +204,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>
   );
 }