feat: Version 2

Closes #627, closes #1047

client/src/components/labels/LabelChip/LabelChip.jsx

@@ -0,0 +1,70 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import upperFirst from 'lodash/upperFirst';
+import camelCase from 'lodash/camelCase';
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+
+import selectors from '../../../selectors';
+
+import styles from './LabelChip.module.scss';
+import globalStyles from '../../../styles.module.scss';
+
+const Sizes = {
+  TINY: 'tiny',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+};
+
+const LabelChip = React.memo(({ id, size, onClick }) => {
+  const selectLabelById = useMemo(() => selectors.makeSelectLabelById(), []);
+
+  const label = useSelector((state) => selectLabelById(state, id));
+
+  const contentNode = (
+    <span
+      title={label.name}
+      className={classNames(
+        styles.wrapper,
+        !label.name && styles.wrapperNameless,
+        styles[`wrapper${upperFirst(size)}`],
+        onClick && styles.wrapperHoverable,
+        globalStyles[`background${upperFirst(camelCase(label.color))}`],
+      )}
+    >
+      {label.name || '\u00A0'}
+    </span>
+  );
+
+  return onClick ? (
+    <button
+      data-id={id}
+      type="button"
+      disabled={label.isDisabled}
+      className={styles.button}
+      onClick={onClick}
+    >
+      {contentNode}
+    </button>
+  ) : (
+    contentNode
+  );
+});
+
+LabelChip.propTypes = {
+  id: PropTypes.string.isRequired,
+  size: PropTypes.oneOf(Object.values(Sizes)),
+  onClick: PropTypes.func,
+};
+
+LabelChip.defaultProps = {
+  size: Sizes.MEDIUM,
+  onClick: undefined,
+};
+
+export default LabelChip;

client/src/components/labels/LabelChip/LabelChip.module.scss

@@ -0,0 +1,59 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    max-width: 100%;
+    outline: none;
+    padding: 0;
+  }
+
+  .wrapper {
+    border-radius: 3px;
+    color: #fff;
+    display: inline-block;
+    font-weight: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+    vertical-align: top;
+    white-space: nowrap;
+  }
+
+  .wrapperNameless {
+    width: 40px;
+  }
+
+  .wrapperHoverable:hover {
+    opacity: 0.75;
+  }
+
+  /* Sizes */
+
+  .wrapperTiny {
+    font-size: 12px;
+    line-height: 20px;
+    max-width: 176px;
+    padding: 0 6px;
+  }
+
+  .wrapperSmall {
+    font-size: 12px;
+    line-height: 20px;
+    max-width: 176px;
+    padding: 2px 8px;
+  }
+
+  .wrapperMedium {
+    font-size: 14px;
+    line-height: 32px;
+    max-width: 230px;
+    padding: 0 12px;
+  }
+}

client/src/components/labels/LabelChip/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 LabelChip from './LabelChip';
+
+export default LabelChip;

client/src/components/labels/LabelsStep/AddStep.jsx

@@ -0,0 +1,72 @@
+/*!
+ * 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 { useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Form } from 'semantic-ui-react';
+import { Popup } from '../../../lib/custom-ui';
+
+import entryActions from '../../../entry-actions';
+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();
+
+  const [data, handleFieldChange] = useForm(() => ({
+    name: '',
+    color: LABEL_COLORS[0],
+    ...defaultData,
+  }));
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim() || null,
+    };
+
+    dispatch(
+      cardId
+        ? entryActions.createLabelFromCard(cardId, cleanData)
+        : entryActions.createLabelInCurrentBoard(cleanData),
+    );
+
+    onBack();
+  }, [cardId, onBack, data, dispatch]);
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.createLabel', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <Editor data={data} onFieldChange={handleFieldChange} />
+          <Button positive content={t('action.createLabel')} className={styles.submitButton} />
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+AddStep.propTypes = {
+  cardId: PropTypes.string,
+  defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onBack: PropTypes.func.isRequired,
+};
+
+AddStep.defaultProps = {
+  cardId: undefined,
+};
+
+export default AddStep;

client/src/components/labels/LabelsStep/AddStep.module.scss

@@ -0,0 +1,10 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .submitButton {
+    margin-top: 12px;
+  }
+}

client/src/components/labels/LabelsStep/EditStep.jsx

@@ -0,0 +1,111 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import { dequal } from 'dequal';
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Form } from 'semantic-ui-react';
+import { Popup } from '../../../lib/custom-ui';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { useForm, useSteps } from '../../../hooks';
+import LABEL_COLORS from '../../../constants/LabelColors';
+import Editor from './Editor';
+import ConfirmationStep from '../../common/ConfirmationStep';
+
+import styles from './EditStep.module.scss';
+
+const StepTypes = {
+  DELETE: 'DELETE',
+};
+
+const EditStep = React.memo(({ labelId, onBack }) => {
+  const selectLabelById = useMemo(() => selectors.makeSelectLabelById(), []);
+
+  const label = useSelector((state) => selectLabelById(state, labelId));
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const defaultData = useMemo(
+    () => ({
+      name: label.name,
+      color: label.color,
+    }),
+    [label.name, label.color],
+  );
+
+  const [data, handleFieldChange] = useForm(() => ({
+    color: LABEL_COLORS[0],
+    ...defaultData,
+    name: defaultData.name || '',
+  }));
+
+  const [step, openStep, handleBack] = useSteps();
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim() || null,
+    };
+
+    if (!dequal(cleanData, defaultData)) {
+      dispatch(entryActions.updateLabel(labelId, cleanData));
+    }
+
+    onBack();
+  }, [labelId, onBack, defaultData, dispatch, data]);
+
+  const handleDeleteConfirm = useCallback(() => {
+    dispatch(entryActions.deleteLabel(labelId));
+  }, [labelId, dispatch]);
+
+  const handleDeleteClick = useCallback(() => {
+    openStep(StepTypes.DELETE);
+  }, [openStep]);
+
+  if (step && step.type === StepTypes.DELETE) {
+    return (
+      <ConfirmationStep
+        title="common.deleteLabel"
+        content="common.areYouSureYouWantToDeleteThisLabel"
+        buttonContent="action.deleteLabel"
+        onConfirm={handleDeleteConfirm}
+        onBack={handleBack}
+      />
+    );
+  }
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.editLabel', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <Editor data={data} onFieldChange={handleFieldChange} />
+          <Button positive content={t('action.save')} className={styles.submitButton} />
+        </Form>
+        <Button
+          content={t('action.delete')}
+          className={styles.deleteButton}
+          onClick={handleDeleteClick}
+        />
+      </Popup.Content>
+    </>
+  );
+});
+
+EditStep.propTypes = {
+  labelId: PropTypes.string.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+export default EditStep;

client/src/components/labels/LabelsStep/EditStep.module.scss

@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .deleteButton {
+    bottom: 12px;
+    box-shadow: 0 1px 0 #cbcccc;
+    position: absolute;
+    right: 9px;
+  }
+
+  .submitButton {
+    margin-top: 12px;
+  }
+}

client/src/components/labels/LabelsStep/Editor.jsx

@@ -0,0 +1,68 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import upperFirst from 'lodash/upperFirst';
+import camelCase from 'lodash/camelCase';
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'semantic-ui-react';
+import { Input } from '../../../lib/custom-ui';
+
+import { useNestedRef } from '../../../hooks';
+import LABEL_COLORS from '../../../constants/LabelColors';
+
+import styles from './Editor.module.scss';
+import globalStyles from '../../../styles.module.scss';
+
+const Editor = React.memo(({ data, onFieldChange }) => {
+  const [t] = useTranslation();
+
+  const [nameFieldRef, handleNameFieldRef] = useNestedRef('inputRef');
+
+  useEffect(() => {
+    nameFieldRef.current.focus();
+  }, [nameFieldRef]);
+
+  return (
+    <>
+      <div className={styles.text}>{t('common.title')}</div>
+      <Input
+        fluid
+        ref={handleNameFieldRef}
+        name="name"
+        value={data.name}
+        maxLength={128}
+        className={styles.field}
+        onChange={onFieldChange}
+      />
+      <div className={styles.text}>{t('common.color')}</div>
+      <div className={styles.colorButtons}>
+        {LABEL_COLORS.map((color) => (
+          <Button
+            key={color}
+            type="button"
+            name="color"
+            value={color}
+            className={classNames(
+              styles.colorButton,
+              color === data.color && styles.colorButtonActive,
+              globalStyles[`background${upperFirst(camelCase(color))}`],
+            )}
+            onClick={onFieldChange}
+          />
+        ))}
+      </div>
+    </>
+  );
+});
+
+Editor.propTypes = {
+  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onFieldChange: PropTypes.func.isRequired,
+};
+
+export default Editor;

client/src/components/labels/LabelsStep/Editor.module.scss

@@ -0,0 +1,56 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .colorButton {
+    float: left;
+    height: 30px;
+    margin: 3px;
+    padding: 0;
+    position: relative;
+    width: 41.6px;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .colorButtonActive:before {
+    bottom: 1px;
+    color: #ffffff;
+    content: "Г";
+    font-size: 16px;
+    line-height: 32px;
+    position: absolute;
+    right: 4px;
+    text-align: center;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+    top: 0;
+    transform: rotate(-135deg);
+    width: 32px;
+  }
+
+  .colorButtons {
+    margin: -3px;
+    padding-bottom: 16px;
+
+    &:after {
+      clear: both;
+      content: "";
+      display: table;
+    }
+  }
+
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .text {
+    color: #444444;
+    font-size: 12px;
+    font-weight: bold;
+    padding-bottom: 6px;
+  }
+}

client/src/components/labels/LabelsStep/Item.jsx

@@ -0,0 +1,93 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import upperFirst from 'lodash/upperFirst';
+import camelCase from 'lodash/camelCase';
+import React, { useCallback, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { Draggable } from 'react-beautiful-dnd';
+import { Button } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+import { BoardMembershipRoles } from '../../../constants/Enums';
+
+import styles from './Item.module.scss';
+import globalStyles from '../../../styles.module.scss';
+
+const Item = React.memo(({ id, index, isActive, onSelect, onDeselect, onEdit }) => {
+  const selectLabelById = useMemo(() => selectors.makeSelectLabelById(), []);
+
+  const label = useSelector((state) => selectLabelById(state, id));
+
+  const canEdit = useSelector((state) => {
+    const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+    return !!boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR;
+  });
+
+  const handleToggleClick = useCallback(() => {
+    if (label.isPersisted) {
+      if (isActive) {
+        onDeselect(id);
+      } else {
+        onSelect(id);
+      }
+    }
+  }, [id, isActive, onSelect, onDeselect, label.isPersisted]);
+
+  const handleEditClick = useCallback(() => {
+    onEdit(id);
+  }, [id, onEdit]);
+
+  return (
+    <Draggable draggableId={id} index={index} isDragDisabled={!label.isPersisted || !canEdit}>
+      {({ innerRef, draggableProps, dragHandleProps }, { isDragging }) => {
+        const contentNode = (
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          <div {...draggableProps} ref={innerRef} className={styles.wrapper}>
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+                                         jsx-a11y/no-static-element-interactions */}
+            <span
+              {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
+              className={classNames(
+                styles.name,
+                isActive && styles.nameActive,
+                globalStyles[`background${upperFirst(camelCase(label.color))}`],
+              )}
+              onClick={handleToggleClick}
+            >
+              {label.name}
+            </span>
+            {canEdit && (
+              <Button
+                icon="pencil"
+                size="small"
+                floated="right"
+                disabled={!label.isPersisted}
+                className={styles.editButton}
+                onClick={handleEditClick}
+              />
+            )}
+          </div>
+        );
+
+        return isDragging ? ReactDOM.createPortal(contentNode, document.body) : contentNode;
+      }}
+    </Draggable>
+  );
+});
+
+Item.propTypes = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  onDeselect: PropTypes.func.isRequired,
+  onEdit: PropTypes.func.isRequired,
+};
+
+export default Item;

client/src/components/labels/LabelsStep/Item.module.scss

@@ -0,0 +1,56 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .editButton {
+    background: transparent;
+    box-shadow: none;
+    flex: 0 0 auto;
+    font-weight: normal;
+    padding: 8px 10px;
+    text-decoration: underline;
+
+    &:hover {
+      background: #e9e9e9;
+    }
+  }
+
+  .name {
+    border-radius: 3px;
+    color: #fff;
+    cursor: pointer;
+    flex: 1 1 auto;
+    font-weight: bold;
+    overflow: hidden;
+    padding: 8px 32px 8px 10px;
+    position: relative;
+    text-overflow: ellipsis;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .nameActive:before {
+    bottom: 1px;
+    content: "Г";
+    font-size: 18px;
+    font-weight: normal;
+    line-height: 36px;
+    position: absolute;
+    right: 2px;
+    text-align: center;
+    transform: rotate(-135deg);
+    width: 36px;
+  }
+
+  .wrapper {
+    display: flex;
+    margin-bottom: 4px;
+    max-width: 280px;
+    white-space: nowrap;
+  }
+}

client/src/components/labels/LabelsStep/LabelsStep.jsx

@@ -0,0 +1,203 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { Button } from 'semantic-ui-react';
+import { Input, Popup } from '../../../lib/custom-ui';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { useField, useNestedRef, useSteps } from '../../../hooks';
+import DroppableTypes from '../../../constants/DroppableTypes';
+import { BoardMembershipRoles } from '../../../constants/Enums';
+import Item from './Item';
+import AddStep from './AddStep';
+import EditStep from './EditStep';
+
+import styles from './LabelsStep.module.scss';
+import globalStyles from '../../../styles.module.scss';
+
+const StepTypes = {
+  ADD: 'ADD',
+  EDIT: 'EDIT',
+};
+
+const LabelsStep = React.memo(({ currentIds, cardId, title, onSelect, onDeselect, onBack }) => {
+  const labels = useSelector(selectors.selectLabelsForCurrentBoard);
+
+  const canAdd = useSelector((state) => {
+    const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+    return !!boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR;
+  });
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+  const [step, openStep, handleBack] = useSteps();
+  const [search, handleSearchChange] = useField('');
+  const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);
+
+  const filteredLabels = useMemo(
+    () =>
+      labels.filter(
+        (label) =>
+          (label.name && label.name.toLowerCase().includes(cleanSearch)) ||
+          label.color.includes(cleanSearch),
+      ),
+    [labels, cleanSearch],
+  );
+
+  const [searchFieldRef, handleSearchFieldRef] = useNestedRef('inputRef');
+
+  const handleDragStart = useCallback(() => {
+    document.body.classList.add(globalStyles.dragging);
+  }, []);
+
+  const handleDragEnd = useCallback(
+    ({ draggableId, source, destination }) => {
+      document.body.classList.remove(globalStyles.dragging);
+
+      if (!destination || source.index === destination.index) {
+        return;
+      }
+
+      dispatch(entryActions.moveLabel(draggableId, destination.index));
+    },
+    [dispatch],
+  );
+
+  const handleAddClick = useCallback(() => {
+    openStep(StepTypes.ADD);
+  }, [openStep]);
+
+  const handleEdit = useCallback(
+    (id) => {
+      openStep(StepTypes.EDIT, {
+        id,
+      });
+    },
+    [openStep],
+  );
+
+  useEffect(() => {
+    searchFieldRef.current.focus({
+      preventScroll: true,
+    });
+  }, [searchFieldRef]);
+
+  if (step) {
+    switch (step.type) {
+      case StepTypes.ADD:
+        return (
+          <AddStep
+            cardId={cardId}
+            // TODO: memoize?
+            defaultData={{
+              name: search,
+            }}
+            onBack={handleBack}
+          />
+        );
+      case StepTypes.EDIT: {
+        const currentLabel = labels.find((label) => label.id === step.params.id);
+
+        if (currentLabel) {
+          return <EditStep labelId={currentLabel.id} onBack={handleBack} />;
+        }
+
+        openStep(null);
+
+        break;
+      }
+      default:
+    }
+  }
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t(title, {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Input
+          fluid
+          ref={handleSearchFieldRef}
+          value={search}
+          placeholder={t('common.searchLabels')}
+          maxLength={128}
+          icon="search"
+          onChange={handleSearchChange}
+        />
+        {filteredLabels.length > 0 && (
+          <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+            <Droppable droppableId="labels" type={DroppableTypes.LABEL}>
+              {({ innerRef, droppableProps, placeholder }) => (
+                <div
+                  {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                  ref={innerRef}
+                  className={styles.items}
+                >
+                  {filteredLabels.map((item, index) => (
+                    <Item
+                      key={item.id}
+                      id={item.id}
+                      index={index}
+                      isActive={currentIds.includes(item.id)}
+                      onSelect={onSelect}
+                      onDeselect={onDeselect}
+                      onEdit={handleEdit}
+                    />
+                  ))}
+                  {placeholder}
+                </div>
+              )}
+            </Droppable>
+            <Droppable droppableId="labels:hack" type={DroppableTypes.LABEL}>
+              {({ innerRef, droppableProps, placeholder }) => (
+                <div
+                  {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                  ref={innerRef}
+                  className={styles.droppableHack}
+                >
+                  {placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+        )}
+        {canAdd && (
+          <Button
+            fluid
+            content={t('action.createNewLabel')}
+            className={styles.addButton}
+            onClick={handleAddClick}
+          />
+        )}
+      </Popup.Content>
+    </>
+  );
+});
+
+LabelsStep.propTypes = {
+  currentIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  cardId: PropTypes.string,
+  title: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+  onDeselect: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
+};
+
+LabelsStep.defaultProps = {
+  cardId: undefined,
+  title: 'common.labels',
+  onBack: undefined,
+};
+
+export default LabelsStep;

client/src/components/labels/LabelsStep/LabelsStep.module.scss

@@ -0,0 +1,53 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .addButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: left;
+    text-decoration: underline;
+    transition: background 0.3s ease;
+
+    &:hover {
+      background: #e9e9e9;
+    }
+  }
+
+  .droppableHack {
+    display: none;
+    position: fixed;
+  }
+
+  .items {
+    margin-top: 8px;
+    max-height: 60vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    @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;
+    }
+  }
+}

client/src/components/labels/LabelsStep/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 LabelsStep from './LabelsStep';
+
+export default LabelsStep;