feat: add flatpak workaround controls

1 files changed, 144 insertions, 0 deletions

diff --git a/src/components/FlatpakWorkaroundsSection.tsx b/src/components/FlatpakWorkaroundsSection.tsx
new file mode 100644
index 0000000..7d9d880
--- /dev/null
+++ b/src/components/FlatpakWorkaroundsSection.tsx
@@ -0,0 +1,144 @@
+import { ButtonItem, PanelSectionRow, SliderField, ToggleField } from "@decky/ui";
+import { useEffect, useRef, useState } from "react";
+import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
+import type { WorkaroundState } from "../api/lsfgApi";
+import t from "../i18n/i18n";
+
+interface Props {
+  state: WorkaroundState;
+  disabled?: boolean;
+  onChange: (state: WorkaroundState) => Promise<boolean>;
+}
+
+const WORKAROUNDS_COLLAPSED_KEY = "lsfg-flatpak-workarounds-collapsed-v1";
+
+export function FlatpakWorkaroundsSection({ state, disabled = false, onChange }: Props) {
+  const [collapsed, setCollapsed] = useState(() => {
+    try {
+      return localStorage.getItem(WORKAROUNDS_COLLAPSED_KEY) !== "false";
+    } catch {
+      return true;
+    }
+  });
+  const [fpsValue, setFpsValue] = useState(state.dxvkFrameRate);
+  const timer = useRef<number | null>(null);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(WORKAROUNDS_COLLAPSED_KEY, String(collapsed));
+    } catch {}
+  }, [collapsed]);
+
+  useEffect(() => {
+    setFpsValue(state.dxvkFrameRate);
+  }, [state.dxvkFrameRate]);
+
+  useEffect(() => () => {
+    if (timer.current !== null) window.clearTimeout(timer.current);
+  }, []);
+
+  const update = (field: keyof WorkaroundState, value: boolean | number) => {
+    void onChange({ ...state, [field]: value });
+  };
+
+  const updateFps = (value: number) => {
+    setFpsValue(value);
+    if (timer.current !== null) window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => {
+      timer.current = null;
+      void onChange({ ...state, dxvkFrameRate: value });
+    }, 250);
+  };
+
+  const fpsLabel = fpsValue > 0 ? `${fpsValue} FPS` : t("CONFIG_BASE_FPS_CAP_OFF", "Off");
+
+  return (
+    <>
+      <PanelSectionRow>
+        <div
+          style={{
+            fontSize: "14px",
+            fontWeight: "bold",
+            marginTop: "8px",
+            marginBottom: "6px",
+            borderBottom: "1px solid rgba(255, 255, 255, 0.2)",
+            paddingBottom: "3px",
+            color: "white",
+          }}
+        >
+          {t("CONFIG_WORKAROUNDS_TITLE", "Workarounds")}
+        </div>
+      </PanelSectionRow>
+      <PanelSectionRow>
+        <ButtonItem
+          layout="below"
+          bottomSeparator={collapsed ? "standard" : "none"}
+          onClick={() => setCollapsed((value) => !value)}
+        >
+          {collapsed ? <RiArrowDownSFill /> : <RiArrowUpSFill />}
+        </ButtonItem>
+      </PanelSectionRow>
+      {!collapsed && (
+        <>
+          <PanelSectionRow>
+            <SliderField
+              label={`${t("CONFIG_BASE_FPS_CAP", "Base FPS Cap")} (${fpsLabel})`}
+              description={t("CONFIG_BASE_FPS_CAP_DESC", "Base cap for DXVK-backed games before frame generation; 0 disables. Requires app restart to apply.")}
+              value={fpsValue}
+              min={0}
+              max={60}
+              step={1}
+              onChange={updateFps}
+              disabled={disabled}
+            />
+          </PanelSectionRow>
+          <PanelSectionRow>
+            <ToggleField
+              label={t("CONFIG_DISABLE_STEAMDECK_MODE", "Disable Steam Deck Mode")}
+              description={t("CONFIG_DISABLE_STEAMDECK_MODE_DESC", "Disables a game-specific Steam Deck compatibility switch. Requires app restart to apply.")}
+              checked={state.disableSteamdeckMode}
+              onChange={(value) => update("disableSteamdeckMode", value)}
+              disabled={disabled}
+            />
+          </PanelSectionRow>
+          <PanelSectionRow>
+            <ToggleField
+              label={t("CONFIG_DISABLE_GAMESCOPE_WSI", "Disable Gamescope WSI")}
+              description={t("CONFIG_DISABLE_GAMESCOPE_WSI_DESC", "Adds ENABLE_GAMESCOPE_WSI=0. Requires app restart to apply.")}
+              checked={state.disableGamescopeWsi}
+              onChange={(value) => update("disableGamescopeWsi", value)}
+              disabled={disabled}
+            />
+          </PanelSectionRow>
+          <PanelSectionRow>
+            <ToggleField
+              label={t("CONFIG_DISABLE_HDR", "Disable HDR")}
+              description={t("CONFIG_DISABLE_HDR_DESC", "Prevents DXVK from exposing HDR to the app. Requires app restart to apply.")}
+              checked={state.disableHdr}
+              onChange={(value) => update("disableHdr", value)}
+              disabled={disabled}
+            />
+          </PanelSectionRow>
+          <PanelSectionRow>
+            <ToggleField
+              label={t("CONFIG_DISABLE_VKBASALT", "Disable vkBasalt")}
+              description={t("CONFIG_DISABLE_VKBASALT_DESC", "Disables vkBasalt which can conflict with LSFG-VK.")}
+              checked={state.disableVkbasalt}
+              onChange={(value) => update("disableVkbasalt", value)}
+              disabled={disabled}
+            />
+          </PanelSectionRow>
+          <PanelSectionRow>
+            <ToggleField
+              label={t("CONFIG_ENABLE_ZINK", "Force Zink for OpenGL Games")}
+              description={t("CONFIG_ENABLE_ZINK_DESC", "Uses Mesa's Zink OpenGL-to-Vulkan driver. May cause crashes or freezes. Requires app restart to apply.")}
+              checked={state.enableZink}
+              onChange={(value) => update("enableZink", value)}
+              disabled={disabled}
+            />
+          </PanelSectionRow>
+        </>
+      )}
+    </>
+  );
+}