feat: Implemented moving a list between boards with instant UI update. Fixed authorization for socket requests (automatic token injection). After moving a list, user is automatically switched to the target board. Added translations for the new move list action to all locale files.

client/src/components/lists/List/ActionsStep.jsx

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Menu } from 'semantic-ui-react';
+import { useNavigate } from 'react-router-dom';
 import { Popup } from '../../../lib/custom-ui';
 
 import selectors from '../../../selectors';
@@ -19,6 +20,8 @@ import SortStep from './SortStep';
 import SelectListTypeStep from '../SelectListTypeStep';
 import ConfirmationStep from '../../common/ConfirmationStep';
 import ArchiveCardsStep from '../../cards/ArchiveCardsStep';
+import BoardSelectStep from './BoardSelectStep';
+import api from '../../../api/lists';
 
 import styles from './ActionsStep.module.scss';
 
@@ -28,6 +31,7 @@ const StepTypes = {
   SORT: 'SORT',
   ARCHIVE_CARDS: 'ARCHIVE_CARDS',
   DELETE: 'DELETE',
+  MOVE_TO_BOARD: 'MOVE_TO_BOARD',
 };
 
 const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
@@ -38,6 +42,7 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
   const dispatch = useDispatch();
   const [t] = useTranslation();
   const [step, openStep, handleBack] = useSteps();
+  const navigate = useNavigate();
 
   const handleTypeSelect = useCallback(
     (type) => {
@@ -84,6 +89,25 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
     openStep(StepTypes.DELETE);
   }, [openStep]);
 
+  const handleMoveToBoard = useCallback(
+    async (targetBoardId) => {
+      try {
+        const { item: updatedList, included } = await api.moveToBoard(listId, { targetBoardId });
+        dispatch(entryActions.handleListUpdate(updatedList));
+        if (included && included.cards) {
+          dispatch(entryActions.handleCardsUpdate(included.cards, []));
+        }
+        sessionStorage.setItem('movedListId', listId);
+        onClose();
+        navigate(`/boards/${targetBoardId}`);
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+      }
+    },
+    [listId, onClose, dispatch, navigate],
+  );
+
   if (step) {
     switch (step.type) {
       case StepTypes.EDIT_TYPE:
@@ -114,6 +138,14 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
             onBack={handleBack}
           />
         );
+      case StepTypes.MOVE_TO_BOARD:
+        return (
+          <BoardSelectStep
+            currentBoardId={list.boardId}
+            onSelect={handleMoveToBoard}
+            onBack={handleBack}
+          />
+        );
       default:
     }
   }
@@ -164,6 +196,9 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
               context: 'title',
             })}
           </Menu.Item>
+          <Menu.Item className={styles.menuItem} onClick={() => openStep(StepTypes.MOVE_TO_BOARD)}>
+            {t('action.moveListToBoard', { context: 'title' })}
+          </Menu.Item>
         </Menu>
       </Popup.Content>
     </>

client/src/components/lists/List/ActionsStep.module.scss

@@ -14,3 +14,34 @@
     padding-left: 14px;
   }
 }
+
+.boardSelectStep {
+  padding: 0;
+}
+
+.boardButton {
+  display: block;
+  width: 100%;
+  padding: 9px 0;
+  border: none;
+  border-radius: 0.28571429rem !important;
+  font-size: 15px;
+  color: #234;
+  text-align: center;
+  cursor: pointer;
+  background: none;
+  transition: background 0.2s;
+}
+
+.boardButton:hover,
+.boardButton:focus {
+  background: #f4f6f8;
+  color: #16324a;
+}
+
+.noBoards {
+  color: #888;
+  text-align: center;
+  padding: 0;
+  font-size: 15px;
+}

client/src/components/lists/List/BoardSelectStep.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import PopupHeader from '../../../lib/custom-ui/components/Popup/PopupHeader';
+import styles from './ActionsStep.module.scss';
+import selectors from '../../../selectors';
+
+function BoardSelectStep({ currentBoardId, onSelect, onBack, onClose }) {
+  const [t] = useTranslation();
+  const projectId = useSelector((state) => selectors.selectPath(state).projectId);
+  const boardIds = useSelector((state) => selectors.selectBoardIdsByProjectId(state, projectId));
+  const boards = useSelector((state) => boardIds.map((id) => selectors.selectBoardById(state, id)));
+
+  return (
+    <div className={styles.boardSelectStep}>
+      <PopupHeader onBack={onBack} onClose={onClose}>
+        {t('action.moveListToBoard', { context: 'title' })}
+      </PopupHeader>
+      <div className={styles.menu}>
+        {boards
+          .filter((b) => b && b.id !== currentBoardId)
+          .map((board) => (
+            <button
+              key={board.id}
+              type="button"
+              className={styles.boardButton}
+              onClick={() => onSelect(board.id)}
+            >
+              {board.name}
+            </button>
+          ))}
+        {boards.filter((b) => b && b.id !== currentBoardId).length === 0 && (
+          <div className={styles.noBoards}>{t('common.noOtherBoards')}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+BoardSelectStep.propTypes = {
+  currentBoardId: PropTypes.string.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
+};
+
+BoardSelectStep.defaultProps = {
+  onClose: undefined,
+};
+
+export default BoardSelectStep;