feat: impl shortcuts

Author: hlhr202

crates/openconnect-gui/src/App.tsx

@@ -20,6 +20,7 @@ import { ToastContainer } from "react-toastify";
 import connected from "./assets/connected-animate.json";
 import Lottie from "lottie-react";
 import { AboutModal } from "./About";
+import { useKey } from "react-use";
 
 enum EStatus {
   Initialized = "INITIALIZED",
@@ -46,6 +47,19 @@ function App() {
   const { selectedServer } = useStoredConfigs();
   const [isAboutOpened, setIsAboutOpened] = useState(false);
 
+  useKey(
+    "Enter",
+    () => {
+      if (vpnStatus.status === EStatus.Connected) {
+        handleDisconnect();
+      } else if (selectedServer) {
+        handleConnect();
+      }
+    },
+    undefined,
+    [vpnStatus, selectedServer]
+  );
+
   const handleConnect = useCallback(async () => {
     if (selectedServer) {
       try {
@@ -160,7 +174,7 @@ function App() {
                 className="m-3 w-[50%]"
                 onClick={handleDisconnect}
               >
-                Disconnect
+                Disconnect [Enter]
               </Button>
             )}
             {vpnStatus.status === EStatus.Disconnected ||
@@ -171,7 +185,7 @@ function App() {
                 className="m-3 w-full"
                 onClick={handleConnect}
               >
-                Connect
+                Connect [Enter]
               </Button>
             ) : null}
           </CardFooter>

crates/openconnect-gui/src/ServerSelector.tsx

@@ -8,6 +8,7 @@ import {
 import { FC, PropsWithChildren, useEffect } from "react";
 import { ServerEditorModal } from "./ServerEditorModal";
 import { useStoredConfigs } from "./state";
+import { useKey } from "react-use";
 
 export const ServerSelector = () => {
   const {
@@ -20,6 +21,35 @@ export const ServerSelector = () => {
 
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
+  useKey(
+    "Tab",
+    (evt) => {
+      evt.preventDefault();
+      if (serverList.length) {
+        const currentIndex = serverList.findIndex(
+          ({ name }) => name === selectedName
+        );
+        if (currentIndex !== -1) {
+          const nextIndex =
+            currentIndex === serverList.length - 1 ? 0 : currentIndex + 1;
+          const next = serverList[nextIndex].name;
+          setSelectedName(next);
+        }
+      }
+    },
+    undefined,
+    [serverList, selectedName, setSelectedName]
+  );
+
+  useKey(
+    "m",
+    () => {
+      onOpen();
+    },
+    undefined,
+    [onOpen]
+  );
+
   useEffect(() => {
     getStoredConfigs();
   }, [getStoredConfigs]);
@@ -49,7 +79,7 @@ export const ServerSelector = () => {
           </Select>
         )}
         <Button size="md" color="primary" className="ml-2" onClick={onOpen}>
-          Manage Server
+          Manage Server [M]
         </Button>
       </div>
       <Divider className="mt-3 mb-3"></Divider>