Change shortcuts

docs/shortcuts.md

@@ -1,11 +1,11 @@
 ## Available Shortcuts
 
-| Key                             | Description                  |
-| ------------------------------- | ---------------------------- |
-| <kbd>shift</kbd> + <kbd>s</kbd> | Open Settings Modal          |
-| <kbd>R</kbd> or <kbd>r</kbd>    | Refresh data                 |
-| <kbd>shift</kbd> + <kbd>l</kbd> | Switch display to line chart |
-| <kbd>shift</kbd> + <kbd>b</kbd> | Switch display to bar chart  |
-| <kbd>shift</kbd> + <kbd>t</kbd> | Switch display to table      |
-| <kbd>&larr;</kbd>               | Switch stats to previous     |
-| <kbd>&rarr;</kbd>               | Switch stats to next         |
+| Key                            | Description                  |
+| ------------------------------ | ---------------------------- |
+| <kbd>ctrl</kbd> + <kbd>s</kbd> | Open Settings Modal          |
+| <kbd>ctrl</kbd> + <kbd>r</kbd> | Refresh data                 |
+| <kbd>ctrl</kbd> + <kbd>l</kbd> | Switch display to line chart |
+| <kbd>ctrl</kbd> + <kbd>b</kbd> | Switch display to bar chart  |
+| <kbd>ctrl</kbd> + <kbd>t</kbd> | Switch display to table      |
+| <kbd>&larr;</kbd>              | Switch stats to previous     |
+| <kbd>&rarr;</kbd>              | Switch stats to next         |

renderer/components/DataDisplay/index.js

@@ -44,9 +44,9 @@ const Chart = ({
 	};
 
 	// Shortcuts
-	useHotkeys("shift+b", () => setStyle("bar chart"));
-	useHotkeys("shift+l", () => setStyle("line chart"));
-	useHotkeys("shift+t", () => setStyle("table"));
+	useHotkeys("ctrl+b", () => setStyle("bar chart"));
+	useHotkeys("ctrl+l", () => setStyle("line chart"));
+	useHotkeys("ctrl+t", () => setStyle("table"));
 
 	return (
 		<>

renderer/components/NavigationBar/index.js

@@ -19,6 +19,7 @@ import Settings from "../Settings";
 
 import CustomIntervalModal from "./CustomIntervalModal";
 
+import { useHotkeys } from "react-hotkeys-hook";
 import { useVnStat } from "@Context/vnStat";
 import { useConfig } from "@Context/configration";
 
@@ -62,21 +63,13 @@ export default function NavigationBar() {
 		});
 	}, []);
 
-	function PressKeyHandler(e) {
-		if (e.key === "R" || e.key === "r") {
-			reloadConfigs();
-			reloadingTrafficData();
-			router.replace(router.asPath);
-		}
-	}
-
-	useEffect(() => {
-		window.addEventListener("keydown", PressKeyHandler);
-
-		return () => window.removeEventListener("keydown", PressKeyHandler); // Cleanup
-	}, [PressKeyHandler]);
+	useHotkeys("ctrl+r", () => {
+		reloadConfigs();
+		reloadingTrafficData();
+		router.replace(router.asPath);
+	});
 
-	// For debugging
+	// ! For debugging
 	// useEffect(() => {
 	// 	console.log(Page);
 	// 	console.log(router.pathname, router.asPath);

renderer/components/Settings/index.js

@@ -64,7 +64,7 @@ export default function Settings({ children }) {
 	} = useVnStat();
 	const { config } = useConfig();
 
-	useHotkeys("shift+s", onOpen);
+	useHotkeys("ctrl+s", onOpen);
 
 	return (
 		<>