feat: Version 2

Closes #627, closes #1047

client/src/components/boards/Boards/AddStep/AddStep.jsx

@@ -0,0 +1,130 @@
+/*!
+ * 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 } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Icon } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../../../lib/hooks';
+import { Input, Popup } from '../../../../lib/custom-ui';
+
+import entryActions from '../../../../entry-actions';
+import { useForm, useNestedRef, useSteps } from '../../../../hooks';
+import ImportStep from './ImportStep';
+
+import styles from './AddStep.module.scss';
+
+const StepTypes = {
+  IMPORT: 'IMPORT',
+};
+
+const AddStep = React.memo(({ onClose }) => {
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const [data, handleFieldChange, setData] = useForm({
+    name: '',
+    import: null,
+  });
+
+  const [step, openStep, handleBack] = useSteps();
+  const [focusNameFieldState, focusNameField] = useToggle();
+
+  const [nameFieldRef, handleNameFieldRef] = useNestedRef('inputRef');
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim(),
+    };
+
+    if (!cleanData.name) {
+      nameFieldRef.current.select();
+      return;
+    }
+
+    dispatch(entryActions.createBoardInCurrentProject(cleanData));
+    onClose();
+  }, [onClose, dispatch, data, nameFieldRef]);
+
+  const handleImportSelect = useCallback(
+    (nextImport) => {
+      setData((prevData) => ({
+        ...prevData,
+        import: nextImport,
+      }));
+    },
+    [setData],
+  );
+
+  const handleImportBack = useCallback(() => {
+    handleBack();
+    focusNameField();
+  }, [handleBack, focusNameField]);
+
+  const handleImportClick = useCallback(() => {
+    openStep(StepTypes.IMPORT);
+  }, [openStep]);
+
+  useEffect(() => {
+    nameFieldRef.current.focus({
+      preventScroll: true,
+    });
+  }, [nameFieldRef]);
+
+  useDidUpdate(() => {
+    nameFieldRef.current.focus();
+  }, [focusNameFieldState]);
+
+  if (step && step.type === StepTypes.IMPORT) {
+    return <ImportStep onSelect={handleImportSelect} onBack={handleImportBack} />;
+  }
+
+  return (
+    <>
+      <Popup.Header>
+        {t('common.createBoard', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <div className={styles.text}>{t('common.title')}</div>
+          <Input
+            fluid
+            ref={handleNameFieldRef}
+            name="name"
+            value={data.name}
+            maxLength={128}
+            className={styles.field}
+            onChange={handleFieldChange}
+          />
+          <div className={styles.controls}>
+            <Button positive content={t('action.createBoard')} className={styles.button} />
+            <Button
+              type="button"
+              className={classNames(styles.button, styles.importButton)}
+              onClick={handleImportClick}
+            >
+              <Icon
+                name={data.import ? data.import.type : 'arrow down'}
+                className={styles.importButtonIcon}
+              />
+              {data.import ? data.import.file.name : t('action.import')}
+            </Button>
+          </div>
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+AddStep.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default AddStep;

client/src/components/boards/Boards/AddStep/AddStep.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) {
+  .button {
+    white-space: nowrap;
+  }
+
+  .controls {
+    display: flex;
+    max-width: 280px;
+
+    @media only screen and (width < 768px) {
+      max-width: 226px;
+    }
+  }
+
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .importButton {
+    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;
+    }
+  }
+
+  .importButtonIcon {
+    text-decoration: none;
+  }
+
+  .text {
+    color: #444444;
+    font-size: 12px;
+    font-weight: bold;
+    padding-bottom: 6px;
+  }
+}

client/src/components/boards/Boards/AddStep/ImportStep.jsx

@@ -0,0 +1,50 @@
+/*!
+ * 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 { useTranslation } from 'react-i18next';
+import { Button } from 'semantic-ui-react';
+import { FilePicker, Popup } from '../../../../lib/custom-ui';
+
+import styles from './ImportStep.module.scss';
+
+const ImportStep = React.memo(({ onSelect, onBack }) => {
+  const [t] = useTranslation();
+
+  const handleFileSelect = useCallback(
+    (type, file) => {
+      onSelect({
+        type,
+        file,
+      });
+
+      onBack();
+    },
+    [onSelect, onBack],
+  );
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.importBoard', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <FilePicker accept=".json" onSelect={(file) => handleFileSelect('trello', file)}>
+          <Button fluid content={t('common.fromTrello')} icon="trello" className={styles.button} />
+        </FilePicker>
+      </Popup.Content>
+    </>
+  );
+});
+
+ImportStep.propTypes = {
+  onSelect: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+export default ImportStep;

client/src/components/boards/Boards/AddStep/ImportStep.module.scss

@@ -0,0 +1,22 @@
+/*!
+ * 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;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: left;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+}

client/src/components/boards/Boards/AddStep/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 AddStep from './AddStep';
+
+export default AddStep;

client/src/components/boards/Boards/Boards.jsx

@@ -0,0 +1,90 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { Button } from 'semantic-ui-react';
+import { closePopup, usePopup } from '../../../lib/popup';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import DroppableTypes from '../../../constants/DroppableTypes';
+import Item from './Item';
+import AddStep from './AddStep';
+
+import styles from './Boards.module.scss';
+import globalStyles from '../../../styles.module.scss';
+
+const Boards = React.memo(() => {
+  const boardIds = useSelector(selectors.selectBoardIdsForCurrentProject);
+
+  const canAdd = useSelector((state) => {
+    const isEditModeEnabled = selectors.selectIsEditModeEnabled(state); // TODO: move out?
+
+    if (!isEditModeEnabled) {
+      return isEditModeEnabled;
+    }
+
+    return selectors.selectIsCurrentUserManagerForCurrentProject(state);
+  });
+
+  const dispatch = useDispatch();
+
+  const tabsWrapperRef = useRef(null);
+
+  const handleDragStart = useCallback(() => {
+    document.body.classList.add(globalStyles.dragging);
+    closePopup();
+  }, []);
+
+  const handleDragEnd = useCallback(
+    ({ draggableId, source, destination }) => {
+      document.body.classList.remove(globalStyles.dragging);
+
+      if (!destination || source.index === destination.index) {
+        return;
+      }
+
+      dispatch(entryActions.moveBoard(draggableId, destination.index));
+    },
+    [dispatch],
+  );
+
+  const handleWheel = useCallback(({ deltaY }) => {
+    tabsWrapperRef.current.scrollBy({
+      left: deltaY,
+    });
+  }, []);
+
+  const AddPopup = usePopup(AddStep);
+
+  return (
+    <div className={styles.wrapper} onWheel={handleWheel}>
+      <div ref={tabsWrapperRef} className={styles.tabsWrapper}>
+        <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+          <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
+            {({ innerRef, droppableProps, placeholder }) => (
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              <div {...droppableProps} ref={innerRef} className={styles.tabs}>
+                {boardIds.map((boardId, index) => (
+                  <Item key={boardId} id={boardId} index={index} />
+                ))}
+                {placeholder}
+                {canAdd && (
+                  <AddPopup>
+                    <Button icon="plus" className={styles.addButton} />
+                  </AddPopup>
+                )}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </div>
+    </div>
+  );
+});
+
+export default Boards;

client/src/components/boards/Boards/Boards.module.scss

@@ -0,0 +1,62 @@
+/*!
+ * 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;
+    color: #fff;
+    margin-right: 0;
+    vertical-align: top;
+
+    &:hover {
+      background: rgba(34, 36, 38, 0.3);
+    }
+  }
+
+  .tabs {
+    display: flex;
+    height: 38px;
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
+  .tabsWrapper {
+    display: flex;
+    flex: 0 0 auto;
+    height: 56px;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
+      scrollbar-width: thin;
+    }
+
+    &:hover {
+      height: 38px;
+    }
+
+    &::-webkit-scrollbar {
+      height: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
+  }
+
+  .wrapper {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.24);
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    height: 38px;
+    overflow: hidden;
+  }
+}

client/src/components/boards/Boards/Item.jsx

@@ -0,0 +1,87 @@
+/*!
+ * 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 classNames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { Draggable } from 'react-beautiful-dnd';
+import { Button, Icon } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import Paths from '../../../constants/Paths';
+
+import styles from './Item.module.scss';
+
+const Item = React.memo(({ id, index }) => {
+  const selectBoardById = useMemo(() => selectors.makeSelectBoardById(), []);
+
+  const selectNotificationsTotalByBoardId = useMemo(
+    () => selectors.makeSelectNotificationsTotalByBoardId(),
+    [],
+  );
+
+  const board = useSelector((state) => selectBoardById(state, id));
+  const notificationsTotal = useSelector((state) => selectNotificationsTotalByBoardId(state, id));
+  const isActive = useSelector((state) => id === selectors.selectPath(state).boardId);
+
+  const canEdit = useSelector((state) => {
+    const isEditModeEnabled = selectors.selectIsEditModeEnabled(state); // TODO: move out?
+
+    if (!isEditModeEnabled) {
+      return isEditModeEnabled;
+    }
+
+    return selectors.selectIsCurrentUserManagerForCurrentProject(state);
+  });
+
+  const dispatch = useDispatch();
+
+  const handleEditClick = useCallback(() => {
+    dispatch(entryActions.openBoardSettingsModal(id));
+  }, [id, dispatch]);
+
+  return (
+    <Draggable draggableId={id} index={index} isDragDisabled={!board.isPersisted || !canEdit}>
+      {({ innerRef, draggableProps, dragHandleProps }) => (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <div {...draggableProps} {...dragHandleProps} ref={innerRef} className={styles.wrapper}>
+          <div className={classNames(styles.tab, isActive && styles.tabActive)}>
+            {board.isPersisted ? (
+              <>
+                <Link
+                  to={Paths.BOARDS.replace(':id', id)}
+                  title={board.name}
+                  className={styles.link}
+                >
+                  {notificationsTotal > 0 && (
+                    <span className={styles.notifications}>{notificationsTotal}</span>
+                  )}
+                  <span className={styles.name}>{board.name}</span>
+                </Link>
+                {canEdit && (
+                  <Button className={styles.editButton} onClick={handleEditClick}>
+                    <Icon fitted name="pencil" size="small" />
+                  </Button>
+                )}
+              </>
+            ) : (
+              <span className={classNames(styles.name, styles.link)}>{board.name}</span>
+            )}
+          </div>
+        </div>
+      )}
+    </Draggable>
+  );
+});
+
+Item.propTypes = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+};
+
+export default Item;

client/src/components/boards/Boards/Item.module.scss

@@ -0,0 +1,90 @@
+/*!
+ * 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;
+    color: #fff;
+    line-height: 32px;
+    margin-right: 0;
+    opacity: 0;
+    padding: 0;
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    width: 32px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .link {
+    cursor: pointer;
+    display: block;
+    line-height: 20px;
+    padding: 10px 34px 6px 14px;
+    text-overflow: ellipsis;
+    max-width: 400px;
+    overflow: hidden;
+  }
+
+  .name {
+    color: rgba(255, 255, 255, 0.72);
+  }
+
+  .notifications {
+    background: #eb5a46;
+    border: none;
+    border-radius: 3px;
+    color: #fff;
+    display: inline-block;
+    font-size: 10px;
+    line-height: 18px;
+    margin-right: 6px;
+    outline: none;
+    padding: 0px 6px;
+    transition: background 0.3s ease;
+    vertical-align: text-bottom;
+  }
+
+  .tab {
+    border-radius: 3px 3px 0 0;
+    min-width: 100px;
+    position: relative;
+    transition: all 0.1s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.12);
+
+      .name {
+        color: #fff;
+      }
+
+      .editButton {
+        opacity: 1;
+      }
+    }
+  }
+
+  .tabActive {
+    background: rgba(0, 0, 0, 0.24);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.32);
+    }
+
+    .name {
+      color: #fff;
+      font-weight: bold;
+    }
+  }
+
+  .wrapper {
+    display: flex;
+    flex: 0 0 auto;
+  }
+}

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