fix: Improve current board context indication

client/src/components/boards/BoardActions/BoardActions.jsx

@@ -6,8 +6,12 @@
 import React from 'react';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Icon } from 'semantic-ui-react';
 
 import selectors from '../../../selectors';
+import { BoardContexts } from '../../../constants/Enums';
+import { BoardContextIcons } from '../../../constants/Icons';
 import Filters from './Filters';
 import RightSide from './RightSide';
 import BoardMemberships from '../../board-memberships/BoardMemberships';
@@ -15,7 +19,15 @@ import BoardMemberships from '../../board-memberships/BoardMemberships';
 import styles from './BoardActions.module.scss';
 
 const BoardActions = React.memo(() => {
+  const boardContext = useSelector((state) => selectors.selectCurrentBoard(state).context);
+
+  const withContextTitle = boardContext !== BoardContexts.BOARD;
+
   const withMemberships = useSelector((state) => {
+    if (withContextTitle) {
+      return false;
+    }
+
     const boardMemberships = selectors.selectMembershipsForCurrentBoard(state);
 
     if (boardMemberships.length > 0) {
@@ -25,9 +37,19 @@ const BoardActions = React.memo(() => {
     return selectors.selectIsCurrentUserManagerForCurrentProject(state);
   });
 
+  const [t] = useTranslation();
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.actions}>
+        {withContextTitle && (
+          <div className={styles.action}>
+            <div className={styles.contextTitle}>
+              <Icon name={BoardContextIcons[boardContext]} className={styles.contextTitleIcon} />
+              {t(`common.${boardContext}`)}
+            </div>
+          </div>
+        )}
         {withMemberships && (
           <div className={styles.action}>
             <BoardMemberships />

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

@@ -31,6 +31,18 @@
     height: 46px;
   }
 
+  .contextTitle {
+    background: rgba(0, 0, 0, 0.08);
+    border-radius: 3px;
+    color: #fff;
+    line-height: 34px;
+    padding: 2px 14px;
+  }
+
+  .contextTitleIcon {
+    margin-right: 8px;
+  }
+
   .wrapper {
     overflow-x: auto;
     overflow-y: hidden;

client/src/components/boards/BoardActions/RightSide/RightSide.jsx

@@ -11,7 +11,7 @@ import { usePopup } from '../../../../lib/popup';
 import selectors from '../../../../selectors';
 import entryActions from '../../../../entry-actions';
 import { BoardContexts, BoardViews } from '../../../../constants/Enums';
-import { BoardContextIcons, BoardViewIcons } from '../../../../constants/Icons';
+import { BoardViewIcons } from '../../../../constants/Icons';
 import ActionsStep from './ActionsStep';
 
 import styles from './RightSide.module.scss';
@@ -56,7 +56,7 @@ const RightSide = React.memo(() => {
       <div className={styles.action}>
         <ActionsPopup>
           <button type="button" className={styles.button}>
-            <Icon fitted name={BoardContextIcons[board.context]} />
+            <Icon fitted name="ellipsis vertical" />
           </button>
         </ActionsPopup>
       </div>