Merge pull request #103 from moda20/Improvement/UI-UX-improvements

[MAIN-IMP] UI/UX improvements: Keyboard shortcuts and navigation enhancements

Author: moda20

package.json

@@ -43,6 +43,7 @@
     "@radix-ui/react-tooltip": "^1.1.3",
     "@reduxjs/toolkit": "^2.0.1",
     "@shadcn/ui": "^0.0.4",
+    "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-table": "^8.20.5",
     "@tanstack/react-virtual": "^3.13.18",
@@ -54,6 +55,7 @@
     "cronstrue": "^2.50.0",
     "date-fns": "^4.1.0",
     "framer-motion": "^12.16.0",
+    "fuse.js": "^7.4.0",
     "history": "^5.3.0",
     "js-cookie": "^3.0.5",
     "lucide": "^0.474.0",
@@ -64,7 +66,7 @@
     "react-day-picker": "^9.14.0",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.53.1",
-    "react-hotkeys-hook": "^4.6.1",
+    "react-hotkeys-hook": "^5.3.2",
     "react-js-cron": "^5.0.1",
     "react-redux": "^9.1.0",
     "react-router": "^7.13.1",
@@ -76,6 +78,7 @@
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.91.4",
+    "@tanstack/react-hotkeys-devtools": "^0.7.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",

src/app/dashboard/mainPage.tsx

@@ -21,17 +21,9 @@ import {
   routes,
   currentRoute,
   RouteObject,
-  config,
-  setConfigItem,
 } from "@/app/reducers/uiReducer"
-import { useEffect, useRef, useState } from "react"
-import SheetActionDialog from "@/components/sheet-action-dialog"
-import { Button } from "@/components/ui/button"
-import { CogIcon, DeleteIcon, SaveIcon } from "lucide-react"
-import { Label } from "@/components/ui/label"
-import { Input } from "@/components/ui/input"
-import { PlayIcon } from "@radix-ui/react-icons"
-import { toast } from "@/hooks/use-toast"
+import { useEffect } from "react"
+
 import DrawerMenuConfigurator from "@/components/custom/DrawerMenuConfigurator"
 import SearchBar from "@/components/custom/SearchBar"
 import JobsStatusCount from "@/components/custom/dashboard/JobsStatusCount"

src/app/reducers/uiReducer.ts

@@ -15,6 +15,7 @@ export interface RouteObject {
   url: string
   active?: boolean
   items?: Array<RouteObject>
+  parent?: RouteObject
 }
 export interface UISliceState {
   toasts: Array<ToastObject>

src/components/confirmationDialogAction.tsx

@@ -14,6 +14,7 @@ import type * as React from "react"
 import type { VariantProps } from "class-variance-authority"
 import useDialogueManager from "@/hooks/useDialogManager"
 import { isValidElement, useCallback, useRef } from "react"
+import { useHotkeys } from "react-hotkeys-hook"
 
 export enum ConfirmationDialogActionType {
   CONFIRM,
@@ -41,6 +42,19 @@ export default function ConfirmationDialogAction(
   const { isDialogOpen, setDialogState } = useDialogueManager()
   const cancelButtonRef = useRef<HTMLButtonElement>(null)
 
+  useHotkeys("meta+enter", () => {
+    if (!props.disableConfirm && isDialogOpen) {
+      handleConfirm()
+    }
+  })
+
+  const handleConfirm = useCallback(() => {
+    return props.takeAction(
+      ConfirmationDialogActionType.CONFIRM,
+      ...(props?.extraTakeActionArgs ?? []),
+    )
+  }, [props])
+
   const setDialogStateWithFocus = useCallback(
     (open: boolean, onOpenChange?: (open: boolean) => void) => {
       setDialogState(open, onOpenChange)
@@ -68,7 +82,7 @@ export default function ConfirmationDialogAction(
           e.preventDefault()
           setDialogState(false, props.onOpenChange)
         }}
-        className={"text-foreground bg-background"}
+        className={"text-foreground bg-background border-border border-2"}
       >
         <AlertDialogHeader>
           <AlertDialogTitle>{props.title}</AlertDialogTitle>
@@ -97,18 +111,13 @@ export default function ConfirmationDialogAction(
           <AlertDialogAction
             ref={cancelButtonRef}
             title={props.confirmText ?? "Confirm"}
-            onClick={() =>
-              props.takeAction(
-                ConfirmationDialogActionType.CONFIRM,
-                ...(props?.extraTakeActionArgs ?? []),
-              )
-            }
+            onClick={handleConfirm}
             variant={props.confirmVariant}
             disabled={props.disableConfirm}
             autoFocus={true}
             tabIndex={0}
           >
-            {props.confirmText ?? "Confirm"}
+            {props.confirmText ?? "Confirm"} (⌘↩)
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

src/components/custom/DrawerMenuConfigurator.tsx

@@ -7,15 +7,13 @@ import SheetActionDialog from "@/components/sheet-action-dialog"
 import { config, setConfigItem } from "@/app/reducers/uiReducer"
 import { toast } from "@/hooks/use-toast"
 import { useAppDispatch, useAppSelector } from "@/app/hooks"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import ConfirmationDialogAction, {
   ConfirmationDialogActionType,
 } from "@/components/confirmationDialogAction"
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
-import { jobActions } from "@/features/jobsTable/interfaces"
 import { useHotkeys } from "react-hotkeys-hook"
-import HotKeyButton from "@/components/custom/HotKeyButton"
 import { verifyUserConnection } from "@/utils/authUtils"
+import { ButtonWithTooltip } from "@/components/custom/general/ButtonWithTooltip"
 
 export default function DrawerMenuConfigurator() {
   useHotkeys(
@@ -63,6 +61,27 @@ export default function DrawerMenuConfigurator() {
     })
     sideBarTriggerRef.current.click()
   }
+  const hotKLeySaveTargetRef = useHotkeys<HTMLInputElement>(
+    ["meta+enter"],
+    () => {
+      return updateSavedTargets(targetServer)
+    },
+    {
+      enableOnFormTags: true,
+      enableOnContentEditable: true,
+    },
+  )
+
+  const handleTargetServerRemoval = useCallback(
+    (action: ConfirmationDialogActionType, target) => {
+      if (action === ConfirmationDialogActionType.CANCEL) {
+        return
+      }
+
+      return removeSavedTarget(target)
+    },
+    [savedConfig],
+  )
 
   return (
     <SheetActionDialog
@@ -90,6 +109,7 @@ export default function DrawerMenuConfigurator() {
               Current
             </Label>
             <Input
+              ref={hotKLeySaveTargetRef}
               name={"target"}
               placeholder="..."
               className="w-6/12"
@@ -121,7 +141,7 @@ export default function DrawerMenuConfigurator() {
             savedConfig.savedTargets.map((e, i) => (
               <div
                 className="flex items-center gap-4 justify-between w-full min-w-0 flex-1 overflow-hidden"
-                key={i}
+                key={e + i}
               >
                 <div
                   className={
@@ -146,26 +166,27 @@ export default function DrawerMenuConfigurator() {
                     }}
                     title={`Delete Target server : ${e}`}
                     description={
-                      "This action will delete the target server from your local browser storage. You can add it back again anytime"
+                      "This action will delete the target server from your local browser storage"
                     }
-                    takeAction={action => {
-                      if (action === ConfirmationDialogActionType.CANCEL) return
-                      removeSavedTarget(e)
-                    }}
+                    extraTakeActionArgs={[e]}
+                    takeAction={handleTargetServerRemoval}
                     confirmVariant="destructive"
+                    autoFocus={true}
                   >
                     <Button variant={"destructive"} size={"icon"}>
                       <DeleteIcon />
                     </Button>
                   </ConfirmationDialogAction>
-                  <HotKeyButton
-                    hotKey={["ctrl+alt+" + (i + 1), "meta+alt+" + (i + 1)]}
+                  <ButtonWithTooltip
+                    tooltipContent={`(⌘⌥${i + 1})`}
+                    keyBinding={["ctrl+alt+" + (i + 1), "meta+alt+" + (i + 1)]}
+                    hideKeyboardShortcut={true}
                     variant={"default"}
                     size={"icon"}
                     onClick={() => setNewTargetServer(e)}
                   >
                     <PlayIcon />
-                  </HotKeyButton>
+                  </ButtonWithTooltip>
                 </div>
               </div>
             ))}