feat: collapsible config section above workarounds

1 files changed, 107 insertions, 47 deletions

diff --git a/src/components/ConfigurationSection.tsx b/src/components/ConfigurationSection.tsx
index b098b32..632c3a0 100644
--- a/src/components/ConfigurationSection.tsx
+++ b/src/components/ConfigurationSection.tsx
@@ -14,13 +14,23 @@ interface ConfigurationSectionProps {
   onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number | string) => Promise<void>;
 }
 
-const WORKAROUNDS_COLLAPSED_KEY = 'lsfg-workarounds-collapsed';
+const WORKAROUNDS_COLLAPSED_KEY = "lsfg-workarounds-collapsed";
+const CONFIG_COLLAPSED_KEY = "lsfg-config-collapsed";
 
 export function ConfigurationSection({
   config,
   onConfigChange
 }: ConfigurationSectionProps) {
   // Initialize with localStorage value, fallback to true if not found
+  const [configCollapsed, setConfigCollapsed] = useState(() => {
+    try {
+      const saved = localStorage.getItem(CONFIG_COLLAPSED_KEY);
+      return saved !== null ? JSON.parse(saved) : false;
+    } catch {
+      return false;
+    }
+  });
+
   const [workaroundsCollapsed, setWorkaroundsCollapsed] = useState(() => {
     try {
       const saved = localStorage.getItem(WORKAROUNDS_COLLAPSED_KEY);
@@ -33,9 +43,17 @@ export function ConfigurationSection({
   // Persist workarounds collapse state to localStorage
   useEffect(() => {
     try {
+      localStorage.setItem(CONFIG_COLLAPSED_KEY, JSON.stringify(configCollapsed));
+    } catch (error) {
+      console.warn("Failed to save config collapse state:", error);
+    }
+  }, [configCollapsed]);
+
+  useEffect(() => {
+    try {
       localStorage.setItem(WORKAROUNDS_COLLAPSED_KEY, JSON.stringify(workaroundsCollapsed));
     } catch (error) {
-      console.warn('Failed to save workarounds collapse state:', error);
+      console.warn("Failed to save workarounds collapse state:", error);
     }
   }, [workaroundsCollapsed]);
 
@@ -43,6 +61,8 @@ export function ConfigurationSection({
     <>
       <style>
         {`
+        .LSFG_ConfigCollapseButton_Container > div > div > div > button,
+        .LSFG_ConfigCollapseButton_Container > div > div > div > div > button,
         .LSFG_WorkaroundsCollapseButton_Container > div > div > div > button {
           height: 10px !important;
         }
@@ -52,59 +72,99 @@ export function ConfigurationSection({
         `}
       </style>
 
-      {/* FPS Multiplier */}
-      <FpsMultiplierControl config={config} onConfigChange={onConfigChange} />
-
+      {/* Config Section */}
       <PanelSectionRow>
-        <SliderField
-          label={`Flow Scale (${Math.round(config.flow_scale * 100)}%)`}
-          description="Lowers internal motion estimation resolution, improving performance slightly"
-          value={config.flow_scale}
-          min={0.25}
-          max={1.0}
-          step={0.01}
-          onChange={(value) => onConfigChange(FLOW_SCALE, value)}
-        />
+        <div
+          style={{
+            fontSize: "14px",
+            fontWeight: "bold",
+            marginTop: "16px",
+            marginBottom: "8px",
+            borderBottom: "1px solid rgba(255, 255, 255, 0.2)",
+            paddingBottom: "4px",
+            color: "white"
+          }}
+        >
+          Config
+        </div>
       </PanelSectionRow>
 
       <PanelSectionRow>
-        <SliderField
-          label={`Base FPS Cap${config.dxvk_frame_rate > 0 ? ` (${config.dxvk_frame_rate} FPS)` : ' (Off)'}`}
-          description="Base framerate cap for DirectX games, before frame multiplier. (Requires game restart to apply)"
-          value={config.dxvk_frame_rate}
-          min={0}
-          max={60}
-          step={1}
-          onChange={(value) => onConfigChange(DXVK_FRAME_RATE, value)}
-        />
+        <div className="LSFG_ConfigCollapseButton_Container">
+          <ButtonItem
+            layout="below"
+            bottomSeparator={configCollapsed ? "standard" : "none"}
+            onClick={() => setConfigCollapsed(!configCollapsed)}
+          >
+            {configCollapsed ? (
+              <RiArrowDownSFill
+                style={{ transform: "translate(0, -13px)", fontSize: "1.5em" }}
+              />
+            ) : (
+              <RiArrowUpSFill
+                style={{ transform: "translate(0, -12px)", fontSize: "1.5em" }}
+              />
+            )}
+          </ButtonItem>
+        </div>
       </PanelSectionRow>
 
-      <PanelSectionRow>
-        <ToggleField
-          label={`Present Mode (${(config.experimental_present_mode || "fifo") === "fifo" ? "FIFO - VSync" : "Mailbox"})`}
-          description="Toggle between FIFO - VSync (default) and Mailbox presentation modes for better performance or compatibility"
-          checked={(config.experimental_present_mode || "fifo") === "fifo"}
-          onChange={(value) => onConfigChange(EXPERIMENTAL_PRESENT_MODE, value ? "fifo" : "mailbox")}
-        />
-      </PanelSectionRow>
+      {!configCollapsed && (
+        <>
+          <FpsMultiplierControl config={config} onConfigChange={onConfigChange} />
 
-      <PanelSectionRow>
-        <ToggleField
-          label="Performance Mode"
-          description="Uses a lighter model for FG (Recommended for most games)"
-          checked={config.performance_mode}
-          onChange={(value) => onConfigChange(PERFORMANCE_MODE, value)}
-        />
-      </PanelSectionRow>
+          <PanelSectionRow>
+            <SliderField
+              label={`Flow Scale (${Math.round(config.flow_scale * 100)}%)`}
+              description="Lowers internal motion estimation resolution, improving performance slightly"
+              value={config.flow_scale}
+              min={0.25}
+              max={1.0}
+              step={0.01}
+              onChange={(value) => onConfigChange(FLOW_SCALE, value)}
+            />
+          </PanelSectionRow>
 
-      <PanelSectionRow>
-        <ToggleField
-          label="HDR Mode"
-          description="Enables HDR mode (only for games that support HDR)"
-          checked={config.hdr_mode}
-          onChange={(value) => onConfigChange(HDR_MODE, value)}
-        />
-      </PanelSectionRow>
+          <PanelSectionRow>
+            <SliderField
+              label={`Base FPS Cap${config.dxvk_frame_rate > 0 ? ` (${config.dxvk_frame_rate} FPS)` : " (Off)"}`}
+              description="Base framerate cap for DirectX games, before frame multiplier. (Requires game restart to apply)"
+              value={config.dxvk_frame_rate}
+              min={0}
+              max={60}
+              step={1}
+              onChange={(value) => onConfigChange(DXVK_FRAME_RATE, value)}
+            />
+          </PanelSectionRow>
+
+          <PanelSectionRow>
+            <ToggleField
+              label={`Present Mode (${(config.experimental_present_mode || "fifo") === "fifo" ? "FIFO - VSync" : "Mailbox"})`}
+              description="Toggle between FIFO - VSync (default) and Mailbox presentation modes for better performance or compatibility"
+              checked={(config.experimental_present_mode || "fifo") === "fifo"}
+              onChange={(value) => onConfigChange(EXPERIMENTAL_PRESENT_MODE, value ? "fifo" : "mailbox")}
+            />
+          </PanelSectionRow>
+
+          <PanelSectionRow>
+            <ToggleField
+              label="Performance Mode"
+              description="Uses a lighter model for FG (Recommended for most games)"
+              checked={config.performance_mode}
+              onChange={(value) => onConfigChange(PERFORMANCE_MODE, value)}
+            />
+          </PanelSectionRow>
+
+          <PanelSectionRow>
+            <ToggleField
+              label="HDR Mode"
+              description="Enables HDR mode (only for games that support HDR)"
+              checked={config.hdr_mode}
+              onChange={(value) => onConfigChange(HDR_MODE, value)}
+            />
+          </PanelSectionRow>
+        </>
+      )}
 
       {/* Workarounds Section */}
       <PanelSectionRow>