From 6b701637ad308513b678c80baceec6c79e339ce9 Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Thu, 17 Jul 2025 14:22:56 -0400
Subject: initial conf FE and BE hooks

---
 src/components/ConfigurationSection.tsx |  67 ++++++----------
 src/components/Content.tsx              |   2 +-
 src/components/UsageInstructions.tsx    | 130 ++++++++++++++------------------
 3 files changed, 79 insertions(+), 120 deletions(-)

(limited to 'src/components')

diff --git a/src/components/ConfigurationSection.tsx b/src/components/ConfigurationSection.tsx
index 2545217..118b418 100644
--- a/src/components/ConfigurationSection.tsx
+++ b/src/components/ConfigurationSection.tsx
@@ -1,9 +1,9 @@
-import { PanelSectionRow, ToggleField, SliderField } from "@decky/ui";
+import { PanelSectionRow, ToggleField, SliderField, TextField } from "@decky/ui";
 import { ConfigurationData } from "../config/configSchema";
 
 interface ConfigurationSectionProps {
   config: ConfigurationData;
-  onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number) => Promise<void>;
+  onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number | string) => Promise<void>;
 }
 
 export function ConfigurationSection({
@@ -30,16 +30,25 @@ export function ConfigurationSection({
       <PanelSectionRow>
         <ToggleField
           label="Enable LSFG"
-          description="Enables the frame generation layer"
-          checked={config.enable_lsfg}
-          onChange={(value) => onConfigChange('enable_lsfg', value)}
+          description="enable/disable lsfg on every game"
+          checked={config.enable}
+          onChange={(value) => onConfigChange('enable', value)}
+        />
+      </PanelSectionRow>
+
+      <PanelSectionRow>
+        <TextField
+          label="Lossless.dll Path"
+          description="specify where Lossless.dll is stored"
+          value={config.dll}
+          onChange={(e) => onConfigChange('dll', e.target.value)}
         />
       </PanelSectionRow>
 
       <PanelSectionRow>
         <SliderField
           label="FPS Multiplier"
-          description="Traditional FPS multiplier value"
+          description="change the fps multiplier"
           value={config.multiplier}
           min={2}
           max={4}
@@ -57,7 +66,7 @@ export function ConfigurationSection({
       <PanelSectionRow>
         <SliderField
           label={`Flow Scale ${Math.round(config.flow_scale * 100)}%`}
-          description="Lowers the internal motion estimation resolution"
+          description="change the flow scale (lower = faster)"
           value={config.flow_scale}
           min={0.25}
           max={1.0}
@@ -66,53 +75,23 @@ export function ConfigurationSection({
         />
       </PanelSectionRow>
 
-      <PanelSectionRow>
-        <ToggleField
-          label="HDR Mode"
-          description="Enable HDR mode (only if Game supports HDR)"
-          checked={config.hdr}
-          onChange={(value) => onConfigChange('hdr', value)}
-        />
-      </PanelSectionRow>
-
       <PanelSectionRow>
         <ToggleField
           label="Performance Mode"
-          description="Use lighter model for FG"
-          checked={config.perf_mode}
-          onChange={(value) => onConfigChange('perf_mode', value)}
+          description="toggle performance mode (2x-8x performance increase)"
+          checked={config.performance_mode}
+          onChange={(value) => onConfigChange('performance_mode', value)}
         />
       </PanelSectionRow>
 
       <PanelSectionRow>
         <ToggleField
-          label="Immediate Mode"
-          description="Reduce input lag (Experimental, will cause issues in many games)"
-          checked={config.immediate_mode}
-          onChange={(value) => onConfigChange('immediate_mode', value)}
-        />
-      </PanelSectionRow>
-
-      <PanelSectionRow>
-        <SliderField
-          label={`Game Frame Cap ${config.frame_cap === 0 ? "(Disabled)" : `(${config.frame_cap} FPS)`}`}
-          description="Limit base game FPS (0 = disabled)"
-          value={config.frame_cap}
-          min={0}
-          max={60}
-          step={1}
-          onChange={(value) => onConfigChange('frame_cap', value)}
+          label="HDR Mode"
+          description="enable hdr mode (doesn't support scrgb)"
+          checked={config.hdr_mode}
+          onChange={(value) => onConfigChange('hdr_mode', value)}
         />
       </PanelSectionRow>
-
-      {/* <PanelSectionRow>
-        <ToggleField
-          label="Disable vkbasalt"
-          description="Some plugins add vkbasalt layer, which can break lsfg. Toggling on fixes this"
-          checked={config.disable_vkbasalt}
-          onChange={(value) => onConfigChange('disable_vkbasalt', value)}
-        />
-      </PanelSectionRow> */}
     </>
   );
 }
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index ea3f3c1..613e722 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -37,7 +37,7 @@ export function Content() {
   }, [isInstalled, loadLsfgConfig]);
 
   // Generic configuration change handler
-  const handleConfigChange = async (fieldName: keyof ConfigurationData, value: boolean | number) => {
+  const handleConfigChange = async (fieldName: keyof ConfigurationData, value: boolean | number | string) => {
     await updateField(fieldName, value);
   };
 
diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx
index 727a0ab..ac721c7 100644
--- a/src/components/UsageInstructions.tsx
+++ b/src/components/UsageInstructions.tsx
@@ -6,88 +6,68 @@ interface UsageInstructionsProps {
 }
 
 export function UsageInstructions({ config }: UsageInstructionsProps) {
-  // Build manual environment variables string based on current config
-  const buildManualEnvVars = (): string => {
-    const envVars: string[] = [];
-    
-    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.enable_lsfg) {
-      envVars.push(`LSFG_MULTIPLIER=${config.multiplier}`);
-      envVars.push(`LSFG_FLOW_SCALE=${config.flow_scale}`);
-    }
-    
-    if (config.hdr) {
-      envVars.push("LSFG_HDR=1");
-    }
-    
-    if (config.perf_mode) {
-      envVars.push("LSFG_PERF_MODE=1");
-    }
-    
-    if (config.immediate_mode) {
-      envVars.push("MESA_VK_WSI_PRESENT_MODE=immediate");
-    }
-    
-    if (config.disable_vkbasalt) {
-      envVars.push("DISABLE_VKBASALT=1");
-    }
-    
-    if (config.frame_cap > 0) {
-      envVars.push(`DXVK_FRAME_RATE=${config.frame_cap}`);
-    }
-    
-    return envVars.length > 0 ? `${envVars.join(" ")} %command%` : "%command%";
-  };
-
   return (
     <>
       <PanelSectionRow>
         <div
           style={{
-            fontSize: "13px",
-            marginTop: "12px",
-            padding: "8px",
-            backgroundColor: "rgba(255, 255, 255, 0.05)",
-            borderRadius: "4px"
+            fontSize: "14px",
+            fontWeight: "bold",
+            marginTop: "16px",
+            marginBottom: "8px",
+            borderBottom: "1px solid rgba(255, 255, 255, 0.2)",
+            paddingBottom: "4px"
+          }}
+        >
+          Usage Instructions
+        </div>
+      </PanelSectionRow>
+
+      <PanelSectionRow>
+        <div
+          style={{
+            fontSize: "12px",
+            lineHeight: "1.4",
+            opacity: "0.8",
+            whiteSpace: "pre-wrap"
+          }}
+        >
+          {config.enable 
+            ? "LSFG is enabled globally. The layer will be active for all games automatically. No launch arguments needed."
+            : "LSFG is disabled. Enable it above to activate frame generation for all games."
+          }
+        </div>
+      </PanelSectionRow>
+
+      <PanelSectionRow>
+        <div
+          style={{
+            fontSize: "12px",
+            lineHeight: "1.4",
+            opacity: "0.8",
+            whiteSpace: "pre-wrap"
+          }}
+        >
+          {`Current Configuration:
+• Enable: ${config.enable ? "Yes" : "No"}
+• DLL Path: ${config.dll}
+• Multiplier: ${config.multiplier}x
+• Flow Scale: ${Math.round(config.flow_scale * 100)}%
+• Performance Mode: ${config.performance_mode ? "Yes" : "No"}
+• HDR Mode: ${config.hdr_mode ? "Yes" : "No"}`}
+        </div>
+      </PanelSectionRow>
+
+      <PanelSectionRow>
+        <div
+          style={{
+            fontSize: "11px",
+            lineHeight: "1.3",
+            opacity: "0.6",
+            marginTop: "8px"
           }}
         >
-          <div style={{ fontWeight: "bold", marginBottom: "6px" }}>
-            Usage Instructions:
-          </div>
-          <div style={{ marginBottom: "4px" }}>
-            Option 1: Use the lsfg script (recommended):
-          </div>
-          <div
-            style={{
-              fontFamily: "monospace",
-              backgroundColor: "rgba(0, 0, 0, 0.3)",
-              padding: "4px",
-              borderRadius: "2px",
-              fontSize: "12px",
-              marginBottom: "6px"
-            }}
-          >
-            ~/lsfg %command%
-          </div>
-          <div style={{ marginBottom: "4px" }}>
-            Option 2: Manual environment variables:
-          </div>
-          <div
-            style={{
-              fontFamily: "monospace",
-              backgroundColor: "rgba(0, 0, 0, 0.3)",
-              padding: "4px",
-              borderRadius: "2px",
-              fontSize: "12px",
-              marginBottom: "6px"
-            }}
-          >
-            {buildManualEnvVars()}
-          </div>
+          The configuration is stored in ~/.config/lsfg-vk/conf.toml and applies to all games globally.
         </div>
       </PanelSectionRow>
     </>
-- 
cgit v1.2.3