From e66190df0b610b8735bd184347884b7ee5bd172d Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Wed, 12 Mar 2025 14:55:44 +0100
Subject: [PATCH] feat: Add feature flag for scroll sensitivity settings (#245)

- Integrate feature flag for scroll sensitivity configuration
- Conditionally render scroll sensitivity settings based on app version
- Update useEffect to only fetch scroll sensitivity when feature flag is enabled
---
 ui/src/routes/devices.$id.settings.mouse.tsx | 57 +++++++++++---------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/ui/src/routes/devices.$id.settings.mouse.tsx b/ui/src/routes/devices.$id.settings.mouse.tsx
index 9956ecb..c8c351a 100644
--- a/ui/src/routes/devices.$id.settings.mouse.tsx
+++ b/ui/src/routes/devices.$id.settings.mouse.tsx
@@ -10,6 +10,8 @@ import { useCallback, useEffect, useState } from "react";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { cx } from "../cva.config";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
+import { useFeatureFlag } from "../hooks/useFeatureFlag";
+import { FeatureFlag } from "../components/FeatureFlag";
 
 type ScrollSensitivity = "low" | "default" | "high";
 
@@ -21,6 +23,8 @@ export default function SettingsKeyboardMouseRoute() {
     state => state.setScrollSensitivity,
   );
 
+  const { isEnabled: isScrollSensitivityEnabled } = useFeatureFlag("0.3.8");
+
   const [jiggler, setJiggler] = useState(false);
 
   const [send] = useJsonRpc();
@@ -31,11 +35,13 @@ export default function SettingsKeyboardMouseRoute() {
       setJiggler(resp.result as boolean);
     });
 
-    send("getScrollSensitivity", {}, resp => {
-      if ("error" in resp) return;
-      setScrollSensitivity(resp.result as ScrollSensitivity);
-    });
-  }, [send, setScrollSensitivity]);
+    if (isScrollSensitivityEnabled) {
+      send("getScrollSensitivity", {}, resp => {
+        if ("error" in resp) return;
+        setScrollSensitivity(resp.result as ScrollSensitivity);
+      });
+    }
+  }, [isScrollSensitivityEnabled, send, setScrollSensitivity]);
 
   const handleJigglerChange = (enabled: boolean) => {
     send("setJigglerState", { enabled }, resp => {
@@ -82,25 +88,28 @@ export default function SettingsKeyboardMouseRoute() {
             onChange={e => setHideCursor(e.target.checked)}
           />
         </SettingsItem>
-        <SettingsItem
-          title="Scroll Sensitivity"
-          description="Adjust the scroll sensitivity"
-        >
-          <SelectMenuBasic
-            size="SM"
-            label=""
-            fullWidth
-            value={scrollSensitivity}
-            onChange={onScrollSensitivityChange}
-            options={
-              [
-                { label: "Low", value: "low" },
-                { label: "Default", value: "default" },
-                { label: "High", value: "high" },
-              ] as { label: string; value: ScrollSensitivity }[]
-            }
-          />
-        </SettingsItem>
+
+        <FeatureFlag minAppVersion="0.3.8" name="Scroll Sensitivity">
+          <SettingsItem
+            title="Scroll Sensitivity"
+            description="Adjust the scroll sensitivity"
+          >
+            <SelectMenuBasic
+              size="SM"
+              label=""
+              fullWidth
+              value={scrollSensitivity}
+              onChange={onScrollSensitivityChange}
+              options={
+                [
+                  { label: "Low", value: "low" },
+                  { label: "Default", value: "default" },
+                  { label: "High", value: "high" },
+                ] as { label: string; value: ScrollSensitivity }[]
+              }
+            />
+          </SettingsItem>
+        </FeatureFlag>
 
         <SettingsItem
           title="Jiggler"