feat: Open card actions on right-click

fix: Add icons to popup menu items
fix: Enable spellcheck on all textareas
2025-07-18 20:59:44 +02:00 · 2025-07-17 17:43:01 +02:00 · 2025-07-17 15:23:53 +02:00 · 2025-07-17 14:18:30 +02:00 · 2025-07-16 12:18:56 +02:00 · 2025-07-15 17:42:46 +02:00
354 changed files with 14233 additions and 2783 deletions
--- a/.github/workflows/build-and-publish-release-package.yml
+++ b/.github/workflows/build-and-publish-release-package.yml
@ -15,7 +15,7 @@ jobs:
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: '18'
+          node-version: '22'
          cache: 'npm'

      - name: Update npm
--- a/.github/workflows/build-and-test.yml
+++ b/.github/workflows/build-and-test.yml
@ -24,7 +24,7 @@ jobs:
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: '18'
+          node-version: '22'
          cache: 'npm'

      - name: Set up PostgreSQL
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@ -16,7 +16,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: '18'
+          node-version: '22'
          cache: 'npm'

      - name: Cache Node.js modules
--- a/6
+++ b/6
@ -1,4 +1,4 @@
-FROM node:18-alpine AS server-dependencies
+FROM node:22-alpine AS server-dependencies

 RUN apk -U upgrade \
  && apk add build-base python3 --no-cache
@ -10,7 +10,7 @@ COPY server/package.json server/package-lock.json server/requirements.txt ./
 RUN npm install npm --global \
  && npm install --omit=dev

-FROM node:lts AS client
+FROM node:22 AS client

 WORKDIR /app

@ -21,7 +21,7 @@ RUN npm install npm --global \

 RUN DISABLE_ESLINT_PLUGIN=true npm run build

-FROM node:18-alpine
+FROM node:22-alpine

 RUN apk -U upgrade \
  && apk add bash python3 --no-cache \
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@ -1,4 +1,4 @@
-FROM node:lts-alpine
+FROM node:22-alpine

 RUN apk -U upgrade \
  && apk add bash build-base python3 xdg-utils --no-cache \
--- a/LICENSE.md
+++ b/LICENSE.md
@ -48,7 +48,7 @@ You may use or modify PLANKA (a) for personal, hobby, or educational purposes, (

 ### Restricted Use

-Sharing accounts/credentials with third parties for business purposes or operating PLANKA as a hosted service for any commercial gain whatsoever is prohibited. Commercial gain includes any form of payment, advertising revenue, data monetization, or indirect commercial benefit or business advantage.
+Sharing accounts/credentials with third parties for business purposes or operating PLANKA as a hosted service for third parties for any commercial gain whatsoever is prohibited. Commercial gain includes any form of payment, advertising revenue, data monetization, or indirect commercial benefit or business advantage.

 For all other PLANKA-based hosting services or shared use of PLANKA accounts across organizations, you need to buy a commercial PLANKA license.

--- a/LICENSES/PLANKA
+++ b/LICENSES/PLANKA
@ -48,7 +48,7 @@ Sie dürfen PLANKA nutzen oder modifizieren (a) für persönliche, Hobby- oder B

 ### Eingeschränkte Nutzung

-Das Teilen von Konten/Zugangsdaten mit Dritten für geschäftliche Zwecke oder der Betrieb von PLANKA als gehosteter Dienst für jeglichen kommerziellen Gewinn ist untersagt. Kommerzieller Gewinn umfasst jede Form von Zahlung, Werbeeinnahmen, Datenmonetarisierung oder indirekten kommerziellen Nutzen oder Geschäftsvorteil.
+Das Teilen von Konten/Zugangsdaten mit Dritten für geschäftliche Zwecke oder der Betrieb von PLANKA als gehosteter Dienst für Dritte zu jeglichen kommerziellen Gewinn ist untersagt. Kommerzieller Gewinn umfasst jede Form von Zahlung, Werbeeinnahmen, Datenmonetarisierung oder indirekten kommerziellen Nutzen oder Geschäftsvorteil.

 Für alle anderen PLANKA-basierten Hosting-Dienste oder die gemeinsame Nutzung von PLANKA-Konten zwischen Organisationen müssen Sie eine kommerzielle PLANKA-Lizenz erwerben.

--- a/LICENSES/PLANKA
+++ b/LICENSES/PLANKA
@ -48,7 +48,7 @@ You may use or modify PLANKA (a) for personal, hobby, or educational purposes, (

 ### Restricted Use

-Sharing accounts/credentials with third parties for business purposes or operating PLANKA as a hosted service for any commercial gain whatsoever is prohibited. Commercial gain includes any form of payment, advertising revenue, data monetization, or indirect commercial benefit or business advantage.
+Sharing accounts/credentials with third parties for business purposes or operating PLANKA as a hosted service for third parties for any commercial gain whatsoever is prohibited. Commercial gain includes any form of payment, advertising revenue, data monetization, or indirect commercial benefit or business advantage.

 For all other PLANKA-based hosting services or shared use of PLANKA accounts across organizations, you need to buy a commercial PLANKA license.

--- a/LICENSES/PLANKA
+++ b/LICENSES/PLANKA
@ -52,7 +52,7 @@ Die Lizenz gewährt Ihnen das kostenlose Recht, die Software zu nutzen, zu modif

 - Sie dürfen PLANKA nutzen oder modifizieren (a) für persönliche, Hobby- oder Bildungszwecke, (b) intern innerhalb Ihrer eigenen Organisation, (c) für privates Hosting für eine typische Anzahl von Freunden, Familie oder persönlichen Projekten, (d) um gemeinnützigen Organisationen (wie von den jeweiligen Steuerbehörden anerkannt) kostenlosen Zugang zu gewähren, oder wenn Sie selbst eine anerkannte gemeinnützige Organisation sind, die externe Nutzer in Ihre Mission einbezieht, und (e) öffentliche Bildungseinrichtungen ausschließlich für akademische/Forschungszwecke.

- Das Teilen von Konten/Zugangsdaten mit Dritten für geschäftliche Zwecke oder der Betrieb von PLANKA als gehosteter Dienst für jeglichen kommerziellen Gewinn ist untersagt. Kommerzieller Gewinn umfasst jede Form von Zahlung, Werbeeinnahmen, Datenmonetarisierung oder indirekten kommerziellen Nutzen oder Geschäftsvorteil.
+- Das Teilen von Konten/Zugangsdaten mit Dritten für geschäftliche Zwecke oder der Betrieb von PLANKA als gehosteter Dienst für Dritte zu jeglichen kommerziellen Gewinn ist untersagt. Kommerzieller Gewinn umfasst jede Form von Zahlung, Werbeeinnahmen, Datenmonetarisierung oder indirekten kommerziellen Nutzen oder Geschäftsvorteil.

 - Sie dürfen keine vom Lizenzgeber bereitgestellten Lizenz-, Urheber- oder anderen Hinweise in der Software verändern, entfernen oder verschleiern. Jede Nutzung der Marken des Lizenzgebers unterliegt dem geltenden Recht.

--- a/LICENSES/PLANKA
+++ b/LICENSES/PLANKA
@ -52,7 +52,7 @@ The license allows you the free right to use, modify, create derivative works, a

 - You may use or modify PLANKA (a) for personal, hobby, or educational purposes, (b) internally within your own organization, (c) for private hosting for a typical number of friends, family, or personal projects, (d) to provide free access to non-profit organizations (as recognized by applicable tax authorities), or if you are a recognized non-profit organization yourself involving external users into your mission, and (e) public educational institutions for academic/research purposes only.

- Sharing accounts/credentials with third parties for business purposes or operating PLANKA as a hosted service for any commercial gain whatsoever is prohibited. Commercial gain includes any form of payment, advertising revenue, data monetization, or indirect commercial benefit or business advantage.
+- Sharing accounts/credentials with third parties for business purposes or operating PLANKA as a hosted service for third parties for any commercial gain whatsoever is prohibited. Commercial gain includes any form of payment, advertising revenue, data monetization, or indirect commercial benefit or business advantage.

 - You may not alter, remove, or obscure any licensing, copyright, or other notices from the software provided by the licensor. Any use of the licensor's trademarks is subject to applicable law.

--- a/charts/planka/Chart.yaml
+++ b/charts/planka/Chart.yaml
@ -15,7 +15,7 @@ type: application
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
-version: 1.0.2
+version: 1.0.3

 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application. Versions are not expected to
--- a/charts/planka/templates/deployment.yaml
+++ b/charts/planka/templates/deployment.yaml
@ -4,6 +4,10 @@ metadata:
  name: {{ include "planka.fullname" . }}
  labels:
    {{- include "planka.labels" . | nindent 4 }}
+  {{- with .Values.deploymentAnnotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
 spec:
  {{- if not .Values.autoscaling.enabled }}
  replicas: {{ .Values.replicaCount }}
--- a/charts/planka/values.yaml
+++ b/charts/planka/values.yaml
@ -45,6 +45,9 @@ podAnnotations: {}
 podSecurityContext: {}
  # fsGroup: 2000

+# Annotations to add to the deployment
+deploymentAnnotations: {}
+
 securityContext: {}
  # capabilities:
  #   drop:
@ -210,3 +213,22 @@ oidc:
 ##     key: key-inside-the-secret
 ##
 extraEnv: []
+
+## Example extraEnv for configuring SMTP
+## extraEnv:
+##   - name: SMTP_HOST
+##     value: "smtp.example.com"
+##   - name: SMTP_PORT
+##     value: "587"
+##   - name: SMTP_NAME
+##     value: "Your Name"
+##   - name: SMTP_SECURE
+##     value: "true"
+##   - name: SMTP_USER
+##     value: "your_email@example.com"
+##   - name: SMTP_PASSWORD
+##     value: "your_password"
+##   - name: SMTP_FROM
+##     value: "your_email@example.com"
+##   - name: SMTP_TLS_REJECT_UNAUTHORIZED
+##     value: "false"
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@ -79,13 +79,13 @@
  },
  "dependencies": {
    "@ballerina/highlightjs-ballerina": "^1.0.1",
-    "@diplodoc/cut-extension": "^0.7.3",
-    "@diplodoc/transform": "^4.57.2",
-    "@gravity-ui/markdown-editor": "^15.11.0",
-    "@gravity-ui/uikit": "^7.11.0",
+    "@diplodoc/cut-extension": "^0.7.4",
+    "@diplodoc/transform": "^4.57.7",
+    "@gravity-ui/components": "^4.4.0",
+    "@gravity-ui/markdown-editor": "^15.14.1",
+    "@gravity-ui/uikit": "^7.16.2",
    "@juggle/resize-observer": "^3.4.0",
-    "@types/papaparse": "^5.3.16",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@vitejs/plugin-react": "^4.6.0",
    "browserslist-to-esbuild": "^2.1.1",
    "classnames": "^2.5.1",
    "date-fns": "^2.30.0",
@ -96,7 +96,7 @@
    "highlightjs-apex": "^1.5.0",
    "highlightjs-blade": "^0.1.0",
    "highlightjs-cobol": "^0.3.3",
-    "highlightjs-cshtml-razor": "^2.1.1",
+    "highlightjs-cshtml-razor": "^2.2.0",
    "highlightjs-gf": "^1.0.1",
    "highlightjs-jolie": "^0.1.8",
    "highlightjs-lean": "^1.2.0",
@ -114,8 +114,8 @@
    "highlightjs-zenscript": "^2.0.0",
    "hightlightjs-papyrus": "^0.0.4",
    "history": "^5.3.0",
-    "i18next": "23.15.2",
-    "i18next-browser-languagedetector": "^8.1.0",
+    "i18next": "^25.2.1",
+    "i18next-browser-languagedetector": "^8.2.0",
    "initials": "^3.1.2",
    "javascript-time-ago": "^2.5.11",
    "js-cookie": "^3.0.5",
@ -137,12 +137,13 @@
    "react-dropzone": "^14.3.8",
    "react-frame-component": "^5.2.7",
    "react-hot-toast": "^2.5.2",
-    "react-i18next": "^15.5.1",
+    "react-i18next": "^15.5.3",
    "react-input-mask": "^2.0.4",
    "react-intersection-observer": "^9.16.0",
+    "react-mentions": "^4.4.10",
    "react-photoswipe-gallery": "^2.2.7",
    "react-redux": "^8.1.3",
-    "react-router-dom": "^6.30.0",
+    "react-router-dom": "^6.30.1",
    "react-textarea-autosize": "^8.5.9",
    "react-time-ago": "^7.3.3",
    "redux": "^4.2.1",
@ -151,10 +152,10 @@
    "redux-saga": "^1.3.0",
    "reselect": "^4.1.8",
    "sails.io.js": "^1.2.1",
-    "sass-embedded": "^1.87.0",
+    "sass-embedded": "^1.89.2",
    "semantic-ui-react": "^2.1.5",
    "socket.io-client": "^2.5.0",
-    "validator": "^13.15.0",
+    "validator": "^13.15.15",
    "vite": "^6.3.5",
    "vite-plugin-commonjs": "^0.10.4",
    "vite-plugin-node-polyfills": "^0.23.0",
@ -162,23 +163,23 @@
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
-    "@babel/eslint-parser": "^7.27.1",
+    "@babel/eslint-parser": "^7.27.5",
    "@babel/preset-env": "^7.27.2",
-    "@cucumber/cucumber": "^11.2.0",
+    "@cucumber/cucumber": "^11.3.0",
    "@cucumber/pretty-formatter": "^1.0.1",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.53.1",
    "babel-jest": "^29.7.0",
    "babel-preset-airbnb": "^5.0.0",
    "eslint": "^8.57.1",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-prettier": "^5.5.1",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^4.6.2",
    "jest": "^29.7.0",
-    "playwright": "^1.52.0",
+    "playwright": "^1.53.1",
    "prettier": "3.3.3"
  }
 }
--- a/client/patches/@gravity-ui+markdown-editor+15.14.1.patch
+++ b/client/patches/@gravity-ui+markdown-editor+15.14.1.patch
@ -22,6 +22,19 @@ index 2152fd6..ceda0c1 100644
         yfmHeading: {
             h1Key: f.toPM(A.Heading1),
             h2Key: f.toPM(A.Heading2),
+diff --git a/node_modules/@gravity-ui/markdown-editor/build/esm/extensions/yfm/YfmNote/YfmNoteSpecs/index.js b/node_modules/@gravity-ui/markdown-editor/build/esm/extensions/yfm/YfmNote/YfmNoteSpecs/index.js
+index bd3d4b9..5a5a5be 100644
+--- a/node_modules/@gravity-ui/markdown-editor/build/esm/extensions/yfm/YfmNote/YfmNoteSpecs/index.js
+++ b/node_modules/@gravity-ui/markdown-editor/build/esm/extensions/yfm/YfmNote/YfmNoteSpecs/index.js
+@@ -9,7 +9,7 @@ export { noteType, noteTitleType } from "./utils.js";
+ export const YfmNoteSpecs = (builder, opts) => {
+     const schemaSpecs = getSchemaSpecs(opts, builder.context.get('placeholder'));
+     builder
+-        .configureMd((md) => md.use(yfmPlugin, { log }))
+        .configureMd((md) => md.use(yfmPlugin, { log, notesAutotitle: false }))
+         .addNode(NoteNode.Note, () => ({
+         spec: schemaSpecs[NoteNode.Note],
+         toMd: serializerTokens[NoteNode.Note],
 diff --git a/node_modules/@gravity-ui/markdown-editor/build/esm/presets/yfm.js b/node_modules/@gravity-ui/markdown-editor/build/esm/presets/yfm.js
 index ed2a9db..f95b693 100644
 --- a/node_modules/@gravity-ui/markdown-editor/build/esm/presets/yfm.js
--- 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/public/logo192.png
+++ b/client/public/logo192.png
--- a/client/src/actions/core.js
+++ b/client/src/actions/core.js
@ -8,6 +8,7 @@ import ActionTypes from '../constants/ActionTypes';
 const initializeCore = (
  user,
  board,
+  webhooks,
  users,
  projects,
  projectManagers,
@ -33,6 +34,7 @@ const initializeCore = (
  payload: {
    user,
    board,
+    webhooks,
    users,
    projects,
    projectManagers,
--- a/client/src/actions/index.js
+++ b/client/src/actions/index.js
@ -8,6 +8,7 @@ import socket from './socket';
 import login from './login';
 import core from './core';
 import modals from './modals';
+import webhooks from './webhooks';
 import users from './users';
 import projects from './projects';
 import projectManagers from './project-managers';
@ -35,6 +36,7 @@ export default {
  ...login,
  ...core,
  ...modals,
+  ...webhooks,
  ...users,
  ...projects,
  ...projectManagers,
--- a/client/src/actions/socket.js
+++ b/client/src/actions/socket.js
@ -14,6 +14,7 @@ const handleSocketReconnect = (
  config,
  user,
  board,
+  webhooks,
  users,
  projects,
  projectManagers,
@ -40,6 +41,7 @@ const handleSocketReconnect = (
    config,
    user,
    board,
+    webhooks,
    users,
    projects,
    projectManagers,
--- a/client/src/actions/users.js
+++ b/client/src/actions/users.js
@ -67,6 +67,7 @@ const handleUserUpdate = (
  boardIds,
  config,
  board,
+  webhooks,
  users,
  projects,
  projectManagers,
@ -95,6 +96,7 @@ const handleUserUpdate = (
    boardIds,
    config,
    board,
+    webhooks,
    users,
    projects,
    projectManagers,
--- a/client/src/actions/webhooks.js
+++ b/client/src/actions/webhooks.js
@ -0,0 +1,104 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import ActionTypes from '../constants/ActionTypes';
+
+const createWebhook = (webhook) => ({
+  type: ActionTypes.WEBHOOK_CREATE,
+  payload: {
+    webhook,
+  },
+});
+
+createWebhook.success = (localId, webhook) => ({
+  type: ActionTypes.WEBHOOK_CREATE__SUCCESS,
+  payload: {
+    localId,
+    webhook,
+  },
+});
+
+createWebhook.failure = (localId, error) => ({
+  type: ActionTypes.WEBHOOK_CREATE__FAILURE,
+  payload: {
+    localId,
+    error,
+  },
+});
+
+const handleWebhookCreate = (webhook) => ({
+  type: ActionTypes.WEBHOOK_CREATE_HANDLE,
+  payload: {
+    webhook,
+  },
+});
+
+const updateWebhook = (id, data) => ({
+  type: ActionTypes.WEBHOOK_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
+updateWebhook.success = (webhook) => ({
+  type: ActionTypes.WEBHOOK_UPDATE__SUCCESS,
+  payload: {
+    webhook,
+  },
+});
+
+updateWebhook.failure = (id, error) => ({
+  type: ActionTypes.WEBHOOK_UPDATE__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
+const handleWebhookUpdate = (webhook) => ({
+  type: ActionTypes.WEBHOOK_UPDATE_HANDLE,
+  payload: {
+    webhook,
+  },
+});
+
+const deleteWebhook = (id) => ({
+  type: ActionTypes.WEBHOOK_DELETE,
+  payload: {
+    id,
+  },
+});
+
+deleteWebhook.success = (webhook) => ({
+  type: ActionTypes.WEBHOOK_DELETE__SUCCESS,
+  payload: {
+    webhook,
+  },
+});
+
+deleteWebhook.failure = (id, error) => ({
+  type: ActionTypes.WEBHOOK_DELETE__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
+const handleWebhookDelete = (webhook) => ({
+  type: ActionTypes.WEBHOOK_DELETE_HANDLE,
+  payload: {
+    webhook,
+  },
+});
+
+export default {
+  createWebhook,
+  handleWebhookCreate,
+  updateWebhook,
+  handleWebhookUpdate,
+  deleteWebhook,
+  handleWebhookDelete,
+};
--- a/client/src/api/index.js
+++ b/client/src/api/index.js
@ -7,6 +7,7 @@ import http from './http';
 import socket from './socket';
 import config from './config';
 import accessTokens from './access-tokens';
+import webhooks from './webhooks';
 import users from './users';
 import projects from './projects';
 import projectManagers from './project-managers';
@ -35,6 +36,7 @@ export { http, socket };
 export default {
  ...config,
  ...accessTokens,
+  ...webhooks,
  ...users,
  ...projects,
  ...projectManagers,
--- a/client/src/api/webhooks.js
+++ b/client/src/api/webhooks.js
@ -0,0 +1,23 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import socket from './socket';
+
+/* Actions */
+
+const getWebhooks = (headers) => socket.get('/webhooks', undefined, headers);
+
+const createWebhook = (data, headers) => socket.post('/webhooks', data, headers);
+
+const updateWebhook = (id, data, headers) => socket.patch(`/webhooks/${id}`, data, headers);
+
+const deleteWebhook = (id, headers) => socket.delete(`/webhooks/${id}`, undefined, headers);
+
+export default {
+  getWebhooks,
+  createWebhook,
+  updateWebhook,
+  deleteWebhook,
+};
--- a/client/src/assets/images/logo.png
+++ b/client/src/assets/images/logo.png
--- a/client/src/components/activities/BoardActivitiesModal/Item.module.scss
+++ b/client/src/components/activities/BoardActivitiesModal/Item.module.scss
@ -16,6 +16,7 @@
    padding-bottom: 14px;
    vertical-align: top;
    width: calc(100% - 40px);
+    word-wrap: break-word;
  }

  .date {
--- a/client/src/components/activities/CardActivities/Item.module.scss
+++ b/client/src/components/activities/CardActivities/Item.module.scss
@ -16,6 +16,7 @@
    padding-bottom: 14px;
    vertical-align: top;
    width: calc(100% - 40px);
+    word-wrap: break-word;
  }

  .date {
--- a/client/src/components/attachments/AddAttachmentStep/AddAttachmentStep.jsx
+++ b/client/src/components/attachments/AddAttachmentStep/AddAttachmentStep.jsx
@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Menu } from 'semantic-ui-react';
+import { Icon, Menu } from 'semantic-ui-react';
 import { FilePicker, Popup } from '../../../lib/custom-ui';

 import entryActions from '../../../entry-actions';
@ -47,6 +47,7 @@ const AddAttachmentStep = React.memo(({ onClose }) => {
        <Menu secondary vertical className={styles.menu}>
          <FilePicker multiple onSelect={handleFilesSelect}>
            <Menu.Item className={styles.menuItem}>
+              <Icon name="computer" className={styles.menuItemIcon} />
              {t('common.fromComputer', {
                context: 'title',
              })}
--- a/client/src/components/attachments/AddAttachmentStep/AddAttachmentStep.module.scss
+++ b/client/src/components/attachments/AddAttachmentStep/AddAttachmentStep.module.scss
@ -21,6 +21,11 @@
    padding-left: 14px;
  }

+  .menuItemIcon {
+    float: left;
+    margin: 0 0.5em 0 0;
+  }
+
  .tip {
    opacity: 0.5;
  }
--- a/client/src/components/attachments/Attachments/CsvViewer.jsx
+++ b/client/src/components/attachments/Attachments/CsvViewer.jsx
@ -3,20 +3,19 @@
 * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
 */

-import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Pagination, Table } from 'semantic-ui-react';
 import Papa from 'papaparse';
 import Frame from 'react-frame-component';
+import { Loader, Pagination, Table } from 'semantic-ui-react';

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

 const ROWS_PER_PAGE = 50;

-/* eslint-disable react/no-array-index-key */
 const CsvViewer = React.memo(({ src, className }) => {
-  const [csvData, setCsvData] = useState(null);
+  const [rows, setRows] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);

  const frameStyles = useMemo(
@ -34,7 +33,7 @@ const CsvViewer = React.memo(({ src, className }) => {
    [],
  );

-  const handlePageChange = useCallback((e, { activePage }) => {
+  const handlePageChange = useCallback((_, { activePage }) => {
    setCurrentPage(activePage);
  }, []);

@ -49,47 +48,46 @@ const CsvViewer = React.memo(({ src, className }) => {

        Papa.parse(text, {
          skipEmptyLines: true,
-          complete: (results) => {
-            const rows = results.data;
-            setCsvData({
-              rows,
-              totalRows: rows.length,
-            });
+          complete: ({ data }) => {
+            setRows(data);
          },
        });
-      } catch (err) {
-        setCsvData(null);
+      } catch {
+        /* empty */
      }
    }

    fetchFile();
  }, [src]);

-  if (!csvData) {
-    return null;
+  if (rows === null) {
+    return <Loader active size="big" />;
  }

-  const startIdx = (currentPage - 1) * ROWS_PER_PAGE;
-  const endIdx = startIdx + ROWS_PER_PAGE;
-  const currentRows = csvData.rows.slice(startIdx, endIdx);
-  const totalPages = Math.ceil(csvData.totalRows / ROWS_PER_PAGE);
+  const startIndex = (currentPage - 1) * ROWS_PER_PAGE;
+  const endIndex = startIndex + ROWS_PER_PAGE;
+  const currentRows = rows.slice(startIndex, endIndex);
+  const totalPages = Math.ceil(rows.length / ROWS_PER_PAGE);

-  const content = (
-    <div>
+  return (
+    <Frame
+      head={<style>{frameStyles.join('')}</style>}
+      className={classNames(styles.wrapper, className)}
+    >
      <div>
        <Table celled compact>
          <Table.Header>
            <Table.Row>
-              {csvData.rows[0].map((header, index) => (
-                <Table.HeaderCell key={index}>{header}</Table.HeaderCell>
+              {rows[0].map((cell) => (
+                <Table.HeaderCell key={cell}>{cell}</Table.HeaderCell>
              ))}
            </Table.Row>
          </Table.Header>
          <Table.Body>
-            {currentRows.slice(1).map((row, rowIndex) => (
-              <Table.Row key={rowIndex}>
-                {row.map((cell, cellIndex) => (
-                  <Table.Cell key={cellIndex}>{cell}</Table.Cell>
+            {currentRows.slice(1).map((row) => (
+              <Table.Row key={row}>
+                {row.map((cell) => (
+                  <Table.Cell key={cell}>{cell}</Table.Cell>
                ))}
              </Table.Row>
            ))}
@ -98,30 +96,18 @@ const CsvViewer = React.memo(({ src, className }) => {
      </div>
      {totalPages > 1 && (
        <Pagination
-          activePage={currentPage}
+          secondary
+          pointing
          totalPages={totalPages}
-          onPageChange={handlePageChange}
+          activePage={currentPage}
          firstItem={null}
          lastItem={null}
-          pointing
-          secondary
-          boundaryRange={1}
-          siblingRange={1}
+          onPageChange={handlePageChange}
        />
      )}
-    </div>
-  );
-
-  return (
-    <Frame
-      head={<style>{frameStyles.join('')}</style>}
-      className={classNames(styles.wrapper, className)}
-    >
-      {content}
    </Frame>
  );
 });
-/* eslint-enable react/no-array-index-key */

 CsvViewer.propTypes = {
  src: PropTypes.string.isRequired,
--- a/client/src/components/attachments/Attachments/Item.jsx
+++ b/client/src/components/attachments/Attachments/Item.jsx
@ -16,6 +16,7 @@ import Encodings from '../../../constants/Encodings';
 import { AttachmentTypes } from '../../../constants/Enums';
 import ItemContent from './ItemContent';
 import ContentViewer from './ContentViewer';
+import PdfViewer from './PdfViewer';
 import CsvViewer from './CsvViewer';

 import styles from './Item.module.scss';
@ -40,10 +41,8 @@ const Item = React.memo(({ id, isVisible }) => {
      switch (attachment.data.mimeType) {
        case 'application/pdf':
          content = (
-            // eslint-disable-next-line jsx-a11y/alt-text
-            <object
-              data={attachment.data.url}
-              type={attachment.data.mimeType}
+            <PdfViewer
+              src={attachment.data.url}
              className={classNames(styles.content, styles.contentViewer)}
            />
          );
@ -60,15 +59,6 @@ const Item = React.memo(({ id, isVisible }) => {
            <audio controls src={attachment.data.url} className={styles.content} />
          );

-          break;
-        case 'video/mp4':
-        case 'video/ogg':
-        case 'video/webm':
-          content = (
-            // eslint-disable-next-line jsx-a11y/media-has-caption
-            <video controls src={attachment.data.url} className={styles.content} />
-          );
-
          break;
        case 'text/csv':
          content = (
@ -78,6 +68,15 @@ const Item = React.memo(({ id, isVisible }) => {
            />
          );

+          break;
+        case 'video/mp4':
+        case 'video/ogg':
+        case 'video/webm':
+          content = (
+            // eslint-disable-next-line jsx-a11y/media-has-caption
+            <video controls src={attachment.data.url} className={styles.content} />
+          );
+
          break;
        default:
          if (attachment.data.encoding === Encodings.UTF8) {
--- a/client/src/components/attachments/Attachments/Item.module.scss
+++ b/client/src/components/attachments/Attachments/Item.module.scss
@ -23,6 +23,7 @@
    font-size: 20px;
    font-weight: bold;
    height: 20px;
+    text-align: center;
    width: 470px;
  }
 }
--- a/client/src/components/attachments/Attachments/ItemContent.jsx
+++ b/client/src/components/attachments/Attachments/ItemContent.jsx
@ -54,6 +54,19 @@ const ItemContent = React.forwardRef(({ id, onOpen }, ref) => {
    }
  }, [onOpen, attachment.data]);

+  const handleDownloadClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+
+      const linkElement = document.createElement('a');
+      linkElement.href = attachment.data.url;
+      linkElement.download = attachment.data.filename;
+      linkElement.target = '_blank';
+      linkElement.click();
+    },
+    [attachment.data],
+  );
+
  const handleToggleCoverClick = useCallback(
    (event) => {
      event.stopPropagation();
@ -114,25 +127,31 @@ const ItemContent = React.forwardRef(({ id, onOpen }, ref) => {
        <span className={styles.information}>
          <TimeAgo date={attachment.createdAt} />
        </span>
-        {attachment.type === AttachmentTypes.FILE && attachment.data.image && canEdit && (
+        {attachment.type === AttachmentTypes.FILE && (
          <span className={styles.options}>
-            <button type="button" className={styles.option} onClick={handleToggleCoverClick}>
-              <Icon
-                name="window maximize outline"
-                flipped="vertically"
-                size="small"
-                className={styles.optionIcon}
-              />
-              <span className={styles.optionText}>
-                {isCover
-                  ? t('action.removeCover', {
-                      context: 'title',
-                    })
-                  : t('action.makeCover', {
-                      context: 'title',
-                    })}
-              </span>
+            <button type="button" className={styles.option} onClick={handleDownloadClick}>
+              <Icon name="download" size="small" className={styles.optionIcon} />
+              <span className={styles.optionText}>Download</span>
            </button>
+            {attachment.data.image && canEdit && (
+              <button type="button" className={styles.option} onClick={handleToggleCoverClick}>
+                <Icon
+                  name="window maximize outline"
+                  flipped="vertically"
+                  size="small"
+                  className={styles.optionIcon}
+                />
+                <span className={styles.optionText}>
+                  {isCover
+                    ? t('action.removeCover', {
+                        context: 'title',
+                      })
+                    : t('action.makeCover', {
+                        context: 'title',
+                      })}
+                </span>
+              </button>
+            )}
          </span>
        )}
      </div>
--- a/client/src/components/attachments/Attachments/ItemContent.module.scss
+++ b/client/src/components/attachments/Attachments/ItemContent.module.scss
@ -52,6 +52,10 @@
    outline: none;
    padding: 0;

+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+
    &:hover {
      color: #172b4d;
    }
--- a/client/src/components/attachments/Attachments/PdfViewer.jsx
+++ b/client/src/components/attachments/Attachments/PdfViewer.jsx
@ -0,0 +1,26 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import styles from './PdfViewer.module.scss';
+
+const PdfViewer = React.memo(({ src, className }) => (
+  // eslint-disable-next-line jsx-a11y/iframe-has-title
+  <iframe src={src} type="application/pdf" className={classNames(styles.wrapper, className)} />
+));
+
+PdfViewer.propTypes = {
+  src: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+PdfViewer.defaultProps = {
+  className: undefined,
+};
+
+export default PdfViewer;
--- a/client/src/components/attachments/Attachments/PdfViewer.module.scss
+++ b/client/src/components/attachments/Attachments/PdfViewer.module.scss
@ -4,7 +4,7 @@
 */

 :global(#app) {
-  .submitButton {
-    margin-top: 12px;
+  .wrapper {
+    border: 0;
  }
 }
--- a/client/src/components/board-memberships/BoardMemberships/ActionsStep.module.scss
+++ b/client/src/components/board-memberships/BoardMemberships/ActionsStep.module.scss
@ -67,5 +67,6 @@
    font-size: 14px;
    line-height: 1.2;
    padding: 2px 0 2px 2px;
+    word-wrap: break-word;
  }
 }
--- a/client/src/components/boards/BoardActions/RightSide/ActionsStep.jsx
+++ b/client/src/components/boards/BoardActions/RightSide/ActionsStep.jsx
@ -141,7 +141,7 @@ const ActionsStep = React.memo(({ onClose }) => {
          </Menu.Item>
          {withTrashEmptier && (
            <>
-              {(withSubscribe || withCustomFieldGroups) && <hr className={styles.divider} />}
+              <hr className={styles.divider} />
              <Menu.Item className={styles.menuItem} onClick={handleEmptyTrashClick}>
                <Icon name="trash alternate outline" className={styles.menuItemIcon} />
                {t('action.emptyTrash', {
@ -151,7 +151,7 @@ const ActionsStep = React.memo(({ onClose }) => {
            </>
          )}
          <>
-            {(withSubscribe || withTrashEmptier) && <hr className={styles.divider} />}
+            <hr className={styles.divider} />
            {[BoardContexts.BOARD, BoardContexts.ARCHIVE, BoardContexts.TRASH].map((context) => (
              <Menu.Item
                key={context}
--- a/client/src/components/boards/BoardActions/RightSide/ActionsStep.module.scss
+++ b/client/src/components/boards/BoardActions/RightSide/ActionsStep.module.scss
@ -23,6 +23,6 @@

  .menuItemIcon {
    float: left;
-    margin-right: 0.5em;
+    margin: 0 0.5em 0 0;
  }
 }
--- a/client/src/components/cards/AddCard/AddCard.jsx
+++ b/client/src/components/cards/AddCard/AddCard.jsx
@ -166,7 +166,6 @@ const AddCard = React.memo(({ isOpened, className, onCreate, onClose }) => {
          placeholder={t('common.enterCardTitle')}
          maxLength={1024}
          minRows={3}
-          spellCheck={false}
          className={styles.field}
          onKeyDown={handleFieldKeyDown}
          onChange={handleFieldChange}
--- a/client/src/components/cards/Card/ActionsStep.jsx
+++ b/client/src/components/cards/Card/ActionsStep.jsx
@ -7,7 +7,7 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Menu } from 'semantic-ui-react';
+import { Icon, Menu } from 'semantic-ui-react';
 import { Popup } from '../../../lib/custom-ui';

 import selectors from '../../../selectors';
@ -290,6 +290,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
        <Menu secondary vertical className={styles.menu}>
          {canEditName && (
            <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
+              <Icon name="edit outline" className={styles.menuItemIcon} />
              {t('action.editTitle', {
                context: 'title',
              })}
@ -297,6 +298,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
          )}
          {!board.limitCardTypesToDefaultOne && canEditType && (
            <Menu.Item className={styles.menuItem} onClick={handleEditTypeClick}>
+              <Icon name="map outline" className={styles.menuItemIcon} />
              {t('action.editType', {
                context: 'title',
              })}
@ -304,6 +306,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
          )}
          {card.type === CardTypes.PROJECT && canUseMembers && (
            <Menu.Item className={styles.menuItem} onClick={handleUsersClick}>
+              <Icon name="user outline" className={styles.menuItemIcon} />
              {t('common.members', {
                context: 'title',
              })}
@ -311,6 +314,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
          )}
          {canUseLabels && (
            <Menu.Item className={styles.menuItem} onClick={handleLabelsClick}>
+              <Icon name="bookmark outline" className={styles.menuItemIcon} />
              {t('common.labels', {
                context: 'title',
              })}
@ -318,6 +322,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
          )}
          {card.type === CardTypes.STORY && canUseMembers && (
            <Menu.Item className={styles.menuItem} onClick={handleUsersClick}>
+              <Icon name="user outline" className={styles.menuItemIcon} />
              {t('common.members', {
                context: 'title',
              })}
@ -325,6 +330,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
          )}
          {card.type === CardTypes.PROJECT && canEditDueDate && (
            <Menu.Item className={styles.menuItem} onClick={handleEditDueDateClick}>
+              <Icon name="calendar check outline" className={styles.menuItemIcon} />
              {t('action.editDueDate', {
                context: 'title',
              })}
@ -332,6 +338,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
          )}
          {card.type === CardTypes.PROJECT && canEditStopwatch && (
            <Menu.Item className={styles.menuItem} onClick={handleEditStopwatchClick}>
+              <Icon name="clock outline" className={styles.menuItemIcon} />
              {t('action.editStopwatch', {
                context: 'title',
              })}
@ -339,6 +346,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
          )}
          {canDuplicate && (
            <Menu.Item className={styles.menuItem} onClick={handleDuplicateClick}>
+              <Icon name="copy outline" className={styles.menuItemIcon} />
              {t('action.duplicateCard', {
                context: 'title',
              })}
@ -346,6 +354,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
          )}
          {canMove && (
            <Menu.Item className={styles.menuItem} onClick={handleMoveClick}>
+              <Icon name="share square outline" className={styles.menuItemIcon} />
              {t('action.moveCard', {
                context: 'title',
              })}
@ -353,6 +362,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
          )}
          {prevList && canRestore && (
            <Menu.Item className={styles.menuItem} onClick={handleRestoreClick}>
+              <Icon name="undo alternate" className={styles.menuItemIcon} />
              {t('action.restoreToList', {
                context: 'title',
                list: prevList.name || t(`common.${prevList.type}`),
@ -361,6 +371,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
          )}
          {list.type !== ListTypes.ARCHIVE && canArchive && (
            <Menu.Item className={styles.menuItem} onClick={handleArchiveClick}>
+              <Icon name="folder open outline" className={styles.menuItemIcon} />
              {t('action.archiveCard', {
                context: 'title',
              })}
@ -368,6 +379,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
          )}
          {canDelete && (
            <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+              <Icon name="trash alternate outline" className={styles.menuItemIcon} />
              {isInTrashList
                ? t('action.deleteForever', {
                    context: 'title',
--- a/client/src/components/cards/Card/ActionsStep.module.scss
+++ b/client/src/components/cards/Card/ActionsStep.module.scss
@ -13,4 +13,9 @@
    margin: 0;
    padding-left: 14px;
  }
+
+  .menuItemIcon {
+    float: left;
+    margin: 0 0.5em 0 0;
+  }
 }
--- a/client/src/components/cards/Card/Card.jsx
+++ b/client/src/components/cards/Card/Card.jsx
@ -5,17 +5,17 @@

 import upperFirst from 'lodash/upperFirst';
 import camelCase from 'lodash/camelCase';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Icon } from 'semantic-ui-react';
 import { push } from '../../../lib/redux-router';
-import { usePopup } from '../../../lib/popup';
+import { closePopup, usePopup } from '../../../lib/popup';

 import selectors from '../../../selectors';
 import Paths from '../../../constants/Paths';
-import { BoardMembershipRoles, CardTypes, ListTypes } from '../../../constants/Enums';
+import { BoardMembershipRoles, CardTypes } from '../../../constants/Enums';
 import ProjectContent from './ProjectContent';
 import StoryContent from './StoryContent';
 import InlineContent from './InlineContent';
@ -51,6 +51,8 @@ const Card = React.memo(({ id, isInline }) => {
  const dispatch = useDispatch();
  const [isEditNameOpened, setIsEditNameOpened] = useState(false);

+  const actionsPopupRef = useRef(null);
+
  const handleClick = useCallback(() => {
    if (document.activeElement) {
      document.activeElement.blur();
@ -59,6 +61,17 @@ const Card = React.memo(({ id, isInline }) => {
    dispatch(push(Paths.CARDS.replace(':id', id)));
  }, [id, dispatch]);

+  const handleContextMenu = useCallback((event) => {
+    if (!actionsPopupRef.current) {
+      return;
+    }
+
+    event.preventDefault();
+
+    closePopup();
+    actionsPopupRef.current.open();
+  }, []);
+
  const handleNameEdit = useCallback(() => {
    setIsEditNameOpened(true);
  }, []);
@ -108,17 +121,15 @@ const Card = React.memo(({ id, isInline }) => {
          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
                                       jsx-a11y/no-static-element-interactions */}
          <div
-            className={classNames(
-              styles.content,
-              list.type === ListTypes.CLOSED && styles.contentDisabled,
-            )}
+            className={classNames(styles.content, card.isClosed && styles.contentDisabled)}
            onClick={handleClick}
+            onContextMenu={handleContextMenu}
          >
            <Content cardId={id} />
            {colorLineNode}
          </div>
          {canUseActions && (
-            <ActionsPopup cardId={id} onNameEdit={handleNameEdit}>
+            <ActionsPopup ref={actionsPopupRef} cardId={id} onNameEdit={handleNameEdit}>
              <Button className={styles.actionsButton}>
                <Icon fitted name="pencil" size="small" />
              </Button>
@ -126,12 +137,7 @@ const Card = React.memo(({ id, isInline }) => {
          )}
        </>
      ) : (
-        <span
-          className={classNames(
-            styles.content,
-            list.type === ListTypes.CLOSED && styles.contentDisabled,
-          )}
-        >
+        <span className={classNames(styles.content, card.isClosed && styles.contentDisabled)}>
          <Content cardId={id} />
          {colorLineNode}
        </span>
--- a/client/src/components/cards/Card/EditName.jsx
+++ b/client/src/components/cards/Card/EditName.jsx
@ -96,7 +96,6 @@ const EditName = React.memo(({ cardId, onClose }) => {
          maxLength={1024}
          minRows={3}
          maxRows={8}
-          spellCheck={false}
          className={styles.field}
          onKeyDown={handleFieldKeyDown}
          onChange={handleFieldChange}
--- a/client/src/components/cards/Card/InlineContent.jsx
+++ b/client/src/components/cards/Card/InlineContent.jsx
@ -28,6 +28,7 @@ const InlineContent = React.memo(({ cardId }) => {
  );

  const card = useSelector((state) => selectCardById(state, cardId));
+  const list = useSelector((state) => selectListById(state, card.listId));
  const labelIds = useSelector((state) => selectLabelIdsByCardId(state, cardId));

  const notificationsTotal = useSelector((state) =>
@ -35,8 +36,6 @@ const InlineContent = React.memo(({ cardId }) => {
  );

  const listName = useSelector((state) => {
-    const list = selectListById(state, card.listId);
-
    if (!list.name) {
      return null;
    }
@ -88,7 +87,9 @@ const InlineContent = React.memo(({ cardId }) => {
          ))}
        </span>
      )}
-      <span className={classNames(styles.attachments, styles.name)}>
+      <span
+        className={classNames(styles.attachments, styles.name, card.isClosed && styles.nameClosed)}
+      >
        <div className={styles.hidable}>{card.name}</div>
      </span>
      {descriptionText && (
--- a/client/src/components/cards/Card/InlineContent.module.scss
+++ b/client/src/components/cards/Card/InlineContent.module.scss
@ -50,6 +50,10 @@
    max-width: 30%;
  }

+  .nameClosed {
+    text-decoration: line-through;
+  }
+
  .notification {
    background: #eb5a46;
    color: #fff;
--- a/client/src/components/cards/Card/ProjectContent.jsx
+++ b/client/src/components/cards/Card/ProjectContent.jsx
@ -13,7 +13,7 @@ import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import { startStopwatch, stopStopwatch } from '../../../utils/stopwatch';
 import { isListArchiveOrTrash } from '../../../utils/record-helpers';
-import { BoardMembershipRoles, BoardViews, ListTypes } from '../../../constants/Enums';
+import { BoardMembershipRoles, BoardViews } from '../../../constants/Enums';
 import TaskList from './TaskList';
 import DueDateChip from '../DueDateChip';
 import StopwatchChip from '../StopwatchChip';
@ -145,7 +145,7 @@ const ProjectContent = React.memo(({ cardId }) => {

  return (
    <div className={styles.wrapper}>
-      <div className={styles.name}>{card.name}</div>
+      <div className={classNames(styles.name, card.isClosed && styles.nameClosed)}>{card.name}</div>
      {coverUrl && (
        <div className={styles.coverWrapper}>
          <img src={coverUrl} alt="" className={styles.cover} />
@ -187,11 +187,7 @@ const ProjectContent = React.memo(({ cardId }) => {
          )}
          {card.dueDate && (
            <span className={classNames(styles.attachment, styles.attachmentLeft)}>
-              <DueDateChip
-                value={card.dueDate}
-                size="tiny"
-                withStatus={list.type !== ListTypes.CLOSED && !isListArchiveOrTrash(list)}
-              />
+              <DueDateChip value={card.dueDate} size="tiny" withStatus={!card.isClosed} />
            </span>
          )}
          {card.stopwatch && (
--- a/client/src/components/cards/Card/ProjectContent.module.scss
+++ b/client/src/components/cards/Card/ProjectContent.module.scss
@ -84,6 +84,10 @@
    word-wrap: break-word;
  }

+  .nameClosed {
+    text-decoration: line-through;
+  }
+
  .notification {
    background: #eb5a46;
    color: #fff;
--- a/client/src/components/cards/Card/StoryContent.jsx
+++ b/client/src/components/cards/Card/StoryContent.jsx
@ -40,6 +40,7 @@ const StoryContent = React.memo(({ cardId }) => {
  const selectAttachmentById = useMemo(() => selectors.makeSelectAttachmentById(), []);

  const card = useSelector((state) => selectCardById(state, cardId));
+  const list = useSelector((state) => selectListById(state, card.listId));
  const labelIds = useSelector((state) => selectLabelIdsByCardId(state, cardId));
  const attachmentsTotal = useSelector((state) => selectAttachmentsTotalByCardId(state, cardId));

@ -52,8 +53,6 @@ const StoryContent = React.memo(({ cardId }) => {
  );

  const listName = useSelector((state) => {
-    const list = selectListById(state, card.listId);
-
    if (!list.name) {
      return null;
    }
@ -106,7 +105,9 @@ const StoryContent = React.memo(({ cardId }) => {
            ))}
          </span>
        )}
-        <div className={styles.name}>{card.name}</div>
+        <div className={classNames(styles.name, card.isClosed && styles.nameClosed)}>
+          {card.name}
+        </div>
        {card.description && <div className={styles.descriptionText}>{descriptionText}</div>}
        {(attachmentsTotal > 0 || notificationsTotal > 0 || listName) && (
          <span className={styles.attachments}>
--- a/client/src/components/cards/Card/StoryContent.module.scss
+++ b/client/src/components/cards/Card/StoryContent.module.scss
@ -74,6 +74,10 @@
    word-wrap: break-word;
  }

+  .nameClosed {
+    text-decoration: line-through;
+  }
+
  .notification {
    background: #eb5a46;
    color: #fff;
--- a/client/src/components/cards/Card/TaskList/Task.jsx
+++ b/client/src/components/cards/Card/TaskList/Task.jsx
@ -3,24 +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 selectLinkedCardById = useMemo(() => selectors.makeSelectCardById(), []);

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

+  const linkedCard = useSelector(
+    (state) => task.linkedCardId && selectLinkedCardById(state, task.linkedCardId),
+  );
+
+  const handleLinkClick = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+
  return (
-    <li className={classNames(styles.wrapper, task.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/CardModal/CreationDetailsStep.module.scss
+++ b/client/src/components/cards/CardModal/CreationDetailsStep.module.scss
@ -43,5 +43,6 @@
    font-size: 14px;
    line-height: 1.2;
    padding: 2px 0 2px 2px;
+    word-wrap: break-word;
  }
 }
--- a/client/src/components/cards/CardModal/NameField.jsx
+++ b/client/src/components/cards/CardModal/NameField.jsx
@ -82,7 +82,6 @@ const NameField = React.memo(({ defaultValue, size, onUpdate }) => {
      as={TextareaAutosize}
      value={value}
      maxLength={1024}
-      spellCheck={false}
      className={classNames(styles.field, styles[`field${upperFirst(size)}`])}
      onFocus={handleFocus}
      onKeyDown={handleKeyDown}
--- a/client/src/components/cards/CardModal/ProjectContent.jsx
+++ b/client/src/components/cards/CardModal/ProjectContent.jsx
@ -30,7 +30,7 @@ import SelectCardTypeStep from '../SelectCardTypeStep';
 import EditDueDateStep from '../EditDueDateStep';
 import EditStopwatchStep from '../EditStopwatchStep';
 import MoveCardStep from '../MoveCardStep';
-import Markdown from '../../common/Markdown';
+import ExpandableMarkdown from '../../common/ExpandableMarkdown';
 import EditMarkdown from '../../common/EditMarkdown';
 import ConfirmationStep from '../../common/ConfirmationStep';
 import UserAvatar from '../../users/UserAvatar';
@ -442,18 +442,14 @@ const ProjectContent = React.memo(({ onClose }) => {
                        <DueDateChip
                          withStatusIcon
                          value={card.dueDate}
-                          withStatus={
-                            list.type !== ListTypes.CLOSED && !isInArchiveList && !isInTrashList
-                          }
+                          withStatus={!card.isClosed}
                        />
                      </EditDueDatePopup>
                    ) : (
                      <DueDateChip
                        withStatusIcon
                        value={card.dueDate}
-                        withStatus={
-                          list.type !== ListTypes.CLOSED && !isInArchiveList && !isInTrashList
-                        }
+                        withStatus={!card.isClosed}
                      />
                    )}
                  </span>
@ -521,7 +517,7 @@ const ProjectContent = React.memo(({ onClose }) => {
                          <Button className={styles.editButton}>
                            <Icon fitted name="pencil" size="small" />
                          </Button>
-                          <Markdown>{card.description}</Markdown>
+                          <ExpandableMarkdown>{card.description}</ExpandableMarkdown>
                        </div>
                      ) : (
                        <button
@ -536,7 +532,7 @@ const ProjectContent = React.memo(({ onClose }) => {
                      ))}
                  </>
                )}
-                {!canEditDescription && <Markdown>{card.description}</Markdown>}
+                {!canEditDescription && <ExpandableMarkdown>{card.description}</ExpandableMarkdown>}
              </div>
            </div>
          )}
--- a/client/src/components/cards/CardModal/StoryContent/StoryContent.module.scss
+++ b/client/src/components/cards/CardModal/StoryContent/StoryContent.module.scss
@ -195,6 +195,7 @@
    font-size: 28px;
    font-weight: bold;
    line-height: 34px;
+    word-wrap: break-word;
  }

  .headerTitleWrapper {
--- a/client/src/components/comments/Comments/Add.jsx
+++ b/client/src/components/comments/Comments/Add.jsx
@ -3,16 +3,18 @@
 * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
 */

-import React, { useCallback, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import React, { useCallback, useState, useRef } from 'react';
+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 { Mention, MentionsInput } from 'react-mentions';
+import { Button, Form } from 'semantic-ui-react';
 import { useClickAwayListener, useDidUpdate, useToggle } from '../../../lib/hooks';

+import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import { useEscapeInterceptor, useForm, useNestedRef } from '../../../hooks';
 import { isModifierKeyPressed } from '../../../utils/event-helpers';
+import UserAvatar from '../../users/UserAvatar';

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

@ -21,13 +23,17 @@ const DEFAULT_DATA = {
 };

 const Add = React.memo(() => {
+  const boardMemberships = useSelector(selectors.selectMembershipsForCurrentBoard);
+
  const dispatch = useDispatch();
  const [t] = useTranslation();
+  const [data, , setData] = useForm(DEFAULT_DATA);
  const [isOpened, setIsOpened] = useState(false);
-  const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
  const [selectTextFieldState, selectTextField] = useToggle();

-  const [textFieldRef, handleTextFieldRef] = useNestedRef();
+  const textFieldRef = useRef(null);
+  const textMentionsRef = useRef(null);
+  const textInputRef = useRef(null);
  const [buttonRef, handleButtonRef] = useNestedRef();

  const submit = useCallback(() => {
@ -37,19 +43,24 @@ const Add = React.memo(() => {
    };

    if (!cleanData.text) {
-      textFieldRef.current.select();
+      textInputRef.current.select();
      return;
    }

    dispatch(entryActions.createCommentInCurrentCard(cleanData));
    setData(DEFAULT_DATA);
    selectTextField();
-  }, [dispatch, data, setData, selectTextField, textFieldRef]);
+  }, [dispatch, data, setData, selectTextField]);

  const handleEscape = useCallback(() => {
+    if (textMentionsRef.current.isOpened()) {
+      textMentionsRef.current.clearSuggestions();
+      return;
+    }
+
    setIsOpened(false);
-    textFieldRef.current.blur();
-  }, [textFieldRef]);
+    textInputRef.current.blur();
+  }, []);

  const [activateEscapeInterceptor, deactivateEscapeInterceptor] =
    useEscapeInterceptor(handleEscape);
@ -62,6 +73,15 @@ const Add = React.memo(() => {
    setIsOpened(true);
  }, []);

+  const handleFieldChange = useCallback(
+    (_, text) => {
+      setData({
+        text,
+      });
+    },
+    [setData],
+  );
+
  const handleFieldKeyDown = useCallback(
    (event) => {
      if (isModifierKeyPressed(event) && event.key === 'Enter') {
@ -76,8 +96,8 @@ const Add = React.memo(() => {
  }, []);

  const handleClickAwayCancel = useCallback(() => {
-    textFieldRef.current.focus();
-  }, [textFieldRef]);
+    textInputRef.current.focus();
+  }, []);

  const clickAwayProps = useClickAwayListener(
    [textFieldRef, buttonRef],
@ -85,6 +105,16 @@ const Add = React.memo(() => {
    handleClickAwayCancel,
  );

+  const suggestionRenderer = useCallback(
+    (entry, _, highlightedDisplay) => (
+      <div className={styles.suggestion}>
+        <UserAvatar id={entry.id} size="tiny" />
+        {highlightedDisplay}
+      </div>
+    ),
+    [],
+  );
+
  useDidUpdate(() => {
    if (isOpened) {
      activateEscapeInterceptor();
@ -94,26 +124,44 @@ const Add = React.memo(() => {
  }, [isOpened]);

  useDidUpdate(() => {
-    textFieldRef.current.focus();
+    textInputRef.current.focus();
  }, [selectTextFieldState]);

  return (
    <Form onSubmit={handleSubmit}>
-      <TextArea
-        {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
-        ref={handleTextFieldRef}
-        as={TextareaAutosize}
-        name="text"
-        value={data.text}
-        placeholder={t('common.writeComment')}
-        maxLength={1048576}
-        minRows={isOpened ? 3 : 1}
-        spellCheck={false}
-        className={styles.field}
-        onFocus={handleFieldFocus}
-        onKeyDown={handleFieldKeyDown}
-        onChange={handleFieldChange}
-      />
+      <div ref={textFieldRef} className={styles.field}>
+        <MentionsInput
+          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+          allowSpaceInQuery
+          allowSuggestionsAboveCursor
+          ref={textMentionsRef}
+          inputRef={textInputRef}
+          value={data.text}
+          placeholder={t('common.writeComment')}
+          maxLength={1048576}
+          rows={isOpened ? 3 : 1}
+          className="mentions-input"
+          style={{
+            control: {
+              minHeight: isOpened ? '79px' : '37px',
+            },
+          }}
+          onFocus={handleFieldFocus}
+          onChange={handleFieldChange}
+          onKeyDown={handleFieldKeyDown}
+        >
+          <Mention
+            appendSpaceOnAdd
+            data={boardMemberships.map(({ user }) => ({
+              id: user.id,
+              display: user.username || user.name,
+            }))}
+            displayTransform={(_, display) => `@${display}`}
+            renderSuggestion={suggestionRenderer}
+            className={styles.mention}
+          />
+        </MentionsInput>
+      </div>
      {isOpened && (
        <div className={styles.controls}>
          <Button
--- a/client/src/components/comments/Comments/Add.module.scss
+++ b/client/src/components/comments/Comments/Add.module.scss
@ -16,20 +16,34 @@
  }

  .field {
-    background: #fff;
-    border: 0;
-    box-sizing: border-box;
-    color: #333;
-    display: block;
-    line-height: 1.5;
-    font-size: 14px;
-    overflow: hidden;
-    padding: 8px 12px;
-    resize: none;
-    width: 100%;
+    textarea {
+      background: #fff !important;
+      border: 1px solid rgba(9, 30, 66, 0.13);
+      border-radius: 3px;
+      box-sizing: border-box;
+      color: #333;
+      display: block;
+      font-size: 14px;
+      line-height: 1.4;
+      margin: 0 !important;
+      overflow: hidden;
+      padding: 8px 12px;
+      resize: none;

-    &:focus {
-      outline: none;
+      &:focus {
+        outline: none;
+      }
    }
  }
+
+  .mention {
+    background-color: #f1f8ff;
+    border-radius: 3px;
+  }
+
+  .suggestion {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+  }
 }
--- a/client/src/components/comments/Comments/Edit.jsx
+++ b/client/src/components/comments/Comments/Edit.jsx
@ -4,12 +4,12 @@
 */

 import { dequal } from 'dequal';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 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 { Mention, MentionsInput } from 'react-mentions';
+import { Button, Form } from 'semantic-ui-react';
 import { useClickAwayListener } from '../../../lib/hooks';

 import selectors from '../../../selectors';
@ -17,6 +17,7 @@ import entryActions from '../../../entry-actions';
 import { useForm, useNestedRef } from '../../../hooks';
 import { focusEnd } from '../../../utils/element-helpers';
 import { isModifierKeyPressed } from '../../../utils/event-helpers';
+import UserAvatar from '../../users/UserAvatar';

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

@ -24,6 +25,7 @@ const Edit = React.memo(({ commentId, onClose }) => {
  const selectCommentById = useMemo(() => selectors.makeSelectCommentById(), []);

  const comment = useSelector((state) => selectCommentById(state, commentId));
+  const boardMemberships = useSelector(selectors.selectMembershipsForCurrentBoard);

  const dispatch = useDispatch();
  const [t] = useTranslation();
@ -35,13 +37,16 @@ const Edit = React.memo(({ commentId, onClose }) => {
    [comment.text],
  );

-  const [data, handleFieldChange] = useForm(() => ({
+  const [data, , setData] = useForm(() => ({
    text: '',
    ...defaultData,
  }));

-  const [textFieldRef, handleTextFieldRef] = useNestedRef();
-  const [buttonRef, handleButtonRef] = useNestedRef();
+  const textFieldRef = useRef(null);
+  const textMentionsRef = useRef(null);
+  const textInputRef = useRef(null);
+  const [submitButtonRef, handleSubmitButtonRef] = useNestedRef();
+  const [cancelButtonRef, handleCancelButtonRef] = useNestedRef();

  const submit = useCallback(() => {
    const cleanData = {
@ -60,6 +65,15 @@ const Edit = React.memo(({ commentId, onClose }) => {
    submit();
  }, [submit]);

+  const handleFieldChange = useCallback(
+    (_, text) => {
+      setData({
+        text,
+      });
+    },
+    [setData],
+  );
+
  const handleFieldKeyDown = useCallback(
    (event) => {
      if (event.key === 'Enter') {
@ -67,48 +81,92 @@ const Edit = React.memo(({ commentId, onClose }) => {
          submit();
        }
      } else if (event.key === 'Escape') {
+        if (textMentionsRef.current.isOpened()) {
+          textMentionsRef.current.clearSuggestions();
+          return;
+        }
+
        onClose();
      }
    },
    [onClose, submit],
  );

+  const handleCancelClick = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
  const handleClickAwayCancel = useCallback(() => {
-    textFieldRef.current.focus();
-  }, [textFieldRef]);
+    textInputRef.current.focus();
+  }, []);

  const clickAwayProps = useClickAwayListener(
-    [textFieldRef, buttonRef],
+    [textFieldRef, submitButtonRef, cancelButtonRef],
    submit,
    handleClickAwayCancel,
  );

+  const suggestionRenderer = useCallback(
+    (entry, _, highlightedDisplay) => (
+      <div className={styles.suggestion}>
+        <UserAvatar id={entry.id} size="tiny" />
+        {highlightedDisplay}
+      </div>
+    ),
+    [],
+  );
+
  useEffect(() => {
-    focusEnd(textFieldRef.current);
-  }, [textFieldRef]);
+    focusEnd(textInputRef.current);
+  }, []);

  return (
    <Form onSubmit={handleSubmit}>
-      <TextArea
-        {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
-        ref={handleTextFieldRef}
-        as={TextareaAutosize}
-        name="text"
-        value={data.text}
-        maxLength={1048576}
-        minRows={3}
-        spellCheck={false}
-        className={styles.field}
-        onKeyDown={handleFieldKeyDown}
-        onChange={handleFieldChange}
-      />
+      <div ref={textFieldRef} className={styles.field}>
+        <MentionsInput
+          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+          allowSpaceInQuery
+          allowSuggestionsAboveCursor
+          ref={textMentionsRef}
+          inputRef={textInputRef}
+          value={data.text}
+          maxLength={1048576}
+          rows={3}
+          className="mentions-input"
+          style={{
+            control: {
+              minHeight: '79px',
+            },
+          }}
+          onChange={handleFieldChange}
+          onKeyDown={handleFieldKeyDown}
+        >
+          <Mention
+            appendSpaceOnAdd
+            data={boardMemberships.map(({ user }) => ({
+              id: user.id,
+              display: user.username || user.name,
+            }))}
+            displayTransform={(_, display) => `@${display}`}
+            renderSuggestion={suggestionRenderer}
+            className={styles.mention}
+          />
+        </MentionsInput>
+      </div>
      <div className={styles.controls}>
        <Button
          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
          positive
-          ref={handleButtonRef}
+          ref={handleSubmitButtonRef}
          content={t('action.save')}
        />
+        <Button
+          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+          ref={handleCancelButtonRef}
+          type="button"
+          content={t('action.cancel')}
+          onClick={handleCancelClick}
+        />
      </div>
    </Form>
  );
--- a/client/src/components/comments/Comments/Edit.module.scss
+++ b/client/src/components/comments/Comments/Edit.module.scss
@ -10,22 +10,34 @@
  }

  .field {
-    background: #fff;
-    border: 1px solid rgba(9, 30, 66, 0.13);
-    border-radius: 3px;
-    box-sizing: border-box;
-    color: #333;
-    display: block;
-    line-height: 1.4;
-    font-size: 14px;
-    margin-bottom: 4px;
-    overflow: hidden;
-    padding: 8px 12px;
-    resize: none;
-    width: 100%;
+    textarea {
+      background: #fff !important;
+      border: 1px solid rgba(9, 30, 66, 0.13);
+      border-radius: 3px;
+      box-sizing: border-box;
+      color: #333;
+      display: block;
+      font-size: 14px;
+      line-height: 1.4;
+      margin: 0 !important;
+      overflow: hidden;
+      padding: 8px 12px;
+      resize: none;

-    &:focus {
-      outline: none;
+      &:focus {
+        outline: none;
+      }
    }
  }
+
+  .mention {
+    background-color: #f1f8ff;
+    border-radius: 3px;
+  }
+
+  .suggestion {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+  }
 }
--- a/client/src/components/common/AdministrationModal/AdministrationModal.jsx
+++ b/client/src/components/common/AdministrationModal/AdministrationModal.jsx
@ -12,6 +12,7 @@ import { Modal, Tab } from 'semantic-ui-react';
 import entryActions from '../../../entry-actions';
 import { useClosableModal } from '../../../hooks';
 import UsersPane from './UsersPane';
+import WebhooksPane from './WebhooksPane';

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

@ -37,6 +38,12 @@ const AdministrationModal = React.memo(() => {
      }),
      render: () => <UsersPane />,
    },
+    {
+      menuItem: t('common.webhooks', {
+        context: 'title',
+      }),
+      render: () => <WebhooksPane />,
+    },
  ];

  const isUsersPaneActive = activeTabIndex === 0;
--- a/client/src/components/common/AdministrationModal/UsersPane/ActionsStep.jsx
+++ b/client/src/components/common/AdministrationModal/UsersPane/ActionsStep.jsx
@ -7,7 +7,7 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Menu } from 'semantic-ui-react';
+import { Icon, Menu } from 'semantic-ui-react';
 import { Popup } from '../../../../lib/custom-ui';

 import selectors from '../../../../selectors';
@ -180,12 +180,14 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
      <Popup.Content>
        <Menu secondary vertical className={styles.menu}>
          <Menu.Item className={styles.menuItem} onClick={handleEditInformationClick}>
+            <Icon name="info" className={styles.menuItemIcon} />
            {t('action.editInformation', {
              context: 'title',
            })}
          </Menu.Item>
          {!user.lockedFieldNames.includes('username') && (
            <Menu.Item className={styles.menuItem} onClick={handleEditUsernameClick}>
+              <Icon name="at" className={styles.menuItemIcon} />
              {t('action.editUsername', {
                context: 'title',
              })}
@ -193,6 +195,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
          )}
          {!user.lockedFieldNames.includes('email') && (
            <Menu.Item className={styles.menuItem} onClick={handleEditEmailClick}>
+              <Icon name="mail outline" className={styles.menuItemIcon} />
              {t('action.editEmail', {
                context: 'title',
              })}
@ -200,6 +203,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
          )}
          {!user.lockedFieldNames.includes('password') && (
            <Menu.Item className={styles.menuItem} onClick={handleEditPasswordClick}>
+              <Icon name="keyboard outline" className={styles.menuItemIcon} />
              {t('action.editPassword', {
                context: 'title',
              })}
@ -207,6 +211,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
          )}
          {!user.lockedFieldNames.includes('role') && (
            <Menu.Item className={styles.menuItem} onClick={handleEditRoleClick}>
+              <Icon name="sun outline" className={styles.menuItemIcon} />
              {t('action.editRole', {
                context: 'title',
              })}
@ -221,6 +226,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
            className={styles.menuItem}
            onClick={user.isDeactivated ? handleActivateClick : handleDeactivateClick}
          >
+            <Icon name={user.isDeactivated ? 'plus' : 'close'} className={styles.menuItemIcon} />
            {user.isDeactivated
              ? t('action.activateUser', {
                  context: 'title',
@ -231,6 +237,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
          </Menu.Item>
          {user.isDeactivated && !user.isDefaultAdmin && (
            <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+              <Icon name="trash alternate outline" className={styles.menuItemIcon} />
              {t('action.deleteUser', {
                context: 'title',
              })}
--- a/client/src/components/common/AdministrationModal/UsersPane/ActionsStep.module.scss
+++ b/client/src/components/common/AdministrationModal/UsersPane/ActionsStep.module.scss
@ -13,4 +13,9 @@
    margin: 0;
    padding-left: 14px;
  }
+
+  .menuItemIcon {
+    float: left;
+    margin: 0 0.5em 0 0;
+  }
 }
--- a/client/src/components/common/AdministrationModal/UsersPane/AddStep.jsx
+++ b/client/src/components/common/AdministrationModal/UsersPane/AddStep.jsx
@ -117,7 +117,7 @@ const AddStep = React.memo(({ onClose }) => {
  );

  const handleMessageDismiss = useCallback(() => {
-    dispatch(entryActions.clearUserPasswordUpdateError());
+    dispatch(entryActions.clearUserCreateError());
  }, [dispatch]);

  const handleSelectRoleClick = useCallback(() => {
--- a/client/src/components/common/AdministrationModal/WebhooksPane.jsx
+++ b/client/src/components/common/AdministrationModal/WebhooksPane.jsx
@ -0,0 +1,35 @@
+/*!
+ * 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 { useDispatch, useSelector } from 'react-redux';
+import { Tab } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import Webhooks from '../../webhooks/Webhooks';
+
+import styles from './WebhooksPane.module.scss';
+
+const WebhooksPane = React.memo(() => {
+  const webhookIds = useSelector(selectors.selectWebhookIds);
+
+  const dispatch = useDispatch();
+
+  const handleCreate = useCallback(
+    (data) => {
+      dispatch(entryActions.createWebhook(data));
+    },
+    [dispatch],
+  );
+
+  return (
+    <Tab.Pane attached={false} className={styles.wrapper}>
+      <Webhooks ids={webhookIds} onCreate={handleCreate} />
+    </Tab.Pane>
+  );
+});
+
+export default WebhooksPane;
--- a/client/src/components/common/AdministrationModal/WebhooksPane.module.scss
+++ b/client/src/components/common/AdministrationModal/WebhooksPane.module.scss
@ -0,0 +1,11 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .wrapper {
+    border: none;
+    box-shadow: none;
+  }
+}
--- a/client/src/components/common/ConfirmationStep/ConfirmationStep.jsx
+++ b/client/src/components/common/ConfirmationStep/ConfirmationStep.jsx
@ -28,21 +28,26 @@ const ConfirmationStep = React.memo(

    const [nameFieldRef, handleNameFieldRef] = useNestedRef('inputRef');

-    const handleSubmit = useCallback(() => {
-      if (typeValue) {
-        const cleanData = {
-          ...data,
-          typeValue: data.typeValue.trim(),
-        };
+    const handleSubmit = useCallback(
+      (event) => {
+        event.stopPropagation();

-        if (cleanData.typeValue.toLowerCase() !== typeValue.toLowerCase()) {
-          nameFieldRef.current.select();
-          return;
+        if (typeValue) {
+          const cleanData = {
+            ...data,
+            typeValue: data.typeValue.trim(),
+          };
+
+          if (cleanData.typeValue.toLowerCase() !== typeValue.toLowerCase()) {
+            nameFieldRef.current.select();
+            return;
+          }
        }
-      }

-      onConfirm();
-    }, [typeValue, onConfirm, data, nameFieldRef]);
+        onConfirm();
+      },
+      [typeValue, onConfirm, data, nameFieldRef],
+    );

    useEffect(() => {
      if (typeValue) {
--- a/client/src/components/common/ExpandableMarkdown/ExpandableMarkdown.jsx
+++ b/client/src/components/common/ExpandableMarkdown/ExpandableMarkdown.jsx
@ -0,0 +1,78 @@
+/*!
+ * 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, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon } from 'semantic-ui-react';
+import { useToggle } from '../../../lib/hooks';
+
+import Markdown from '../Markdown';
+
+import styles from './ExpandableMarkdown.module.scss';
+
+const MAX_VISIBLE_PART_HEIGHT = 800;
+
+const ExpandableMarkdown = React.memo(({ children }) => {
+  const [t] = useTranslation();
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const [isExpanded, toggleExpanded] = useToggle();
+
+  const contentRef = useRef(null);
+
+  const handleToggleExpandClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      event.target.blur();
+
+      toggleExpanded();
+    },
+    [toggleExpanded],
+  );
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      setIsOverflowing(contentRef.current.scrollHeight > MAX_VISIBLE_PART_HEIGHT);
+    });
+
+    resizeObserver.observe(contentRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  const isPartHidden = isOverflowing && !isExpanded;
+
+  return (
+    <>
+      <div
+        className={classNames(
+          styles.wrapper,
+          isExpanded && styles.wrapperExpanded,
+          isPartHidden && styles.wrapperPartHidden,
+        )}
+        style={{ maxHeight: `${MAX_VISIBLE_PART_HEIGHT}px` }}
+      >
+        <div ref={contentRef}>
+          <Markdown>{children}</Markdown>
+        </div>
+      </div>
+      {isOverflowing && (
+        <Button fluid className={styles.toggleButton} onClick={handleToggleExpandClick}>
+          <Icon name={isExpanded ? 'angle up' : 'angle down'} />
+          {isExpanded ? t('action.showLess') : t('action.showMore')}
+        </Button>
+      )}
+    </>
+  );
+});
+
+ExpandableMarkdown.propTypes = {
+  children: PropTypes.string.isRequired,
+};
+
+export default ExpandableMarkdown;
--- a/client/src/components/common/ExpandableMarkdown/ExpandableMarkdown.module.scss
+++ b/client/src/components/common/ExpandableMarkdown/ExpandableMarkdown.module.scss
@ -0,0 +1,28 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .toggleButton {
+    box-shadow: none;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: center;
+  }
+
+  .wrapper {
+    overflow: hidden;
+  }
+
+  .wrapperExpanded {
+    max-height: none !important;
+    overflow: visible;
+  }
+
+  .wrapperPartHidden {
+    mask-image: linear-gradient(180deg, #000 80%, transparent);
+    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
+  }
+}
--- a/client/src/components/common/ExpandableMarkdown/index.js
+++ b/client/src/components/common/ExpandableMarkdown/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 ExpandableMarkdown from './ExpandableMarkdown';
+
+export default ExpandableMarkdown;
--- a/client/src/components/common/Linkify.jsx
+++ b/client/src/components/common/Linkify.jsx
@ -1,75 +0,0 @@
-/*!
- * 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 history from '../../history';
-
-const Linkify = React.memo(({ children, linkStopPropagation, ...props }) => {
-  const handleLinkClick = useCallback(
-    (event) => {
-      if (linkStopPropagation) {
-        event.stopPropagation();
-      }
-
-      if (!event.target.getAttribute('target')) {
-        event.preventDefault();
-        history.push(event.target.href);
-      }
-    },
-    [linkStopPropagation],
-  );
-
-  const linkRenderer = useCallback(
-    ({ attributes: { href, ...linkProps }, content }) => {
-      let url;
-      try {
-        url = new URL(href, window.location);
-      } catch {
-        /* empty */
-      }
-
-      const isSameSite = !!url && url.origin === window.location.origin;
-
-      return (
-        <a
-          {...linkProps} // eslint-disable-line react/jsx-props-no-spreading
-          href={href}
-          target={isSameSite ? undefined : '_blank'}
-          rel={isSameSite ? undefined : 'noreferrer'}
-          onClick={handleLinkClick}
-        >
-          {isSameSite ? url.pathname : content}
-        </a>
-      );
-    },
-    [handleLinkClick],
-  );
-
-  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: false,
-};
-
-export default Linkify;
--- a/client/src/components/common/Linkify/Link.jsx
+++ b/client/src/components/common/Linkify/Link.jsx
@ -0,0 +1,81 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import history from '../../../history';
+import selectors from '../../../selectors';
+import matchPaths from '../../../utils/match-paths';
+import Paths from '../../../constants/Paths';
+
+const Linkify = React.memo(({ href, content, stopPropagation, ...props }) => {
+  const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
+
+  const url = useMemo(() => {
+    try {
+      return new URL(href, window.location);
+    } catch {
+      return null;
+    }
+  }, [href]);
+
+  const isSameSite = !!url && url.origin === window.location.origin;
+
+  const cardsPathMatch = useMemo(() => {
+    if (!isSameSite) {
+      return null;
+    }
+
+    return matchPaths(url.pathname, [Paths.CARDS]);
+  }, [url.pathname, isSameSite]);
+
+  const card = useSelector((state) => {
+    if (!cardsPathMatch) {
+      return null;
+    }
+
+    return selectCardById(state, cardsPathMatch.params.id);
+  });
+
+  const handleClick = useCallback(
+    (event) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+      }
+
+      if (isSameSite) {
+        event.preventDefault();
+        history.push(event.target.href);
+      }
+    },
+    [stopPropagation, isSameSite],
+  );
+
+  return (
+    <a
+      {...props} // eslint-disable-line react/jsx-props-no-spreading
+      href={href}
+      target={isSameSite ? undefined : '_blank'}
+      rel={isSameSite ? undefined : 'noreferrer'}
+      onClick={handleClick}
+    >
+      {card ? card.name : content}
+    </a>
+  );
+});
+
+Linkify.propTypes = {
+  href: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  stopPropagation: PropTypes.bool,
+};
+
+Linkify.defaultProps = {
+  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/common/Login/Content.jsx
+++ b/client/src/components/common/Login/Content.jsx
@ -7,7 +7,7 @@ import isEmail from 'validator/lib/isEmail';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 import { Button, Divider, Form, Grid, Header, Message } from 'semantic-ui-react';
 import { useDidUpdate, usePrevious, useToggle } from '../../../lib/hooks';
 import { Input } from '../../../lib/custom-ui';
@ -247,7 +247,14 @@ const Content = React.memo(() => {
                />
              )}
            </div>
-            <p className={styles.formFooter}>{t('common.poweredByPlanka')}</p>
+            <p className={styles.formFooter}>
+              <Trans i18nKey="common.poweredByPlanka">
+                {'Powered by '}
+                <a href="https://github.com/plankanban/planka" target="_blank" rel="noreferrer">
+                  PLANKA
+                </a>
+              </Trans>
+            </p>
          </div>
        </Grid.Column>
        <Grid.Column
--- a/client/src/components/common/MarkdownEditor/MarkdownEditor.module.scss
+++ b/client/src/components/common/MarkdownEditor/MarkdownEditor.module.scss
@ -14,6 +14,7 @@
        background: #fff;
      }

+      .g-md-markup-editor__toolbar,
      .g-md-wysiwyg-editor__toolbar {
        background: #f5f6f7;
        z-index: 2000;
--- a/client/src/components/custom-fields/CustomField/CustomField.jsx
+++ b/client/src/components/custom-fields/CustomField/CustomField.jsx
@ -3,9 +3,10 @@
 * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
 */

-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
+import { Button, Icon } from 'semantic-ui-react';

 import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
@ -48,6 +49,7 @@ const CustomField = React.memo(({ id, customFieldGroupId }) => {
  });

  const dispatch = useDispatch();
+  const [isCopied, setIsCopied] = useState(false);

  const handleValueUpdate = useCallback(
    (content) => {
@ -64,18 +66,40 @@ const CustomField = React.memo(({ id, customFieldGroupId }) => {
    [id, customFieldGroupId, cardId, dispatch],
  );

+  const handleCopyClick = useCallback(() => {
+    if (isCopied) {
+      return;
+    }
+
+    navigator.clipboard.writeText(customFieldValue.content);
+
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  }, [customFieldValue, isCopied]);
+
  return (
    <div>
      <div className={styles.name}>{customField.name}</div>
-      {canEdit ? (
-        <ValueField
-          defaultValue={customFieldValue && customFieldValue.content}
-          disabled={!customField.isPersisted}
-          onUpdate={handleValueUpdate}
-        />
-      ) : (
-        <div className={styles.value}>{customFieldValue ? customFieldValue.content : '\u00A0'}</div>
-      )}
+      <div className={styles.valueWrapper}>
+        {canEdit ? (
+          <ValueField
+            defaultValue={customFieldValue && customFieldValue.content}
+            disabled={!customField.isPersisted}
+            onUpdate={handleValueUpdate}
+          />
+        ) : (
+          <div className={styles.value}>
+            {customFieldValue ? customFieldValue.content : '\u00A0'}
+          </div>
+        )}
+        {customFieldValue && customFieldValue.content && (
+          <Button className={styles.copyButton} onClick={handleCopyClick}>
+            <Icon fitted name={isCopied ? 'check' : 'copy'} />
+          </Button>
+        )}
+      </div>
    </div>
  );
 });
--- a/client/src/components/custom-fields/CustomField/CustomField.module.scss
+++ b/client/src/components/custom-fields/CustomField/CustomField.module.scss
@ -4,6 +4,30 @@
 */

 :global(#app) {
+  .copyButton {
+    background: #ebeef0;
+    box-shadow: none;
+    border-radius: 3px;
+    box-sizing: content-box;
+    color: #516b7a;
+    display: none;
+    height: 30px;
+    margin: 0;
+    min-height: auto;
+    outline: none;
+    padding: 4px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: background 85ms ease;
+    width: 20px;
+
+    &:hover {
+      background: #dfe3e6;
+      color: #4c4c4c;
+    }
+  }
+
  .name {
    color: #6b808c;
    font-size: 13px;
@ -25,4 +49,14 @@
    padding: 8px 12px;
    text-overflow: ellipsis;
  }
+
+  .valueWrapper {
+    position: relative;
+
+    &:hover:not(:has(input:focus)) {
+      .copyButton {
+        display: block;
+      }
+    }
+  }
 }
--- a/client/src/components/labels/LabelsStep/AddStep.jsx
+++ b/client/src/components/labels/LabelsStep/AddStep.jsx
@ -15,8 +15,6 @@ import { useForm } from '../../../hooks';
 import LABEL_COLORS from '../../../constants/LabelColors';
 import Editor from './Editor';

-import styles from './AddStep.module.scss';
-
 const AddStep = React.memo(({ cardId, defaultData, onBack }) => {
  const dispatch = useDispatch();
  const [t] = useTranslation();
@ -52,7 +50,7 @@ const AddStep = React.memo(({ cardId, defaultData, onBack }) => {
      <Popup.Content>
        <Form onSubmit={handleSubmit}>
          <Editor data={data} onFieldChange={handleFieldChange} />
-          <Button positive content={t('action.createLabel')} className={styles.submitButton} />
+          <Button positive content={t('action.createLabel')} />
        </Form>
      </Popup.Content>
    </>
--- a/client/src/components/labels/LabelsStep/EditStep.jsx
+++ b/client/src/components/labels/LabelsStep/EditStep.jsx
@ -91,13 +91,16 @@ const EditStep = React.memo(({ labelId, onBack }) => {
      <Popup.Content>
        <Form onSubmit={handleSubmit}>
          <Editor data={data} onFieldChange={handleFieldChange} />
-          <Button positive content={t('action.save')} className={styles.submitButton} />
+          <div className={styles.actions}>
+            <Button positive content={t('action.save')} />
+            <Button
+              type="button"
+              content={t('action.delete')}
+              className={styles.deleteButton}
+              onClick={handleDeleteClick}
+            />
+          </div>
        </Form>
-        <Button
-          content={t('action.delete')}
-          className={styles.deleteButton}
-          onClick={handleDeleteClick}
-        />
      </Popup.Content>
    </>
  );
--- a/client/src/components/labels/LabelsStep/EditStep.module.scss
+++ b/client/src/components/labels/LabelsStep/EditStep.module.scss
@ -4,14 +4,14 @@
 */

 :global(#app) {
-  .deleteButton {
-    bottom: 12px;
-    box-shadow: 0 1px 0 #cbcccc;
-    position: absolute;
-    right: 9px;
+  .actions {
+    align-items: center;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
  }

-  .submitButton {
-    margin-top: 12px;
+  .deleteButton {
+    box-shadow: 0 1px 0 #cbcccc;
  }
 }
--- a/client/src/components/labels/LabelsStep/Editor.module.scss
+++ b/client/src/components/labels/LabelsStep/Editor.module.scss
@ -5,12 +5,8 @@

 :global(#app) {
  .colorButton {
-    float: left;
-    height: 30px;
-    margin: 3px;
-    padding: 0;
+    margin: 0;
    position: relative;
-    width: 41.6px;

    &:hover {
      opacity: 0.9;
@ -18,28 +14,43 @@
  }

  .colorButtonActive:before {
-    bottom: 1px;
    color: #ffffff;
    content: "Г";
    font-size: 16px;
    line-height: 32px;
    position: absolute;
-    right: 4px;
+    right: calc(50% - 5px);
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
-    top: 0;
+    top: calc(50% - 17px);
    transform: rotate(-135deg);
-    width: 32px;
  }

  .colorButtons {
-    margin: -3px;
-    padding-bottom: 16px;
+    display: grid;
+    gap: 6px;
+    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+    margin-bottom: 12px;
+    max-height: 60vh;
+    overflow-y: auto;

-    &:after {
-      clear: both;
-      content: "";
-      display: table;
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
+      scrollbar-width: thin;
+    }
+
+    &::-webkit-scrollbar {
+      width: 9px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-clip: padding-box;
+      border-left: 0.25em transparent solid;
+      border-radius: 3px;
    }
  }

--- a/client/src/components/lists/List/ActionsStep.jsx
+++ b/client/src/components/lists/List/ActionsStep.jsx
@ -7,7 +7,7 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Menu } from 'semantic-ui-react';
+import { Icon, Menu } from 'semantic-ui-react';
 import { Popup } from '../../../lib/custom-ui';

 import selectors from '../../../selectors';
@ -128,38 +128,45 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
      <Popup.Content>
        <Menu secondary vertical className={styles.menu}>
          <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
+            <Icon name="edit outline" className={styles.menuItemIcon} />
            {t('action.editTitle', {
              context: 'title',
            })}
          </Menu.Item>
          <Menu.Item className={styles.menuItem} onClick={handleEditTypeClick}>
+            <Icon name="map outline" className={styles.menuItemIcon} />
            {t('action.editType', {
              context: 'title',
            })}
          </Menu.Item>
          <Menu.Item className={styles.menuItem} onClick={handleEditColorClick}>
+            <Icon name="dot circle outline" className={styles.menuItemIcon} />
            {t('action.editColor', {
              context: 'title',
            })}
          </Menu.Item>
          <Menu.Item className={styles.menuItem} onClick={handleAddCardClick}>
+            <Icon name="list alternate outline" className={styles.menuItemIcon} />
            {t('action.addCard', {
              context: 'title',
            })}
          </Menu.Item>
          <Menu.Item className={styles.menuItem} onClick={handleSortClick}>
+            <Icon name="sort amount down" className={styles.menuItemIcon} />
            {t('action.sortList', {
              context: 'title',
            })}
          </Menu.Item>
          {list.type === ListTypes.CLOSED && (
            <Menu.Item className={styles.menuItem} onClick={handleArchiveCardsClick}>
+              <Icon name="folder open outline" className={styles.menuItemIcon} />
              {t('action.archiveCards', {
                context: 'title',
              })}
            </Menu.Item>
          )}
          <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+            <Icon name="trash alternate outline" className={styles.menuItemIcon} />
            {t('action.deleteList', {
              context: 'title',
            })}
--- a/client/src/components/lists/List/ActionsStep.module.scss
+++ b/client/src/components/lists/List/ActionsStep.module.scss
@ -13,4 +13,9 @@
    margin: 0;
    padding-left: 14px;
  }
+
+  .menuItemIcon {
+    float: left;
+    margin: 0 0.5em 0 0;
+  }
 }
--- a/client/src/components/lists/List/EditName.jsx
+++ b/client/src/components/lists/List/EditName.jsx
@ -76,7 +76,6 @@ const EditName = React.memo(({ listId, onClose }) => {
      as={TextareaAutosize}
      value={value}
      maxLength={128}
-      spellCheck={false}
      className={styles.field}
      onClick={handleFieldClick}
      onKeyDown={handleFieldKeyDown}
--- a/client/src/components/notification-services/NotificationServices/Item.jsx
+++ b/client/src/components/notification-services/NotificationServices/Item.jsx
@ -125,7 +125,7 @@ const Item = React.memo(({ id }) => {
    dispatch(entryActions.deleteNotificationService(id));
  }, [id, dispatch]);

-  const handleUpdateSubmit = useCallback(() => {
+  const handleSubmit = useCallback(() => {
    urlFieldRef.current.blur();
  }, [urlFieldRef]);

@ -153,7 +153,7 @@ const Item = React.memo(({ id }) => {
  const ConfirmationPopup = usePopupInClosableContext(ConfirmationStep);

  return (
-    <Form className={styles.wrapper} onSubmit={handleUpdateSubmit}>
+    <Form className={styles.wrapper} onSubmit={handleSubmit}>
      <Input
        ref={handleUrlFieldRef}
        name="url"
--- a/client/src/components/notifications/NotificationsStep/Item.jsx
+++ b/client/src/components/notifications/NotificationsStep/Item.jsx
@ -13,6 +13,7 @@ import { Button } from 'semantic-ui-react';

 import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
+import { formatTextWithMentions } from '../../../utils/mentions';
 import Paths from '../../../constants/Paths';
 import { StaticUserIds } from '../../../constants/StaticUsers';
 import { NotificationTypes } from '../../../constants/Enums';
@ -83,7 +84,7 @@ const Item = React.memo(({ id, onClose }) => {
      break;
    }
    case NotificationTypes.COMMENT_CARD: {
-      const commentText = truncate(notification.data.text);
+      const commentText = truncate(formatTextWithMentions(notification.data.text));

      contentNode = (
        <Trans
@ -122,6 +123,28 @@ const Item = React.memo(({ id, onClose }) => {
      );

      break;
+    case NotificationTypes.MENTION_IN_COMMENT: {
+      const commentText = truncate(formatTextWithMentions(notification.data.text));
+
+      contentNode = (
+        <Trans
+          i18nKey="common.userMentionedYouInCommentOnCard"
+          values={{
+            user: creatorUserName,
+            comment: commentText,
+            card: cardName,
+          }}
+        >
+          <span className={styles.author}>{creatorUserName}</span>
+          {` mentioned you in «${commentText}» on `}
+          <Link to={Paths.CARDS.replace(':id', notification.cardId)} onClick={onClose}>
+            {cardName}
+          </Link>
+        </Trans>
+      );
+
+      break;
+    }
    default:
      contentNode = null;
  }
--- a/client/src/components/project-managers/ProjectManagers/ActionsStep.module.scss
+++ b/client/src/components/project-managers/ProjectManagers/ActionsStep.module.scss
@ -46,5 +46,6 @@
    font-size: 14px;
    line-height: 1.2;
    padding: 2px 0 2px 2px;
+    word-wrap: break-word;
  }
 }
--- a/client/src/components/projects/AddProjectModal/AddProjectModal.jsx
+++ b/client/src/components/projects/AddProjectModal/AddProjectModal.jsx
@ -129,7 +129,6 @@ const AddProjectModal = React.memo(() => {
            value={data.description}
            maxLength={1024}
            minRows={2}
-            spellCheck={false}
            className={styles.field}
            onKeyDown={handleDescriptionKeyDown}
            onChange={handleFieldChange}
--- a/client/src/components/projects/ProjectSettingsModal/GeneralPane/EditInformation.jsx
+++ b/client/src/components/projects/ProjectSettingsModal/GeneralPane/EditInformation.jsx
@ -89,7 +89,6 @@ const EditInformation = React.memo(() => {
        value={data.description}
        maxLength={1024}
        minRows={2}
-        spellCheck={false}
        className={styles.field}
        onKeyDown={handleDescriptionKeyDown}
        onChange={handleFieldChange}
--- 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,62 @@ 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}
+          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 { Icon, 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,12 +64,16 @@ 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}>
+              <Icon name="align left" className={styles.menuItemIcon} />
+              {t('action.editDescription', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          )}
          <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+            <Icon name="trash alternate outline" className={styles.menuItemIcon} />
            {t('action.deleteTask', {
              context: 'title',
            })}
--- a/client/src/components/task-lists/TaskList/Task/ActionsStep.module.scss
+++ b/client/src/components/task-lists/TaskList/Task/ActionsStep.module.scss
@ -13,4 +13,9 @@
    margin: 0;
    padding-left: 14px;
  }
+
+  .menuItemIcon {
+    float: left;
+    margin: 0 0.5em 0 0;
+  }
 }
--- a/client/src/components/task-lists/TaskList/Task/EditName.jsx
+++ b/client/src/components/task-lists/TaskList/Task/EditName.jsx
@ -79,7 +79,6 @@ const EditName = React.memo(({ taskId, onClose }) => {
        value={value}
        maxLength={1024}
        minRows={2}
-        spellCheck={false}
        className={styles.field}
        onKeyDown={handleFieldKeyDown}
        onChange={handleFieldChange}
--- 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,10 +30,15 @@ import styles from './Task.module.scss';

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

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

+  const linkedCard = useSelector(
+    (state) => task.linkedCardId && selectLinkedCardById(state, task.linkedCardId),
+  );
+
  const { canEdit, canToggle } = useSelector((state) => {
    const { listId } = selectors.selectCurrentCard(state);
    const list = selectListById(state, listId);
@ -86,10 +93,10 @@ const Task = React.memo(({ id, index }) => {
  const isEditable = task.isPersisted && canEdit;

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

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

+  const handleLinkClick = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+
  useDidUpdate(() => {
    setIsClosableActive(isEditNameOpened);
  }, [isEditNameOpened]);
@ -123,7 +134,7 @@ const Task = React.memo(({ id, index }) => {
            <span className={styles.checkboxWrapper}>
              <Checkbox
                checked={task.isCompleted}
-                disabled={!task.isPersisted || !canToggle}
+                disabled={!!task.linkedCardId || !task.isPersisted || !canToggle}
                className={styles.checkbox}
                onChange={handleToggleChange}
              />
@ -135,36 +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, task.isCompleted && styles.taskCompleted)}
                  >
-                    <Linkify linkStopPropagation>{task.name}</Linkify>
+                    {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,20 +56,32 @@
    }
  }

+  .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;
    overflow-wrap: break-word;
    padding: 8px 0;
    vertical-align: top;
+    white-space: pre-wrap;
    width: 100%;
  }

-  .taskCompleted {
-    color: #aaa;
-    text-decoration: line-through;
-  }
-
  .text {
    background: transparent;
    border-radius: 3px;
@ -80,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/users/UserSettingsModal/AboutPane.jsx
+++ b/client/src/components/users/UserSettingsModal/AboutPane.jsx
@ -14,7 +14,9 @@ import styles from './AboutPane.module.scss';

 const AboutPane = React.memo(() => (
  <Tab.Pane attached={false} className={styles.wrapper}>
-    <Image centered src={logo} size="large" />
+    <a href="https://github.com/plankanban/planka" target="_blank" rel="noreferrer">
+      <Image centered src={logo} size="large" />
+    </a>
    <div className={styles.version}>{version}</div>
  </Tab.Pane>
 ));
--- a/client/src/components/users/UserStep/UserStep.jsx
+++ b/client/src/components/users/UserStep/UserStep.jsx
@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Button, Menu } from 'semantic-ui-react';
+import { Button, Icon, Menu } from 'semantic-ui-react';
 import { Popup } from '../../../lib/custom-ui';

 import selectors from '../../../selectors';
@ -31,15 +31,15 @@ const UserStep = React.memo(({ onClose }) => {
    onClose();
  }, [onClose, dispatch]);

-  const handleLogoutClick = useCallback(() => {
-    dispatch(entryActions.logout());
-  }, [dispatch]);
-
  const handleAdministrationClick = useCallback(() => {
    dispatch(entryActions.openAdministrationModal());
    onClose();
  }, [onClose, dispatch]);

+  const handleLogoutClick = useCallback(() => {
+    dispatch(entryActions.logout());
+  }, [dispatch]);
+
  let logoutMenuItemProps;
  if (isLogouting) {
    logoutMenuItemProps = {
@ -61,29 +61,30 @@ const UserStep = React.memo(({ onClose }) => {
      <Popup.Content>
        <Menu secondary vertical className={styles.menu}>
          <Menu.Item className={styles.menuItem} onClick={handleSettingsClick}>
+            <Icon name="user" className={styles.menuItemIcon} />
            {t('common.settings', {
              context: 'title',
            })}
          </Menu.Item>
+          {withAdministration && (
+            <Menu.Item className={styles.menuItem} onClick={handleAdministrationClick}>
+              <Icon name="setting" className={styles.menuItemIcon} />
+              {t('common.administration', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          )}
+          <hr className={styles.divider} />
          <Menu.Item
            {...logoutMenuItemProps} // eslint-disable-line react/jsx-props-no-spreading
            className={styles.menuItem}
            onClick={handleLogoutClick}
          >
+            <Icon name="log out" className={styles.menuItemIcon} />
            {t('action.logOut', {
              context: 'title',
            })}
          </Menu.Item>
-          {withAdministration && (
-            <>
-              <hr className={styles.divider} />
-              <Menu.Item className={styles.menuItem} onClick={handleAdministrationClick}>
-                {t('common.administration', {
-                  context: 'title',
-                })}
-              </Menu.Item>
-            </>
-          )}
        </Menu>
      </Popup.Content>
    </>
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
Maksim Eltyshev	fdac299fc7	feat: Open card actions on right-click	2025-07-17 17:43:01 +02:00
Maksim Eltyshev	e659ed4a2d	fix: Add icons to popup menu items	2025-07-17 15:23:53 +02:00
Maksim Eltyshev	adf60c0c74	fix: Enable spellcheck on all textareas	2025-07-17 14:18:30 +02:00
uppertoe	71b4fd32cc	fix: Fix typo in English translations (#1259 )	2025-07-16 12:18:56 +02:00
Maksim Eltyshev	b3f226c10b	fix: Fix red curtain background gradient	2025-07-15 17:42:46 +02:00
Symon Baikov	b4be12eb28	fix: Update Greek translation (#1255 )	2025-07-15 13:13:52 +02:00
Maksim Eltyshev	3aba4d4a56	ref: Little refactoring	2025-07-14 14:54:06 +02:00
Symon Baikov	70cadcd974	fix: Update Finnish translation (#1251 )	2025-07-11 12:16:22 +02:00
Maksim Eltyshev	230f50e3d9	feat: Add ability to link tasks to cards	2025-07-11 01:04:02 +02:00
HanJiang-cn	49203e9d56	fix: Update Chinese translation (#1250 )	2025-07-09 17:53:58 +02:00
Maksim Eltyshev	709a0d1758	feat: Persist closed state per card	2025-07-09 17:45:47 +02:00
Maksim Eltyshev	69c75a03b1	fix: Fix toolbar styles in markdown markup editor	2025-07-08 17:26:21 +02:00
Daniel Silvestre	4d40af9c8a	feat: Display card name when linking in task (#1234 )	2025-07-08 17:15:48 +02:00
Maksim Eltyshev	b76ca9547f	fix: Handle webhooks correctly during socket reconnection	2025-07-08 12:41:27 +02:00
Maksim Eltyshev	9d07178e57	fix: Move webhooks declaration to correct position	2025-07-08 00:22:24 +02:00
Maksim Eltyshev	4346b7040a	feat: Add `INTERNAL_ACCESS_TOKEN` to support internal user configuration	2025-07-07 21:35:37 +02:00
Winston-1874	b61b4e658f	fix: Update French translation (#1242 )	2025-07-07 13:01:25 +02:00
Symon Baikov	a8b9ac8165	fix: Update Turkish translation (#1239 )	2025-07-07 12:03:14 +02:00
Daniel Silvestre	a55fc08c43	fix: Update French translation (#1238 )	2025-07-07 12:00:36 +02:00
Symon Baikov	76c7be5063	fix: Update German translation (#1235 )	2025-07-07 11:47:21 +02:00
Maksim Eltyshev	b22dba0d11	feat: Move webhooks configuration from environment variable to UI	2025-07-04 22:04:11 +02:00
Maksim Eltyshev	f0680831c2	fix: Improve PDF viewer cross-browser compatibility Closes #1219	2025-07-02 18:26:03 +02:00
Maksim Eltyshev	e58a9f5d21	chore: Update dependencies	2025-06-30 12:43:06 +02:00
dependabot[bot]	463b6284c7	build(deps): Bump pbkdf2 from 3.1.2 to 3.1.3 in /client (#1223 ) Bumps [pbkdf2](https://github.com/crypto-browserify/pbkdf2) from 3.1.2 to 3.1.3. - [Changelog](https://github.com/browserify/pbkdf2/blob/master/CHANGELOG.md) - [Commits](https://github.com/crypto-browserify/pbkdf2/compare/v3.1.2...v3.1.3) --- updated-dependencies: - dependency-name: pbkdf2 dependency-version: 3.1.3 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-06-30 12:23:57 +02:00
Maksim Eltyshev	f5653cde80	chore: Add missing environment variables for OIDC roles	2025-06-30 12:07:44 +02:00
Roman T	b37fc61b12	docs: Add example SMTP config using `extraEnv` in Helm (#1217 )	2025-06-18 15:11:03 +02:00
Maksim Eltyshev	6988864808	fix: Fix filtering by task assignees	2025-06-17 16:04:22 +02:00
millenium-codebug	c8cb1f4a20	feat: Include task assignees in member filter logic (#1214 )	2025-06-16 23:16:57 +02:00
Maksim Eltyshev	774bdc2b64	fix: Display tasks with preserved newlines in card modal	2025-06-16 22:44:27 +02:00
Maksim Eltyshev	b2e8c453b7	fix: Use correct action to clear user creation error	2025-06-16 22:37:41 +02:00
Maksim Eltyshev	8df49a636a	build: Use Node.js v22	2025-06-16 21:32:54 +02:00
Symon Baikov	2d1a8658bb	feat: Add Estonian translation (#1212 )	2025-06-16 20:39:50 +02:00
Maksim Eltyshev	3126a40bba	feat: Add copy-to-clipboard for custom fields	2025-06-11 00:14:42 +02:00
Maksim Eltyshev	99a06ce1ae	feat: Make card descriptions expandable	2025-06-11 00:09:33 +02:00
Maksim Eltyshev	98a7f1c9a9	feat: Strikethrough cards in closed lists Closes #1207	2025-06-10 23:43:26 +02:00
Symon Baikov	bdac15240f	fix: Update Serbian (Cyrillic) translation (#1206 )	2025-06-10 18:54:23 +02:00
Maksim Eltyshev	5a3a4240c6	fix: Add cancel button when editing comment	2025-06-10 14:00:08 +02:00
Maksim Eltyshev	144731ccb4	fix: Increase max username length for identity provider users Closes #1174	2025-06-10 13:49:23 +02:00
Symon Baikov	e24bb845c6	fix: Update Slovak translation (#1205 )	2025-06-10 12:18:24 +02:00
Symon Baikov	240b01e694	fix: Update Romanian translation (#1203 )	2025-06-09 23:42:44 +02:00
Symon Baikov	07483909b4	fix: Update Brazilian Portuguese translation (#1202 )	2025-06-09 23:40:35 +02:00
Symon Baikov	84dc0385af	fix: Update Dutch translation (#1201 )	2025-06-09 12:35:31 +02:00
Symon Baikov	041199af8b	fix: Update Korean translation (#1197 )	2025-06-09 12:33:51 +02:00
Symon Baikov	f72ac437b9	fix: Update Japanese translation (#1196 )	2025-06-09 12:32:17 +02:00
Symon Baikov	128028c848	fix: Update Italian translation (#1195 )	2025-06-09 12:30:12 +02:00
Symon Baikov	0f1e7ecc2c	fix: Update Indonesian translation (#1194 )	2025-06-08 13:11:03 +02:00
Symon Baikov	9ca49f1f51	fix: Update Hungarian translation (#1193 )	2025-06-08 13:09:31 +02:00
Symon Baikov	8447f0c884	fix: Update French translation (#1192 )	2025-06-08 13:08:17 +02:00
Symon Baikov	180984799c	fix: Update Spanish translation (#1189 )	2025-06-08 13:06:40 +02:00
Maksim Eltyshev	2b86484421	fix: FIx deps in download attachment handler	2025-06-07 19:23:15 +02:00
Maksim Eltyshev	a6820162fb	fix: Fix mentions input styles	2025-06-07 18:03:36 +02:00
Symon Baikov	037a9101c2	fix: Update Bulgarian translation (#1187 )	2025-06-07 16:33:15 +02:00
Symon Baikov	754629e6a9	fix: Update Czech translation (#1185 )	2025-06-07 13:52:33 +02:00
Symon Baikov	8bc1569242	fix: Responsive label color selector, improve action button styles (#1184 )	2025-06-07 13:44:45 +02:00
Maksim Eltyshev	1a8dcd9858	fix: Update Chinese translation Closes #1181	2025-06-06 18:20:40 +02:00
Maksim Eltyshev	edda5dda79	ref: Format translations	2025-06-06 18:17:25 +02:00
Symon Baikov	6dbce8c790	feat: Add Finnish translation (#1180 )	2025-06-06 18:00:13 +02:00
Symon Baikov	b696fe0e4d	feat: Add Greek translation (#1176 )	2025-06-06 14:14:00 +02:00
Maksim Eltyshev	7286ecaf35	fix: Align text to center in content error message	2025-06-06 13:54:01 +02:00
Maksim Eltyshev	2e6658221f	fix: Handle escape actions properly in mentions input	2025-06-06 12:48:43 +02:00
Maksim Eltyshev	63de346b0e	ref: Little refactoring	2025-06-06 12:34:09 +02:00
Christian T R	585464eef3	fix: Update Danish translation (#1177 )	2025-06-06 12:07:02 +02:00
Maksim Eltyshev	c2bd31d523	fix: Use console as logger for YFM note Closes #1178	2025-06-06 11:49:35 +02:00
Maksim Eltyshev	21f90610bc	fix: Prevent auto-filling title in YFM note Closes #1172	2025-06-05 15:10:46 +02:00
Christian T R	608a7c983f	fix: Update Danish translation (#1173 )	2025-06-05 14:06:45 +02:00
Maksim Eltyshev	dd5e0f448f	fix: Prevent text overflow in card name	2025-06-05 00:01:34 +02:00
Maksim Eltyshev	c4a48d510b	feat: Add download button for file attachments	2025-06-05 00:00:36 +02:00
Mario Aparcero	2f62d56242	fix: Update Spanish translation (#1170 )	2025-06-04 22:45:28 +02:00
Maksim Eltyshev	4eb8b75c24	license: Remove ambiguity in usage restrictions	2025-06-04 21:04:00 +02:00
Maksim Eltyshev	49770ea9ec	ref: Move comment counter logic into Card model	2025-06-04 18:38:39 +02:00
Anthony	40a84d0c8a	feat: Allow to add custom annotations for deployment in Helm (#1168 )	2025-06-04 12:25:43 +02:00
Maksim Eltyshev	9690f7b73f	fix: Prevent text overflow in activities	2025-06-03 23:15:07 +02:00
Maksim Eltyshev	04b97b66cb	chore: Update dependencies	2025-06-03 13:02:16 +02:00
Maksim Eltyshev	46f4d5c1f8	fix: Canonicalize locale codes	2025-06-03 12:46:06 +02:00
Maksim Eltyshev	fc7863aaaf	fix: Add mentions support when editing comments	2025-06-02 21:35:51 +02:00
Maksim Eltyshev	6c2999044b	chore: Update logo assets	2025-06-02 20:13:22 +02:00
Maksim Eltyshev	a2495b664e	chore: Add missing things	2025-06-02 19:44:08 +02:00
Jason Jack	e0374f30db	build: Add tmpfs to compose file (#1165 )	2025-06-02 19:39:10 +02:00
Maksim Eltyshev	665f9998dc	fix: Prevent auto-updating translation files when key is missing	2025-06-01 21:44:14 +02:00
Maksim Eltyshev	fcf1fc4319	ref: Little refactoring	2025-06-01 20:53:35 +02:00
Maksim Eltyshev	4e05b88ecf	chore: Add links to GitHub Closes #1161	2025-05-31 00:10:00 +02:00
Roman Zavarnitsyn	c0b0436851	feat: Add ability to mention users in comments (#1162 )	2025-05-30 22:01:29 +02:00
Maksim Eltyshev	eb2a3a2875	ref: Fix locale position	2025-05-30 13:44:58 +02:00
Niccolò Pedrini	74274e511f	fix: Update Italian translation (#1163 )	2025-05-30 13:42:57 +02:00