feat: Extend card action shortcuts

client/src/components/boards/Board/Board.jsx

@@ -12,6 +12,7 @@ import { BoardContexts, BoardViews } from '../../../constants/Enums';
 import KanbanContent from './KanbanContent';
 import FiniteContent from './FiniteContent';
 import EndlessContent from './EndlessContent';
+import ShortcutsProvider from './ShortcutsProvider';
 import CardModal from '../../cards/CardModal';
 import BoardActivitiesModal from '../../activities/BoardActivitiesModal';
 
@@ -53,7 +54,9 @@ const Board = React.memo(() => {
 
   return (
     <>
-      <Content />
+      <ShortcutsProvider>
+        <Content />
+      </ShortcutsProvider>
       {modalNode}
     </>
   );

client/src/components/boards/Board/ShortcutsProvider.jsx

@@ -0,0 +1,290 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { push } from '../../../lib/redux-router';
+import { useDidUpdate } from '../../../lib/hooks';
+
+import store from '../../../store';
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { isListArchiveOrTrash } from '../../../utils/record-helpers';
+import { isActiveTextElement } from '../../../utils/element-helpers';
+import { isModifierKeyPressed } from '../../../utils/event-helpers';
+import { BoardShortcutsContext } from '../../../contexts';
+import Paths from '../../../constants/Paths';
+import { BoardMembershipRoles, ListTypes } from '../../../constants/Enums';
+import CardActionsStep from '../../cards/CardActionsStep';
+
+const canEditCardName = (boardMembership, list) => {
+  if (isListArchiveOrTrash(list)) {
+    return false;
+  }
+
+  return boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR;
+};
+
+const canArchiveCard = (boardMembership, list) => {
+  if (list.type === ListTypes.ARCHIVE) {
+    return false;
+  }
+
+  return boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR;
+};
+
+const canUseCardMembers = (boardMembership, list) => {
+  if (isListArchiveOrTrash(list)) {
+    return false;
+  }
+
+  return boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR;
+};
+
+const canUseCardLabels = (boardMembership, list) => {
+  if (isListArchiveOrTrash(list)) {
+    return false;
+  }
+
+  return boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR;
+};
+
+const ShortcutsProvider = React.memo(({ children }) => {
+  const { cardId, boardId } = useSelector(selectors.selectPath);
+
+  const dispatch = useDispatch();
+
+  const selectedCardRef = useRef(null);
+
+  const handleCardMouseEnter = useCallback((id, editName, openActions) => {
+    selectedCardRef.current = {
+      id,
+      editName,
+      openActions,
+    };
+  }, []);
+
+  const handleCardMouseLeave = useCallback(() => {
+    selectedCardRef.current = null;
+  }, []);
+
+  const contextValue = useMemo(
+    () => [handleCardMouseEnter, handleCardMouseLeave],
+    [handleCardMouseEnter, handleCardMouseLeave],
+  );
+
+  useDidUpdate(() => {
+    selectedCardRef.current = null;
+  }, [cardId, boardId]);
+
+  useEffect(() => {
+    const handleCardOpen = () => {
+      if (!selectedCardRef.current) {
+        return;
+      }
+
+      const state = store.getState();
+      const card = selectors.selectCardById(state, selectedCardRef.current.id);
+
+      if (!card || !card.isPersisted) {
+        return;
+      }
+
+      dispatch(push(Paths.CARDS.replace(':id', card.id)));
+    };
+
+    const handleCardNameEdit = () => {
+      if (!selectedCardRef.current) {
+        return;
+      }
+
+      const state = store.getState();
+      const card = selectors.selectCardById(state, selectedCardRef.current.id);
+
+      if (!card || !card.isPersisted) {
+        return;
+      }
+
+      const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+      const list = selectors.selectListById(state, card.listId);
+
+      if (!canEditCardName(boardMembership, list)) {
+        return;
+      }
+
+      selectedCardRef.current.editName();
+    };
+
+    const handleCardArchive = () => {
+      if (!selectedCardRef.current) {
+        return;
+      }
+
+      const state = store.getState();
+      const card = selectors.selectCardById(state, selectedCardRef.current.id);
+
+      if (!card || !card.isPersisted) {
+        return;
+      }
+
+      const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+      const list = selectors.selectListById(state, card.listId);
+
+      if (!canArchiveCard(boardMembership, list)) {
+        return;
+      }
+
+      selectedCardRef.current.openActions(CardActionsStep.StepTypes.ARCHIVE);
+    };
+
+    const handleCardMembers = () => {
+      if (!selectedCardRef.current) {
+        return;
+      }
+
+      const state = store.getState();
+      const card = selectors.selectCardById(state, selectedCardRef.current.id);
+
+      if (!card || !card.isPersisted) {
+        return;
+      }
+
+      const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+      const list = selectors.selectListById(state, card.listId);
+
+      if (!canUseCardMembers(boardMembership, list)) {
+        return;
+      }
+
+      selectedCardRef.current.openActions(CardActionsStep.StepTypes.MEMBERS);
+    };
+
+    const handleCardLabels = () => {
+      if (!selectedCardRef.current) {
+        return;
+      }
+
+      const state = store.getState();
+      const card = selectors.selectCardById(state, selectedCardRef.current.id);
+
+      if (!card || !card.isPersisted) {
+        return;
+      }
+
+      const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+      const list = selectors.selectListById(state, card.listId);
+
+      if (!canUseCardLabels(boardMembership, list)) {
+        return;
+      }
+
+      selectedCardRef.current.openActions(CardActionsStep.StepTypes.LABELS);
+    };
+
+    const handleLabelToCardAdd = (index) => {
+      if (!selectedCardRef.current) {
+        return;
+      }
+
+      const state = store.getState();
+      const card = selectors.selectCardById(state, selectedCardRef.current.id);
+
+      if (!card || !card.isPersisted) {
+        return;
+      }
+
+      const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+      const list = selectors.selectListById(state, card.listId);
+
+      if (!canUseCardLabels(boardMembership, list)) {
+        return;
+      }
+
+      const label = selectors.selectLabelsForCurrentBoard(state)[index];
+
+      if (!label) {
+        return;
+      }
+
+      const labelIds = selectors.selectLabelIdsByCardId(state, card.id);
+
+      if (labelIds.includes(label.id)) {
+        dispatch(entryActions.removeLabelFromCard(label.id, card.id));
+      } else {
+        dispatch(entryActions.addLabelToCard(label.id, card.id));
+      }
+    };
+
+    const handleKeyDown = (event) => {
+      if (isActiveTextElement(event.target)) {
+        return;
+      }
+
+      if (isModifierKeyPressed(event)) {
+        return;
+      }
+
+      switch (event.code) {
+        case 'KeyE':
+        case 'Enter':
+          handleCardOpen();
+
+          break;
+        case 'KeyL':
+          event.preventDefault();
+          handleCardLabels();
+
+          break;
+        case 'KeyM':
+          event.preventDefault();
+          handleCardMembers();
+
+          break;
+        case 'KeyT':
+          event.preventDefault();
+          handleCardNameEdit();
+
+          break;
+        case 'KeyV':
+          handleCardArchive();
+
+          break;
+        case 'Digit1':
+        case 'Digit2':
+        case 'Digit3':
+        case 'Digit4':
+        case 'Digit5':
+        case 'Digit6':
+        case 'Digit7':
+        case 'Digit8':
+        case 'Digit9':
+        case 'Digit0': {
+          const index = event.code === 'Digit0' ? 10 : parseInt(event.code.slice(-1), 10) - 1;
+          handleLabelToCardAdd(index);
+
+          break;
+        }
+        default:
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [dispatch]);
+
+  return (
+    <BoardShortcutsContext.Provider value={contextValue}>{children}</BoardShortcutsContext.Provider>
+  );
+});
+
+ShortcutsProvider.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+export default ShortcutsProvider;

client/src/components/cards/Card/Card.jsx

@@ -5,7 +5,7 @@
 
 import upperFirst from 'lodash/upperFirst';
 import camelCase from 'lodash/camelCase';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
@@ -14,13 +14,14 @@ import { push } from '../../../lib/redux-router';
 import { closePopup, usePopup } from '../../../lib/popup';
 
 import selectors from '../../../selectors';
+import { BoardShortcutsContext } from '../../../contexts';
 import Paths from '../../../constants/Paths';
 import { BoardMembershipRoles, CardTypes } from '../../../constants/Enums';
 import ProjectContent from './ProjectContent';
 import StoryContent from './StoryContent';
 import InlineContent from './InlineContent';
 import EditName from './EditName';
-import ActionsStep from './ActionsStep';
+import CardActionsStep from '../CardActionsStep';
 
 import styles from './Card.module.scss';
 import globalStyles from '../../../styles.module.scss';
@@ -50,6 +51,7 @@ const Card = React.memo(({ id, isInline }) => {
 
   const dispatch = useDispatch();
   const [isEditNameOpened, setIsEditNameOpened] = useState(false);
+  const [handleCardMouseEnter, handleCardMouseLeave] = useContext(BoardShortcutsContext);
 
   const actionsPopupRef = useRef(null);
 
@@ -61,6 +63,22 @@ const Card = React.memo(({ id, isInline }) => {
     dispatch(push(Paths.CARDS.replace(':id', id)));
   }, [id, dispatch]);
 
+  const handleMouseEnter = useCallback(() => {
+    handleCardMouseEnter(
+      id,
+      () => {
+        setIsEditNameOpened(true);
+      },
+      (step) => {
+        closePopup();
+
+        actionsPopupRef.current.open({
+          defaultStep: step,
+        });
+      },
+    );
+  }, [id, handleCardMouseEnter]);
+
   const handleContextMenu = useCallback((event) => {
     if (!actionsPopupRef.current) {
       return;
@@ -80,7 +98,7 @@ const Card = React.memo(({ id, isInline }) => {
     setIsEditNameOpened(false);
   }, []);
 
-  const ActionsPopup = usePopup(ActionsStep);
+  const CardActionsPopup = usePopup(CardActionsStep);
 
   if (isEditNameOpened) {
     return <EditName cardId={id} onClose={handleEditNameClose} />;
@@ -115,6 +133,8 @@ const Card = React.memo(({ id, isInline }) => {
   return (
     <div
       className={classNames(styles.wrapper, isHighlightedAsRecent && styles.wrapperRecent, 'card')}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleCardMouseLeave}
     >
       {card.isPersisted ? (
         <>
@@ -129,11 +149,11 @@ const Card = React.memo(({ id, isInline }) => {
             {colorLineNode}
           </div>
           {canUseActions && (
-            <ActionsPopup ref={actionsPopupRef} cardId={id} onNameEdit={handleNameEdit}>
+            <CardActionsPopup ref={actionsPopupRef} cardId={id} onNameEdit={handleNameEdit}>
               <Button className={styles.actionsButton}>
                 <Icon fitted name="pencil" size="small" />
               </Button>
-            </ActionsPopup>
+            </CardActionsPopup>
           )}
         </>
       ) : (

client/src/components/cards/CardActionsStep/CardActionsStep.jsx

@@ -23,12 +23,12 @@ import ConfirmationStep from '../../common/ConfirmationStep';
 import BoardMembershipsStep from '../../board-memberships/BoardMembershipsStep';
 import LabelsStep from '../../labels/LabelsStep';
 
-import styles from './ActionsStep.module.scss';
+import styles from './CardActionsStep.module.scss';
 
 const StepTypes = {
-  EDIT_TYPE: 'EDIT_TYPE',
-  USERS: 'USERS',
+  MEMBERS: 'MEMBERS',
   LABELS: 'LABELS',
+  EDIT_TYPE: 'EDIT_TYPE',
   EDIT_DUE_DATE: 'EDIT_DUE_DATE',
   EDIT_STOPWATCH: 'EDIT_STOPWATCH',
   MOVE: 'MOVE',
@@ -36,7 +36,7 @@ const StepTypes = {
   DELETE: 'DELETE',
 };
 
-const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
+const CardActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) => {
   const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
   const selectListById = useMemo(() => selectors.makeSelectListById(), []);
   const selectPrevListById = useMemo(() => selectors.makeSelectListById(), []);
@@ -104,7 +104,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
 
   const dispatch = useDispatch();
   const [t] = useTranslation();
-  const [step, openStep, handleBack] = useSteps();
+  const [step, openStep, handleBack] = useSteps(defaultStep || null);
 
   const handleTypeSelect = useCallback(
     (type) => {
@@ -180,18 +180,18 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
     onClose();
   }, [onNameEdit, onClose]);
 
-  const handleEditTypeClick = useCallback(() => {
-    openStep(StepTypes.EDIT_TYPE);
-  }, [openStep]);
-
-  const handleUsersClick = useCallback(() => {
-    openStep(StepTypes.USERS);
+  const handleMembersClick = useCallback(() => {
+    openStep(StepTypes.MEMBERS);
   }, [openStep]);
 
   const handleLabelsClick = useCallback(() => {
     openStep(StepTypes.LABELS);
   }, [openStep]);
 
+  const handleEditTypeClick = useCallback(() => {
+    openStep(StepTypes.EDIT_TYPE);
+  }, [openStep]);
+
   const handleEditDueDateClick = useCallback(() => {
     openStep(StepTypes.EDIT_DUE_DATE);
   }, [openStep]);
@@ -214,19 +214,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
 
   if (step) {
     switch (step.type) {
-      case StepTypes.EDIT_TYPE:
-        return (
-          <SelectCardTypeStep
-            withButton
-            defaultValue={card.type}
-            title="common.editType"
-            buttonContent="action.save"
-            onSelect={handleTypeSelect}
-            onBack={handleBack}
-            onClose={onClose}
-          />
-        );
-      case StepTypes.USERS:
+      case StepTypes.MEMBERS:
         return (
           <BoardMembershipsStep
             currentUserIds={userIds}
@@ -245,6 +233,18 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
             onBack={handleBack}
           />
         );
+      case StepTypes.EDIT_TYPE:
+        return (
+          <SelectCardTypeStep
+            withButton
+            defaultValue={card.type}
+            title="common.editType"
+            buttonContent="action.save"
+            onSelect={handleTypeSelect}
+            onBack={handleBack}
+            onClose={onClose}
+          />
+        );
       case StepTypes.EDIT_DUE_DATE:
         return <EditDueDateStep cardId={cardId} onBack={handleBack} onClose={onClose} />;
       case StepTypes.EDIT_STOPWATCH:
@@ -305,7 +305,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
             </Menu.Item>
           )}
           {card.type === CardTypes.PROJECT && canUseMembers && (
-            <Menu.Item className={styles.menuItem} onClick={handleUsersClick}>
+            <Menu.Item className={styles.menuItem} onClick={handleMembersClick}>
               <Icon name="user outline" className={styles.menuItemIcon} />
               {t('common.members', {
                 context: 'title',
@@ -321,7 +321,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
             </Menu.Item>
           )}
           {card.type === CardTypes.STORY && canUseMembers && (
-            <Menu.Item className={styles.menuItem} onClick={handleUsersClick}>
+            <Menu.Item className={styles.menuItem} onClick={handleMembersClick}>
               <Icon name="user outline" className={styles.menuItemIcon} />
               {t('common.members', {
                 context: 'title',
@@ -395,10 +395,17 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
   );
 });
 
-ActionsStep.propTypes = {
+CardActionsStep.propTypes = {
   cardId: PropTypes.string.isRequired,
+  defaultStep: PropTypes.string,
   onNameEdit: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default ActionsStep;
+CardActionsStep.defaultProps = {
+  defaultStep: undefined,
+};
+
+CardActionsStep.StepTypes = StepTypes;
+
+export default CardActionsStep;

client/src/components/cards/CardActionsStep/index.js

@@ -0,0 +1,3 @@
+import CardActionsStep from './CardActionsStep';
+
+export default CardActionsStep;

client/src/contexts/BoardShortcutsContext.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import { createContext } from 'react';
+
+export default createContext([null, null]);

client/src/contexts/index.js

@@ -4,5 +4,6 @@
  */
 
 import ClosableContext from './ClosableContext';
+import BoardShortcutsContext from './BoardShortcutsContext';
 
-export { ClosableContext }; // eslint-disable-line import/prefer-default-export
+export { ClosableContext, BoardShortcutsContext };

client/src/lib/popup/use-popup.jsx

@@ -13,13 +13,13 @@ import styles from './Popup.module.css';
 export default (Step, { position, onOpen, onClose } = {}) => {
   return useMemo(() => {
     const Popup = React.forwardRef(({ children, ...stepProps }, ref) => {
-      const [isOpened, setIsOpened] = useState(false);
+      const [stepParams, setStepParams] = useState(null);
 
       const wrapperRef = useRef(null);
       const resizeObserverRef = useRef(null);
 
-      const open = useCallback(() => {
-        setIsOpened(true);
+      const open = useCallback((params = {}) => {
+        setStepParams(params);
 
         if (onOpen) {
           onOpen();
@@ -31,7 +31,7 @@ export default (Step, { position, onOpen, onClose } = {}) => {
       }, [open]);
 
       const handleClose = useCallback(() => {
-        setIsOpened(false);
+        setStepParams(null);
       }, []);
 
       const handleMouseDown = useCallback((event) => {
@@ -96,7 +96,7 @@ export default (Step, { position, onOpen, onClose } = {}) => {
           ref={wrapperRef}
           trigger={tigger}
           on="click"
-          open={isOpened}
+          open={!!stepParams}
           position={position || 'bottom left'}
           popperModifiers={[
             {
@@ -118,7 +118,7 @@ export default (Step, { position, onOpen, onClose } = {}) => {
           <div ref={handleContentRef}>
             <Button icon="close" onClick={handleClose} className={styles.closeButton} />
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <Step {...stepProps} onClose={handleClose} />
+            <Step {...stepProps} {...stepParams} onClose={handleClose} />
           </div>
         </SemanticUIPopup>
       );