feat: Add scroll sensitivity configuration and improved wheel event handling (#242)

- Implement scroll sensitivity settings with low, default, and high modes
- Add RPC methods for getting and setting scroll sensitivity
- Enhance wheel event handling with device-specific sensitivity and clamping
- Create a new device settings store for managing scroll and trackpad parameters
- Update mouse settings route to include scroll sensitivity selection

ui/src/routes/devices.$id.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { cx } from "@/cva.config";
 import {
+  DeviceSettingsState,
   HidState,
   UpdateState,
+  useDeviceSettingsStore,
   useDeviceStore,
   useHidStore,
   useMountMediaStore,
@@ -428,18 +430,6 @@ export default function KvmIdRoute() {
     }
   }, [kvmTerminal, peerConnection, serialConsole]);
 
-  useEffect(() => {
-    kvmTerminal?.addEventListener("message", e => {
-      console.log(e.data);
-    });
-
-    return () => {
-      kvmTerminal?.removeEventListener("message", e => {
-        console.log(e.data);
-      });
-    };
-  }, [kvmTerminal]);
-
   const outlet = useOutlet();
   const location = useLocation();
   const onModalClose = useCallback(() => {
@@ -464,6 +454,21 @@ export default function KvmIdRoute() {
     });
   }, [appVersion, send, setAppVersion, setSystemVersion]);
 
+  const setScrollSensitivity = useDeviceSettingsStore(
+    state => state.setScrollSensitivity,
+  );
+
+  // Initialize device settings
+  useEffect(
+    function initializeDeviceSettings() {
+      send("getScrollSensitivity", {}, resp => {
+        if ("error" in resp) return;
+        setScrollSensitivity(resp.result as DeviceSettingsState["scrollSensitivity"]);
+      });
+    },
+    [send, setScrollSensitivity],
+  );
+
   return (
     <FeatureFlagProvider appVersion={appVersion}>
       {!outlet && otaState.updating && (