feat: Add ability to link tasks to cards

2025-08-02 20:15:27 +02:00 · 2025-07-11 01:04:02 +02:00 · 2025-07-11 01:04:02 +02:00 · 230f50e3d9
commit 230f50e3d9
parent 49203e9d56
35 changed files with 761 additions and 243 deletions
--- a/client/patches/semantic-ui-react+2.1.5.patch
+++ b/client/patches/semantic-ui-react+2.1.5.patch
@ -1,5 +1,5 @@
 diff --git a/node_modules/semantic-ui-react/dist/es/lib/doesNodeContainClick.js b/node_modules/semantic-ui-react/dist/es/lib/doesNodeContainClick.js
-index 6d06078..fb7534d 100644
+index 6d06078..e22d4f0 100644
 --- a/node_modules/semantic-ui-react/dist/es/lib/doesNodeContainClick.js
 +++ b/node_modules/semantic-ui-react/dist/es/lib/doesNodeContainClick.js
@@ -17,13 +17,7 @@ var doesNodeContainClick = function doesNodeContainClick(node, e) {
@ -17,6 +17,46 @@ index 6d06078..fb7534d 100644
   } // Below logic handles cases where the e.target is no longer in the document.
   // The result of the click likely has removed the e.target node.
   // Instead of node.contains(), we'll identify the click by X/Y position.
+diff --git a/node_modules/semantic-ui-react/dist/es/modules/Dropdown/Dropdown.js b/node_modules/semantic-ui-react/dist/es/modules/Dropdown/Dropdown.js
+index 1cc1bab..7abb016 100644
+--- a/node_modules/semantic-ui-react/dist/es/modules/Dropdown/Dropdown.js
+++ b/node_modules/semantic-ui-react/dist/es/modules/Dropdown/Dropdown.js
+@@ -342,7 +342,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
+         return;
+       }
+ 
+-      if (searchQuery.length >= minCharacters || minCharacters === 1) {
+      if (searchQuery.length >= minCharacters || minCharacters === 0) {
+         _this.open(e);
+ 
+         return;
+@@ -480,7 +480,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
+       } // close search dropdown if search query is too small
+ 
+ 
+-      if (open && minCharacters !== 1 && newQuery.length < minCharacters) _this.close();
+      if (open && minCharacters !== 0 && newQuery.length < minCharacters) _this.close();
+     };
+ 
+     _this.handleKeyDown = function (e) {
+@@ -1048,7 +1048,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
+ 
+     if (!prevState.focus && this.state.focus) {
+       if (!this.isMouseDown) {
+-        var openable = !search || search && minCharacters === 1 && !this.state.open;
+        var openable = !search || search && minCharacters === 0 && !this.state.open;
+         if (openOnFocus && openable) this.open();
+       }
+     } else if (prevState.focus && !this.state.focus) {
+@@ -1436,7 +1436,7 @@ Dropdown.defaultProps = {
+   closeOnEscape: true,
+   deburr: false,
+   icon: 'dropdown',
+-  minCharacters: 1,
+  minCharacters: 0,
+   noResultsMessage: 'No results found.',
+   openOnFocus: true,
+   renderLabel: renderItemContent,
 diff --git a/node_modules/semantic-ui-react/src/lib/doesNodeContainClick.js b/node_modules/semantic-ui-react/src/lib/doesNodeContainClick.js
 index d1ae271..43e1170 100644
 --- a/node_modules/semantic-ui-react/src/lib/doesNodeContainClick.js
--- a/client/src/components/cards/Card/TaskList/Task.jsx
+++ b/client/src/components/cards/Card/TaskList/Task.jsx
@ -3,45 +3,49 @@
 * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
 */

-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { Icon } from 'semantic-ui-react';

 import selectors from '../../../../selectors';
+import Paths from '../../../../constants/Paths';
 import Linkify from '../../../common/Linkify';

 import styles from './Task.module.scss';

 const Task = React.memo(({ id }) => {
  const selectTaskById = useMemo(() => selectors.makeSelectTaskById(), []);
-  const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
+  const selectLinkedCardById = useMemo(() => selectors.makeSelectCardById(), []);

  const task = useSelector((state) => selectTaskById(state, id));

-  const isCompleted = useSelector((state) => {
-    if (task.isCompleted) {
-      return true;
-    }
+  const linkedCard = useSelector(
+    (state) => task.linkedCardId && selectLinkedCardById(state, task.linkedCardId),
+  );

-    const regex = /\/cards\/([^/]+)/g;
-    const matches = task.name.matchAll(regex);
-
-    // eslint-disable-next-line no-restricted-syntax
-    for (const [, cardId] of matches) {
-      const card = selectCardById(state, cardId);
-
-      if (card && card.isClosed) {
-        return true;
-      }
-    }
-
-    return false;
-  });
+  const handleLinkClick = useCallback((event) => {
+    event.stopPropagation();
+  }, []);

  return (
-    <li className={classNames(styles.wrapper, isCompleted && styles.wrapperCompleted)}>
-      <Linkify linkStopPropagation>{task.name}</Linkify>
+    <li className={styles.wrapper}>
+      {task.linkedCardId ? (
+        <>
+          <Icon name="exchange" size="small" className={styles.icon} />
+          <span className={classNames(styles.name, task.isCompleted && styles.nameCompleted)}>
+            <Link to={Paths.CARDS.replace(':id', task.linkedCardId)} onClick={handleLinkClick}>
+              {linkedCard ? linkedCard.name : task.name}
+            </Link>
+          </span>
+        </>
+      ) : (
+        <span className={classNames(styles.name, task.isCompleted && styles.nameCompleted)}>
+          <Linkify linkStopPropagation>{task.name}</Linkify>
+        </span>
+      )}
    </li>
  );
 });
--- a/client/src/components/cards/Card/TaskList/Task.module.scss
+++ b/client/src/components/cards/Card/TaskList/Task.module.scss
@ -4,6 +4,21 @@
 */

 :global(#app) {
+  .icon {
+    color: rgba(9, 30, 66, 0.24);
+  }
+
+  .name {
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .nameCompleted {
+    color: #aaa;
+    text-decoration: line-through;
+  }
+
  .wrapper {
    display: block;
    font-size: 12px;
@ -18,9 +33,4 @@
      left: 10px;
    }
  }
-
-  .wrapperCompleted {
-    color: #aaa;
-    text-decoration: line-through;
-  }
 }
--- a/client/src/components/cards/Card/TaskList/TaskList.jsx
+++ b/client/src/components/cards/Card/TaskList/TaskList.jsx
@ -16,32 +16,14 @@ import Task from './Task';
 import styles from './TaskList.module.scss';

 const TaskList = React.memo(({ id }) => {
-  const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
  const selectTasksByTaskListId = useMemo(() => selectors.makeSelectTasksByTaskListId(), []);

  const tasks = useSelector((state) => selectTasksByTaskListId(state, id));

  // TODO: move to selector?
-  const completedTasksTotal = useSelector((state) =>
-    tasks.reduce((result, task) => {
-      if (task.isCompleted) {
-        return result + 1;
-      }
-
-      const regex = /\/cards\/([^/]+)/g;
-      const matches = task.name.matchAll(regex);
-
-      // eslint-disable-next-line no-restricted-syntax
-      for (const [, cardId] of matches) {
-        const card = selectCardById(state, cardId);
-
-        if (card && card.isClosed) {
-          return result + 1;
-        }
-      }
-
-      return result;
-    }, 0),
+  const completedTasksTotal = useMemo(
+    () => tasks.reduce((result, task) => (task.isCompleted ? result + 1 : result), 0),
+    [tasks],
  );

  const [isOpened, toggleOpened] = useToggle();
--- a/client/src/components/common/Linkify/Link.jsx
+++ b/client/src/components/common/Linkify/Link.jsx
@ -6,23 +6,22 @@
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import LinkifyReact from 'linkify-react';

-import history from '../../history';
-import selectors from '../../selectors';
-import matchPaths from '../../utils/match-paths';
-import Paths from '../../constants/Paths';
+import history from '../../../history';
+import selectors from '../../../selectors';
+import matchPaths from '../../../utils/match-paths';
+import Paths from '../../../constants/Paths';

-const Linkify = React.memo(({ children, linkStopPropagation, ...props }) => {
+const Linkify = React.memo(({ href, content, stopPropagation, ...props }) => {
  const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);

  const url = useMemo(() => {
    try {
-      return new URL(children, window.location);
+      return new URL(href, window.location);
    } catch {
      return null;
    }
-  }, [children]);
+  }, [href]);

  const isSameSite = !!url && url.origin === window.location.origin;

@ -42,9 +41,9 @@ const Linkify = React.memo(({ children, linkStopPropagation, ...props }) => {
    return selectCardById(state, cardsPathMatch.params.id);
  });

-  const handleLinkClick = useCallback(
+  const handleClick = useCallback(
    (event) => {
-      if (linkStopPropagation) {
+      if (stopPropagation) {
        event.stopPropagation();
      }

@ -53,44 +52,30 @@ const Linkify = React.memo(({ children, linkStopPropagation, ...props }) => {
        history.push(event.target.href);
      }
    },
-    [linkStopPropagation, isSameSite],
-  );
-
-  const linkRenderer = useCallback(
-    ({ attributes: { href, ...linkProps }, content }) => (
-      <a
-        {...linkProps} // eslint-disable-line react/jsx-props-no-spreading
-        href={href}
-        target={isSameSite ? undefined : '_blank'}
-        rel={isSameSite ? undefined : 'noreferrer'}
-        onClick={handleLinkClick}
-      >
-        {card ? card.name : content}
-      </a>
-    ),
-    [isSameSite, card, handleLinkClick],
+    [stopPropagation, isSameSite],
  );

  return (
-    <LinkifyReact
+    <a
      {...props} // eslint-disable-line react/jsx-props-no-spreading
-      options={{
-        defaultProtocol: 'https',
-        render: linkRenderer,
-      }}
+      href={href}
+      target={isSameSite ? undefined : '_blank'}
+      rel={isSameSite ? undefined : 'noreferrer'}
+      onClick={handleClick}
    >
-      {children}
-    </LinkifyReact>
+      {card ? card.name : content}
+    </a>
  );
 });

 Linkify.propTypes = {
-  children: PropTypes.string.isRequired,
-  linkStopPropagation: PropTypes.bool,
+  href: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  stopPropagation: PropTypes.bool,
 };

 Linkify.defaultProps = {
-  linkStopPropagation: false,
+  stopPropagation: false,
 };

 export default Linkify;
--- a/client/src/components/common/Linkify/Linkify.jsx
+++ b/client/src/components/common/Linkify/Linkify.jsx
@ -0,0 +1,43 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import LinkifyReact from 'linkify-react';
+
+import Link from './Link';
+
+const Linkify = React.memo(({ children, linkStopPropagation, ...props }) => {
+  const linkRenderer = useCallback(
+    ({ attributes: { href, ...linkProps }, content }) => (
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      <Link {...linkProps} href={href} content={content} stopPropagation={linkStopPropagation} />
+    ),
+    [linkStopPropagation],
+  );
+
+  return (
+    <LinkifyReact
+      {...props} // eslint-disable-line react/jsx-props-no-spreading
+      options={{
+        defaultProtocol: 'https',
+        render: linkRenderer,
+      }}
+    >
+      {children}
+    </LinkifyReact>
+  );
+});
+
+Linkify.propTypes = {
+  children: PropTypes.string.isRequired,
+  linkStopPropagation: PropTypes.bool,
+};
+
+Linkify.defaultProps = {
+  linkStopPropagation: undefined,
+};
+
+export default Linkify;
--- a/client/src/components/common/Linkify/index.js
+++ b/client/src/components/common/Linkify/index.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 Linkify from './Linkify';
+
+export default Linkify;
--- a/client/src/components/task-lists/TaskList/AddTask.jsx
+++ b/client/src/components/task-lists/TaskList/AddTask.jsx
@ -5,12 +5,13 @@

 import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import TextareaAutosize from 'react-textarea-autosize';
-import { Button, Form, TextArea } from 'semantic-ui-react';
+import { Button, Dropdown, Form, Icon, TextArea } from 'semantic-ui-react';
 import { useClickAwayListener, useDidUpdate, useToggle } from '../../../lib/hooks';

+import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import { useForm, useNestedRef } from '../../../hooks';
 import { focusEnd } from '../../../utils/element-helpers';
@ -20,18 +21,23 @@ import styles from './AddTask.module.scss';

 const DEFAULT_DATA = {
  name: '',
+  linkedCardId: null,
 };

 const MULTIPLE_REGEX = /\s*\r?\n\s*/;

 const AddTask = React.memo(({ children, taskListId, isOpened, onClose }) => {
+  const cards = useSelector(selectors.selectCardsExceptCurrentForCurrentBoard);
+
  const dispatch = useDispatch();
  const [t] = useTranslation();
  const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
-  const [focusNameFieldState, focusNameField] = useToggle();
+  const [isLinkingToCard, toggleLinkingToCard] = useToggle();
+  const [focusFieldState, focusField] = useToggle();

-  const [nameFieldRef, handleNameFieldRef] = useNestedRef();
-  const [buttonRef, handleButtonRef] = useNestedRef();
+  const [fieldRef, handleFieldRef] = useNestedRef();
+  const [submitButtonRef, handleSubmitButtonRef] = useNestedRef();
+  const [toggleLinkingButtonRef, handleToggleLinkingButtonRef] = useNestedRef();

  const submit = useCallback(
    (isMultiple = false) => {
@ -40,12 +46,23 @@ const AddTask = React.memo(({ children, taskListId, isOpened, onClose }) => {
        name: data.name.trim(),
      };

-      if (!cleanData.name) {
-        nameFieldRef.current.select();
-        return;
+      if (isLinkingToCard) {
+        if (!cleanData.linkedCardId) {
+          fieldRef.current.querySelector('.search').focus();
+          return;
+        }
+
+        delete cleanData.name;
+      } else {
+        if (!cleanData.name) {
+          fieldRef.current.select();
+          return;
+        }
+
+        delete cleanData.linkedCardId;
      }

-      if (isMultiple) {
+      if (!isLinkingToCard && isMultiple) {
        cleanData.name.split(MULTIPLE_REGEX).forEach((name) => {
          dispatch(
            entryActions.createTask(taskListId, {
@ -59,9 +76,9 @@ const AddTask = React.memo(({ children, taskListId, isOpened, onClose }) => {
      }

      setData(DEFAULT_DATA);
-      focusNameField();
+      focusField();
    },
-    [taskListId, dispatch, data, setData, focusNameField, nameFieldRef],
+    [taskListId, dispatch, data, setData, isLinkingToCard, focusField, fieldRef],
  );

  const handleSubmit = useCallback(() => {
@ -71,34 +88,48 @@ const AddTask = React.memo(({ children, taskListId, isOpened, onClose }) => {
  const handleFieldKeyDown = useCallback(
    (event) => {
      if (event.key === 'Enter') {
-        event.preventDefault();
-        submit(isModifierKeyPressed(event));
+        if (!isLinkingToCard) {
+          event.preventDefault();
+          submit(isModifierKeyPressed(event));
+        }
      } else if (event.key === 'Escape') {
        onClose();
      }
    },
-    [onClose, submit],
+    [onClose, isLinkingToCard, submit],
  );

+  const handleToggleLinkingClick = useCallback(() => {
+    toggleLinkingToCard();
+  }, [toggleLinkingToCard]);
+
  const handleClickAwayCancel = useCallback(() => {
-    nameFieldRef.current.focus();
-  }, [nameFieldRef]);
+    if (isLinkingToCard) {
+      fieldRef.current.querySelector('.search').focus();
+    } else {
+      focusEnd(fieldRef.current);
+    }
+  }, [isLinkingToCard, fieldRef]);

  const clickAwayProps = useClickAwayListener(
-    [nameFieldRef, buttonRef],
+    [fieldRef, submitButtonRef, toggleLinkingButtonRef],
    onClose,
    handleClickAwayCancel,
  );

  useEffect(() => {
    if (isOpened) {
-      focusEnd(nameFieldRef.current);
+      if (isLinkingToCard) {
+        fieldRef.current.querySelector('.search').focus();
+      } else {
+        focusEnd(fieldRef.current);
+      }
    }
-  }, [isOpened, nameFieldRef]);
+  }, [isOpened, isLinkingToCard, fieldRef]);

  useDidUpdate(() => {
-    nameFieldRef.current.focus();
-  }, [focusNameFieldState]);
+    fieldRef.current.focus();
+  }, [focusFieldState]);

  if (!isOpened) {
    return children;
@ -106,27 +137,63 @@ const AddTask = React.memo(({ children, taskListId, isOpened, onClose }) => {

  return (
    <Form className={styles.wrapper} onSubmit={handleSubmit}>
-      <TextArea
-        {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
-        ref={handleNameFieldRef}
-        as={TextareaAutosize}
-        name="name"
-        value={data.name}
-        placeholder={t('common.enterTaskDescription')}
-        maxLength={1024}
-        minRows={2}
-        spellCheck={false}
-        className={styles.field}
-        onKeyDown={handleFieldKeyDown}
-        onChange={handleFieldChange}
-      />
+      {isLinkingToCard ? (
+        <Dropdown
+          fluid
+          selection
+          search
+          ref={handleFieldRef}
+          name="linkedCardId"
+          options={cards.map((card) => ({
+            text: card.name,
+            value: card.id,
+          }))}
+          value={data.linkedCardId}
+          placeholder={t('common.searchCards')}
+          minCharacters={1}
+          closeOnBlur={false}
+          closeOnEscape={false}
+          noResultsMessage={t('common.noCardsFound')}
+          className={styles.field}
+          onKeyDown={handleFieldKeyDown}
+          onChange={handleFieldChange}
+        />
+      ) : (
+        <TextArea
+          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+          ref={handleFieldRef}
+          as={TextareaAutosize}
+          name="name"
+          value={data.name}
+          placeholder={t('common.enterTaskDescription')}
+          maxLength={1024}
+          minRows={2}
+          spellCheck={false}
+          className={styles.field}
+          onKeyDown={handleFieldKeyDown}
+          onChange={handleFieldChange}
+        />
+      )}
      <div className={styles.controls}>
        <Button
          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
          positive
-          ref={handleButtonRef}
+          ref={handleSubmitButtonRef}
          content={t('action.addTask')}
        />
+        <Button
+          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+          ref={handleToggleLinkingButtonRef}
+          type="button"
+          className={styles.toggleLinkingButton}
+          onClick={handleToggleLinkingClick}
+        >
+          <Icon
+            name={isLinkingToCard ? 'align left' : 'exchange'}
+            className={styles.toggleLinkingButtonIcon}
+          />
+          {isLinkingToCard ? t('common.description') : t('common.linkToCard')}
+        </Button>
      </div>
    </Form>
  );
--- a/client/src/components/task-lists/TaskList/AddTask.module.scss
+++ b/client/src/components/task-lists/TaskList/AddTask.module.scss
@ -5,7 +5,7 @@

 :global(#app) {
  .controls {
-    clear: both;
+    display: flex;
    margin-top: 6px;
  }

@ -18,9 +18,41 @@
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 4px;
-    overflow: hidden;
    padding: 8px 12px;
    resize: none;
+
+    :global {
+      .menu {
+        border: 1px solid rgba(9, 30, 66, 0.08);
+      }
+
+      .search {
+        left: 0;
+      }
+    }
+  }
+
+  .toggleLinkingButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-left: auto;
+    margin-right: 0;
+    overflow: hidden;
+    text-align: left;
+    text-decoration: underline;
+    text-overflow: ellipsis;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
+  .toggleLinkingButtonIcon {
+    text-decoration: none;
  }

  .wrapper {
--- a/client/src/components/task-lists/TaskList/Task/ActionsStep.jsx
+++ b/client/src/components/task-lists/TaskList/Task/ActionsStep.jsx
@ -3,13 +3,14 @@
 * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
 */

-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Menu } from 'semantic-ui-react';
 import { Popup } from '../../../../lib/custom-ui';

+import selectors from '../../../../selectors';
 import entryActions from '../../../../entry-actions';
 import { useSteps } from '../../../../hooks';
 import ConfirmationStep from '../../../common/ConfirmationStep';
@ -21,6 +22,10 @@ const StepTypes = {
 };

 const ActionsStep = React.memo(({ taskId, onNameEdit, onClose }) => {
+  const selectTaskById = useMemo(() => selectors.makeSelectTaskById(), []);
+
+  const task = useSelector((state) => selectTaskById(state, taskId));
+
  const dispatch = useDispatch();
  const [t] = useTranslation();
  const [step, openStep, handleBack] = useSteps();
@ -59,11 +64,13 @@ const ActionsStep = React.memo(({ taskId, onNameEdit, onClose }) => {
      </Popup.Header>
      <Popup.Content>
        <Menu secondary vertical className={styles.menu}>
-          <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
-            {t('action.editDescription', {
-              context: 'title',
-            })}
-          </Menu.Item>
+          {!task.linkedCardId && (
+            <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
+              {t('action.editDescription', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          )}
          <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
            {t('action.deleteTask', {
              context: 'title',
--- a/client/src/components/task-lists/TaskList/Task/Task.jsx
+++ b/client/src/components/task-lists/TaskList/Task/Task.jsx
@ -8,6 +8,7 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { Draggable } from 'react-beautiful-dnd';
 import { Button, Checkbox, Icon } from 'semantic-ui-react';
 import { useDidUpdate } from '../../../../lib/hooks';
@ -18,6 +19,7 @@ import { usePopupInClosableContext } from '../../../../hooks';
 import { isListArchiveOrTrash } from '../../../../utils/record-helpers';
 import { BoardMembershipRoles } from '../../../../constants/Enums';
 import { ClosableContext } from '../../../../contexts';
+import Paths from '../../../../constants/Paths';
 import EditName from './EditName';
 import SelectAssigneeStep from './SelectAssigneeStep';
 import ActionsStep from './ActionsStep';
@ -28,26 +30,14 @@ import styles from './Task.module.scss';

 const Task = React.memo(({ id, index }) => {
  const selectTaskById = useMemo(() => selectors.makeSelectTaskById(), []);
-  const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
+  const selectLinkedCardById = useMemo(() => selectors.makeSelectCardById(), []);
  const selectListById = useMemo(() => selectors.makeSelectListById(), []);

  const task = useSelector((state) => selectTaskById(state, id));

-  const isLinkedCardCompleted = useSelector((state) => {
-    const regex = /\/cards\/([^/]+)/g;
-    const matches = task.name.matchAll(regex);
-
-    // eslint-disable-next-line no-restricted-syntax
-    for (const [, cardId] of matches) {
-      const card = selectCardById(state, cardId);
-
-      if (card && card.isClosed) {
-        return true;
-      }
-    }
-
-    return false;
-  });
+  const linkedCard = useSelector(
+    (state) => task.linkedCardId && selectLinkedCardById(state, task.linkedCardId),
+  );

  const { canEdit, canToggle } = useSelector((state) => {
    const { listId } = selectors.selectCurrentCard(state);
@ -101,14 +91,12 @@ const Task = React.memo(({ id, index }) => {
  }, [id, dispatch]);

  const isEditable = task.isPersisted && canEdit;
-  const isCompleted = task.isCompleted || isLinkedCardCompleted;
-  const isToggleDisabled = !task.isPersisted || !canToggle || isLinkedCardCompleted;

  const handleClick = useCallback(() => {
-    if (isEditable) {
+    if (!task.linkedCardId && isEditable) {
      setIsEditNameOpened(true);
    }
-  }, [isEditable]);
+  }, [task.linkedCardId, isEditable]);

  const handleNameEdit = useCallback(() => {
    setIsEditNameOpened(true);
@ -118,6 +106,10 @@ const Task = React.memo(({ id, index }) => {
    setIsEditNameOpened(false);
  }, []);

+  const handleLinkClick = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+
  useDidUpdate(() => {
    setIsClosableActive(isEditNameOpened);
  }, [isEditNameOpened]);
@ -141,8 +133,8 @@ const Task = React.memo(({ id, index }) => {
          >
            <span className={styles.checkboxWrapper}>
              <Checkbox
-                checked={isCompleted}
-                disabled={isToggleDisabled}
+                checked={task.isCompleted}
+                disabled={!!task.linkedCardId || !task.isPersisted || !canToggle}
                className={styles.checkbox}
                onChange={handleToggleChange}
              />
@ -154,34 +146,69 @@ const Task = React.memo(({ id, index }) => {
                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
                                             jsx-a11y/no-static-element-interactions */}
                <span
-                  className={classNames(styles.text, canEdit && styles.textEditable)}
+                  className={classNames(
+                    styles.text,
+                    task.linkedCardId && styles.textLinked,
+                    canEdit && styles.textEditable,
+                    canEdit && !task.linkedCardId && styles.textPointable,
+                  )}
                  onClick={handleClick}
                >
-                  <span className={classNames(styles.task, isCompleted && styles.taskCompleted)}>
-                    <Linkify linkStopPropagation>{task.name}</Linkify>
+                  <span
+                    className={classNames(styles.task, task.isCompleted && styles.taskCompleted)}
+                  >
+                    {task.linkedCardId ? (
+                      <>
+                        <Icon name="exchange" size="small" className={styles.icon} />
+                        <span
+                          className={classNames(
+                            styles.name,
+                            task.isCompleted && styles.nameCompleted,
+                          )}
+                        >
+                          <Link
+                            to={Paths.CARDS.replace(':id', task.linkedCardId)}
+                            onClick={handleLinkClick}
+                          >
+                            {linkedCard ? linkedCard.name : task.name}
+                          </Link>
+                        </span>
+                      </>
+                    ) : (
+                      <span
+                        className={classNames(
+                          styles.name,
+                          task.isCompleted && styles.nameCompleted,
+                        )}
+                      >
+                        <Linkify linkStopPropagation>{task.name}</Linkify>
+                      </span>
+                    )}
                  </span>
                </span>
                {(task.assigneeUserId || isEditable) && (
                  <div className={classNames(styles.actions, isEditable && styles.actionsEditable)}>
                    {isEditable ? (
                      <>
-                        <SelectAssigneePopup
-                          currentUserId={task.assigneeUserId}
-                          onUserSelect={handleUserSelect}
-                          onUserDeselect={handleUserDeselect}
-                        >
-                          {task.assigneeUserId ? (
-                            <UserAvatar
-                              id={task.assigneeUserId}
-                              size="tiny"
-                              className={styles.assigneeUserAvatar}
-                            />
-                          ) : (
-                            <Button className={styles.button}>
-                              <Icon fitted name="add user" size="small" />
-                            </Button>
-                          )}
-                        </SelectAssigneePopup>
+                        {!task.linkedCardId && (
+                          <SelectAssigneePopup
+                            currentUserId={task.assigneeUserId}
+                            onUserSelect={handleUserSelect}
+                            onUserDeselect={handleUserDeselect}
+                          >
+                            {task.assigneeUserId ? (
+                              <UserAvatar
+                                id={task.assigneeUserId}
+                                size="tiny"
+                                className={styles.assigneeUserAvatar}
+                              />
+                            ) : (
+                              <Button className={styles.button}>
+                                <Icon fitted name="add user" size="small" />
+                              </Button>
+                            )}
+                          </SelectAssigneePopup>
+                        )}
                        <ActionsPopup taskId={id} onNameEdit={handleNameEdit}>
                          <Button className={styles.button}>
                            <Icon fitted name="pencil" size="small" />
--- a/client/src/components/task-lists/TaskList/Task/Task.module.scss
+++ b/client/src/components/task-lists/TaskList/Task/Task.module.scss
@ -56,6 +56,22 @@
    }
  }

+  .icon {
+    color: rgba(9, 30, 66, 0.24);
+    margin-right: 8px;
+  }
+
+  .name {
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .nameCompleted {
+    color: #aaa;
+    text-decoration: line-through;
+  }
+
  .task {
    display: inline-block;
    overflow: hidden;
@ -66,11 +82,6 @@
    width: 100%;
  }

-  .taskCompleted {
-    color: #aaa;
-    text-decoration: line-through;
-  }
-
  .text {
    background: transparent;
    border-radius: 3px;
@ -81,11 +92,22 @@
    min-height: 32px;
    padding: 0 34px 0 40px;
    width: 100%;
+
+    &.textLinked {
+      padding-right: 0px;
+    }
  }

  .textEditable {
-    cursor: pointer;
    padding-right: 68px;
+
+    &.textLinked {
+      padding-right: 34px;
+    }
+  }
+
+  .textPointable {
+    cursor: pointer;
  }

  .wrapper {
--- a/client/src/components/task-lists/TaskList/TaskList.jsx
+++ b/client/src/components/task-lists/TaskList/TaskList.jsx
@ -23,36 +23,12 @@ import styles from './TaskList.module.scss';

 const TaskList = React.memo(({ id }) => {
  const selectTaskListById = useMemo(() => selectors.makeSelectTaskListById(), []);
-  const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
  const selectListById = useMemo(() => selectors.makeSelectListById(), []);
  const selectTasksByTaskListId = useMemo(() => selectors.makeSelectTasksByTaskListId(), []);

  const taskList = useSelector((state) => selectTaskListById(state, id));
  const tasks = useSelector((state) => selectTasksByTaskListId(state, id));

-  // TODO: move to selector?
-  const completedTasksTotal = useSelector((state) =>
-    tasks.reduce((result, task) => {
-      if (task.isCompleted) {
-        return result + 1;
-      }
-
-      const regex = /\/cards\/([^/]+)/g;
-      const matches = task.name.matchAll(regex);
-
-      // eslint-disable-next-line no-restricted-syntax
-      for (const [, cardId] of matches) {
-        const card = selectCardById(state, cardId);
-
-        if (card && card.isClosed) {
-          return result + 1;
-        }
-      }
-
-      return result;
-    }, 0),
-  );
-
  const canEdit = useSelector((state) => {
    const { listId } = selectors.selectCurrentCard(state);
    const list = selectListById(state, listId);
@ -69,6 +45,12 @@ const TaskList = React.memo(({ id }) => {
  const [isAddOpened, setIsAddOpened] = useState(false);
  const [, , setIsClosableActive] = useContext(ClosableContext);

+  // TODO: move to selector?
+  const completedTasksTotal = useMemo(
+    () => tasks.reduce((result, task) => (task.isCompleted ? result + 1 : result), 0),
+    [tasks],
+  );
+
  const handleAddClick = useCallback(() => {
    setIsAddOpened(true);
  }, []);
--- a/client/src/locales/en-GB/core.js
+++ b/client/src/locales/en-GB/core.js
@ -206,6 +206,7 @@ export default {
      leaveBoard_title: 'Leave Board',
      leaveProject_title: 'Leave Project',
      limitCardTypesToDefaultOne: 'Limit card types to default one',
+      linkToCard: 'Link to card',
      list: 'List',
      listActions_title: 'List Actions',
      lists: 'Lists',
@ -223,6 +224,7 @@ export default {
      newVersionAvailable: 'New version available',
      newestFirst: 'Newest first',
      noBoards: 'No boards',
+      noCardsFound: 'No cards found.',
      noConnectionToServer: 'No connection to server',
      noLists: 'No lists',
      noProjects: 'No projects',
--- a/client/src/locales/en-US/core.js
+++ b/client/src/locales/en-US/core.js
@ -201,6 +201,7 @@ export default {
      leaveBoard_title: 'Leave Board',
      leaveProject_title: 'Leave Project',
      limitCardTypesToDefaultOne: 'Limit card types to default one',
+      linkToCard: 'Link to card',
      list: 'List',
      listActions_title: 'List Actions',
      lists: 'Lists',
@ -218,6 +219,7 @@ export default {
      newVersionAvailable: 'New version available',
      newestFirst: 'Newest first',
      noBoards: 'No boards',
+      noCardsFound: 'No cards found.',
      noConnectionToServer: 'No connection to server',
      noLists: 'No lists',
      noProjects: 'No projects',
--- a/client/src/models/Card.js
+++ b/client/src/models/Card.js
@ -322,15 +322,21 @@ export default class extends BaseModel {
            payload.data.listChangedAt = new Date(); // eslint-disable-line no-param-reassign
          }

+          if (payload.data.isClosed !== undefined && payload.data.isClosed !== cardModel.isClosed) {
+            cardModel.linkedTasks.update({
+              isCompleted: payload.data.isClosed,
+            });
+          }
+
          cardModel.update(payload.data);
        }

        break;
      }
-      case ActionTypes.CARD_UPDATE_HANDLE:
-        if (payload.card.boardId === null || payload.isFetched) {
-          const cardModel = Card.withId(payload.card.id);
+      case ActionTypes.CARD_UPDATE_HANDLE: {
+        const cardModel = Card.withId(payload.card.id);

+        if (payload.card.boardId === null || payload.isFetched) {
          if (cardModel) {
            cardModel.deleteWithRelated();
          }
@ -338,6 +344,12 @@ export default class extends BaseModel {

        if (payload.card.boardId !== null) {
          Card.upsert(payload.card);
+
+          if (cardModel && payload.card.isClosed !== cardModel.isClosed) {
+            cardModel.linkedTasks.update({
+              isCompleted: payload.card.isClosed,
+            });
+          }
        }

        if (payload.cardMemberships) {
@ -353,6 +365,7 @@ export default class extends BaseModel {
        }

        break;
+      }
      case ActionTypes.CARD_DUPLICATE:
        Card.withId(payload.id).duplicate(payload.localId, payload.data);

@ -623,6 +636,12 @@ export default class extends BaseModel {
      taskListModel.deleteWithRelated();
    });

+    this.linkedTasks.toModelArray().forEach((taskModel) => {
+      taskModel.update({
+        linkedCardId: null,
+      });
+    });
+
    this.attachments.delete();

    this.customFieldGroups.toModelArray().forEach((customFieldGroupModel) => {
--- a/client/src/models/List.js
+++ b/client/src/models/List.js
@ -137,6 +137,10 @@ export default class extends BaseModel {
            cardModel.update({
              isClosed,
            });
+
+            cardModel.linkedTasks.update({
+              isCompleted: isClosed,
+            });
          });
        }

@ -162,6 +166,10 @@ export default class extends BaseModel {
              cardModel.update({
                isClosed,
              });
+
+              cardModel.linkedTasks.update({
+                isCompleted: isClosed,
+              });
            });
          }
        } else {
--- a/client/src/models/Task.js
+++ b/client/src/models/Task.js
@ -23,6 +23,11 @@ export default class extends BaseModel {
      as: 'taskList',
      relatedName: 'tasks',
    }),
+    linkedCardId: fk({
+      to: 'Card',
+      as: 'linkedCard',
+      relatedName: 'linkedTasks',
+    }),
    assigneeUserId: fk({
      to: 'User',
      as: 'user',
--- a/client/src/sagas/core/services/tasks.js
+++ b/client/src/sagas/core/services/tasks.js
@ -12,6 +12,11 @@ import api from '../../../api';
 import { createLocalId } from '../../../utils/local-id';

 export function* createTask(taskListId, data) {
+  let isCompleted;
+  if (data.linkedCardId) {
+    ({ isClosed: isCompleted } = yield select(selectors.selectCardById, data.linkedCardId));
+  }
+
  const localId = yield call(createLocalId);

  const nextData = {
@ -24,6 +29,9 @@ export function* createTask(taskListId, data) {
      ...nextData,
      taskListId,
      id: localId,
+      ...(isCompleted !== undefined && {
+        isCompleted,
+      }),
    }),
  );

--- a/client/src/selectors/boards.js
+++ b/client/src/selectors/boards.js
@ -314,6 +314,28 @@ export const selectAvailableListsForCurrentBoard = createSelector(
  },
 );

+export const selectCardsExceptCurrentForCurrentBoard = createSelector(
+  orm,
+  (state) => selectPath(state).boardId,
+  (state) => selectPath(state).cardId,
+  ({ Board }, id, cardId) => {
+    if (!id) {
+      return id;
+    }
+
+    const boardModel = Board.withId(id);
+
+    if (!boardModel) {
+      return boardModel;
+    }
+
+    return boardModel
+      .getCardsModelArray()
+      .filter((cardModel) => cardModel.id !== cardId)
+      .map((cardModel) => cardModel.ref);
+  },
+);
+
 export const selectFilteredCardIdsForCurrentBoard = createSelector(
  orm,
  (state) => selectPath(state).boardId,
@ -462,6 +484,7 @@ export default {
  selectTrashListIdForCurrentBoard,
  selectFiniteListIdsForCurrentBoard,
  selectAvailableListsForCurrentBoard,
+  selectCardsExceptCurrentForCurrentBoard,
  selectFilteredCardIdsForCurrentBoard,
  selectCustomFieldGroupIdsForCurrentBoard,
  selectCustomFieldGroupsForCurrentBoard,