feat: Version 2

Closes #627, closes #1047

client/src/components/common/Header/Header.jsx

@@ -0,0 +1,167 @@
+/*!
+ * 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 classNames from 'classnames';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { Button, Icon, Menu } from 'semantic-ui-react';
+import { usePopup } from '../../../lib/popup';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import Paths from '../../../constants/Paths';
+import { BoardMembershipRoles, BoardViews, UserRoles } from '../../../constants/Enums';
+import UserAvatar from '../../users/UserAvatar';
+import UserStep from '../../users/UserStep';
+import NotificationsStep from '../../notifications/NotificationsStep';
+
+import styles from './Header.module.scss';
+
+const POPUP_PROPS = {
+  position: 'bottom right',
+};
+
+const Header = React.memo(() => {
+  const user = useSelector(selectors.selectCurrentUser);
+  const project = useSelector(selectors.selectCurrentProject);
+  const board = useSelector(selectors.selectCurrentBoard);
+  const notificationIds = useSelector(selectors.selectNotificationIdsForCurrentUser);
+  const isFavoritesEnabled = useSelector(selectors.selectIsFavoritesEnabled);
+  const isEditModeEnabled = useSelector(selectors.selectIsEditModeEnabled);
+
+  const withFavoritesToggler = useSelector(
+    // TODO: use selector instead?
+    (state) => selectors.selectFavoriteProjectIdsForCurrentUser(state).length > 0,
+  );
+
+  const { withEditModeToggler, canEditProject } = useSelector((state) => {
+    if (!project) {
+      return {
+        withEditModeToggler: false,
+        canEditProject: false,
+      };
+    }
+
+    const isAdminInSharedProject = user.role === UserRoles.ADMIN && !project.ownerProjectManagerId;
+    const isManager = selectors.selectIsCurrentUserManagerForCurrentProject(state);
+
+    if (isAdminInSharedProject || isManager) {
+      return {
+        withEditModeToggler: true,
+        canEditProject: isEditModeEnabled,
+      };
+    }
+
+    if (!board) {
+      return {
+        withEditModeToggler: false,
+        canEditProject: false,
+      };
+    }
+
+    const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+    const isEditor = !!boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR;
+
+    return {
+      withEditModeToggler: board.view === BoardViews.KANBAN && isEditor,
+      canEditProject: false,
+    };
+  }, shallowEqual);
+
+  const dispatch = useDispatch();
+
+  const handleToggleEditModeClick = useCallback(() => {
+    dispatch(entryActions.toggleEditMode(!isEditModeEnabled));
+  }, [isEditModeEnabled, dispatch]);
+
+  const handleToggleFavoritesClick = useCallback(() => {
+    dispatch(entryActions.toggleFavorites(!isFavoritesEnabled));
+  }, [isFavoritesEnabled, dispatch]);
+
+  const handleProjectSettingsClick = useCallback(() => {
+    if (!canEditProject) {
+      return;
+    }
+
+    dispatch(entryActions.openProjectSettingsModal());
+  }, [canEditProject, dispatch]);
+
+  const NotificationsPopup = usePopup(NotificationsStep, POPUP_PROPS);
+  const UserPopup = usePopup(UserStep, POPUP_PROPS);
+
+  return (
+    <div className={styles.wrapper}>
+      {!project && (
+        <Link to={Paths.ROOT} className={classNames(styles.logo, styles.title)}>
+          PLANKA
+        </Link>
+      )}
+      <Menu inverted size="large" className={styles.menu}>
+        {project && (
+          <Menu.Menu position="left">
+            <Menu.Item
+              as={Link}
+              to={Paths.ROOT}
+              className={classNames(styles.item, styles.itemHoverable)}
+            >
+              <Icon fitted name="arrow left" />
+            </Menu.Item>
+            <Menu.Item className={classNames(styles.item, styles.title)}>
+              {project.name}
+              {canEditProject && (
+                <Button className={styles.editButton} onClick={handleProjectSettingsClick}>
+                  <Icon fitted name="pencil" size="small" />
+                </Button>
+              )}
+            </Menu.Item>
+          </Menu.Menu>
+        )}
+        <Menu.Menu position="right">
+          {withFavoritesToggler && (
+            <Menu.Item
+              className={classNames(styles.item, styles.itemHoverable)}
+              onClick={handleToggleFavoritesClick}
+            >
+              <Icon
+                fitted
+                name={isFavoritesEnabled ? 'star' : 'star outline'}
+                className={classNames(isFavoritesEnabled && styles.itemIconEnabled)}
+              />
+            </Menu.Item>
+          )}
+          {withEditModeToggler && (
+            <Menu.Item
+              className={classNames(styles.item, styles.itemHoverable)}
+              onClick={handleToggleEditModeClick}
+            >
+              <Icon
+                fitted
+                name={isEditModeEnabled ? 'unlock' : 'lock'}
+                className={classNames(isEditModeEnabled && styles.itemIconEnabled)}
+              />
+            </Menu.Item>
+          )}
+          <NotificationsPopup>
+            <Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
+              <Icon fitted name="bell" />
+              {notificationIds.length > 0 && (
+                <span className={styles.notification}>{notificationIds.length}</span>
+              )}
+            </Menu.Item>
+          </NotificationsPopup>
+          <UserPopup>
+            <Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
+              <span className={styles.userName}>{user.name}</span>
+              <UserAvatar id={user.id} size="small" />
+            </Menu.Item>
+          </UserPopup>
+        </Menu.Menu>
+      </Menu>
+    </div>
+  );
+});
+
+export default Header;

client/src/components/common/Header/Header.module.scss

@@ -0,0 +1,110 @@
+/*!
+ * 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;
+    font-size: 15px;
+    line-height: 34px;
+    margin-left: 8px;
+    opacity: 0;
+    padding: 0;
+    width: 34px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .item {
+    cursor: auto;
+    user-select: auto;
+
+    &:before {
+      background: none;
+    }
+
+    &:active,
+    &:hover {
+      background: transparent;
+      color: rgba(255, 255, 255, 0.9);
+
+      .editButton {
+        opacity: 1;
+      }
+    }
+  }
+
+  .itemHoverable:hover {
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.32);
+  }
+
+  .itemIconEnabled {
+    color: #bdff22;
+  }
+
+  .logo {
+    color: #fff;
+    flex: 0 0 auto;
+    letter-spacing: 3.5px;
+    line-height: 50px;
+    padding: 0 16px;
+    text-transform: uppercase;
+
+    &:before {
+      background: none;
+    }
+  }
+
+  .menu {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    color: #fff;
+    flex: 1 1 auto;
+    height: 50px;
+    margin: 0;
+    width: 100%;
+  }
+
+  .notification {
+    background: #eb5a46;
+    border-radius: 8px;
+    color: #fff;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: bold;
+    height: 16px;
+    left: 22px;
+    line-height: 16px;
+    min-width: 16px;
+    position: absolute;
+    text-align: center;
+    top: 8px;
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .userName {
+    margin-right: 10px;
+
+    @media only screen and (width < 768px) {
+      display: none;
+    }
+  }
+
+  .wrapper {
+    background: rgba(0, 0, 0, 0.24);
+    display: flex;
+    flex: 0 0 auto;
+  }
+}

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