diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index 9548bc8a..dd5d7a5a 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -73,6 +73,7 @@ import NoteViewerModal from '../Modals/Inputs/NoteViewerModal' import LoadingComponent from '../components/Loading.jsx' import RichTextEditor from '../components/RichTextEditor.jsx' import SubTasks from '../components/SubTask.jsx' +import KeyboardShortcutHint from '../../components/common/KeyboardShortcutHint' import TimePassedCard from './TimePassedCard.jsx' import TimerSplitButton from './TimerSplitButton.jsx' @@ -85,6 +86,7 @@ const ChoreView = () => { const [infoCards, setInfoCards] = useState([]) const { choreId } = useParams() const [note, setNote] = useState(null) + const [showKeyboardShortcuts, setShowKeyboardShortcuts] = useState(false) const queryClient = useQueryClient() const { showSuccess, showError, showUndo } = useNotification() @@ -126,6 +128,38 @@ const ChoreView = () => { } }, [choreData, circleMembersData]) + useEffect(() => { + const handleKeyDown = event => { + const isHoldingCmd = event.ctrlKey || event.metaKey + + // Show keyboard shortcuts when holding Cmd/Ctrl + if (isHoldingCmd) { + setShowKeyboardShortcuts(true) + } + + // Cmd/Ctrl + Escape key to cancel + if (event.key === 'Escape' && (event.ctrlKey || event.metaKey)) { + event.preventDefault() + window.history.back() + return + } + } + + const handleKeyUp = event => { + if (event.key === 'Control' || event.key === 'Meta') { + setShowKeyboardShortcuts(false) + } + } + + window.addEventListener('keydown', handleKeyDown) + window.addEventListener('keyup', handleKeyUp) + + return () => { + window.removeEventListener('keydown', handleKeyDown) + window.removeEventListener('keyup', handleKeyUp) + } + }, []) + useEffect(() => { if (chore && performers?.length > 0) { generateInfoCards(chore) @@ -1118,6 +1152,36 @@ const ChoreView = () => { + + + ) }