feat: select Lossless Scaling lsfg-vk branch

1 files changed, 77 insertions, 38 deletions

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>
+      )}
+    </>
   );
 }