From e6cde492477e227e79420f5f8b06f06b5c89d783 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Fri, 11 Jul 2025 20:37:41 -0400
Subject: [PATCH] feat: Add KeyboardShortcutHint component for displaying
 keyboard shortcuts on non-mobile devices

---
 .../common/KeyboardShortcutHint.jsx           | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 src/components/common/KeyboardShortcutHint.jsx

diff --git a/src/components/common/KeyboardShortcutHint.jsx b/src/components/common/KeyboardShortcutHint.jsx
new file mode 100644
index 0000000..9fcaef9
--- /dev/null
+++ b/src/components/common/KeyboardShortcutHint.jsx
@@ -0,0 +1,71 @@
+import { Chip } from '@mui/joy'
+import PropTypes from 'prop-types'
+
+/**
+ * A component that displays keyboard shortcut hints as small chips
+ * Only visible on non-mobile devices
+ * Supports platform-specific shortcuts (Cmd on Mac, Ctrl on Windows) and Shift key
+ */
+function KeyboardShortcutHint({
+  shortcut,
+  show = true,
+  withCmd = true,
+  withShift = false,
+  sx = {},
+  ...props
+}) {
+  if (!show) return null
+
+  const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
+  const modifierKey = isMac ? '⌘' : 'Ctrl'
+
+  // Build the shortcut display string
+  let displayShortcut = ''
+  if (withCmd) {
+    displayShortcut += modifierKey
+  }
+  if (withShift) {
+    displayShortcut += (displayShortcut ? ' + ' : '') + 'Shift'
+  }
+  if (shortcut) {
+    displayShortcut += (displayShortcut ? ' + ' : '') + shortcut
+  }
+
+  return (
+    <Chip
+      size='sm'
+      variant='outlined'
+      color='neutral'
+      sx={{
+        fontSize: '0.75rem',
+        maxHeight: '1.5rem',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontWeight: '500',
+        letterSpacing: '0.025em',
+        border: '1px solid',
+        borderColor: 'neutral.300',
+        // backgroundColor: 'background.surface',
+        color: 'text.secondary',
+        borderRadius: '8px',
+        px: 0.5,
+        py: 0.125,
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
+        display: { xs: 'none', md: 'inline-flex' }, // Hide on mobile
+        ...sx,
+      }}
+      {...props}
+    >
+      {displayShortcut}
+    </Chip>
+  )
+}
+
+KeyboardShortcutHint.propTypes = {
+  shortcut: PropTypes.string.isRequired,
+  show: PropTypes.bool,
+  withCmd: PropTypes.bool,
+  withShift: PropTypes.bool,
+  sx: PropTypes.object,
+}
+
+export default KeyboardShortcutHint