From 7868396718b13443209e7c5d83a2c96cd7eee31e Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Wed, 16 Jul 2025 13:54:09 -0400
Subject:  centralized configuration system for lsfg-vk params

---
 src/components/ConfigurationSection.tsx | 64 +++++++++++----------------------
 src/components/Content.tsx              | 55 ++++------------------------
 src/components/UsageInstructions.tsx    | 30 ++++++----------
 3 files changed, 36 insertions(+), 113 deletions(-)

(limited to 'src/components')

diff --git a/src/components/ConfigurationSection.tsx b/src/components/ConfigurationSection.tsx
index 11bb6b9..2545217 100644
--- a/src/components/ConfigurationSection.tsx
+++ b/src/components/ConfigurationSection.tsx
@@ -1,38 +1,14 @@
 import { PanelSectionRow, ToggleField, SliderField } from "@decky/ui";
-
-interface LsfgConfig {
-  enableLsfg: boolean;
-  multiplier: number;
-  flowScale: number;
-  hdr: boolean;
-  perfMode: boolean;
-  immediateMode: boolean;
-  disableVkbasalt: boolean;
-  frameCap: number;
-}
+import { ConfigurationData } from "../config/configSchema";
 
 interface ConfigurationSectionProps {
-  config: LsfgConfig;
-  onEnableLsfgChange: (value: boolean) => Promise<void>;
-  onMultiplierChange: (value: number) => Promise<void>;
-  onFlowScaleChange: (value: number) => Promise<void>;
-  onHdrChange: (value: boolean) => Promise<void>;
-  onPerfModeChange: (value: boolean) => Promise<void>;
-  onImmediateModeChange: (value: boolean) => Promise<void>;
-  onDisableVkbasaltChange: (value: boolean) => Promise<void>;
-  onFrameCapChange: (value: number) => Promise<void>;
+  config: ConfigurationData;
+  onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number) => Promise<void>;
 }
 
 export function ConfigurationSection({
   config,
-  onEnableLsfgChange,
-  onMultiplierChange,
-  onFlowScaleChange,
-  onHdrChange,
-  onPerfModeChange,
-  onImmediateModeChange,
-  onDisableVkbasaltChange,
-  onFrameCapChange
+  onConfigChange
 }: ConfigurationSectionProps) {
   return (
     <>
@@ -55,8 +31,8 @@ export function ConfigurationSection({
         <ToggleField
           label="Enable LSFG"
           description="Enables the frame generation layer"
-          checked={config.enableLsfg}
-          onChange={onEnableLsfgChange}
+          checked={config.enable_lsfg}
+          onChange={(value) => onConfigChange('enable_lsfg', value)}
         />
       </PanelSectionRow>
 
@@ -74,19 +50,19 @@ export function ConfigurationSection({
             { notchIndex: 1, label: "3X" },
             { notchIndex: 2, label: "4X" }
           ]}
-          onChange={onMultiplierChange}
+          onChange={(value) => onConfigChange('multiplier', value)}
         />
       </PanelSectionRow>
 
       <PanelSectionRow>
         <SliderField
-          label={`Flow Scale ${Math.round(config.flowScale * 100)}%`}
+          label={`Flow Scale ${Math.round(config.flow_scale * 100)}%`}
           description="Lowers the internal motion estimation resolution"
-          value={config.flowScale}
+          value={config.flow_scale}
           min={0.25}
           max={1.0}
           step={0.01}
-          onChange={onFlowScaleChange}
+          onChange={(value) => onConfigChange('flow_scale', value)}
         />
       </PanelSectionRow>
 
@@ -95,7 +71,7 @@ export function ConfigurationSection({
           label="HDR Mode"
           description="Enable HDR mode (only if Game supports HDR)"
           checked={config.hdr}
-          onChange={onHdrChange}
+          onChange={(value) => onConfigChange('hdr', value)}
         />
       </PanelSectionRow>
 
@@ -103,8 +79,8 @@ export function ConfigurationSection({
         <ToggleField
           label="Performance Mode"
           description="Use lighter model for FG"
-          checked={config.perfMode}
-          onChange={onPerfModeChange}
+          checked={config.perf_mode}
+          onChange={(value) => onConfigChange('perf_mode', value)}
         />
       </PanelSectionRow>
 
@@ -112,20 +88,20 @@ export function ConfigurationSection({
         <ToggleField
           label="Immediate Mode"
           description="Reduce input lag (Experimental, will cause issues in many games)"
-          checked={config.immediateMode}
-          onChange={onImmediateModeChange}
+          checked={config.immediate_mode}
+          onChange={(value) => onConfigChange('immediate_mode', value)}
         />
       </PanelSectionRow>
 
       <PanelSectionRow>
         <SliderField
-          label={`Game Frame Cap ${config.frameCap === 0 ? "(Disabled)" : `(${config.frameCap} FPS)`}`}
+          label={`Game Frame Cap ${config.frame_cap === 0 ? "(Disabled)" : `(${config.frame_cap} FPS)`}`}
           description="Limit base game FPS (0 = disabled)"
-          value={config.frameCap}
+          value={config.frame_cap}
           min={0}
           max={60}
           step={1}
-          onChange={onFrameCapChange}
+          onChange={(value) => onConfigChange('frame_cap', value)}
         />
       </PanelSectionRow>
 
@@ -133,8 +109,8 @@ export function ConfigurationSection({
         <ToggleField
           label="Disable vkbasalt"
           description="Some plugins add vkbasalt layer, which can break lsfg. Toggling on fixes this"
-          checked={config.disableVkbasalt}
-          onChange={onDisableVkbasaltChange}
+          checked={config.disable_vkbasalt}
+          onChange={(value) => onConfigChange('disable_vkbasalt', value)}
         />
       </PanelSectionRow> */}
     </>
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index 895b2fc..ba651d4 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -8,6 +8,7 @@ import { ConfigurationSection } from "./ConfigurationSection";
 import { UsageInstructions } from "./UsageInstructions";
 import { WikiButton } from "./WikiButton";
 import { ClipboardButton } from "./ClipboardButton";
+import { ConfigurationData } from "../config/configSchema";
 
 export function Content() {
   const {
@@ -21,9 +22,8 @@ export function Content() {
 
   const {
     config,
-    setters,
     loadLsfgConfig,
-    updateConfig
+    updateField
   } = useLsfgConfig();
 
   const { isInstalling, isUninstalling, handleInstall, handleUninstall } = useInstallationActions();
@@ -35,45 +35,9 @@ export function Content() {
     }
   }, [isInstalled, loadLsfgConfig]);
 
-  // Configuration change handlers
-  const handleEnableLsfgChange = async (value: boolean) => {
-    setters.setEnableLsfg(value);
-    await updateConfig(value, config.multiplier, config.flowScale, config.hdr, config.perfMode, config.immediateMode, config.disableVkbasalt, config.frameCap);
-  };
-
-  const handleMultiplierChange = async (value: number) => {
-    setters.setMultiplier(value);
-    await updateConfig(config.enableLsfg, value, config.flowScale, config.hdr, config.perfMode, config.immediateMode, config.disableVkbasalt, config.frameCap);
-  };
-
-  const handleFlowScaleChange = async (value: number) => {
-    setters.setFlowScale(value);
-    await updateConfig(config.enableLsfg, config.multiplier, value, config.hdr, config.perfMode, config.immediateMode, config.disableVkbasalt, config.frameCap);
-  };
-
-  const handleHdrChange = async (value: boolean) => {
-    setters.setHdr(value);
-    await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, value, config.perfMode, config.immediateMode, config.disableVkbasalt, config.frameCap);
-  };
-
-  const handlePerfModeChange = async (value: boolean) => {
-    setters.setPerfMode(value);
-    await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, config.hdr, value, config.immediateMode, config.disableVkbasalt, config.frameCap);
-  };
-
-  const handleImmediateModeChange = async (value: boolean) => {
-    setters.setImmediateMode(value);
-    await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, config.hdr, config.perfMode, value, config.disableVkbasalt, config.frameCap);
-  };
-
-  const handleDisableVkbasaltChange = async (value: boolean) => {
-    setters.setDisableVkbasalt(value);
-    await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, config.hdr, config.perfMode, config.immediateMode, value, config.frameCap);
-  };
-
-  const handleFrameCapChange = async (value: number) => {
-    setters.setFrameCap(value);
-    await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, config.hdr, config.perfMode, config.immediateMode, config.disableVkbasalt, value);
+  // Generic configuration change handler
+  const handleConfigChange = async (fieldName: keyof ConfigurationData, value: boolean | number) => {
+    await updateField(fieldName, value);
   };
 
   const onInstall = () => {
@@ -105,14 +69,7 @@ export function Content() {
       {isInstalled && (
         <ConfigurationSection
           config={config}
-          onEnableLsfgChange={handleEnableLsfgChange}
-          onMultiplierChange={handleMultiplierChange}
-          onFlowScaleChange={handleFlowScaleChange}
-          onHdrChange={handleHdrChange}
-          onPerfModeChange={handlePerfModeChange}
-          onImmediateModeChange={handleImmediateModeChange}
-          onDisableVkbasaltChange={handleDisableVkbasaltChange}
-          onFrameCapChange={handleFrameCapChange}
+          onConfigChange={handleConfigChange}
         />
       )}
 
diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx
index 3589c04..727a0ab 100644
--- a/src/components/UsageInstructions.tsx
+++ b/src/components/UsageInstructions.tsx
@@ -1,18 +1,8 @@
 import { PanelSectionRow } from "@decky/ui";
-
-interface ConfigType {
-  enableLsfg: boolean;
-  multiplier: number;
-  flowScale: number;
-  hdr: boolean;
-  perfMode: boolean;
-  immediateMode: boolean;
-  disableVkbasalt: boolean;
-  frameCap: number;
-}
+import { ConfigurationData } from "../config/configSchema";
 
 interface UsageInstructionsProps {
-  config: ConfigType;
+  config: ConfigurationData;
 }
 
 export function UsageInstructions({ config }: UsageInstructionsProps) {
@@ -20,34 +10,34 @@ export function UsageInstructions({ config }: UsageInstructionsProps) {
   const buildManualEnvVars = (): string => {
     const envVars: string[] = [];
     
-    if (config.enableLsfg) {
+    if (config.enable_lsfg) {
       envVars.push("ENABLE_LSFG=1");
     }
     
     // Always include multiplier and flow_scale if LSFG is enabled, as they have defaults
-    if (config.enableLsfg) {
+    if (config.enable_lsfg) {
       envVars.push(`LSFG_MULTIPLIER=${config.multiplier}`);
-      envVars.push(`LSFG_FLOW_SCALE=${config.flowScale}`);
+      envVars.push(`LSFG_FLOW_SCALE=${config.flow_scale}`);
     }
     
     if (config.hdr) {
       envVars.push("LSFG_HDR=1");
     }
     
-    if (config.perfMode) {
+    if (config.perf_mode) {
       envVars.push("LSFG_PERF_MODE=1");
     }
     
-    if (config.immediateMode) {
+    if (config.immediate_mode) {
       envVars.push("MESA_VK_WSI_PRESENT_MODE=immediate");
     }
     
-    if (config.disableVkbasalt) {
+    if (config.disable_vkbasalt) {
       envVars.push("DISABLE_VKBASALT=1");
     }
     
-    if (config.frameCap > 0) {
-      envVars.push(`DXVK_FRAME_RATE=${config.frameCap}`);
+    if (config.frame_cap > 0) {
+      envVars.push(`DXVK_FRAME_RATE=${config.frame_cap}`);
     }
     
     return envVars.length > 0 ? `${envVars.join(" ")} %command%` : "%command%";
-- 
cgit v1.2.3