dynamic option 2 var display

2 files changed, 42 insertions, 18 deletions

diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index cecb142..0e17f3c 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -102,7 +102,7 @@ export function Content() {
         />
       )}
 
-      <UsageInstructions multiplier={config.multiplier} />
+      <UsageInstructions config={config} />
     </PanelSection>
   );
 }
diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx
index 712d4c1..3df3d78 100644
--- a/src/components/UsageInstructions.tsx
+++ b/src/components/UsageInstructions.tsx
@@ -1,10 +1,47 @@
 import { PanelSectionRow } from "@decky/ui";
 
-interface UsageInstructionsProps {
+interface ConfigType {
+  enableLsfg: boolean;
   multiplier: number;
+  flowScale: number;
+  hdr: boolean;
+  perfMode: boolean;
+  immediateMode: boolean;
 }
 
-export function UsageInstructions({ multiplier }: UsageInstructionsProps) {
+interface UsageInstructionsProps {
+  config: ConfigType;
+}
+
+export function UsageInstructions({ config }: UsageInstructionsProps) {
+  // Build manual environment variables string based on current config
+  const buildManualEnvVars = (): string => {
+    const envVars: string[] = [];
+    
+    if (config.enableLsfg) {
+      envVars.push("ENABLE_LSFG=1");
+    }
+    
+    // Always include multiplier and flow_scale if LSFG is enabled, as they have defaults
+    if (config.enableLsfg) {
+      envVars.push(`LSFG_MULTIPLIER=${config.multiplier}`);
+      envVars.push(`LSFG_FLOW_SCALE=${config.flowScale}`);
+    }
+    
+    if (config.hdr) {
+      envVars.push("LSFG_HDR=1");
+    }
+    
+    if (config.perfMode) {
+      envVars.push("LSFG_PERF_MODE=1");
+    }
+    
+    if (config.immediateMode) {
+      envVars.push("MESA_VK_WSI_PRESENT_MODE=immediate");
+    }
+    
+    return envVars.length > 0 ? `${envVars.join(" ")} %command%` : "%command%";
+  };
   return (
     <PanelSectionRow>
       <div
@@ -32,7 +69,7 @@ export function UsageInstructions({ multiplier }: UsageInstructionsProps) {
             marginBottom: "6px"
           }}
         >
-          ~/lsfg %COMMAND%
+          ~/lsfg %command%
         </div>
         <div style={{ marginBottom: "4px" }}>
           Option 2: Manual environment variables:
@@ -47,20 +84,7 @@ export function UsageInstructions({ multiplier }: UsageInstructionsProps) {
             marginBottom: "6px"
           }}
         >
-          ENABLE_LSFG=1 LSFG_MULTIPLIER={multiplier} %COMMAND%
-        </div>
-        <div style={{ fontSize: "11px", opacity: 0.8 }}>
-          The lsfg script uses your current configuration settings.
-          <br />
-          • ENABLE_LSFG=1 - Enables frame generation
-          <br />
-          • LSFG_MULTIPLIER=2-4 - FPS multiplier (start with 2)
-          <br />
-          • LSFG_FLOW_SCALE=0.25-1.0 - Flow scale (for performance)
-          <br />
-          • LSFG_HDR=1 - HDR mode (only if using HDR)
-          <br />
-          • MESA_VK_WSI_PRESENT_MODE=immediate - Disable vsync
+          {buildManualEnvVars()}
         </div>
       </div>
     </PanelSectionRow>