1 files changed, 127 insertions, 29 deletions
diff --git a/src/components/SetupTab.tsx b/src/components/SetupTab.tsx
index 98d6e78..624be54 100644
--- a/src/components/SetupTab.tsx
+++ b/src/components/SetupTab.tsx
@@ -1,7 +1,13 @@
-import { PanelSection } from "@decky/ui";
-import type { SteamBranchStatus } from "../api/lsfgApi";
-import { InstallationButton } from "./InstallationButton";
-import { StatusDisplay } from "./StatusDisplay";
+import { ButtonItem, Field, PanelSection, PanelSectionRow, ToggleField } from "@decky/ui";
+import { useEffect, useState } from "react";
+import {
+  getFlatpakSupportStatus,
+  setFlatpakExtensionEnabled,
+  type FlatpakExtensionStatus,
+  type SteamBranchStatus,
+} from "../api/lsfgApi";
+import t from "../i18n/i18n";
+import { showErrorToast } from "../utils/toastUtils";
 
 interface SetupTabProps {
   isInstalled: boolean;
@@ -15,32 +21,124 @@ interface SetupTabProps {
   onUninstall: () => void;
 }
 
-export function SetupTab({
-  isInstalled,
-  installationStatus,
-  losslessScalingInstalled,
-  losslessScalingStatus,
-  steamBranchStatus,
-  isInstalling,
-  isUninstalling,
-  onInstall,
-  onUninstall,
-}: SetupTabProps) {
+function FlatpakSupportDiagnostics() {
+  const [status, setStatus] = useState<FlatpakExtensionStatus | null>(null);
+  const [operation, setOperation] = useState<string | null>(null);
+
+  const refresh = async () => {
+    try {
+      setStatus(await getFlatpakSupportStatus());
+    } catch (error) {
+      setStatus({
+        success: false,
+        message: "",
+        error: String(error),
+        available: false,
+        extension_id: "",
+        supported_branches: [],
+        installed_branches: [],
+      });
+    }
+  };
+
+  useEffect(() => {
+    void refresh();
+  }, []);
+
+  if (!status?.available) return null;
+
+  const setEnabled = async (branch: string, enabled: boolean) => {
+    setOperation(`${enabled ? "enable" : "disable"}-${branch}`);
+    try {
+      const result = await setFlatpakExtensionEnabled(branch, enabled);
+      if (!result.success) throw new Error(result.error || result.message || "Flatpak runtime update failed");
+      await refresh();
+    } catch (error) {
+      showErrorToast("Flatpak runtime update failed", String(error));
+    } finally {
+      setOperation(null);
+    }
+  };
+
   return (
-    <PanelSection title="Setup">
-      <StatusDisplay
-        installationStatus={installationStatus}
-        losslessScalingInstalled={losslessScalingInstalled}
-        losslessScalingStatus={losslessScalingStatus}
-        steamBranchStatus={steamBranchStatus}
-      />
-      <InstallationButton
-        isInstalled={isInstalled}
-        isInstalling={isInstalling}
-        isUninstalling={isUninstalling}
-        onInstall={onInstall}
-        onUninstall={onUninstall}
-      />
+    <PanelSection title="Flatpak runtimes">
+      <PanelSectionRow>
+        <Field
+          label="LSFG-VK runtime extensions"
+          description={status.message || "Toggle a branch to install or uninstall it."}
+        />
+      </PanelSectionRow>
+      {status.supported_branches.map((branch) => {
+        const installed = status.installed_branches.includes(branch);
+        const pending = operation?.endsWith(`-${branch}`);
+        return (
+          <PanelSectionRow key={branch}>
+            <ToggleField
+              label={branch}
+              description={pending ? (operation?.startsWith("enable") ? "Installing..." : "Uninstalling...") : installed ? "Installed" : "Not installed"}
+              checked={installed}
+              onChange={(enabled) => void setEnabled(branch, enabled)}
+              disabled={operation !== null}
+            />
+          </PanelSectionRow>
+        );
+      })}
     </PanelSection>
   );
 }
+
+export function SetupTab(props: SetupTabProps) {
+  const {
+    isInstalled,
+    installationStatus,
+    losslessScalingInstalled,
+    losslessScalingStatus,
+    steamBranchStatus,
+    isInstalling,
+    isUninstalling,
+    onInstall,
+    onUninstall,
+  } = props;
+  const losslessScalingAppInstalled = losslessScalingInstalled || steamBranchStatus?.installed === true;
+  const buttonLabel = isInstalling
+    ? t("INSTALL_INSTALLING", "Installing...")
+    : isUninstalling
+      ? t("INSTALL_UNINSTALLING", "Uninstalling...")
+      : isInstalled
+        ? t("INSTALL_UNINSTALL_BTN", "Uninstall LSFG-VK")
+        : t("INSTALL_INSTALL_BTN", "Install LSFG-VK");
+
+  return (
+    <>
+      <PanelSection title="Setup">
+        <PanelSectionRow>
+          <Field
+            label="Lossless Scaling"
+            description={losslessScalingAppInstalled ? "Installed" : losslessScalingStatus || "Not installed"}
+          />
+        </PanelSectionRow>
+        <PanelSectionRow>
+          <Field label="LSFG-VK" description={installationStatus} />
+        </PanelSectionRow>
+        {steamBranchStatus?.installed && (
+          <PanelSectionRow>
+            <Field
+              label="Steam branch"
+              description={`${steamBranchStatus.current_branch || "public"}${steamBranchStatus.needs_switch ? ` - ${steamBranchStatus.message}` : ""}`}
+            />
+          </PanelSectionRow>
+        )}
+        <PanelSectionRow>
+          <ButtonItem
+            layout="below"
+            onClick={isInstalled ? onUninstall : onInstall}
+            disabled={isInstalling || isUninstalling}
+          >
+            {buttonLabel}
+          </ButtonItem>
+        </PanelSectionRow>
+      </PanelSection>
+      <FlatpakSupportDiagnostics />
+    </>
+  );
+}