feat: Toggle actions details, little redesign

Closes #212

client/src/actions/actions.js

@@ -1,6 +1,5 @@
 import ActionTypes from '../constants/ActionTypes';
 
-// eslint-disable-next-line import/prefer-default-export
 export const fetchActions = (cardId) => ({
   type: ActionTypes.ACTIONS_FETCH,
   payload: {
@@ -24,3 +23,28 @@ fetchActions.failure = (cardId, error) => ({
     error,
   },
 });
+
+export const toggleActionsDetails = (cardId, isVisible) => ({
+  type: ActionTypes.ACTIONS_DETAILS_TOGGLE,
+  payload: {
+    cardId,
+    isVisible,
+  },
+});
+
+toggleActionsDetails.success = (cardId, actions, users) => ({
+  type: ActionTypes.ACTIONS_DETAILS_TOGGLE__SUCCESS,
+  payload: {
+    cardId,
+    actions,
+    users,
+  },
+});
+
+toggleActionsDetails.failure = (cardId, error) => ({
+  type: ActionTypes.ACTIONS_DETAILS_TOGGLE__FAILURE,
+  payload: {
+    cardId,
+    error,
+  },
+});

client/src/actions/entry/actions.js

@@ -1,7 +1,13 @@
 import EntryActionTypes from '../../constants/EntryActionTypes';
 
-// eslint-disable-next-line import/prefer-default-export
 export const fetchActionsInCurrentCard = () => ({
   type: EntryActionTypes.ACTIONS_IN_CURRENT_CARD_FETCH,
   payload: {},
 });
+
+export const toggleActionsDetailsInCurrentCard = (isVisible) => ({
+  type: EntryActionTypes.ACTIONS_DETAILS_IN_CURRENT_CARD_TOGGLE,
+  payload: {
+    isVisible,
+  },
+});

client/src/actions/entry/user.js

@@ -41,6 +41,13 @@ export const handleUserUpdate = (user) => ({
   },
 });
 
+export const updateCurrentUserLanguage = (language) => ({
+  type: EntryActionTypes.CURRENT_USER_LANGUAGE_UPDATE,
+  payload: {
+    language,
+  },
+});
+
 export const updateUserEmail = (id, data) => ({
   type: EntryActionTypes.USER_EMAIL_UPDATE,
   payload: {

client/src/components/BoardKanban/ListAdd.jsx

@@ -15,7 +15,7 @@ const DEFAULT_DATA = {
 const ListAdd = React.memo(({ onCreate, onClose }) => {
   const [t] = useTranslation();
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
-  const [selectNameFieldState, selectNameField] = useToggle();
+  const [focusNameFieldState, focusNameField] = useToggle();
 
   const nameField = useRef(null);
 
@@ -44,16 +44,16 @@ const ListAdd = React.memo(({ onCreate, onClose }) => {
     onCreate(cleanData);
 
     setData(DEFAULT_DATA);
-    selectNameField();
+    focusNameField();
-  }, [onCreate, data, setData, selectNameField]);
+  }, [onCreate, data, setData, focusNameField]);
 
   useEffect(() => {
-    nameField.current.select();
+    nameField.current.focus();
   }, []);
 
   useDidUpdate(() => {
-    nameField.current.select();
+    nameField.current.focus();
-  }, [selectNameFieldState]);
+  }, [focusNameFieldState]);
 
   return (
     <Form className={styles.wrapper} onSubmit={handleSubmit}>

client/src/components/Boards/AddPopup.jsx

@@ -35,7 +35,7 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
   }, [onCreate, onClose, data]);
 
   useEffect(() => {
-    nameField.current.select();
+    nameField.current.focus();
   }, []);
 
   return (

client/src/components/Card/Card.module.scss

@@ -77,6 +77,7 @@
 
   .cover {
     border-radius: 3px 3px 0 0;
+    margin-bottom: 2px;
     vertical-align: middle;
   }
 

client/src/components/Card/NameEdit.jsx

@@ -79,7 +79,7 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
 
   useEffect(() => {
     if (isOpened) {
-      field.current.ref.current.select();
+      field.current.ref.current.focus();
     }
   }, [isOpened]);
 

client/src/components/CardModal/Actions/Actions.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Comment, Icon, Loader, Visibility } from 'semantic-ui-react';
+import { Button, Comment, Icon, Loader, Visibility } from 'semantic-ui-react';
 
 import { ActionTypes } from '../../../constants/Enums';
 import CommentAdd from './CommentAdd';
@@ -14,15 +14,22 @@ const Actions = React.memo(
     items,
     isFetching,
     isAllFetched,
+    isDetailsVisible,
+    isDetailsFetching,
     canEdit,
     canEditAllComments,
     onFetch,
+    onDetailsToggle,
     onCommentCreate,
     onCommentUpdate,
     onCommentDelete,
   }) => {
     const [t] = useTranslation();
 
+    const handleToggleDetailsClick = useCallback(() => {
+      onDetailsToggle(!isDetailsVisible);
+    }, [isDetailsVisible, onDetailsToggle]);
+
     const handleCommentUpdate = useCallback(
       (id, data) => {
         onCommentUpdate(id, data);
@@ -38,54 +45,51 @@ const Actions = React.memo(
     );
 
     return (
-      <>
+      <div className={styles.contentModule}>
-        {canEdit && (
+        <div className={styles.moduleWrapper}>
-          <div className={styles.contentModule}>
+          <Icon name="list ul" className={styles.moduleIcon} />
-            <div className={styles.moduleWrapper}>
+          <div className={styles.moduleHeader}>
-              <Icon name="comment outline" className={styles.moduleIcon} />
+            {t('common.actions')}
-              <div className={styles.moduleHeader}>{t('common.addComment')}</div>
+            <Button
-              <CommentAdd onCreate={onCommentCreate} />
+              content={isDetailsVisible ? t('action.hideDetails') : t('action.showDetails')}
-            </div>
+              className={styles.toggleButton}
+              onClick={handleToggleDetailsClick}
+            />
           </div>
-        )}
+          {canEdit && <CommentAdd onCreate={onCommentCreate} />}
-        <div className={styles.contentModule}>
+          <div className={styles.wrapper}>
-          <div className={styles.moduleWrapper}>
+            <Comment.Group>
-            <Icon name="list ul" className={styles.moduleIcon} />
+              {items.map((item) =>
-            <div className={styles.moduleHeader}>{t('common.actions')}</div>
+                item.type === ActionTypes.COMMENT_CARD ? (
-            <div className={styles.wrapper}>
+                  <Item.Comment
-              <Comment.Group>
+                    key={item.id}
-                {items.map((item) =>
+                    data={item.data}
-                  item.type === ActionTypes.COMMENT_CARD ? (
+                    createdAt={item.createdAt}
-                    <Item.Comment
+                    isPersisted={item.isPersisted}
-                      key={item.id}
+                    user={item.user}
-                      data={item.data}
+                    canEdit={(item.user.isCurrent && canEdit) || canEditAllComments}
-                      createdAt={item.createdAt}
+                    onUpdate={(data) => handleCommentUpdate(item.id, data)}
-                      isPersisted={item.isPersisted}
+                    onDelete={() => handleCommentDelete(item.id)}
-                      user={item.user}
+                  />
-                      canEdit={(item.user.isCurrent && canEdit) || canEditAllComments}
+                ) : (
-                      onUpdate={(data) => handleCommentUpdate(item.id, data)}
+                  <Item
-                      onDelete={() => handleCommentDelete(item.id)}
+                    key={item.id}
-                    />
+                    type={item.type}
-                  ) : (
+                    data={item.data}
-                    <Item
+                    createdAt={item.createdAt}
-                      key={item.id}
+                    user={item.user}
-                      type={item.type}
+                  />
-                      data={item.data}
+                ),
-                      createdAt={item.createdAt}
+              )}
-                      user={item.user}
+            </Comment.Group>
-                    />
-                  ),
-                )}
-              </Comment.Group>
-            </div>
-            {isFetching ? (
-              <Loader active inverted inline="centered" size="small" className={styles.loader} />
-            ) : (
-              !isAllFetched && <Visibility fireOnMount onOnScreen={onFetch} />
-            )}
           </div>
+          {isFetching || isDetailsFetching ? (
+            <Loader active inverted inline="centered" size="small" className={styles.loader} />
+          ) : (
+            !isAllFetched && <Visibility fireOnMount onOnScreen={onFetch} />
+          )}
         </div>
-      </>
+      </div>
     );
   },
 );
@@ -94,9 +98,12 @@ Actions.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   isFetching: PropTypes.bool.isRequired,
   isAllFetched: PropTypes.bool.isRequired,
+  isDetailsVisible: PropTypes.bool.isRequired,
+  isDetailsFetching: PropTypes.bool.isRequired,
   canEdit: PropTypes.bool.isRequired,
   canEditAllComments: PropTypes.bool.isRequired,
   onFetch: PropTypes.func.isRequired,
+  onDetailsToggle: PropTypes.func.isRequired,
   onCommentCreate: PropTypes.func.isRequired,
   onCommentUpdate: PropTypes.func.isRequired,
   onCommentDelete: PropTypes.func.isRequired,

client/src/components/CardModal/Actions/Actions.module.scss

@@ -8,12 +8,14 @@
   }
 
   .moduleHeader {
+    align-items: center;
     color: #17394d;
+    display: flex;
     font-size: 16px;
     font-weight: bold;
-    line-height: 20px;
+    height: 36px;
+    justify-content: space-between;
     margin: 0 0 4px;
-    padding: 8px 0;
   }
 
   .moduleIcon {
@@ -33,6 +35,24 @@
     position: relative;
   }
 
+  .toggleButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    float: right;
+    font-weight: normal;
+    margin-right: 0;
+    padding: 6px 11px;
+    text-align: left;
+    text-decoration: underline;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
   .wrapper {
     margin-left: -40px;
     margin-top: 12px;

client/src/components/CardModal/Actions/CommentAdd.jsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import TextareaAutosize from 'react-textarea-autosize';
 import { Button, Form, TextArea } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../../lib/hooks';
 
-import { useForm } from '../../../hooks';
+import { useClosableForm, useForm } from '../../../hooks';
 
 import styles from './CommentAdd.module.scss';
 
@@ -14,10 +15,16 @@ const DEFAULT_DATA = {
 
 const CommentAdd = React.memo(({ onCreate }) => {
   const [t] = useTranslation();
+  const [isOpened, setIsOpened] = useState(false);
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
+  const [selectTextFieldState, selectTextField] = useToggle();
 
   const textField = useRef(null);
 
+  const close = useCallback(() => {
+    setIsOpened(false);
+  }, []);
+
   const submit = useCallback(() => {
     const cleanData = {
       ...data,
@@ -32,7 +39,12 @@ const CommentAdd = React.memo(({ onCreate }) => {
     onCreate(cleanData);
 
     setData(DEFAULT_DATA);
-  }, [onCreate, data, setData]);
+    selectTextField();
+  }, [onCreate, data, setData, selectTextField]);
+
+  const handleFieldFocus = useCallback(() => {
+    setIsOpened(true);
+  }, []);
 
   const handleFieldKeyDown = useCallback(
     (event) => {
@@ -43,10 +55,16 @@ const CommentAdd = React.memo(({ onCreate }) => {
     [submit],
   );
 
+  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(close);
+
   const handleSubmit = useCallback(() => {
     submit();
   }, [submit]);
 
+  useDidUpdate(() => {
+    textField.current.ref.current.focus();
+  }, [selectTextFieldState]);
+
   return (
     <Form onSubmit={handleSubmit}>
       <TextArea
@@ -55,15 +73,24 @@ const CommentAdd = React.memo(({ onCreate }) => {
         name="text"
         value={data.text}
         placeholder={t('common.writeComment')}
-        minRows={3}
+        minRows={isOpened ? 3 : 1}
         spellCheck={false}
         className={styles.field}
+        onFocus={handleFieldFocus}
         onKeyDown={handleFieldKeyDown}
         onChange={handleFieldChange}
+        onBlur={handleFieldBlur}
       />
-      <div className={styles.controls}>
+      {isOpened && (
-        <Button positive content={t('action.addComment')} disabled={!data.text} />
+        <div className={styles.controls}>
-      </div>
+          <Button
+            positive
+            content={t('action.addComment')}
+            onMouseOver={handleControlMouseOver}
+            onMouseOut={handleControlMouseOut}
+          />
+        </div>
+      )}
     </Form>
   );
 });

client/src/components/CardModal/Actions/CommentEdit.jsx

@@ -76,7 +76,7 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
 
   useEffect(() => {
     if (isOpened) {
-      textField.current.ref.current.select();
+      textField.current.ref.current.focus();
     }
   }, [isOpened]);
 

client/src/components/CardModal/AttachmentAddZone/TextFileAddModal.jsx

@@ -37,7 +37,7 @@ const TextFileAddModal = React.memo(({ content, onCreate, onClose }) => {
   }, [content, onCreate, onClose, data]);
 
   useEffect(() => {
-    nameField.current.select();
+    nameField.current.focus();
   }, []);
 
   return (

client/src/components/CardModal/CardModal.jsx

@@ -34,6 +34,8 @@ const CardModal = React.memo(
     isSubscribed,
     isActionsFetching,
     isAllActionsFetched,
+    isActionsDetailsVisible,
+    isActionsDetailsFetching,
     listId,
     boardId,
     projectId,
@@ -67,6 +69,7 @@ const CardModal = React.memo(
     onAttachmentUpdate,
     onAttachmentDelete,
     onActionsFetch,
+    onActionsDetailsToggle,
     onCommentActionCreate,
     onCommentActionUpdate,
     onCommentActionDelete,
@@ -358,9 +361,12 @@ const CardModal = React.memo(
               items={actions}
               isFetching={isActionsFetching}
               isAllFetched={isAllActionsFetched}
+              isDetailsVisible={isActionsDetailsVisible}
+              isDetailsFetching={isActionsDetailsFetching}
               canEdit={canEdit}
               canEditAllComments={canEditAllCommentActions}
               onFetch={onActionsFetch}
+              onDetailsToggle={onActionsDetailsToggle}
               onCommentCreate={onCommentActionCreate}
               onCommentUpdate={onCommentActionUpdate}
               onCommentDelete={onCommentActionDelete}
@@ -467,7 +473,7 @@ const CardModal = React.memo(
     );
 
     return (
-      <Modal open closeIcon size="small" centered={false} onClose={handleClose}>
+      <Modal open closeIcon centered={false} onClose={handleClose} className={styles.wrapper}>
         {canEdit ? (
           <AttachmentAddZone onCreate={onAttachmentCreate}>{contentNode}</AttachmentAddZone>
         ) : (
@@ -486,6 +492,8 @@ CardModal.propTypes = {
   isSubscribed: PropTypes.bool.isRequired,
   isActionsFetching: PropTypes.bool.isRequired,
   isAllActionsFetched: PropTypes.bool.isRequired,
+  isActionsDetailsVisible: PropTypes.bool.isRequired,
+  isActionsDetailsFetching: PropTypes.bool.isRequired,
   listId: PropTypes.string.isRequired,
   boardId: PropTypes.string.isRequired,
   projectId: PropTypes.string.isRequired,
@@ -521,6 +529,7 @@ CardModal.propTypes = {
   onAttachmentUpdate: PropTypes.func.isRequired,
   onAttachmentDelete: PropTypes.func.isRequired,
   onActionsFetch: PropTypes.func.isRequired,
+  onActionsDetailsToggle: PropTypes.func.isRequired,
   onCommentActionCreate: PropTypes.func.isRequired,
   onCommentActionUpdate: PropTypes.func.isRequired,
   onCommentActionDelete: PropTypes.func.isRequired,

client/src/components/CardModal/CardModal.module.scss

@@ -193,4 +193,14 @@
     margin: 0 8px 4px 0;
     text-transform: uppercase;
   }
+
+  .wrapper {
+    width: 880px;
+  }
+
+  @media (max-width: 926px) {
+    .wrapper {
+      width: 95%;
+    }
+  }
 }

client/src/components/CardModal/DescriptionEdit.jsx

@@ -66,7 +66,7 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
 
   useEffect(() => {
     if (isOpened) {
-      field.current.ref.current.select();
+      field.current.ref.current.focus();
     }
   }, [isOpened]);
 

client/src/components/CardModal/Tasks/Add.jsx

@@ -17,7 +17,7 @@ const Add = React.forwardRef(({ children, onCreate }, ref) => {
   const [t] = useTranslation();
   const [isOpened, setIsOpened] = useState(false);
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
-  const [selectNameFieldState, selectNameField] = useToggle();
+  const [focusNameFieldState, focusNameField] = useToggle();
 
   const nameField = useRef(null);
 
@@ -43,8 +43,8 @@ const Add = React.forwardRef(({ children, onCreate }, ref) => {
     onCreate(cleanData);
 
     setData(DEFAULT_DATA);
-    selectNameField();
+    focusNameField();
-  }, [onCreate, data, setData, selectNameField]);
+  }, [onCreate, data, setData, focusNameField]);
 
   useImperativeHandle(
     ref,
@@ -81,13 +81,13 @@ const Add = React.forwardRef(({ children, onCreate }, ref) => {
 
   useEffect(() => {
     if (isOpened) {
-      nameField.current.ref.current.select();
+      nameField.current.ref.current.focus();
     }
   }, [isOpened]);
 
   useDidUpdate(() => {
-    nameField.current.ref.current.select();
+    nameField.current.ref.current.focus();
-  }, [selectNameFieldState]);
+  }, [focusNameFieldState]);
 
   if (!isOpened) {
     return React.cloneElement(children, {

client/src/components/CardModal/Tasks/NameEdit.jsx

@@ -71,7 +71,7 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
 
   useEffect(() => {
     if (isOpened) {
-      field.current.ref.current.select();
+      field.current.ref.current.focus();
     }
   }, [isOpened]);
 

client/src/components/List/CardAdd.jsx

@@ -17,7 +17,7 @@ const DEFAULT_DATA = {
 const CardAdd = React.memo(({ isOpened, onCreate, onClose }) => {
   const [t] = useTranslation();
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
-  const [selectNameFieldState, selectNameField] = useToggle();
+  const [focusNameFieldState, focusNameField] = useToggle();
 
   const nameField = useRef(null);
 
@@ -35,8 +35,8 @@ const CardAdd = React.memo(({ isOpened, onCreate, onClose }) => {
     onCreate(cleanData);
 
     setData(DEFAULT_DATA);
-    selectNameField();
+    focusNameField();
-  }, [onCreate, data, setData, selectNameField]);
+  }, [onCreate, data, setData, focusNameField]);
 
   const handleFieldKeyDown = useCallback(
     (event) => {
@@ -65,13 +65,13 @@ const CardAdd = React.memo(({ isOpened, onCreate, onClose }) => {
 
   useEffect(() => {
     if (isOpened) {
-      nameField.current.ref.current.select();
+      nameField.current.ref.current.focus();
     }
   }, [isOpened]);
 
   useDidUpdate(() => {
-    nameField.current.ref.current.select();
+    nameField.current.ref.current.focus();
-  }, [selectNameFieldState]);
+  }, [focusNameFieldState]);
 
   return (
     <Form

client/src/components/Login/Login.jsx

@@ -83,7 +83,7 @@ const Login = React.memo(
     }, [onAuthenticate, data]);
 
     useEffect(() => {
-      emailOrUsernameField.current.select();
+      emailOrUsernameField.current.focus();
     }, []);
 
     useEffect(() => {

client/src/components/ProjectAddModal/ProjectAddModal.jsx

@@ -33,7 +33,7 @@ const ProjectAddModal = React.memo(({ defaultData, isSubmitting, onCreate, onClo
   }, [onCreate, data]);
 
   useEffect(() => {
-    nameField.current.select();
+    nameField.current.focus();
   }, []);
 
   return (

client/src/components/UserAddPopup/UserAddPopup.jsx

@@ -88,7 +88,7 @@ const UserAddStep = React.memo(
     }, [onCreate, data]);
 
     useEffect(() => {
-      emailField.current.select();
+      emailField.current.focus();
     }, []);
 
     useEffect(() => {

client/src/components/UserEmailEditStep/UserEmailEditStep.jsx

@@ -87,7 +87,7 @@ const UserEmailEditStep = React.memo(
     }, [email, usePasswordConfirmation, onUpdate, onClose, data]);
 
     useEffect(() => {
-      emailField.current.select();
+      emailField.current.focus();
     }, []);
 
     useEffect(() => {

client/src/components/UserPasswordEditStep/UserPasswordEditStep.jsx

@@ -70,7 +70,7 @@ const UserPasswordEditStep = React.memo(
     }, [usePasswordConfirmation, onUpdate, data]);
 
     useEffect(() => {
-      passwordField.current.select();
+      passwordField.current.focus();
     }, []);
 
     useEffect(() => {

client/src/components/UserSettingsModal/AccountPane/AccountPane.jsx

@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Button, Divider, Header, Tab } from 'semantic-ui-react';
+import { Button, Divider, Dropdown, Header, Tab } from 'semantic-ui-react';
 
+import locales from '../../../locales';
 import AvatarEditPopup from './AvatarEditPopup';
 import User from '../../User';
 import UserInformationEdit from '../../UserInformationEdit';
@@ -20,12 +21,14 @@ const AccountPane = React.memo(
     avatarUrl,
     phone,
     organization,
+    language,
     isAvatarUpdating,
     usernameUpdateForm,
     emailUpdateForm,
     passwordUpdateForm,
     onUpdate,
     onAvatarUpdate,
+    onLanguageUpdate,
     onUsernameUpdate,
     onUsernameUpdateMessageDismiss,
     onEmailUpdate,
@@ -41,6 +44,13 @@ const AccountPane = React.memo(
       });
     }, [onUpdate]);
 
+    const handleLanguageChange = useCallback(
+      (_, { value }) => {
+        onLanguageUpdate(value === 'auto' ? null : value); // FIXME: hack
+      },
+      [onLanguageUpdate],
+    );
+
     return (
       <Tab.Pane attached={false} className={styles.wrapper}>
         <AvatarEditPopup
@@ -60,6 +70,32 @@ const AccountPane = React.memo(
           }}
           onUpdate={onUpdate}
         />
+        <Divider horizontal section>
+          <Header as="h4">
+            {t('common.language', {
+              context: 'title',
+            })}
+          </Header>
+        </Divider>
+        <Dropdown
+          fluid
+          selection
+          options={[
+            {
+              key: 'auto',
+              value: 'auto',
+              text: t('common.detectAutomatically'),
+            },
+            ...locales.map((locale) => ({
+              key: locale.language,
+              value: locale.language,
+              flag: locale.country,
+              text: locale.name,
+            })),
+          ]}
+          value={language || 'auto'}
+          onChange={handleLanguageChange}
+        />
         <Divider horizontal section>
           <Header as="h4">
             {t('common.authentication', {
@@ -129,6 +165,7 @@ AccountPane.propTypes = {
   avatarUrl: PropTypes.string,
   phone: PropTypes.string,
   organization: PropTypes.string,
+  language: PropTypes.string,
   isAvatarUpdating: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
   usernameUpdateForm: PropTypes.object.isRequired,
@@ -137,6 +174,7 @@ AccountPane.propTypes = {
   /* eslint-enable react/forbid-prop-types */
   onUpdate: PropTypes.func.isRequired,
   onAvatarUpdate: PropTypes.func.isRequired,
+  onLanguageUpdate: PropTypes.func.isRequired,
   onUsernameUpdate: PropTypes.func.isRequired,
   onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
   onEmailUpdate: PropTypes.func.isRequired,
@@ -150,6 +188,7 @@ AccountPane.defaultProps = {
   avatarUrl: undefined,
   phone: undefined,
   organization: undefined,
+  language: undefined,
 };
 
 export default AccountPane;

client/src/components/UserSettingsModal/UserSettingsModal.jsx

@@ -14,6 +14,7 @@ const UserSettingsModal = React.memo(
     avatarUrl,
     phone,
     organization,
+    language,
     subscribeToOwnCards,
     isAvatarUpdating,
     usernameUpdateForm,
@@ -21,6 +22,7 @@ const UserSettingsModal = React.memo(
     passwordUpdateForm,
     onUpdate,
     onAvatarUpdate,
+    onLanguageUpdate,
     onUsernameUpdate,
     onUsernameUpdateMessageDismiss,
     onEmailUpdate,
@@ -44,12 +46,14 @@ const UserSettingsModal = React.memo(
             avatarUrl={avatarUrl}
             phone={phone}
             organization={organization}
+            language={language}
             isAvatarUpdating={isAvatarUpdating}
             usernameUpdateForm={usernameUpdateForm}
             emailUpdateForm={emailUpdateForm}
             passwordUpdateForm={passwordUpdateForm}
             onUpdate={onUpdate}
             onAvatarUpdate={onAvatarUpdate}
+            onLanguageUpdate={onLanguageUpdate}
             onUsernameUpdate={onUsernameUpdate}
             onUsernameUpdateMessageDismiss={onUsernameUpdateMessageDismiss}
             onEmailUpdate={onEmailUpdate}
@@ -92,6 +96,7 @@ UserSettingsModal.propTypes = {
   avatarUrl: PropTypes.string,
   phone: PropTypes.string,
   organization: PropTypes.string,
+  language: PropTypes.string,
   subscribeToOwnCards: PropTypes.bool.isRequired,
   isAvatarUpdating: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
@@ -101,6 +106,7 @@ UserSettingsModal.propTypes = {
   /* eslint-enable react/forbid-prop-types */
   onUpdate: PropTypes.func.isRequired,
   onAvatarUpdate: PropTypes.func.isRequired,
+  onLanguageUpdate: PropTypes.func.isRequired,
   onUsernameUpdate: PropTypes.func.isRequired,
   onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
   onEmailUpdate: PropTypes.func.isRequired,
@@ -115,6 +121,7 @@ UserSettingsModal.defaultProps = {
   avatarUrl: undefined,
   phone: undefined,
   organization: undefined,
+  language: undefined,
 };
 
 export default UserSettingsModal;

client/src/components/UserUsernameEditStep/UserUsernameEditStep.jsx

@@ -87,7 +87,7 @@ const UserUsernameEditStep = React.memo(
     }, [username, usePasswordConfirmation, onUpdate, onClose, data]);
 
     useEffect(() => {
-      usernameField.current.select();
+      usernameField.current.focus();
     }, []);
 
     useEffect(() => {

client/src/constants/ActionTypes.js

@@ -225,6 +225,9 @@ export default {
   ACTIONS_FETCH: 'ACTIONS_FETCH',
   ACTIONS_FETCH__SUCCESS: 'ACTIONS_FETCH__SUCCESS',
   ACTIONS_FETCH__FAILURE: 'ACTIONS_FETCH__FAILURE',
+  ACTIONS_DETAILS_TOGGLE: 'ACTIONS_DETAILS_TOGGLE',
+  ACTIONS_DETAILS_TOGGLE__SUCCESS: 'ACTIONS_DETAILS_TOGGLE__SUCCESS',
+  ACTIONS_DETAILS_TOGGLE__FAILURE: 'ACTIONS_DETAILS_TOGGLE__FAILURE',
 
   /* Action */
 

client/src/constants/Config.js

@@ -13,7 +13,7 @@ const ACCESS_TOKEN_KEY = 'accessToken';
 const ACCESS_TOKEN_EXPIRES = 365;
 
 const POSITION_GAP = 65535;
-const ACTIONS_LIMIT = 10;
+const ACTIONS_LIMIT = 50;
 
 export default {
   SERVER_BASE_URL,

client/src/constants/EntryActionTypes.js

@@ -31,6 +31,7 @@ export default {
   USER_UPDATE: `${PREFIX}/USER_UPDATE`,
   CURRENT_USER_UPDATE: `${PREFIX}/CURRENT_USER_UPDATE`,
   USER_UPDATE_HANDLE: `${PREFIX}/USER_UPDATE_HANDLE`,
+  CURRENT_USER_LANGUAGE_UPDATE: `${PREFIX}/CURRENT_USER_LANGUAGE_UPDATE`,
   USER_EMAIL_UPDATE: `${PREFIX}/USER_EMAIL_UPDATE`,
   CURRENT_USER_EMAIL_UPDATE: `${PREFIX}/CURRENT_USER_EMAIL_UPDATE`,
   USER_EMAIL_UPDATE_ERROR_CLEAR: `${PREFIX}/USER_EMAIL_UPDATE_ERROR_CLEAR`,
@@ -154,6 +155,7 @@ export default {
   /* Actions */
 
   ACTIONS_IN_CURRENT_CARD_FETCH: `${PREFIX}/ACTIONS_IN_CURRENT_CARD_FETCH`,
+  ACTIONS_DETAILS_IN_CURRENT_CARD_TOGGLE: `${PREFIX}/ACTIONS_DETAILS_IN_CURRENT_CARD_TOGGLE`,
 
   /* Action */
 

client/src/containers/CardModalContainer.js

@@ -35,6 +35,7 @@ import {
   moveTask,
   removeLabelFromCurrentCard,
   removeUserFromCurrentCard,
+  toggleActionsDetailsInCurrentCard,
   transferCurrentCard,
   updateAttachment,
   updateCommentAction,
@@ -60,6 +61,8 @@ const mapStateToProps = (state) => {
     timer,
     isSubscribed,
     isActionsFetching,
+    isActionsDetailsVisible,
+    isActionsDetailsFetching,
     isAllActionsFetched,
     boardId,
     listId,
@@ -79,6 +82,8 @@ const mapStateToProps = (state) => {
     isSubscribed,
     isActionsFetching,
     isAllActionsFetched,
+    isActionsDetailsVisible,
+    isActionsDetailsFetching,
     listId,
     boardId,
     projectId,
@@ -118,6 +123,7 @@ const mapDispatchToProps = (dispatch) =>
       onAttachmentUpdate: updateAttachment,
       onAttachmentDelete: deleteAttachment,
       onActionsFetch: fetchActionsInCurrentCard,
+      onActionsDetailsToggle: toggleActionsDetailsInCurrentCard,
       onCommentActionCreate: createCommentActionInCurrentCard,
       onCommentActionUpdate: updateCommentAction,
       onCommentActionDelete: deleteCommentAction,

client/src/containers/UserSettingsModalContainer.js

@@ -10,6 +10,7 @@ import {
   updateCurrentUser,
   updateCurrentUserAvatar,
   updateCurrentUserEmail,
+  updateCurrentUserLanguage,
   updateCurrentUserPassword,
   updateCurrentUserUsername,
 } from '../actions/entry';
@@ -23,6 +24,7 @@ const mapStateToProps = (state) => {
     avatarUrl,
     phone,
     organization,
+    language,
     subscribeToOwnCards,
     isAvatarUpdating,
     emailUpdateForm,
@@ -37,6 +39,7 @@ const mapStateToProps = (state) => {
     avatarUrl,
     phone,
     organization,
+    language,
     subscribeToOwnCards,
     isAvatarUpdating,
     emailUpdateForm,
@@ -50,6 +53,7 @@ const mapDispatchToProps = (dispatch) =>
     {
       onUpdate: updateCurrentUser,
       onAvatarUpdate: updateCurrentUserAvatar,
+      onLanguageUpdate: updateCurrentUserLanguage,
       onUsernameUpdate: updateCurrentUserUsername,
       onUsernameUpdateMessageDismiss: clearCurrentUserUsernameUpdateError,
       onEmailUpdate: updateCurrentUserEmail,

client/src/i18n.js

@@ -1,11 +1,11 @@
 import i18n from 'i18next';
-import languageDetector from 'i18next-browser-languagedetector';
+import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import formatDate from 'date-fns/format';
 import parseDate from 'date-fns/parse';
 import { registerLocale, setDefaultLocale } from 'react-datepicker';
 
-import { embedLocales, languages } from './locales';
+import { embeddedLocales, languages } from './locales';
 
 i18n.dateFns = {
   locales: {},
@@ -52,12 +52,12 @@ const parseDatePostProcessor = {
 };
 
 i18n
-  .use(languageDetector)
+  .use(LanguageDetector)
   .use(formatDatePostProcessor)
   .use(parseDatePostProcessor)
   .use(initReactI18next)
   .init({
-    resources: embedLocales,
+    resources: embeddedLocales,
     fallbackLng: 'en',
     supportedLngs: languages,
     load: 'languageOnly',
@@ -74,7 +74,7 @@ i18n
       },
     },
     react: {
-      useSuspense: false,
+      useSuspense: true,
     },
     debug: process.env.NODE_ENV !== 'production',
   });
@@ -95,4 +95,20 @@ i18n.loadCoreLocale = async (language = i18n.resolvedLanguage) => {
   });
 };
 
+i18n.detectLanguage = () => {
+  const {
+    services: { languageDetector, languageUtils },
+  } = i18n;
+
+  localStorage.removeItem(languageDetector.options.lookupLocalStorage);
+
+  const detectedLanguages = languageDetector.detect();
+
+  i18n.language = languageUtils.getBestMatchFromCodes(detectedLanguages);
+  i18n.languages = languageUtils.toResolveHierarchy(i18n.language);
+
+  i18n.resolvedLanguage = undefined;
+  i18n.setResolvedLanguage(i18n.language);
+};
+
 export default i18n;

client/src/locales/cs/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'cs',
+  country: 'cz',
+  name: 'Čeština',
+  embeddedLocale: login,
+};

client/src/locales/da/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'da',
+  country: 'dk',
+  name: 'Dansk',
+  embeddedLocale: login,
+};

client/src/locales/de/core.js

@@ -72,6 +72,7 @@ export default {
       deleteTask_title: 'Aufgabe löschen',
       deleteUser_title: 'Benutzer löschen',
       description: 'Beschreibung',
+      detectAutomatically: 'Automatische Erkennung',
       dropFileToUpload: 'Datei ablegen, um hochzuladen',
       editAttachment_title: 'Anhang bearbieten',
       editAvatar_title: 'Avatar bearbeiten',
@@ -97,6 +98,7 @@ export default {
       hours: 'Stunden',
       invalidCurrentPassword: 'Das aktuelle Passwort ist falsch',
       labels: 'Labels',
+      language: 'Sprache',
       leaveBoard_title: 'Board verlassen',
       leaveProject_title: 'Projekt verlassen',
       list: 'Listen',
@@ -193,6 +195,7 @@ export default {
       editTimer_title: 'Timer bearbeiten',
       editTitle_title: 'Titel bearbeiten',
       editUsername_title: 'Benutzername ändern',
+      hideDetails: 'Details ausblenden',
       leaveBoard: 'Board verlassen',
       leaveProject: 'Projekt verlassen',
       logOut_title: 'Ausloggen',
@@ -208,6 +211,7 @@ export default {
       removeMember: 'Mitglied entfernen',
       save: 'Speichern',
       showAllAttachments: 'Alle Anhänge anzeigen ({{hidden}} versteckt)',
+      showDetails: 'Details anzeigen',
       showFewerAttachments: 'Weniger Anhänge anzeigen',
       start: 'Start',
       stop: 'Stopp',

client/src/locales/de/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'de',
+  country: 'de',
+  name: 'Deutsch',
+  embeddedLocale: login,
+};

client/src/locales/en/core.js

@@ -64,6 +64,7 @@ export default {
       deleteTask_title: 'Delete Task',
       deleteUser_title: 'Delete User',
       description: 'Description',
+      detectAutomatically: 'Detect automatically',
       dropFileToUpload: 'Drop file to upload',
       editAttachment_title: 'Edit Attachment',
       editAvatar_title: 'Edit Avatar',
@@ -90,6 +91,7 @@ export default {
       hours: 'Hours',
       invalidCurrentPassword: 'Invalid current password',
       labels: 'Labels',
+      language: 'Language',
       leaveBoard_title: 'Leave Board',
       leaveProject_title: 'Leave Project',
       list: 'List',
@@ -186,6 +188,7 @@ export default {
       editTimer_title: 'Edit Timer',
       editTitle_title: 'Edit Title',
       editUsername_title: 'Edit Username',
+      hideDetails: 'Hide details',
       leaveBoard: 'Leave board',
       leaveProject: 'Leave project',
       logOut_title: 'Log Out',
@@ -201,6 +204,7 @@ export default {
       removeMember: 'Remove member',
       save: 'Save',
       showAllAttachments: 'Show all attachments ({{hidden}} hidden)',
+      showDetails: 'Show details',
       showFewerAttachments: 'Show fewer attachments',
       start: 'Start',
       stop: 'Stop',

client/src/locales/en/index.js

@@ -0,0 +1,11 @@
+import merge from 'lodash/merge';
+
+import login from './login';
+import core from './core';
+
+export default {
+  language: 'en',
+  country: 'us',
+  name: 'English',
+  embeddedLocale: merge(login, core),
+};

client/src/locales/es/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'es',
+  country: 'es',
+  name: 'Español',
+  embeddedLocale: login,
+};

client/src/locales/fr/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'fr',
+  country: 'fr',
+  name: 'Français',
+  embeddedLocale: login,
+};

client/src/locales/index.js

@@ -1,37 +1,27 @@
-import merge from 'lodash/merge';
+import cs from './cs';
-import fromPairs from 'lodash/fromPairs';
+import da from './da';
+import de from './de';
+import en from './en';
+import es from './es';
+import fr from './fr';
+import ja from './ja';
+import pl from './pl';
+import ru from './ru';
+import sk from './sk';
+import sv from './sv';
+import uz from './uz';
+import zh from './zh';
 
-import csLogin from './cs/login';
+const locales = [cs, da, de, en, es, fr, ja, pl, ru, sk, sv, uz, zh];
-import daLogin from './da/login';
-import deLogin from './de/login';
-import enLogin from './en/login';
-import enCore from './en/core';
-import esLogin from './es/login';
-import frLogin from './fr/login';
-import jaLogin from './ja/login';
-import plLogin from './pl/login';
-import ruLogin from './ru/login';
-import skLogin from './sk/login';
-import svLogin from './sv/login';
-import uzLogin from './uz/login';
-import zhLogin from './zh/login';
 
-const localePairs = [
+export default locales;
-  ['cs', csLogin],
-  ['da', daLogin],
-  ['de', deLogin],
-  ['en', merge(enLogin, enCore)],
-  ['es', esLogin],
-  ['fr', frLogin],
-  ['ja', jaLogin],
-  ['pl', plLogin],
-  ['ru', ruLogin],
-  ['sk', skLogin],
-  ['sv', svLogin],
-  ['uz', uzLogin],
-  ['zh', zhLogin],
-];
 
-export const languages = localePairs.map((locale) => locale[0]);
+export const languages = locales.map((locale) => locale.language);
 
-export const embedLocales = fromPairs(localePairs);
+export const embeddedLocales = locales.reduce(
+  (result, locale) => ({
+    ...result,
+    [locale.language]: locale.embeddedLocale,
+  }),
+  {},
+);

client/src/locales/ja/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'ja',
+  country: 'jp',
+  name: '日本語',
+  embeddedLocale: login,
+};

client/src/locales/pl/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'pl',
+  country: 'pl',
+  name: 'Polski',
+  embeddedLocale: login,
+};

client/src/locales/ru/core.js

@@ -62,6 +62,7 @@ export default {
       deleteTask: 'Удаление задачи',
       deleteUser: 'Удаление пользователя',
       description: 'Описание',
+      detectAutomatically: 'Определить автоматически',
       dropFileToUpload: 'Перетяните файл, чтобы загрузить',
       editAttachment: 'Изменение вложения',
       editAvatar: 'Изменение аватара',
@@ -88,6 +89,7 @@ export default {
       hours: 'Часы',
       invalidCurrentPassword: 'Неверный текущий пароль',
       labels: 'Метки',
+      language: 'Язык',
       list: 'Список',
       listActions: 'Действия со списком',
       members: 'Участники',
@@ -176,7 +178,8 @@ export default {
       editTask: 'Изменить задачу',
       editTimer: 'Изменить таймер',
       editTitle: 'Изменить название',
-      editUsername_title: 'Изменить имя пользователя',
+      editUsername: 'Изменить имя пользователя',
+      hideDetails: 'Скрыть подробности',
       logOut: 'Выйти',
       makeCover: 'Сделать обложкой',
       move: 'Переместить',
@@ -188,6 +191,7 @@ export default {
       removeMember: 'Удалить участника',
       save: 'Сохранить',
       showAllAttachments: 'Показать все вложения ({{hidden}} скрыто)',
+      showDetails: 'Показать подробности',
       showFewerAttachments: 'Показать меньше вложений',
       start: 'Начать',
       stop: 'Остановить',

client/src/locales/ru/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'ru',
+  country: 'ru',
+  name: 'Русский',
+  embeddedLocale: login,
+};

client/src/locales/sk/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'sk',
+  country: 'sk',
+  name: 'Slovenčina',
+  embeddedLocale: login,
+};

client/src/locales/sv/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'sv',
+  country: 'se',
+  name: 'Svenska',
+  embeddedLocale: login,
+};

client/src/locales/uz/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'uz',
+  country: 'uz',
+  name: "O'zbek",
+  embeddedLocale: login,
+};

client/src/locales/zh/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'zh',
+  country: 'cn',
+  name: '中文',
+  embeddedLocale: login,
+};

client/src/models/Action.js

@@ -50,6 +50,7 @@ export default class extends Model {
 
         break;
       case ActionTypes.ACTIONS_FETCH__SUCCESS:
+      case ActionTypes.ACTIONS_DETAILS_TOGGLE__SUCCESS:
       case ActionTypes.NOTIFICATION_CREATE_HANDLE:
         payload.actions.forEach((action) => {
           Action.upsert(action);

client/src/models/Card.js

@@ -2,6 +2,7 @@ import { Model, attr, fk, many, oneToOne } from 'redux-orm';
 
 import ActionTypes from '../constants/ActionTypes';
 import Config from '../constants/Config';
+import { ActionTypes as ActionTypesEnum } from '../constants/Enums';
 
 export default class extends Model {
   static modelName = 'Card';
@@ -22,6 +23,12 @@ export default class extends Model {
     isAllActionsFetched: attr({
       getDefault: () => false,
     }),
+    isActionsDetailsVisible: attr({
+      getDefault: () => false,
+    }),
+    isActionsDetailsFetching: attr({
+      getDefault: () => false,
+    }),
     boardId: fk({
       to: 'Board',
       as: 'board',
@@ -195,6 +202,36 @@ export default class extends Model {
         });
 
         break;
+      case ActionTypes.ACTIONS_DETAILS_TOGGLE: {
+        const cardModel = Card.withId(payload.cardId);
+        cardModel.isActionsDetailsVisible = payload.isVisible;
+
+        if (payload.isVisible) {
+          cardModel.isActionsDetailsFetching = true;
+        }
+
+        break;
+      }
+      case ActionTypes.ACTIONS_DETAILS_TOGGLE__SUCCESS: {
+        const cardModel = Card.withId(payload.cardId);
+
+        cardModel.update({
+          isAllActionsFetched: payload.actions.length < Config.ACTIONS_LIMIT,
+          isActionsDetailsFetching: false,
+        });
+
+        cardModel.actions.toModelArray().forEach((actionModel) => {
+          if (actionModel.notification) {
+            actionModel.update({
+              isInCard: false,
+            });
+          } else {
+            actionModel.delete();
+          }
+        });
+
+        break;
+      }
       case ActionTypes.NOTIFICATION_CREATE_HANDLE:
         payload.cards.forEach((card) => {
           Card.upsert(card);
@@ -213,8 +250,16 @@ export default class extends Model {
     return this.attachments.orderBy('id', false);
   }
 
-  getOrderedInCardActionsQuerySet() {
+  getFilteredOrderedInCardActionsQuerySet() {
-    return this.actions.orderBy('id', false);
+    const filter = {
+      isInCard: true,
+    };
+
+    if (!this.isActionsDetailsVisible) {
+      filter.type = ActionTypesEnum.COMMENT_CARD;
+    }
+
+    return this.actions.filter(filter).orderBy('id', false);
   }
 
   getUnreadNotificationsQuerySet() {

client/src/models/List.js

@@ -83,7 +83,7 @@ export default class extends Model {
     return this.cards.orderBy('position');
   }
 
-  getOrderedFilteredCardsModelArray() {
+  getFilteredOrderedCardsModelArray() {
     let cardModels = this.getOrderedCardsQuerySet().toModelArray();
 
     const filterUserIds = this.board.filterUsers.toRefArray().map((user) => user.id);

client/src/models/Notification.js

@@ -1,4 +1,4 @@
-import { Model, attr, fk } from 'redux-orm';
+import { Model, attr, fk, oneToOne } from 'redux-orm';
 
 import ActionTypes from '../constants/ActionTypes';
 
@@ -15,16 +15,15 @@ export default class extends Model {
       as: 'user',
       relatedName: 'notifications',
     }),
-    actionId: fk({
-      to: 'Action',
-      as: 'action',
-      relatedName: 'notifications',
-    }),
     cardId: fk({
       to: 'Card',
       as: 'card',
       relatedName: 'notifications',
     }),
+    actionId: oneToOne({
+      to: 'Action',
+      as: 'action',
+    }),
   };
 
   static reducer({ type, payload }, Notification) {

client/src/models/User.js

@@ -40,6 +40,7 @@ export default class extends Model {
     avatarUrl: attr(),
     phone: attr(),
     organization: attr(),
+    language: attr(),
     subscribeToOwnCards: attr(),
     deletedAt: attr(),
     isAdmin: attr({

client/src/sagas/core/services/actions.js

@@ -1,11 +1,12 @@
 import { call, put, select } from 'redux-saga/effects';
 
 import request from '../request';
-import { lastActionIdByCardIdSelector, pathSelector } from '../../../selectors';
+import { cardByIdSelector, lastActionIdByCardIdSelector, pathSelector } from '../../../selectors';
-import { fetchActions } from '../../../actions';
+import { fetchActions, toggleActionsDetails } from '../../../actions';
 import api from '../../../api';
 
 export function* fetchActionsService(cardId) {
+  const { isActionsDetailsVisible } = yield select(cardByIdSelector, cardId);
   const lastId = yield select(lastActionIdByCardIdSelector, cardId);
 
   yield put(fetchActions(cardId));
@@ -19,6 +20,7 @@ export function* fetchActionsService(cardId) {
       included: { users },
     } = yield call(request, api.getActions, cardId, {
       beforeId: lastId,
+      withDetails: isActionsDetailsVisible,
     }));
   } catch (error) {
     yield put(fetchActions.failure(cardId, error));
@@ -33,3 +35,32 @@ export function* fetchActionsInCurrentCardService() {
 
   yield call(fetchActionsService, cardId);
 }
+
+export function* toggleActionsDetailsService(cardId, isVisible) {
+  yield put(toggleActionsDetails(cardId, isVisible));
+
+  if (isVisible) {
+    let actions;
+    let users;
+
+    try {
+      ({
+        items: actions,
+        included: { users },
+      } = yield call(request, api.getActions, cardId, {
+        withDetails: isVisible,
+      }));
+    } catch (error) {
+      yield put(toggleActionsDetails.failure(cardId, error));
+      return;
+    }
+
+    yield put(toggleActionsDetails.success(cardId, actions, users));
+  }
+}
+
+export function* toggleActionsDetailsInCurrentCardService(isVisible) {
+  const { cardId } = yield select(pathSelector);
+
+  yield call(toggleActionsDetailsService, cardId, isVisible);
+}

client/src/sagas/core/services/core.js

@@ -4,7 +4,6 @@ import { fetchCoreRequest } from '../requests';
 import { initializeCore } from '../../../actions';
 import i18n from '../../../i18n';
 
-// eslint-disable-next-line import/prefer-default-export
 export function* initializeCoreService() {
   const {
     user,
@@ -25,6 +24,7 @@ export function* initializeCoreService() {
     notifications,
   } = yield call(fetchCoreRequest); // TODO: handle error
 
+  yield call(i18n.changeLanguage, user.language);
   yield call(i18n.loadCoreLocale);
 
   yield put(
@@ -48,3 +48,14 @@ export function* initializeCoreService() {
     ),
   );
 }
+
+export function* changeCoreLanguageService(language) {
+  if (language === null) {
+    yield call(i18n.detectLanguage);
+    yield call(i18n.loadCoreLocale);
+    yield call(i18n.changeLanguage, i18n.resolvedLanguage);
+  } else {
+    yield call(i18n.loadCoreLocale, language);
+    yield call(i18n.changeLanguage, language);
+  }
+}

client/src/sagas/core/services/user.js

@@ -1,6 +1,7 @@
 import { call, put, select } from 'redux-saga/effects';
 
 import { logoutService } from './login';
+import { changeCoreLanguageService } from './core';
 import request from '../request';
 import { currentUserIdSelector, currentUserSelector, pathSelector } from '../../../selectors';
 import {
@@ -81,6 +82,21 @@ export function* handleUserUpdateService(user) {
   yield put(handleUserUpdate(user, users, isCurrent));
 }
 
+// TODO: add loading state
+export function* updateUserLanguageService(id, language) {
+  yield call(changeCoreLanguageService, language);
+
+  yield call(updateUserService, id, {
+    language,
+  });
+}
+
+export function* updateCurrentUserLanguageService(language) {
+  const id = yield select(currentUserIdSelector);
+
+  yield call(updateUserLanguageService, id, language);
+}
+
 export function* updateUserEmailService(id, data) {
   yield put(updateUserEmail(id, data));
 

client/src/sagas/core/watchers/actions.js

@@ -1,10 +1,19 @@
-import { takeEvery } from 'redux-saga/effects';
+import { all, takeEvery } from 'redux-saga/effects';
 
-import { fetchActionsInCurrentCardService } from '../services';
+import {
+  fetchActionsInCurrentCardService,
+  toggleActionsDetailsInCurrentCardService,
+} from '../services';
 import EntryActionTypes from '../../../constants/EntryActionTypes';
 
 export default function* actionsWatchers() {
-  yield takeEvery(EntryActionTypes.ACTIONS_IN_CURRENT_CARD_FETCH, () =>
+  yield all([
-    fetchActionsInCurrentCardService(),
+    takeEvery(EntryActionTypes.ACTIONS_IN_CURRENT_CARD_FETCH, () =>
-  );
+      fetchActionsInCurrentCardService(),
+    ),
+    takeEvery(
+      EntryActionTypes.ACTIONS_DETAILS_IN_CURRENT_CARD_TOGGLE,
+      ({ payload: { isVisible } }) => toggleActionsDetailsInCurrentCardService(isVisible),
+    ),
+  ]);
 }

client/src/sagas/core/watchers/user.js

@@ -24,6 +24,7 @@ import {
   updateUserService,
   updateCurrentUserAvatarService,
   updateCurrentUserEmailService,
+  updateCurrentUserLanguageService,
   updateCurrentUserPasswordService,
   updateCurrentUserService,
   updateCurrentUserUsernameService,
@@ -49,6 +50,9 @@ export default function* userWatchers() {
     takeEvery(EntryActionTypes.USER_UPDATE_HANDLE, ({ payload: { user } }) =>
       handleUserUpdateService(user),
     ),
+    takeEvery(EntryActionTypes.CURRENT_USER_LANGUAGE_UPDATE, ({ payload: { language } }) =>
+      updateCurrentUserLanguageService(language),
+    ),
     takeEvery(EntryActionTypes.USER_EMAIL_UPDATE, ({ payload: { id, data } }) =>
       updateUserEmailService(id, data),
     ),

client/src/selectors/card.js

@@ -88,7 +88,7 @@ export const makeLastActionIdByCardIdSelector = () =>
         return cardModel;
       }
 
-      const lastActionModel = cardModel.getOrderedInCardActionsQuerySet().last();
+      const lastActionModel = cardModel.getFilteredOrderedInCardActionsQuerySet().last();
 
       return lastActionModel && lastActionModel.id;
     },
@@ -249,7 +249,7 @@ export const actionsForCurrentCardSelector = createSelector(
     }
 
     return cardModel
-      .getOrderedInCardActionsQuerySet()
+      .getFilteredOrderedInCardActionsQuerySet()
       .toModelArray()
       .map((actionModel) => ({
         ...actionModel.ref,

client/src/selectors/core.js

@@ -73,7 +73,7 @@ export const nextCardPositionSelector = createSelector(
       return listModel;
     }
 
-    return nextPosition(listModel.getOrderedFilteredCardsModelArray(), index, excludedId);
+    return nextPosition(listModel.getFilteredOrderedCardsModelArray(), index, excludedId);
   },
 );
 

client/src/selectors/list.js

@@ -34,7 +34,7 @@ export const makeCardIdsByListIdSelector = () =>
         return listModel;
       }
 
-      return listModel.getOrderedFilteredCardsModelArray().map((cardModel) => cardModel.id);
+      return listModel.getFilteredOrderedCardsModelArray().map((cardModel) => cardModel.id);
     },
   );
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "planka",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "planka",
-      "version": "1.4.0",
+      "version": "1.4.1",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "planka",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "private": true,
   "homepage": "https://plankanban.github.io/planka",
   "repository": {

server/api/controllers/actions/index.js

@@ -15,6 +15,9 @@ module.exports = {
       type: 'string',
       regex: /^[0-9]+$/,
     },
+    withDetails: {
+      type: 'boolean',
+    },
   },
 
   exits: {
@@ -43,7 +46,11 @@ module.exports = {
       }
     }
 
-    const actions = await sails.helpers.cards.getActions(card.id, inputs.beforeId);
+    const actions = await sails.helpers.cards.getActions(
+      card.id,
+      inputs.beforeId,
+      inputs.withDetails,
+    );
 
     const userIds = sails.helpers.utils.mapRecords(actions, 'userId', true);
     const users = await sails.helpers.users.getMany(userIds, true);

server/api/controllers/users/create.js

@@ -40,6 +40,11 @@ module.exports = {
       isNotEmptyString: true,
       allowNull: true,
     },
+    language: {
+      type: 'string',
+      isNotEmptyString: true,
+      allowNull: true,
+    },
     subscribeToOwnCards: {
       type: 'boolean',
     },
@@ -62,6 +67,7 @@ module.exports = {
       'username',
       'phone',
       'organization',
+      'language',
       'subscribeToOwnCards',
     ]);
 

server/api/controllers/users/update.js

@@ -32,6 +32,11 @@ module.exports = {
       isNotEmptyString: true,
       allowNull: true,
     },
+    language: {
+      type: 'string',
+      isNotEmptyString: true,
+      allowNull: true,
+    },
     subscribeToOwnCards: {
       type: 'boolean',
     },
@@ -66,6 +71,7 @@ module.exports = {
       'avatarUrl',
       'phone',
       'organization',
+      'language',
       'subscribeToOwnCards',
     ]);
 

server/api/helpers/cards/get-actions.js

@@ -1,4 +1,4 @@
-const LIMIT = 10;
+const LIMIT = 50;
 
 module.exports = {
   inputs: {
@@ -10,6 +10,10 @@ module.exports = {
     beforeId: {
       type: 'string',
     },
+    withDetails: {
+      type: 'boolean',
+      defaultsTo: false,
+    },
   },
 
   async fn(inputs) {
@@ -23,6 +27,10 @@ module.exports = {
       };
     }
 
+    if (!inputs.withDetails) {
+      criteria.type = Action.Types.COMMENT_CARD;
+    }
+
     return sails.helpers.actions.getMany(criteria, LIMIT);
   },
 };

server/api/models/User.js

@@ -53,6 +53,11 @@ module.exports = {
       isNotEmptyString: true,
       allowNull: true,
     },
+    language: {
+      type: 'string',
+      isNotEmptyString: true,
+      allowNull: true,
+    },
     subscribeToOwnCards: {
       type: 'boolean',
       defaultsTo: false,

server/db/migrations/20220725150723_add_language_to_user_account_table.js

@@ -0,0 +1,11 @@
+module.exports.up = async (knex) =>
+  knex.schema.table('user_account', (table) => {
+    /* Columns */
+
+    table.text('language');
+  });
+
+module.exports.down = async (knex) =>
+  knex.schema.table('user_account', (table) => {
+    table.dropColumn('language');
+  });

server/db/migrations/20220729142434_add_index_on_type_to_action_table.js

@@ -0,0 +1,11 @@
+module.exports.up = (knex) =>
+  knex.schema.table('action', (table) => {
+    /* Indexes */
+
+    table.index('type');
+  });
+
+module.exports.down = (knex) =>
+  knex.schema.table('action', (table) => {
+    table.dropIndex('type');
+  });