From f91b011c5eb77a3fe23d94d149e46026c33a0246 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 1 Aug 2026 14:18:00 +0100
Subject: [PATCH] Add keyboard shortcuts to EditButtons for improved editing
 experience

- Integrated KeyboardShortcut component to the EditButtons, allowing users to trigger update and cancel actions using 'ALT + S' and 'ALT + C' respectively during editing.
- Added a shortcut for starting editing with 'ALT + E' when not in editing mode, enhancing user interaction and accessibility.
- Updated button states to ensure actions are only available when not loading or disabled, improving overall workflow efficiency.
---
 .../Dashboard/common/EditButtons.jsx          | 67 ++++++++++++++-----
 1 file changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/components/Dashboard/common/EditButtons.jsx b/src/components/Dashboard/common/EditButtons.jsx
index 6a61c68..e059353 100644
--- a/src/components/Dashboard/common/EditButtons.jsx
+++ b/src/components/Dashboard/common/EditButtons.jsx
@@ -2,6 +2,7 @@ import { Button, Space } from 'antd'
 import CheckIcon from '../../Icons/CheckIcon.jsx'
 import XMarkIcon from '../../Icons/XMarkIcon.jsx'
 import EditIcon from '../../Icons/EditIcon.jsx'
+import KeyboardShortcut from './KeyboardShortcut.jsx'
 import PropTypes from 'prop-types'
 
 const EditButtons = ({
@@ -15,26 +16,56 @@ const EditButtons = ({
 }) => {
   return isEditing ? (
     <Space size='small'>
-      <Button
-        icon={<CheckIcon />}
-        type='primary'
-        onClick={handleUpdate}
-        loading={loading}
-        disabled={loading || !formValid || disabled}
-      />
-      <Button
-        icon={<XMarkIcon />}
-        onClick={cancelEditing}
-        disabled={loading || disabled}
-      />
+      <KeyboardShortcut
+        shortcut='alt+s'
+        hint='ALT S'
+        onTrigger={() => {
+          if (!disabled && !loading && formValid) {
+            handleUpdate()
+          }
+        }}
+      >
+        <Button
+          icon={<CheckIcon />}
+          type='primary'
+          onClick={handleUpdate}
+          loading={loading}
+          disabled={loading || !formValid || disabled}
+        />
+      </KeyboardShortcut>
+      <KeyboardShortcut
+        shortcut='alt+c'
+        hint='ALT C'
+        onTrigger={() => {
+          if (!disabled && !loading) {
+            cancelEditing()
+          }
+        }}
+      >
+        <Button
+          icon={<XMarkIcon />}
+          onClick={cancelEditing}
+          disabled={loading || disabled}
+        />
+      </KeyboardShortcut>
     </Space>
   ) : (
-    <Button
-      icon={<EditIcon />}
-      onClick={startEditing}
-      loading={loading}
-      disabled={disabled || loading}
-    />
+    <KeyboardShortcut
+      shortcut='alt+e'
+      hint='ALT E'
+      onTrigger={() => {
+        if (!disabled && !loading) {
+          startEditing()
+        }
+      }}
+    >
+      <Button
+        icon={<EditIcon />}
+        onClick={startEditing}
+        loading={loading}
+        disabled={disabled || loading}
+      />
+    </KeyboardShortcut>
   )
 }