From e4657cc69222af14f1c061a1298fd9a3bd12927b Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 1 Aug 2026 14:00:45 +0100
Subject: [PATCH] Add keyboard shortcuts to ObjectTableNavigationButtons for
 enhanced navigation

- Integrated KeyboardShortcut component to allow navigation using 'ALT + LEFT' and 'ALT + RIGHT' key combinations.
- Updated button handlers to trigger navigation actions based on keyboard shortcuts, improving user experience and accessibility.
- Ensured that navigation is only triggered when the buttons are not disabled and the relevant neighbors exist.
---
 .../common/ObjectTableNavigationButtons.jsx   | 41 ++++++++++++++-----
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx b/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx
index b04c843..e203d60 100644
--- a/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx
+++ b/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx
@@ -7,6 +7,7 @@ import PropTypes from 'prop-types'
 import { ApiServerContext } from '../context/ApiServerContext'
 import { AuthContext } from '../context/AuthContext'
 import { useTableStatePersistence } from '../context/TableStateContext'
+import KeyboardShortcut from './KeyboardShortcut.jsx'
 
 const ObjectTableNavigationButtons = ({
   disabled,
@@ -95,16 +96,36 @@ const ObjectTableNavigationButtons = ({
         <Divider type='vertical' style={{ margin: '0 4px', height: '18px' }} />
       )}
       <Space size='small'>
-        <Button
-          icon={<ArrowLeftIcon />}
-          onClick={handlePrevious}
-          disabled={disabled || loading || !neighbors.previous?._id}
-        />
-        <Button
-          icon={<ArrowRightIcon />}
-          onClick={handleNext}
-          disabled={disabled || loading || !neighbors.next?._id}
-        />
+        <KeyboardShortcut
+          shortcut='alt+arrowleft'
+          hint='ALT LEFT'
+          onTrigger={useCallback(() => {
+            if (!disabled && !loading && neighbors.previous?._id) {
+              handlePrevious()
+            }
+          }, [disabled, loading, neighbors.previous?._id])}
+        >
+          <Button
+            icon={<ArrowLeftIcon />}
+            onClick={handlePrevious}
+            disabled={disabled || loading || !neighbors.previous?._id}
+          />
+        </KeyboardShortcut>
+        <KeyboardShortcut
+          shortcut='alt+arrowright'
+          hint='ALT RIGHT'
+          onTrigger={useCallback(() => {
+            if (!disabled && !loading && neighbors.next?._id) {
+              handleNext()
+            }
+          }, [disabled, loading, neighbors.next?._id])}
+        >
+          <Button
+            icon={<ArrowRightIcon />}
+            onClick={handleNext}
+            disabled={disabled || loading || !neighbors.next?._id}
+          />
+        </KeyboardShortcut>
       </Space>
     </Flex>
   )