From 9a679fc4b70dad9c4894b7886d62ad41d0596251 Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Mon, 14 Jul 2025 20:57:57 -0400
Subject: dynamic option 2 var display

---
 src/components/UsageInstructions.tsx | 58 +++++++++++++++++++++++++-----------
 1 file changed, 41 insertions(+), 17 deletions(-)

(limited to 'src/components/UsageInstructions.tsx')

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>
-- 
cgit v1.2.3


From 885b9a938f9c5193ab0259502d4f63e981fc4a26 Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Mon, 14 Jul 2025 22:50:42 -0400
Subject: launch wiki in steam browser button

---
 src/components/UsageInstructions.tsx | 100 +++++++++++++++++++++--------------
 1 file changed, 60 insertions(+), 40 deletions(-)

(limited to 'src/components/UsageInstructions.tsx')

diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx
index 3df3d78..277f685 100644
--- a/src/components/UsageInstructions.tsx
+++ b/src/components/UsageInstructions.tsx
@@ -1,4 +1,5 @@
-import { PanelSectionRow } from "@decky/ui";
+import { PanelSectionRow, ButtonItem } from "@decky/ui";
+import { FaExternalLinkAlt } from "react-icons/fa";
 
 interface ConfigType {
   enableLsfg: boolean;
@@ -42,51 +43,70 @@ export function UsageInstructions({ config }: UsageInstructionsProps) {
     
     return envVars.length > 0 ? `${envVars.join(" ")} %command%` : "%command%";
   };
+
+  const handleWikiClick = () => {
+    window.open("https://github.com/PancakeTAS/lsfg-vk/wiki", "_blank");
+  };
+
   return (
-    <PanelSectionRow>
-      <div
-        style={{
-          fontSize: "13px",
-          marginTop: "12px",
-          padding: "8px",
-          backgroundColor: "rgba(255, 255, 255, 0.05)",
-          borderRadius: "4px"
-        }}
-      >
-        <div style={{ fontWeight: "bold", marginBottom: "6px" }}>
-          Usage Instructions:
-        </div>
-        <div style={{ marginBottom: "4px" }}>
-          Option 1: Use the lsfg script (recommended):
-        </div>
+    <>
+      <PanelSectionRow>
         <div
           style={{
-            fontFamily: "monospace",
-            backgroundColor: "rgba(0, 0, 0, 0.3)",
-            padding: "4px",
-            borderRadius: "2px",
-            fontSize: "12px",
-            marginBottom: "6px"
+            fontSize: "13px",
+            marginTop: "12px",
+            padding: "8px",
+            backgroundColor: "rgba(255, 255, 255, 0.05)",
+            borderRadius: "4px"
           }}
         >
-          ~/lsfg %command%
-        </div>
-        <div style={{ marginBottom: "4px" }}>
-          Option 2: Manual environment variables:
+          <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>
         </div>
-        <div
-          style={{
-            fontFamily: "monospace",
-            backgroundColor: "rgba(0, 0, 0, 0.3)",
-            padding: "4px",
-            borderRadius: "2px",
-            fontSize: "12px",
-            marginBottom: "6px"
-          }}
+      </PanelSectionRow>
+
+      <PanelSectionRow>
+        <ButtonItem
+          layout="below"
+          onClick={handleWikiClick}
         >
-          {buildManualEnvVars()}
-        </div>
-      </div>
-    </PanelSectionRow>
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <FaExternalLinkAlt />
+            <div>LSFG-VK Wiki</div>
+          </div>
+        </ButtonItem>
+      </PanelSectionRow>
+    </>
   );
 }
-- 
cgit v1.2.3


From 171959709a49899bdd1555cd07de1ab323a18ddb Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Mon, 14 Jul 2025 22:57:38 -0400
Subject: separate wiki button into component

---
 src/components/UsageInstructions.tsx | 20 +++-----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

(limited to 'src/components/UsageInstructions.tsx')

diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx
index 277f685..a826d3d 100644
--- a/src/components/UsageInstructions.tsx
+++ b/src/components/UsageInstructions.tsx
@@ -1,5 +1,5 @@
-import { PanelSectionRow, ButtonItem } from "@decky/ui";
-import { FaExternalLinkAlt } from "react-icons/fa";
+import { PanelSectionRow } from "@decky/ui";
+import { WikiButton } from "./WikiButton";
 
 interface ConfigType {
   enableLsfg: boolean;
@@ -44,10 +44,6 @@ export function UsageInstructions({ config }: UsageInstructionsProps) {
     return envVars.length > 0 ? `${envVars.join(" ")} %command%` : "%command%";
   };
 
-  const handleWikiClick = () => {
-    window.open("https://github.com/PancakeTAS/lsfg-vk/wiki", "_blank");
-  };
-
   return (
     <>
       <PanelSectionRow>
@@ -96,17 +92,7 @@ export function UsageInstructions({ config }: UsageInstructionsProps) {
         </div>
       </PanelSectionRow>
 
-      <PanelSectionRow>
-        <ButtonItem
-          layout="below"
-          onClick={handleWikiClick}
-        >
-          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-            <FaExternalLinkAlt />
-            <div>LSFG-VK Wiki</div>
-          </div>
-        </ButtonItem>
-      </PanelSectionRow>
+      <WikiButton />
     </>
   );
 }
-- 
cgit v1.2.3


From ec4541dd78f4e2a58b679b20740f323d8ce76698 Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Tue, 15 Jul 2025 13:11:06 -0400
Subject: add disable_vkbasalt=1 defaulted, hidden ui to expose to users later
 if desired

---
 src/components/UsageInstructions.tsx | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'src/components/UsageInstructions.tsx')

diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx
index a826d3d..ca9ddd2 100644
--- a/src/components/UsageInstructions.tsx
+++ b/src/components/UsageInstructions.tsx
@@ -8,6 +8,7 @@ interface ConfigType {
   hdr: boolean;
   perfMode: boolean;
   immediateMode: boolean;
+  disableVkbasalt: boolean;
 }
 
 interface UsageInstructionsProps {
@@ -41,6 +42,10 @@ export function UsageInstructions({ config }: UsageInstructionsProps) {
       envVars.push("MESA_VK_WSI_PRESENT_MODE=immediate");
     }
     
+    if (config.disableVkbasalt) {
+      envVars.push("DISABLE_VKBASALT=1");
+    }
+    
     return envVars.length > 0 ? `${envVars.join(" ")} %command%` : "%command%";
   };
 
-- 
cgit v1.2.3