feat: select Lossless Scaling lsfg-vk branch

2 files changed, 99 insertions, 38 deletions

diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index aab2fb8..4e4e33a 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -15,6 +15,7 @@ import { NerdStuffModal } from "./NerdStuffModal";
 import { FlatpaksModal } from "./FlatpaksModal";
 import { ConfigurationData } from "../config/configSchema";
 import t from '../i18n/i18n';
+import { showErrorToast, showSuccessToast } from "../utils/toastUtils";
 
 export function Content() {
   const {
@@ -24,6 +25,9 @@ export function Content() {
     setInstallationStatus,
     losslessScalingInstalled,
     losslessScalingStatus,
+    steamBranchStatus,
+    isSwitchingSteamBranch,
+    selectLosslessScalingBranch,
     checkInstallation
   } = useInstallationStatus();
 
@@ -67,6 +71,18 @@ export function Content() {
     handleUninstall(setIsInstalled, setInstallationStatus, checkInstallation);
   };
 
+  const onSelectLosslessScalingBranch = async () => {
+    const result = await selectLosslessScalingBranch();
+    if (result.success) {
+      showSuccessToast("Steam branch selected", result.message);
+    } else {
+      showErrorToast(
+        "Steam branch selection failed",
+        result.error || "Unable to select the lsfg-vk Steam branch"
+      );
+    }
+  };
+
   const handleShowNerdStuff = () => {
     showModal(<NerdStuffModal />);
   };
@@ -92,6 +108,9 @@ export function Content() {
             installationStatus={installationStatus}
             losslessScalingInstalled={losslessScalingInstalled}
             losslessScalingStatus={losslessScalingStatus}
+            steamBranchStatus={steamBranchStatus}
+            isSwitchingSteamBranch={isSwitchingSteamBranch}
+            onSelectLosslessScalingBranch={onSelectLosslessScalingBranch}
           />
         </>
       )}
@@ -172,6 +191,9 @@ export function Content() {
             installationStatus={installationStatus}
             losslessScalingInstalled={losslessScalingInstalled}
             losslessScalingStatus={losslessScalingStatus}
+            steamBranchStatus={steamBranchStatus}
+            isSwitchingSteamBranch={isSwitchingSteamBranch}
+            onSelectLosslessScalingBranch={onSelectLosslessScalingBranch}
           />
 
           <InstallationButton
diff --git a/src/components/StatusDisplay.tsx b/src/components/StatusDisplay.tsx
index 31584eb..b6290b0 100644
--- a/src/components/StatusDisplay.tsx
+++ b/src/components/StatusDisplay.tsx
@@ -1,56 +1,95 @@
-import { PanelSectionRow } from "@decky/ui";
+import { ButtonItem, PanelSectionRow } from "@decky/ui";
+import type { SteamBranchStatus } from "../api/lsfgApi";
 
 interface StatusDisplayProps {
   isInstalled: boolean;
   installationStatus: string;
   losslessScalingInstalled: boolean;
   losslessScalingStatus: string;
+  steamBranchStatus: SteamBranchStatus | null;
+  isSwitchingSteamBranch: boolean;
+  onSelectLosslessScalingBranch: () => void;
 }
 
 export function StatusDisplay({
   isInstalled,
   installationStatus,
   losslessScalingInstalled,
-  losslessScalingStatus
+  losslessScalingStatus,
+  steamBranchStatus,
+  isSwitchingSteamBranch,
+  onSelectLosslessScalingBranch
 }: StatusDisplayProps) {
   return (
-    <PanelSectionRow>
-      <div style={{ marginBottom: "8px", fontSize: "14px" }}>
-        <div
-          style={{
-            color: losslessScalingInstalled ? "#4CAF50" : "#F44336",
-            fontWeight: "600",
-            marginBottom: "6px",
-            display: "flex",
-            alignItems: "center",
-            gap: "6px"
-          }}
-        >
-          <span style={{ fontSize: "16px" }}>
-            {losslessScalingInstalled ? "✅" : "❌"}
-          </span>
-          {losslessScalingInstalled ? "Lossless Scaling Installed" : "Lossless Scaling Not Installed"}
-        </div>
-        {!losslessScalingInstalled && losslessScalingStatus && (
-          <div style={{ color: "#B8B8B8", fontSize: "12px", margin: "0 0 6px 22px" }}>
-            {losslessScalingStatus}
+    <>
+      <PanelSectionRow>
+        <div style={{ marginBottom: "8px", fontSize: "14px" }}>
+          <div
+            style={{
+              color: losslessScalingInstalled ? "#4CAF50" : "#F44336",
+              fontWeight: "600",
+              marginBottom: "6px",
+              display: "flex",
+              alignItems: "center",
+              gap: "6px"
+            }}
+          >
+            <span style={{ fontSize: "16px" }}>
+              {losslessScalingInstalled ? "✅" : "❌"}
+            </span>
+            {losslessScalingInstalled ? "Lossless Scaling Installed" : "Lossless Scaling Not Installed"}
+          </div>
+          {!losslessScalingInstalled && losslessScalingStatus && (
+            <div style={{ color: "#B8B8B8", fontSize: "12px", margin: "0 0 6px 22px" }}>
+              {losslessScalingStatus}
+            </div>
+          )}
+          <div
+            style={{
+              color: isInstalled ? "#4CAF50" : "#FF9800",
+              fontWeight: "600",
+              display: "flex",
+              alignItems: "center",
+              gap: "6px"
+            }}
+          >
+            <span style={{ fontSize: "16px" }}>
+              {isInstalled ? "✅" : "❌"}
+            </span>
+            {installationStatus}
           </div>
-        )}
-        <div
-          style={{
-            color: isInstalled ? "#4CAF50" : "#FF9800",
-            fontWeight: "600",
-            display: "flex",
-            alignItems: "center",
-            gap: "6px"
-          }}
-        >
-          <span style={{ fontSize: "16px" }}>
-            {isInstalled ? "✅" : "❌"}
-          </span>
-          {installationStatus}
         </div>
-      </div>
-    </PanelSectionRow>
+      </PanelSectionRow>
+
+      {losslessScalingInstalled && steamBranchStatus?.installed && (
+        <PanelSectionRow>
+          <div style={{ width: "100%" }}>
+            <div
+              style={{
+                color: steamBranchStatus.needs_switch ? "#FF9800" : "#4CAF50",
+                fontSize: "12px",
+                margin: "0 0 6px 22px"
+              }}
+            >
+              Steam branch: {steamBranchStatus.current_branch || "public"}
+              {steamBranchStatus.needs_switch && (
+                <div style={{ color: "#B8B8B8", marginTop: "3px" }}>
+                  {steamBranchStatus.message}
+                </div>
+              )}
+            </div>
+            {steamBranchStatus.needs_switch && (
+              <ButtonItem
+                layout="below"
+                onClick={onSelectLosslessScalingBranch}
+                disabled={isSwitchingSteamBranch}
+              >
+                {isSwitchingSteamBranch ? "Selecting lsfg-vk..." : "Use lsfg-vk Steam branch"}
+              </ButtonItem>
+            )}
+          </div>
+        </PanelSectionRow>
+      )}
+    </>
   );
 }