From 913f9a38268b46f6abe51810ed7eec4b56c0e9a7 Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Sat, 19 Apr 2025 10:12:16 +0200
Subject: [PATCH 01/16] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B8=20=D0=BA?=
 =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B8=20=D1=81=20=D0=BF=D0=B5=D1=80=D0=B5?=
 =?UTF-8?q?=D0=B2=D0=BE=D0=B4=D0=BE=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/style.css | 3 ++-
 src/global.css                  | 1 +
 src/i18n/translations/en.json   | 7 ++++++-
 src/i18n/translations/ru.json   | 7 ++++++-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/button/style.css b/src/components/button/style.css
index 0efc8a896..b0f2f607c 100644
--- a/src/components/button/style.css
+++ b/src/components/button/style.css
@@ -34,8 +34,9 @@
 .Button_style_text {
   padding: 0;
   border: none;
+  color: var(--primary);
 
   &:hover {
-    color: var(--primary);
+    opacity: 0.6;
   }
 }
diff --git a/src/global.css b/src/global.css
index e81695d21..4e06a54ea 100644
--- a/src/global.css
+++ b/src/global.css
@@ -7,6 +7,7 @@
   --primary-select: #6B4ACB1A;
   --main-text: #1A2028;
   --second-text: #FFFFFF;
+  --other-text: #666666;
   --overlay: #1A202866;
   --divider: #EFEFEF;
   --delete: #D43B3B;
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 0ebbcf8f2..4690013b5 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -22,5 +22,10 @@
   "auth.login-placeholder": "Enter login",
   "auth.password-placeholder": "Enter password",
   "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
+  "session.signOut": "Sign Out",
+  "comment.newReply": "New reply",
+  "comment.newComment": "New comment",
+  "comment.send": "Send",
+  "comment.cancel": "Cancel",
+  "comment.title": "Comments"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index a18fb845e..3ccd0118f 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -24,5 +24,10 @@
   "auth.login-placeholder": "Введите логин",
   "auth.password-placeholder": "Введите пароль",
   "session.signIn": "Вход",
-  "session.signOut": "Выход"
+  "session.signOut": "Выход",
+  "comment.newReply": "Новый ответ",
+  "comment.newComment": "Новый комментарий",
+  "comment.send": "Отправить",
+  "comment.cancel": "Отмена",
+  "comment.title": "Комментарии"
 }

From ca13722ee36b191dcbd356968f4962eca0eeaf81 Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Sat, 19 Apr 2025 11:34:56 +0200
Subject: [PATCH 02/16] =?UTF-8?q?=D0=97=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/article/index.js                  |   4 +
 src/components/article-card/style.css     |   2 +-
 src/components/comment-action/index.js    |  69 +++++++++++
 src/components/comment-action/style.css   |  42 +++++++
 src/components/comment-item/index.js      |  66 ++++++++++
 src/components/comment-item/style.css     |  37 ++++++
 src/components/comments-layout/index.js   |  17 +++
 src/components/comments-layout/style.css  |  12 ++
 src/components/ladder-list/index.js       |  27 ++++
 src/components/ladder-list/style.css      |  12 ++
 src/components/list/index.js              |   3 +-
 src/containers/article-comments/index.js  | 143 ++++++++++++++++++++++
 src/containers/article-comments/style.css |  38 ++++++
 src/i18n/translations/en.json             |   3 +-
 src/i18n/translations/ru.json             |   3 +-
 src/store-redux/comments/actions.js       |  58 +++++++++
 src/store-redux/comments/reducer.js       |  26 ++++
 src/store-redux/exports.js                |   1 +
 src/utils/format-pretty-date.js           |  22 ++++
 19 files changed, 580 insertions(+), 5 deletions(-)
 create mode 100644 src/components/comment-action/index.js
 create mode 100644 src/components/comment-action/style.css
 create mode 100644 src/components/comment-item/index.js
 create mode 100644 src/components/comment-item/style.css
 create mode 100644 src/components/comments-layout/index.js
 create mode 100644 src/components/comments-layout/style.css
 create mode 100644 src/components/ladder-list/index.js
 create mode 100644 src/components/ladder-list/style.css
 create mode 100644 src/containers/article-comments/index.js
 create mode 100644 src/containers/article-comments/style.css
 create mode 100644 src/store-redux/comments/actions.js
 create mode 100644 src/store-redux/comments/reducer.js
 create mode 100644 src/utils/format-pretty-date.js

diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..d1560046c 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -13,7 +13,9 @@ import TopHead from '../../containers/top-head';
 import { useDispatch, useSelector } from 'react-redux';
 import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
+import commentsActions from '../../store-redux/comments/actions';
 import HeadLayout from '../../components/head-layout';
+import ArticleComments from '../../containers/article-comments';
 
 function Article() {
   const store = useStore();
@@ -26,6 +28,7 @@ function Article() {
   useInit(() => {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
+    dispatch(commentsActions.load(params.id));
   }, [params.id]);
 
   const select = useSelector(
@@ -55,6 +58,7 @@ function Article() {
         <Navigation />
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+          <ArticleComments/>
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/components/article-card/style.css b/src/components/article-card/style.css
index c5ccceabd..51ef0eb74 100644
--- a/src/components/article-card/style.css
+++ b/src/components/article-card/style.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
-  padding-block: 24px;
+  padding-top: 24px;
 }
 
 .ArticleCard-prop-wrapper {
diff --git a/src/components/comment-action/index.js b/src/components/comment-action/index.js
new file mode 100644
index 000000000..6c86c9502
--- /dev/null
+++ b/src/components/comment-action/index.js
@@ -0,0 +1,69 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import Button from '../button';
+import { Link } from 'react-router-dom';
+
+function CommentAction(props) {
+  const {
+    t = text => text,
+    onAdd = () => {
+    },
+    setValue = () => {
+    },
+    cancel = () => {
+    },
+    value = '',
+    isReply = false,
+    auth = false,
+    link = '/login',
+    backLink = '',
+  } = props;
+  const cn = bem('CommentAction');
+
+  const label = isReply ? t('comment.newReply') : t('comment.newComment');
+
+  const onChangeHandler = event => {
+    setValue(event.target.value);
+  };
+
+  if (!auth) {
+    return (
+      <div className={cn({type: 'alert'})}>
+        <Link to={link} state={{back: backLink}}>Войдите</Link>, чтобы иметь возможность комментировать
+      </div>
+    );
+  }
+
+
+  return (
+    <div className={cn()}>
+      <label htmlFor="story">{label}</label>
+      <textarea id="story"
+                name="story"
+                onChange={onChangeHandler}
+                value={value}/>
+      <div className={cn('controls')}>
+        <Button title={t('comment.send')} style={'primary'} onClick={() => {
+          onAdd();
+          cancel();
+        }}/>
+        {isReply && value !== '' && <Button title={t('comment.cancel')} style={'outline'} onClick={cancel}/>}
+      </div>
+    </div>
+  );
+}
+
+CommentAction.propTypes = {
+  onAdd: PropTypes.func,
+  t: PropTypes.func,
+  value: PropTypes.string,
+  isReply: PropTypes.bool,
+  auth: PropTypes.bool,
+  link: PropTypes.string,
+  backLink: PropTypes.string,
+  cancel: PropTypes.func,
+};
+
+export default memo(CommentAction);
diff --git a/src/components/comment-action/style.css b/src/components/comment-action/style.css
new file mode 100644
index 000000000..a562a1f54
--- /dev/null
+++ b/src/components/comment-action/style.css
@@ -0,0 +1,42 @@
+.CommentAction {
+  padding-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+
+  label {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    letter-spacing: 0;
+  }
+
+  textarea {
+    height: fit-content;
+    min-height: 88px;
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: 1px solid #D3D3D3;
+    resize: none;
+  }
+
+  a {
+    color: var(--primary);
+  }
+
+  a:hover {
+    opacity: 0.6;
+  }
+
+}
+
+.CommentAction-controls {
+  display: flex;
+  gap: 16px;
+}
+
+.CommentAction_type_alert {
+  flex-direction: row;
+  gap: 0;
+}
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
new file mode 100644
index 000000000..25830e9f6
--- /dev/null
+++ b/src/components/comment-item/index.js
@@ -0,0 +1,66 @@
+import { memo, useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import Button from '../button';
+
+import { formatPrettyDate } from '../../utils/format-pretty-date';
+
+function CommentItem(props) {
+
+  const {
+    comment,
+    my = false,
+    onStartReply = () => {},
+    onCancelReply = () => {},
+    t = text => text,
+  } = props;
+
+  const [isReplying, setIsReplying] = useState(false);
+  const cn = bem('CommentItem');
+
+  const formattedDate = formatPrettyDate(comment.dateCreate);
+
+  const handleToggleReply = useCallback(() => {
+    if (isReplying) {
+      onCancelReply();
+    } else {
+      onStartReply();
+    }
+    setIsReplying(!isReplying);
+  }, [isReplying, onStartReply, onCancelReply]);
+
+  return (
+    <div className={cn()}>
+      <p className={cn('caption', { my })}>
+        <b>{comment.author}</b>{formattedDate}
+      </p>
+      <p className={cn('text')}>{comment.text}</p>
+      <Button
+        title={t('comment.reply')}
+        style="text"
+        onClick={handleToggleReply}
+      />
+    </div>
+  );
+}
+
+CommentItem.propTypes = {
+  comment: PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    level: PropTypes.number.isRequired,
+    text: PropTypes.string.isRequired,
+    author: PropTypes.string,
+    dateCreate: PropTypes.string.isRequired,
+    parent: PropTypes.shape({
+      _id: PropTypes.string.isRequired,
+      _type: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  my: PropTypes.bool,
+  onStartReply: PropTypes.func,
+  onCancelReply: PropTypes.func,
+  t: PropTypes.func,
+};
+
+export default memo(CommentItem);
diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
new file mode 100644
index 000000000..ee4ad6dde
--- /dev/null
+++ b/src/components/comment-item/style.css
@@ -0,0 +1,37 @@
+.CommentItem {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.CommentItem-caption {
+  font-family: Golos Text;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0;
+  color: var(--other-text);
+  padding: 0;
+  margin: 0;
+
+  b {
+    color: var(--main-text);
+    margin-right: 12px;
+  }
+}
+
+.CommentItem-caption_my {
+  b {
+    color: #4B5563;
+  }
+}
+
+.CommentItem-text {
+  font-family: Golos Text;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0;
+  padding: 0;
+  margin: 0;
+}
diff --git a/src/components/comments-layout/index.js b/src/components/comments-layout/index.js
new file mode 100644
index 000000000..6f6ef493c
--- /dev/null
+++ b/src/components/comments-layout/index.js
@@ -0,0 +1,17 @@
+import { memo } from 'react';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+
+function CommentsLayout(props) {
+  const cn = bem('CommentsLayout');
+
+  return (
+    <div className={cn()}>
+      <h2 className={cn('title')}>{props.title}</h2>
+      {props.children}
+    </div>
+  );
+}
+
+export default memo(CommentsLayout);
diff --git a/src/components/comments-layout/style.css b/src/components/comments-layout/style.css
new file mode 100644
index 000000000..903a01f4c
--- /dev/null
+++ b/src/components/comments-layout/style.css
@@ -0,0 +1,12 @@
+.CommentsLayout {
+  display: flex;
+  flex-direction: column;
+  padding-top: 40px;
+}
+
+.CommentsLayout-title {
+  padding-bottom: 24px;
+  margin-top: 0;
+  font-size: 32px;
+  line-height: 40px;
+}
diff --git a/src/components/ladder-list/index.js b/src/components/ladder-list/index.js
new file mode 100644
index 000000000..05b9a15c7
--- /dev/null
+++ b/src/components/ladder-list/index.js
@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import './style.css';
+
+function LadderList({ list, renderItem = item => {} }) {
+  return (
+    <ul className="LadderList">
+      {list.map(item => (
+        <li style={{'--level': item.level}} key={item.value} className="LadderList-item">
+          {renderItem(item)}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+LadderList.propTypes = {
+  list: PropTypes.arrayOf(
+    PropTypes.shape({
+      _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      level: PropTypes.number,
+    }),
+  ).isRequired,
+  renderItem: PropTypes.func.isRequired,
+};
+
+export default memo(LadderList);
diff --git a/src/components/ladder-list/style.css b/src/components/ladder-list/style.css
new file mode 100644
index 000000000..bdd41ccc0
--- /dev/null
+++ b/src/components/ladder-list/style.css
@@ -0,0 +1,12 @@
+.LadderList {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.LadderList-item {
+  padding-left: calc(var(--level, 0) * 40px);
+}
diff --git a/src/components/list/index.js b/src/components/list/index.js
index e84d13b57..4f005614e 100644
--- a/src/components/list/index.js
+++ b/src/components/list/index.js
@@ -1,6 +1,5 @@
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import Item from '../item';
 import './style.css';
 
 function List({ list, renderItem = item => {} }) {
@@ -21,7 +20,7 @@ List.propTypes = {
       _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     }),
   ).isRequired,
-  renderItem: PropTypes.func,
+  renderItem: PropTypes.func.isRequired,
 };
 
 export default memo(List);
diff --git a/src/containers/article-comments/index.js b/src/containers/article-comments/index.js
new file mode 100644
index 000000000..1c4e2e969
--- /dev/null
+++ b/src/containers/article-comments/index.js
@@ -0,0 +1,143 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import commentsActions from '../../store-redux/comments/actions';
+import shallowequal from 'shallowequal';
+import useSelectorStore from '../../hooks/use-selector';
+import listToTree from '../../utils/list-to-tree';
+import treeToList from '../../utils/tree-to-list';
+import useTranslate from '../../hooks/use-translate';
+import CommentAction from '../../components/comment-action';
+import LadderList from '../../components/ladder-list';
+import CommentsLayout from '../../components/comments-layout';
+import CommentItem from '../../components/comment-item';
+import Spinner from '../../components/spinner';
+
+function ArticleComments() {
+  const cn = bem('ArticleComments');
+
+  const {t} = useTranslate();
+  const select = useSelector(
+    state => ({
+      article: state.article.data,
+      waiting: state.article.waiting,
+      comments: state.comments.data,
+      commentsCount: state.comments.count,
+      commentsWaiting: state.comments.waiting,
+    }),
+    shallowequal,
+  ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
+
+
+  const selectStore = useSelectorStore(state => ({
+    user: state.session.user,
+    exists: state.session.exists,
+    token: state.session.token,
+  }));
+
+  const options = listToTree(select.comments || []);
+
+  const test = options?.[0]?.children || [];
+
+  const comments = useMemo(
+    () => [
+      ...treeToList(test, (item, level) => ({
+        value: item._id,
+        level: level,
+        text: item.text,
+        author: item.author?.profile?.name,
+        authorId: item.author?._id,
+        dateCreate: item.dateCreate,
+        parent: item.parent,
+      })),
+    ],
+    [select.comments],
+  );
+
+  const [addComment, setAddComment] = useState('');
+  const [commentValue, setCommentValue] = useState('');
+  const dispatch = useDispatch();
+
+  const callbacks = {
+    addToAnswer: useCallback(id => {
+      setCommentValue('')
+      setAddComment(id)}, []),
+    cancelToAnswer: useCallback(() => {
+
+      setAddComment(''),
+        setCommentValue('');
+    }, []),
+
+    addApiToAnswer: useCallback((parent) => {
+
+      dispatch(commentsActions.addComment(parent, commentValue, selectStore.token, () => dispatch(commentsActions.load(select.article._id))));
+    }, [parent, commentValue, selectStore.token]),
+
+  };
+
+  const location = useLocation();
+
+  const backLink = location.pathname;
+
+  const renders = {
+    item: useCallback(
+      item => (
+        <>
+          <CommentItem
+            comment={item}
+            my={selectStore.user._id === item.authorId}
+            onStartReply={() => callbacks.addToAnswer(item.value)}
+            onCancelReply={() => callbacks.cancelToAnswer()}
+            t={t}
+          />
+          {addComment === item.value &&
+            renders.action({
+              isReply: true,
+              onAdd: () =>
+                callbacks.addApiToAnswer({
+                  _id: item.value,
+                  _type: 'comment',
+                }),
+              cancel: callbacks.cancelToAnswer,
+            })}
+        </>
+      ),
+      [addComment, commentValue, selectStore, t, callbacks],
+    ),
+
+    action: ({ isReply, onAdd, cancel }) => (
+      <CommentAction
+        t={t}
+        auth={selectStore.exists}
+        backLink={backLink}
+        isReply={isReply}
+        link="/login"
+        value={commentValue}
+        setValue={setCommentValue}
+        onAdd={onAdd}
+        cancel={cancel}
+      />
+    ),
+  };
+
+  return (
+    <Spinner active={select.waiting}>    <CommentsLayout title={`Комментарии (${select.commentsCount})`}>
+      {comments && <LadderList list={comments} renderItem={renders.item}/>}
+      {addComment === '' && renders.action({
+        isReply: false,
+        onAdd: () =>
+          callbacks.addApiToAnswer({
+            _id: select.article._id,
+            _type: 'article',
+          }),
+        cancel: callbacks.cancelToAnswer,
+      })}
+    </CommentsLayout>
+    </Spinner>
+
+  );
+}
+
+export default memo(ArticleComments);
diff --git a/src/containers/article-comments/style.css b/src/containers/article-comments/style.css
new file mode 100644
index 000000000..c04d2f553
--- /dev/null
+++ b/src/containers/article-comments/style.css
@@ -0,0 +1,38 @@
+.CommentsBox {
+  display: flex;
+  flex-direction: column;
+  padding-top: 40px;
+}
+
+.CommentsBox-title {
+  padding-bottom: 24px;
+  margin-top: 0;
+  font-size: 32px;
+  font-family: var(--second-font-family);
+  line-height: 40px;
+}
+
+.CommentsBox-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.CommentsBox-item {
+  padding-left: calc(var(--level, 0) * 40px);
+}
+
+
+.CommentsBox-alert {
+
+  a {
+    color: var(--primary);
+  }
+
+  a:hover {
+    opacity: 0.6;
+  }
+}
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 4690013b5..e91fa4de3 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -27,5 +27,6 @@
   "comment.newComment": "New comment",
   "comment.send": "Send",
   "comment.cancel": "Cancel",
-  "comment.title": "Comments"
+  "comment.title": "Comments",
+  "comment.reply": "Reply"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index 3ccd0118f..99c161589 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -29,5 +29,6 @@
   "comment.newComment": "Новый комментарий",
   "comment.send": "Отправить",
   "comment.cancel": "Отмена",
-  "comment.title": "Комментарии"
+  "comment.title": "Комментарии",
+  "comment.reply": "Ответить"
 }
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
new file mode 100644
index 000000000..706e05939
--- /dev/null
+++ b/src/store-redux/comments/actions.js
@@ -0,0 +1,58 @@
+export default {
+  /**
+   * Загрузка комментариев по товару
+   * @param id
+   * @return {Function}
+   */
+  load: id => {
+    return async (dispatch, getState, services) => {
+      // Сброс текущего товара и установка признака ожидания загрузки
+      dispatch({ type: 'comments/load-start' });
+
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=${id}`,
+        });
+        // Товар загружен успешно
+        dispatch({ type: 'comments/load-success', payload: { data: res.data.result.items, count: res.data.result.count } });
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comments/load-error' });
+      }
+    };
+  },
+
+  /**
+   * Загрузка комментариев по товару
+   * @param id
+   * @return {Function}
+   */
+  addComment: (parent, text, token, callback) => {
+
+    return async (dispatch, getState, services) => {
+      // Сброс текущего товара и установка признака ожидания загрузки
+      //dispatch({ type: 'comments/load-start' });
+
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments`,
+          method: 'POST',
+          headers: {"X-Token": token},
+          body: JSON.stringify(
+
+        {
+          "text": text,
+          "parent": {...parent}
+        })
+        }).then(()=>{
+          callback()
+        });
+        // Товар загружен успешно
+       // dispatch({ type: 'comments/load-success', payload: { data: res.data.result.items, count: res.data.result.count } });
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comments/load-error' });
+      }
+    };
+  },
+};
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..e75b42cae
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,26 @@
+// Начальное состояние
+export const initialState = {
+  data: [],
+  count: 0,
+  waiting: false, // признак ожидания загрузки
+};
+
+// Обработчик действий
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comments/load-start':
+      return { ...state, data: [], count: 0, waiting: true };
+
+    case 'comments/load-success':
+      return { ...state, data: action.payload.data, count: action.payload.count, waiting: false };
+
+    case 'comments/load-error':
+      return { ...state, data: [], count: 0, waiting: false }; //@todo текст ошибки сохранять?
+
+    default:
+      // Нет изменений
+      return state;
+  }
+}
+
+export default reducer;
diff --git a/src/store-redux/exports.js b/src/store-redux/exports.js
index 1a0a3d742..c7f1c588b 100644
--- a/src/store-redux/exports.js
+++ b/src/store-redux/exports.js
@@ -1,2 +1,3 @@
 export { default as article } from './article/reducer';
 export { default as modals } from './modals/reducer';
+export { default as comments } from './comments/reducer';
diff --git a/src/utils/format-pretty-date.js b/src/utils/format-pretty-date.js
new file mode 100644
index 000000000..aaa175f15
--- /dev/null
+++ b/src/utils/format-pretty-date.js
@@ -0,0 +1,22 @@
+/**
+ * Форматирование даты в читаемый вид
+ * Преобразует строку даты в формат вида "12 апреля 2025 в 14:30" с учётом указанной локали
+ * @param dateString {String} Строка даты в формате, распознаваемом конструктором Date.
+ * @param [locale] {String} Локаль (код языка), по умолчанию 'ru-RU'.
+ * @returns {String} Отформатированная строка даты.
+ * @example formatPrettyDate('2025-04-12T14:30:00') // "12 апреля 2025 в 14:30"
+ */
+export function formatPrettyDate(dateString, locale = 'ru-RU') {
+  const date = new Date(dateString);
+
+  const datePart = new Intl.DateTimeFormat(locale, {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  }).format(date);
+
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+
+  return `${datePart} в ${hours}:${minutes}`;
+}

From 8ad2a5abd7b4811133d572453fb5bcb3deec8292 Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Sat, 19 Apr 2025 19:30:22 +0200
Subject: [PATCH 03/16] =?UTF-8?q?=D0=97=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=202=20-=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D0=BA=D0=BB=D1=8E=D1=87=D0=B8=20=D0=B2=20=D1=81=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D1=80=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/translations/en.json | 18 +++++++++++++++++-
 src/i18n/translations/ru.json | 18 +++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index e91fa4de3..77cdfcf06 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -1,6 +1,12 @@
 {
   "title": "Shop",
   "menu.main": "Main",
+  "filter.all": "All",
+  "sort.order": "By order",
+  "sort.name": "By name",
+  "sort.expensive": "Price: High to Low",
+  "sort.old": "Oldies",
+  "search": "Search",
   "basket.title": "Cart",
   "basket.open": "Open",
   "basket.close": "Close",
@@ -28,5 +34,15 @@
   "comment.send": "Send",
   "comment.cancel": "Cancel",
   "comment.title": "Comments",
-  "comment.reply": "Reply"
+  "comment.reply": "Reply",
+  "profile.title": "Profile",
+  "profile.name": "Name",
+  "profile.phone": "Phone",
+  "profile.mail": "Email",
+  "article.price": "Price",
+  "article.country": "Country of origin",
+  "article.category": "Category",
+  "article.releaseYear": "Release year",
+  "comment.authHint.link": "Sign in",
+  "comment.authHint.text": ", then you’ll be able to comment."
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index 99c161589..daaa55486 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -1,6 +1,12 @@
 {
   "title": "Магазин",
   "menu.main": "Главная",
+  "filter.all": "Все",
+  "sort.order": "По порядку",
+  "sort.name": "По наименованию",
+  "sort.expensive": "Сначала дорогие",
+  "sort.old": "Древние",
+  "search": "Поиск",
   "basket.title": "Корзина",
   "basket.open": "Перейти",
   "basket.close": "Закрыть",
@@ -30,5 +36,15 @@
   "comment.send": "Отправить",
   "comment.cancel": "Отмена",
   "comment.title": "Комментарии",
-  "comment.reply": "Ответить"
+  "comment.reply": "Ответить",
+  "profile.title": "Профиль",
+  "profile.name": "Имя",
+  "profile.phone": "Телефон",
+  "profile.mail": "Email",
+  "article.price": "Цена",
+  "article.country": "Страна производитель",
+  "article.category": "Категория",
+  "article.releaseYear": "Год выпуска",
+  "comment.authHint.link": "Войдите",
+  "comment.authHint.text": ", чтобы иметь возможность комментировать"
 }

From 5cb424bad6197544b8aa87289e9ff5fe68c85107 Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Sat, 19 Apr 2025 20:09:40 +0200
Subject: [PATCH 04/16] =?UTF-8?q?=D0=97=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=202=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BF=D0=B8=D1=81=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=BA=D0=BE=D0=BD=D1=82=D0=B5=D0=BA=D1=81=D1=82?=
 =?UTF-8?q?=20=D0=BD=D0=B0=20=D1=81=D0=B5=D1=80=D0=B2=D0=B8=D1=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/article/index.js                 | 11 ++++-----
 src/app/basket/index.js                  | 11 ++++-----
 src/app/login/index.js                   |  4 ++--
 src/app/main/index.js                    |  9 +++----
 src/app/profile/index.js                 |  6 ++---
 src/components/article-card/index.js     |  8 +++----
 src/components/comment-action/index.js   |  2 +-
 src/components/comment-item/index.js     | 12 +++++-----
 src/components/item-basket/index.js      |  5 ++--
 src/components/profile-card/index.js     | 13 ++++++----
 src/containers/article-comments/index.js |  8 ++++---
 src/containers/catalog-filter/index.js   | 20 ++++++++--------
 src/containers/catalog-list/index.js     |  4 ++--
 src/containers/locale-select/index.js    | 20 +++++++++++-----
 src/containers/navigation/index.js       |  4 ++--
 src/containers/top-head/index.js         |  4 ++--
 src/hooks/use-translate.js               |  9 -------
 src/i18n/context.js                      | 30 ------------------------
 src/index.js                             |  7 +++---
 src/services.js                          | 12 ++++++++++
 src/store/basket/index.js                |  2 +-
 src/utils/format-pretty-date.js          |  4 ++--
 22 files changed, 96 insertions(+), 109 deletions(-)
 delete mode 100644 src/hooks/use-translate.js
 delete mode 100644 src/i18n/context.js

diff --git a/src/app/article/index.js b/src/app/article/index.js
index d1560046c..28a752371 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -1,7 +1,6 @@
 import { memo, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import useStore from '../../hooks/use-store';
-import useTranslate from '../../hooks/use-translate';
 import useInit from '../../hooks/use-init';
 import PageLayout from '../../components/page-layout';
 import Head from '../../components/head';
@@ -16,20 +15,22 @@ import articleActions from '../../store-redux/article/actions';
 import commentsActions from '../../store-redux/comments/actions';
 import HeadLayout from '../../components/head-layout';
 import ArticleComments from '../../containers/article-comments';
+import useLocale from '../../hooks/use-locale';
 
 function Article() {
   const store = useStore();
-
   const dispatch = useDispatch();
   // Параметры из пути /articles/:id
 
+  const { t, locale} = useLocale()
+
   const params = useParams();
 
   useInit(() => {
     //store.actions.article.load(params.id);
-    dispatch(articleActions.load(params.id));
+    dispatch(articleActions.load(params.id, locale));
     dispatch(commentsActions.load(params.id));
-  }, [params.id]);
+  }, [params.id, locale]);
 
   const select = useSelector(
     state => ({
@@ -39,8 +40,6 @@ function Article() {
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
-
   const callbacks = {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
diff --git a/src/app/basket/index.js b/src/app/basket/index.js
index 52a7badfd..d0c943803 100644
--- a/src/app/basket/index.js
+++ b/src/app/basket/index.js
@@ -1,19 +1,19 @@
 import { memo, useCallback } from 'react';
-import { useDispatch, useStore as useStoreRedux } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
-import useInit from '../../hooks/use-init';
-import useTranslate from '../../hooks/use-translate';
 import ItemBasket from '../../components/item-basket';
 import List from '../../components/list';
 import ModalLayout from '../../components/modal-layout';
 import BasketTotal from '../../components/basket-total';
 import modalsActions from '../../store-redux/modals/actions';
+import useLocale from '../../hooks/use-locale';
+
 
 function Basket() {
   const store = useStore();
   const dispatch = useDispatch();
-
+  const {locale, t} = useLocale()
   const select = useSelector(state => ({
     list: state.basket.list,
     amount: state.basket.amount,
@@ -30,12 +30,11 @@ function Basket() {
     }, [store]),
   };
 
-  const { t } = useTranslate();
-
   const renders = {
     itemBasket: useCallback(
       item => (
         <ItemBasket
+          locale={locale}
           item={item}
           link={`/articles/${item._id}`}
           onRemove={callbacks.removeFromBasket}
diff --git a/src/app/login/index.js b/src/app/login/index.js
index 32b86daa4..7cecd38fd 100644
--- a/src/app/login/index.js
+++ b/src/app/login/index.js
@@ -1,5 +1,4 @@
 import { memo, useCallback, useState } from 'react';
-import useTranslate from '../../hooks/use-translate';
 import Head from '../../components/head';
 import LocaleSelect from '../../containers/locale-select';
 import Navigation from '../../containers/navigation';
@@ -14,9 +13,10 @@ import useSelector from '../../hooks/use-selector';
 import useInit from '../../hooks/use-init';
 import HeadLayout from '../../components/head-layout';
 import Form from '../../components/form';
+import useLocale from '../../hooks/use-locale';
 
 function Login() {
-  const { t } = useTranslate();
+  const { t } = useLocale()
   const location = useLocation();
   const navigate = useNavigate();
   const store = useStore();
diff --git a/src/app/main/index.js b/src/app/main/index.js
index d9fb1c6c2..0e138ac00 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -1,6 +1,5 @@
 import { memo } from 'react';
 import useStore from '../../hooks/use-store';
-import useTranslate from '../../hooks/use-translate';
 import useInit from '../../hooks/use-init';
 import Navigation from '../../containers/navigation';
 import PageLayout from '../../components/page-layout';
@@ -10,20 +9,22 @@ import CatalogList from '../../containers/catalog-list';
 import LocaleSelect from '../../containers/locale-select';
 import TopHead from '../../containers/top-head';
 import HeadLayout from '../../components/head-layout';
+import useLocale from '../../hooks/use-locale';
+
 
 function Main() {
   const store = useStore();
 
+  const { locale, t } = useLocale()
+
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
-    [],
+    [locale],
     true,
   );
 
-  const { t } = useTranslate();
-
   return (
     <>
       <HeadLayout>
diff --git a/src/app/profile/index.js b/src/app/profile/index.js
index 166d127fb..abe77c888 100644
--- a/src/app/profile/index.js
+++ b/src/app/profile/index.js
@@ -1,7 +1,6 @@
 import { memo } from 'react';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
-import useTranslate from '../../hooks/use-translate';
 import useInit from '../../hooks/use-init';
 import PageLayout from '../../components/page-layout';
 import Head from '../../components/head';
@@ -11,6 +10,7 @@ import LocaleSelect from '../../containers/locale-select';
 import TopHead from '../../containers/top-head';
 import ProfileCard from '../../components/profile-card';
 import HeadLayout from '../../components/head-layout';
+import useLocale from '../../hooks/use-locale';
 
 function Profile() {
   const store = useStore();
@@ -24,7 +24,7 @@ function Profile() {
     waiting: state.profile.waiting,
   }));
 
-  const { t } = useTranslate();
+  const { t } = useLocale()
 
   return (
     <>
@@ -37,7 +37,7 @@ function Profile() {
       <PageLayout>
         <Navigation />
         <Spinner active={select.waiting}>
-          <ProfileCard data={select.profile} />
+          <ProfileCard data={select.profile} t={t} />
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/components/article-card/index.js b/src/components/article-card/index.js
index d636d9f88..f8d257e15 100644
--- a/src/components/article-card/index.js
+++ b/src/components/article-card/index.js
@@ -13,22 +13,22 @@ function ArticleCard(props) {
       <div className={cn('description')}>{article.description}</div>
       <div className={cn('prop-wrapper')}>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Страна производитель:</div>
+          <div className={cn('label')}>{t('article.country')}:</div>
           <div className={cn('value')}>
             {article.madeIn?.title} ({article.madeIn?.code})
           </div>
         </div>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Категория:</div>
+          <div className={cn('label')}>{t('article.category')}:</div>
           <div className={cn('value')}>{article.category?.title}</div>
         </div>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Год выпуска:</div>
+          <div className={cn('label')}>{t('article.releaseYear')}:</div>
           <div className={cn('value')}>{article.edition}</div>
         </div>
       </div>
       <div className={cn('prop', { size: 'big' })}>
-        <div className={cn('label')}>Цена:</div>
+        <div className={cn('label')}>{t('article.price')}:</div>
         <div className={cn('value')}>{numberFormat(article.price)} ₽</div>
       </div>
       <Button style="primary" onClick={() => onAdd(article._id)} title={t('article.add')} />
diff --git a/src/components/comment-action/index.js b/src/components/comment-action/index.js
index 6c86c9502..2fbf4c125 100644
--- a/src/components/comment-action/index.js
+++ b/src/components/comment-action/index.js
@@ -31,7 +31,7 @@ function CommentAction(props) {
   if (!auth) {
     return (
       <div className={cn({type: 'alert'})}>
-        <Link to={link} state={{back: backLink}}>Войдите</Link>, чтобы иметь возможность комментировать
+        <Link to={link} state={{back: backLink}}>{t('comment.authHint.link')}</Link>{t('comment.authHint.text')}
       </div>
     );
   }
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 25830e9f6..986acef04 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -1,4 +1,4 @@
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
@@ -9,26 +9,26 @@ import { formatPrettyDate } from '../../utils/format-pretty-date';
 function CommentItem(props) {
 
   const {
+    active = false,
     comment,
     my = false,
     onStartReply = () => {},
     onCancelReply = () => {},
     t = text => text,
+    locale = 'ru'
   } = props;
 
-  const [isReplying, setIsReplying] = useState(false);
   const cn = bem('CommentItem');
 
-  const formattedDate = formatPrettyDate(comment.dateCreate);
+  const formattedDate = formatPrettyDate(comment.dateCreate, locale);
 
   const handleToggleReply = useCallback(() => {
-    if (isReplying) {
+    if (active) {
       onCancelReply();
     } else {
       onStartReply();
     }
-    setIsReplying(!isReplying);
-  }, [isReplying, onStartReply, onCancelReply]);
+  }, [active, onStartReply, onCancelReply]);
 
   return (
     <div className={cn()}>
diff --git a/src/components/item-basket/index.js b/src/components/item-basket/index.js
index f92b2d7a9..d5c51fb1c 100644
--- a/src/components/item-basket/index.js
+++ b/src/components/item-basket/index.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import Button from '../button';
 import './style.css';
+import useLocale from '../../hooks/use-locale';
 
 function ItemBasket(props) {
   const { onRemove = () => {}, labelCurr = '₽', labelUnit = 'шт', labelDelete = 'Удалить' } = props;
@@ -20,10 +21,10 @@ function ItemBasket(props) {
       <div className={cn('title')}>
         {props.link ? (
           <Link to={props.link} onClick={props.onLink}>
-            {props.item.title}
+            {props.item.title[props.locale]}
           </Link>
         ) : (
-          props.item.title
+          props.item.title[props.locale]
         )}
       </div>
       <div className={cn('right')}>
diff --git a/src/components/profile-card/index.js b/src/components/profile-card/index.js
index 121610ff4..addb354e0 100644
--- a/src/components/profile-card/index.js
+++ b/src/components/profile-card/index.js
@@ -3,22 +3,24 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
-function ProfileCard({ data }) {
+function ProfileCard({ data, t = text => text }) {
   const cn = bem('ProfileCard');
 
+
+
   return (
     <div className={cn()}>
-      <h2 className={cn('title')}>Профиль</h2>
+      <h2 className={cn('title')}>{t('profile.title')}</h2>
       <div className={cn('prop')}>
-        <div className={cn('label')}>Имя:</div>
+        <div className={cn('label')}>{t('profile.name')}:</div>
         <div className={cn('value')}>{data?.profile?.name}</div>
       </div>
       <div className={cn('prop')}>
-        <div className={cn('label')}>Телефон:</div>
+        <div className={cn('label')}>{t('profile.phone')}:</div>
         <div className={cn('value')}>{data?.profile?.phone}</div>
       </div>
       <div className={cn('prop')}>
-        <div className={cn('label')}>Email:</div>
+        <div className={cn('label')}>{t('profile.mail')}:</div>
         <div className={cn('value')}>{data?.email}</div>
       </div>
     </div>
@@ -27,6 +29,7 @@ function ProfileCard({ data }) {
 
 ProfileCard.propTypes = {
   data: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
 };
 
 export default memo(ProfileCard);
diff --git a/src/containers/article-comments/index.js b/src/containers/article-comments/index.js
index 1c4e2e969..cadae8be4 100644
--- a/src/containers/article-comments/index.js
+++ b/src/containers/article-comments/index.js
@@ -8,17 +8,17 @@ import shallowequal from 'shallowequal';
 import useSelectorStore from '../../hooks/use-selector';
 import listToTree from '../../utils/list-to-tree';
 import treeToList from '../../utils/tree-to-list';
-import useTranslate from '../../hooks/use-translate';
 import CommentAction from '../../components/comment-action';
 import LadderList from '../../components/ladder-list';
 import CommentsLayout from '../../components/comments-layout';
 import CommentItem from '../../components/comment-item';
 import Spinner from '../../components/spinner';
+import useLocale from '../../hooks/use-locale';
 
 function ArticleComments() {
   const cn = bem('ArticleComments');
 
-  const {t} = useTranslate();
+  const { t, locale } = useLocale()
   const select = useSelector(
     state => ({
       article: state.article.data,
@@ -86,11 +86,13 @@ function ArticleComments() {
       item => (
         <>
           <CommentItem
+            active={addComment === item.value}
             comment={item}
             my={selectStore.user._id === item.authorId}
             onStartReply={() => callbacks.addToAnswer(item.value)}
             onCancelReply={() => callbacks.cancelToAnswer()}
             t={t}
+            locale={locale}
           />
           {addComment === item.value &&
             renders.action({
@@ -123,7 +125,7 @@ function ArticleComments() {
   };
 
   return (
-    <Spinner active={select.waiting}>    <CommentsLayout title={`Комментарии (${select.commentsCount})`}>
+    <Spinner active={select.waiting}>    <CommentsLayout title={`${t('comment.title')} (${select.commentsCount})`}>
       {comments && <LadderList list={comments} renderItem={renders.item}/>}
       {addComment === '' && renders.action({
         isReply: false,
diff --git a/src/containers/catalog-filter/index.js b/src/containers/catalog-filter/index.js
index 2eeca7564..35d21c1be 100644
--- a/src/containers/catalog-filter/index.js
+++ b/src/containers/catalog-filter/index.js
@@ -1,5 +1,4 @@
 import { memo, useCallback, useMemo } from 'react';
-import useTranslate from '../../hooks/use-translate';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
 import Select from '../../components/select';
@@ -8,10 +7,11 @@ import SideLayout from '../../components/side-layout';
 import treeToList from '../../utils/tree-to-list';
 import listToTree from '../../utils/list-to-tree';
 import Button from '../../components/button';
+import useLocale from '../../hooks/use-locale';
 
 function CatalogFilter() {
   const store = useStore();
-
+  const { t, locale } = useLocale()
   const select = useSelector(state => ({
     sort: state.catalog.params.sort,
     query: state.catalog.params.query,
@@ -41,17 +41,17 @@ function CatalogFilter() {
     // Варианты сортировок
     sort: useMemo(
       () => [
-        { value: 'order', title: 'По порядку' },
-        { value: 'title.ru', title: 'По именованию' },
-        { value: '-price', title: 'Сначала дорогие' },
-        { value: 'edition', title: 'Древние' },
+        { value: 'order', title: t('sort.order') },
+        { value: 'title.ru', title: t('sort.name') },
+        { value: '-price', title: t('sort.expensive') },
+        { value: 'edition', title: t('sort.old') },
       ],
-      [],
+      [locale],
     ),
     // Категории для фильтра
     categories: useMemo(
       () => [
-        { value: '', title: 'Все' },
+        { value: '', title: t('filter.all') },
         ...treeToList(listToTree(select.categories), (item, level) => ({
           value: item._id,
           title: '- '.repeat(level) + item.title,
@@ -61,7 +61,7 @@ function CatalogFilter() {
     ),
   };
 
-  const { t } = useTranslate();
+
 
   return (
     <SideLayout padding="medium">
@@ -80,7 +80,7 @@ function CatalogFilter() {
       <Input
         value={select.query}
         onChange={callbacks.onSearch}
-        placeholder={'Поиск'}
+        placeholder={t('search')}
         delay={1000}
         theme={'big'}
       />
diff --git a/src/containers/catalog-list/index.js b/src/containers/catalog-list/index.js
index d6af63ead..8fbb6a6ff 100644
--- a/src/containers/catalog-list/index.js
+++ b/src/containers/catalog-list/index.js
@@ -1,11 +1,11 @@
 import { memo, useCallback } from 'react';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
-import useTranslate from '../../hooks/use-translate';
 import Item from '../../components/item';
 import List from '../../components/list';
 import Pagination from '../../components/pagination';
 import Spinner from '../../components/spinner';
+import useLocale from '../../hooks/use-locale';
 
 function CatalogList() {
   const store = useStore();
@@ -39,7 +39,7 @@ function CatalogList() {
     ),
   };
 
-  const { t } = useTranslate();
+  const { t } = useLocale()
 
   const renders = {
     item: useCallback(
diff --git a/src/containers/locale-select/index.js b/src/containers/locale-select/index.js
index a60df2a9a..008b650fd 100644
--- a/src/containers/locale-select/index.js
+++ b/src/containers/locale-select/index.js
@@ -1,11 +1,19 @@
-import { memo, useCallback, useMemo } from 'react';
-import useStore from '../../hooks/use-store';
-import useSelector from '../../hooks/use-selector';
-import useTranslate from '../../hooks/use-translate';
+import { memo, useMemo, useState, useEffect } from 'react';
 import Select from '../../components/select';
+import useLocale from '../../hooks/use-locale';
 
 function LocaleSelect() {
-  const { lang, setLang } = useTranslate();
+  const { locale, setLocale } = useLocale()
+  const [currentValue, setCurrentValue] = useState('ru')
+
+  useEffect(() => {
+    setCurrentValue(locale)
+  }, [locale]);
+
+  function toggleLanguage(value) {
+    setLocale(value);
+    setCurrentValue(locale)
+  }
 
   const options = {
     lang: useMemo(
@@ -17,7 +25,7 @@ function LocaleSelect() {
     ),
   };
 
-  return <Select onChange={setLang} value={lang} options={options.lang} size="small" text />;
+  return <Select onChange={toggleLanguage} value={currentValue} options={options.lang} size="small" text />;
 }
 
 export default memo(LocaleSelect);
diff --git a/src/containers/navigation/index.js b/src/containers/navigation/index.js
index 44a2f8a4f..3ce89dc1b 100644
--- a/src/containers/navigation/index.js
+++ b/src/containers/navigation/index.js
@@ -1,12 +1,12 @@
 import { memo, useCallback, useMemo } from 'react';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
-import useTranslate from '../../hooks/use-translate';
 import Menu from '../../components/menu';
 import BasketTool from '../../components/basket-tool';
 import SideLayout from '../../components/side-layout';
 import { useDispatch } from 'react-redux';
 import modalsActions from '../../store-redux/modals/actions';
+import useLocale from '../../hooks/use-locale';
 
 function Navigation() {
   const store = useStore();
@@ -34,7 +34,7 @@ function Navigation() {
   };
 
   // Функция для локализации текстов
-  const { t } = useTranslate();
+  const { t } = useLocale()
 
   const options = {
     menu: useMemo(() => [{ key: 1, title: t('menu.main'), link: '/' }], [t]),
diff --git a/src/containers/top-head/index.js b/src/containers/top-head/index.js
index 179a51cfb..adc2349eb 100644
--- a/src/containers/top-head/index.js
+++ b/src/containers/top-head/index.js
@@ -1,13 +1,13 @@
 import { memo, useCallback } from 'react';
 import SideLayout from '../../components/side-layout';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import useTranslate from '../../hooks/use-translate';
 import useSelector from '../../hooks/use-selector';
 import useStore from '../../hooks/use-store';
 import Button from '../../components/button';
+import useLocale from '../../hooks/use-locale';
 
 function TopHead() {
-  const { t } = useTranslate();
+  const { t } = useLocale()
   const navigate = useNavigate();
   const location = useLocation();
   const store = useStore();
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
deleted file mode 100644
index bdcbf1071..000000000
--- a/src/hooks/use-translate.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
-
-/**
- * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
- */
-export default function useTranslate() {
-  return useContext(I18nContext);
-}
diff --git a/src/i18n/context.js b/src/i18n/context.js
deleted file mode 100644
index 3733d9bac..000000000
--- a/src/i18n/context.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createContext, useMemo, useState } from 'react';
-import translate from './translate';
-
-/**
- * @type {React.Context<{}>}
- */
-export const I18nContext = createContext({});
-
-/**
- * Обертка над провайдером контекста, чтобы управлять изменениями в контексте
- * @param children
- * @return {JSX.Element}
- */
-export function I18nProvider({ children }) {
-  const [lang, setLang] = useState('ru');
-
-  const i18n = useMemo(
-    () => ({
-      // Код локали
-      lang,
-      // Функция для смены локали
-      setLang,
-      // Функция для локализации текстов с замыканием на код языка
-      t: (text, number) => translate(lang, text, number),
-    }),
-    [lang],
-  );
-
-  return <I18nContext.Provider value={i18n}>{children}</I18nContext.Provider>;
-}
diff --git a/src/index.js b/src/index.js
index f49db385a..6bfb12342 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { ServicesContext } from './context';
-import { I18nProvider } from './i18n/context';
 import App from './app';
 import Services from './services';
 import config from './config';
@@ -10,17 +9,19 @@ import 'global.css';
 
 const services = new Services(config);
 
+services.i18n.subscribe((newLocale) => {
+  services.api.setHeader('Accept-Language', newLocale);
+});
+
 const root = createRoot(document.getElementById('root'));
 
 // Первый рендер приложения
 root.render(
   <Provider store={services.redux}>
     <ServicesContext.Provider value={services}>
-      <I18nProvider>
         <BrowserRouter>
           <App />
         </BrowserRouter>
-      </I18nProvider>
     </ServicesContext.Provider>
   </Provider>,
 );
diff --git a/src/services.js b/src/services.js
index a32b14d57..250ea8bf9 100644
--- a/src/services.js
+++ b/src/services.js
@@ -1,6 +1,7 @@
 import APIService from './api';
 import Store from './store';
 import createStoreRedux from './store-redux';
+import I18nService from './i18n';
 
 class Services {
   constructor(config) {
@@ -38,6 +39,17 @@ class Services {
     }
     return this._redux;
   }
+
+  /**
+   * Сервис i18n
+   */
+  get i18n() {
+    if (!this._i18n) {
+      this._i18n = new I18nService(this.config.locale );
+    }
+    return this._i18n;
+  }
+
 }
 
 export default Services;
diff --git a/src/store/basket/index.js b/src/store/basket/index.js
index 8cacc17eb..a387a59b4 100644
--- a/src/store/basket/index.js
+++ b/src/store/basket/index.js
@@ -32,7 +32,7 @@ class BasketState extends StoreModule {
 
     if (!exist) {
       // Поиск товара в каталоге, чтобы его добавить в корзину.
-      const res = await this.services.api.request({ url: `/api/v1/articles/${_id}` });
+      const res = await this.services.api.request({ url: `/api/v1/articles/${_id}?&lang=all` });
       const item = res.data.result;
 
       list.push({ ...item, amount: 1 }); // list уже новый, в него можно пушить.
diff --git a/src/utils/format-pretty-date.js b/src/utils/format-pretty-date.js
index aaa175f15..a8b7a436e 100644
--- a/src/utils/format-pretty-date.js
+++ b/src/utils/format-pretty-date.js
@@ -2,11 +2,11 @@
  * Форматирование даты в читаемый вид
  * Преобразует строку даты в формат вида "12 апреля 2025 в 14:30" с учётом указанной локали
  * @param dateString {String} Строка даты в формате, распознаваемом конструктором Date.
- * @param [locale] {String} Локаль (код языка), по умолчанию 'ru-RU'.
+ * @param [locale] {String} Локаль (код языка), по умолчанию 'ru'.
  * @returns {String} Отформатированная строка даты.
  * @example formatPrettyDate('2025-04-12T14:30:00') // "12 апреля 2025 в 14:30"
  */
-export function formatPrettyDate(dateString, locale = 'ru-RU') {
+export function formatPrettyDate(dateString, locale = 'ru') {
   const date = new Date(dateString);
 
   const datePart = new Intl.DateTimeFormat(locale, {

From 7046675465c576a976147dc889b05eb940c6f4d6 Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Sat, 19 Apr 2025 20:36:20 +0200
Subject: [PATCH 05/16] =?UTF-8?q?=D0=97=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=B8=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=B8=D0=BC=D0=BF=D0=BE=D1=80=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/article/index.js               |  1 +
 src/app/basket/index.js                |  1 +
 src/app/login/index.js                 |  1 +
 src/app/main/index.js                  |  1 -
 src/app/profile/index.js               |  1 +
 src/components/item-basket/index.js    |  2 +-
 src/containers/catalog-filter/index.js |  1 +
 src/hooks/use-locale.js                | 19 ++++++++++++
 src/i18n/index.js                      | 41 ++++++++++++++++++++++++++
 9 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/use-locale.js
 create mode 100644 src/i18n/index.js

diff --git a/src/app/article/index.js b/src/app/article/index.js
index 28a752371..6acbf51ff 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -17,6 +17,7 @@ import HeadLayout from '../../components/head-layout';
 import ArticleComments from '../../containers/article-comments';
 import useLocale from '../../hooks/use-locale';
 
+
 function Article() {
   const store = useStore();
   const dispatch = useDispatch();
diff --git a/src/app/basket/index.js b/src/app/basket/index.js
index d0c943803..61d8494b2 100644
--- a/src/app/basket/index.js
+++ b/src/app/basket/index.js
@@ -10,6 +10,7 @@ import modalsActions from '../../store-redux/modals/actions';
 import useLocale from '../../hooks/use-locale';
 
 
+
 function Basket() {
   const store = useStore();
   const dispatch = useDispatch();
diff --git a/src/app/login/index.js b/src/app/login/index.js
index 7cecd38fd..59a58e586 100644
--- a/src/app/login/index.js
+++ b/src/app/login/index.js
@@ -15,6 +15,7 @@ import HeadLayout from '../../components/head-layout';
 import Form from '../../components/form';
 import useLocale from '../../hooks/use-locale';
 
+
 function Login() {
   const { t } = useLocale()
   const location = useLocation();
diff --git a/src/app/main/index.js b/src/app/main/index.js
index 0e138ac00..a3fe84c73 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -11,7 +11,6 @@ import TopHead from '../../containers/top-head';
 import HeadLayout from '../../components/head-layout';
 import useLocale from '../../hooks/use-locale';
 
-
 function Main() {
   const store = useStore();
 
diff --git a/src/app/profile/index.js b/src/app/profile/index.js
index abe77c888..450e7dd90 100644
--- a/src/app/profile/index.js
+++ b/src/app/profile/index.js
@@ -12,6 +12,7 @@ import ProfileCard from '../../components/profile-card';
 import HeadLayout from '../../components/head-layout';
 import useLocale from '../../hooks/use-locale';
 
+
 function Profile() {
   const store = useStore();
 
diff --git a/src/components/item-basket/index.js b/src/components/item-basket/index.js
index d5c51fb1c..7d4024da4 100644
--- a/src/components/item-basket/index.js
+++ b/src/components/item-basket/index.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import Button from '../button';
 import './style.css';
-import useLocale from '../../hooks/use-locale';
+
 
 function ItemBasket(props) {
   const { onRemove = () => {}, labelCurr = '₽', labelUnit = 'шт', labelDelete = 'Удалить' } = props;
diff --git a/src/containers/catalog-filter/index.js b/src/containers/catalog-filter/index.js
index 35d21c1be..070a2a9b3 100644
--- a/src/containers/catalog-filter/index.js
+++ b/src/containers/catalog-filter/index.js
@@ -9,6 +9,7 @@ import listToTree from '../../utils/list-to-tree';
 import Button from '../../components/button';
 import useLocale from '../../hooks/use-locale';
 
+
 function CatalogFilter() {
   const store = useStore();
   const { t, locale } = useLocale()
diff --git a/src/hooks/use-locale.js b/src/hooks/use-locale.js
new file mode 100644
index 000000000..a90393cca
--- /dev/null
+++ b/src/hooks/use-locale.js
@@ -0,0 +1,19 @@
+import { useContext, useEffect, useState } from 'react';
+import { ServicesContext } from '../context';
+
+export default function useLocale() {
+  const services = useContext(ServicesContext);
+  const i18n = services.i18n;
+
+  const [locale, setLocaleState] = useState(() => i18n.getLocale());
+
+  useEffect(() => {
+    const unsubscribe = i18n.subscribe(setLocaleState);
+    return () => unsubscribe();
+  }, [i18n]);
+
+  const setLocale = (val) => i18n.setLocale(val);
+  const t = (key, plural, lang) => i18n.translate(key, plural, lang);
+
+  return { locale, setLocale, t };
+}
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 000000000..127299dd4
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,41 @@
+import baseTranslate from './translate';
+
+/**
+ * Сервис для хранения локали и перевода
+ */
+class I18nService {
+  constructor(defaultLocale = 'ru') {
+    this.locale = defaultLocale;
+    this.listeners = [];
+  }
+
+  getLocale() {
+    return this.locale;
+  }
+
+  setLocale(locale) {
+    if (this.locale !== locale) {
+      this.locale = locale;
+      this._notify();
+    }
+  }
+
+  translate(key, plural, locale = this.locale) {
+    return baseTranslate(locale, key, plural);
+  }
+
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter(item => item !== listener);
+    };
+  }
+
+  _notify() {
+    for (const listener of this.listeners) {
+      listener(this.locale);
+    }
+  }
+}
+
+export default I18nService;

From 72a2c4af397dc0d18c295ceff28ec41f93635bfc Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Sun, 20 Apr 2025 12:56:37 +0200
Subject: [PATCH 06/16] =?UTF-8?q?=D0=A0=D0=B5=D1=84=D0=B0=D0=BA=D1=82?=
 =?UTF-8?q?=D0=BE=D1=80=D0=B8=D0=BD=D0=B3=201=20-=20=D0=BF=D0=BE=D1=84?=
 =?UTF-8?q?=D0=B8=D0=BA=D1=81=D0=B8=D1=82=D1=8C=20=D0=BF=D0=B5=D1=80=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=D1=81=20=D0=B4=D0=BB=D0=B8=D0=BD=D0=BD=D1=8B=D1=85?=
 =?UTF-8?q?=20=D1=81=D0=BB=D0=BE=D0=B2=20=D0=B2=20=D0=BA=D0=BE=D0=BC=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=B0=D1=80=D0=B8=D0=B8=20=D0=B8=20=D0=B1?=
 =?UTF-8?q?=D0=B5=D1=81=D0=BA=D0=BE=D0=BD=D0=B5=D1=87=D0=BD=D1=83=D1=8E=20?=
 =?UTF-8?q?=D0=BB=D0=B5=D1=81=D1=82=D0=BD=D0=B8=D1=86=D1=83=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=80=D0=B8=D0=B5=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/comment-item/index.js  |  2 +-
 src/components/comment-item/style.css |  2 ++
 src/components/item-basket/index.js   | 13 ++++++--
 src/components/ladder-list/index.js   | 48 ++++++++++++++++++++++++---
 src/components/ladder-list/style.css  |  5 ++-
 5 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 986acef04..7c8008f7f 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -1,4 +1,4 @@
-import { memo, useCallback, useState, useEffect } from 'react';
+import { memo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
index ee4ad6dde..5568ce071 100644
--- a/src/components/comment-item/style.css
+++ b/src/components/comment-item/style.css
@@ -34,4 +34,6 @@
   letter-spacing: 0;
   padding: 0;
   margin: 0;
+  word-break: break-word;
+  overflow-wrap: anywhere;
 }
diff --git a/src/components/item-basket/index.js b/src/components/item-basket/index.js
index 7d4024da4..ca1018394 100644
--- a/src/components/item-basket/index.js
+++ b/src/components/item-basket/index.js
@@ -8,7 +8,13 @@ import './style.css';
 
 
 function ItemBasket(props) {
-  const { onRemove = () => {}, labelCurr = '₽', labelUnit = 'шт', labelDelete = 'Удалить' } = props;
+  const {
+    onRemove = () => {},
+    labelCurr = '₽',
+    labelUnit = 'шт',
+    labelDelete = 'Удалить',
+    locale = 'ru'
+  } = props;
   const cn = bem('ItemBasket');
 
   const callbacks = {
@@ -21,10 +27,10 @@ function ItemBasket(props) {
       <div className={cn('title')}>
         {props.link ? (
           <Link to={props.link} onClick={props.onLink}>
-            {props.item.title[props.locale]}
+            {props.item.title[locale]}
           </Link>
         ) : (
-          props.item.title[props.locale]
+          props.item.title[locale]
         )}
       </div>
       <div className={cn('right')}>
@@ -55,6 +61,7 @@ ItemBasket.propTypes = {
   labelCurr: PropTypes.string,
   labelDelete: PropTypes.string,
   labelUnit: PropTypes.string,
+  locale: PropTypes.string,
 };
 
 export default memo(ItemBasket);
diff --git a/src/components/ladder-list/index.js b/src/components/ladder-list/index.js
index 05b9a15c7..659845632 100644
--- a/src/components/ladder-list/index.js
+++ b/src/components/ladder-list/index.js
@@ -1,12 +1,49 @@
-import { memo } from 'react';
+import { memo, useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './style.css';
 
-function LadderList({ list, renderItem = item => {} }) {
+function LadderList({
+                      list,
+                      renderItem = item => {},
+                      indentPercent = 4,
+                      indentMaxPx = 40,
+                      maxLevel = 20
+                    }) {
+  const listRef = useRef(null);
+  const [calculatedIndent, setCalculatedIndent] = useState(0);
+
+  function clampLevel(level) {
+    const safeLevel = typeof level === 'number' ? level : 0;
+    return Math.max(0, Math.min(safeLevel, maxLevel));
+  }
+
+  useEffect(() => {
+    function updateIndent() {
+      if (!listRef.current) return;
+
+      const containerWidth = listRef.current.offsetWidth;
+      const indentFromPercent = (containerWidth * indentPercent) / 100;
+      const finalIndent = Math.min(indentFromPercent, indentMaxPx);
+
+      setCalculatedIndent(finalIndent);
+    }
+
+    updateIndent();
+    window.addEventListener('resize', updateIndent);
+    return () => window.removeEventListener('resize', updateIndent);
+  }, [indentPercent, indentMaxPx]);
+
   return (
-    <ul className="LadderList">
+    <ul className="LadderList" ref={listRef}>
       {list.map(item => (
-        <li style={{'--level': item.level}} key={item.value} className="LadderList-item">
+        <li
+          key={item.value}
+          className="LadderList-item"
+          style={{
+            '--level': clampLevel(item.level),
+            '--indent': `${calculatedIndent}px`,
+          }}
+        >
           {renderItem(item)}
         </li>
       ))}
@@ -22,6 +59,9 @@ LadderList.propTypes = {
     }),
   ).isRequired,
   renderItem: PropTypes.func.isRequired,
+  maxLevel: PropTypes.number,
+  indentPercent: PropTypes.number,
+  indentMaxPx: PropTypes.number,
 };
 
 export default memo(LadderList);
diff --git a/src/components/ladder-list/style.css b/src/components/ladder-list/style.css
index bdd41ccc0..b62e130d6 100644
--- a/src/components/ladder-list/style.css
+++ b/src/components/ladder-list/style.css
@@ -8,5 +8,8 @@
 }
 
 .LadderList-item {
-  padding-left: calc(var(--level, 0) * 40px);
+ /* padding-left: calc(var(--level, 0) * 40px);*/
+  --level: 0;
+  --indent: 0px;
+  padding-left: calc(var(--level) * var(--indent));
 }

From 9e7ea83bed7cebac6346852d7077e561e27486f4 Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Sun, 20 Apr 2025 13:32:26 +0200
Subject: [PATCH 07/16] =?UTF-8?q?=D0=A0=D0=B5=D1=84=D0=B0=D0=BA=D1=82?=
 =?UTF-8?q?=D0=BE=D1=80=D0=B8=D0=BD=D0=B3=202?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/comment-action/index.js |  9 +++------
 src/store-redux/article/reducer.js     |  2 +-
 src/store-redux/comments/actions.js    | 11 +++--------
 src/store-redux/comments/reducer.js    |  2 +-
 4 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/comment-action/index.js b/src/components/comment-action/index.js
index 2fbf4c125..92f35f329 100644
--- a/src/components/comment-action/index.js
+++ b/src/components/comment-action/index.js
@@ -8,12 +8,9 @@ import { Link } from 'react-router-dom';
 function CommentAction(props) {
   const {
     t = text => text,
-    onAdd = () => {
-    },
-    setValue = () => {
-    },
-    cancel = () => {
-    },
+    onAdd = () => {},
+    setValue = () => {},
+    cancel = () => {},
     value = '',
     isReply = false,
     auth = false,
diff --git a/src/store-redux/article/reducer.js b/src/store-redux/article/reducer.js
index 1df8020ce..b37776d75 100644
--- a/src/store-redux/article/reducer.js
+++ b/src/store-redux/article/reducer.js
@@ -14,7 +14,7 @@ function reducer(state = initialState, action) {
       return { ...state, data: action.payload.data, waiting: false };
 
     case 'article/load-error':
-      return { ...state, data: {}, waiting: false }; //@todo текст ошибки сохранять?
+      return { ...state, data: {}, waiting: false };
 
     default:
       // Нет изменений
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
index 706e05939..eabb7df9f 100644
--- a/src/store-redux/comments/actions.js
+++ b/src/store-redux/comments/actions.js
@@ -6,14 +6,14 @@ export default {
    */
   load: id => {
     return async (dispatch, getState, services) => {
-      // Сброс текущего товара и установка признака ожидания загрузки
+      // Сброс текущего списка комментариев и установка признака ожидания загрузки
       dispatch({ type: 'comments/load-start' });
 
       try {
         const res = await services.api.request({
-          url: `/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=${id}`,
+          url: `/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=${id}778`,
         });
-        // Товар загружен успешно
+        // Список комментариев загружен успешно
         dispatch({ type: 'comments/load-success', payload: { data: res.data.result.items, count: res.data.result.count } });
       } catch (e) {
         //Ошибка загрузки
@@ -30,9 +30,6 @@ export default {
   addComment: (parent, text, token, callback) => {
 
     return async (dispatch, getState, services) => {
-      // Сброс текущего товара и установка признака ожидания загрузки
-      //dispatch({ type: 'comments/load-start' });
-
       try {
         const res = await services.api.request({
           url: `/api/v1/comments`,
@@ -47,8 +44,6 @@ export default {
         }).then(()=>{
           callback()
         });
-        // Товар загружен успешно
-       // dispatch({ type: 'comments/load-success', payload: { data: res.data.result.items, count: res.data.result.count } });
       } catch (e) {
         //Ошибка загрузки
         dispatch({ type: 'comments/load-error' });
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
index e75b42cae..66a140929 100644
--- a/src/store-redux/comments/reducer.js
+++ b/src/store-redux/comments/reducer.js
@@ -15,7 +15,7 @@ function reducer(state = initialState, action) {
       return { ...state, data: action.payload.data, count: action.payload.count, waiting: false };
 
     case 'comments/load-error':
-      return { ...state, data: [], count: 0, waiting: false }; //@todo текст ошибки сохранять?
+      return { ...state, data: [], count: 0, waiting: false };
 
     default:
       // Нет изменений

From 62ea23c2df1e20817a07b331e8c5c4f55bbe418a Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Sun, 20 Apr 2025 13:34:26 +0200
Subject: [PATCH 08/16] =?UTF-8?q?=D0=A0=D0=B5=D1=84=D0=B0=D0=BA=D1=82?=
 =?UTF-8?q?=D0=BE=D1=80=D0=B8=D0=BD=D0=B3=203?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store-redux/comments/actions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
index eabb7df9f..57f7db099 100644
--- a/src/store-redux/comments/actions.js
+++ b/src/store-redux/comments/actions.js
@@ -11,7 +11,7 @@ export default {
 
       try {
         const res = await services.api.request({
-          url: `/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=${id}778`,
+          url: `/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=${id}`,
         });
         // Список комментариев загружен успешно
         dispatch({ type: 'comments/load-success', payload: { data: res.data.result.items, count: res.data.result.count } });

From 3e9797ba9568986a59d9aed1a452b1728a316e2d Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Mon, 21 Apr 2025 15:46:40 +0200
Subject: [PATCH 09/16] =?UTF-8?q?fix=201=20-=20=D1=83=D0=B4=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B0=20=D0=BD=D0=B5=D0=BD=D1=83=D0=B6=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=B9=20=D0=BB=D0=B8=D1=82=D0=B5=D1=80=D0=B0=D0=BB=20=D0=B8?=
 =?UTF-8?q?=D0=B7=20=D0=B4=D0=B0=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/format-pretty-date.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/utils/format-pretty-date.js b/src/utils/format-pretty-date.js
index a8b7a436e..298776456 100644
--- a/src/utils/format-pretty-date.js
+++ b/src/utils/format-pretty-date.js
@@ -8,15 +8,25 @@
  */
 export function formatPrettyDate(dateString, locale = 'ru') {
   const date = new Date(dateString);
-
-  const datePart = new Intl.DateTimeFormat(locale, {
+  const yearLiteral = 'г.';
+  const formatter = {
     day: 'numeric',
     month: 'long',
     year: 'numeric',
-  }).format(date);
+  };
+
+  const datePart = new Intl.DateTimeFormat(locale, formatter).formatToParts(date);
+
+  const customDate = datePart.reduce((dateString, part) => {
+    // Пропускаем литерал, если это "г." (обязательно с trim что бы удалить все виды пробелов)
+    if (part.type === 'literal' && part.value.trim() === yearLiteral) {
+      return dateString;
+    }
+    return dateString + part.value;
+  }, '');
 
   const hours = String(date.getHours()).padStart(2, '0');
   const minutes = String(date.getMinutes()).padStart(2, '0');
 
-  return `${datePart} в ${hours}:${minutes}`;
+  return `${customDate} в ${hours}:${minutes}`;
 }

From a8da06ffa05dba568a41936e97614659987b4955 Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Mon, 21 Apr 2025 16:46:34 +0200
Subject: [PATCH 10/16] =?UTF-8?q?fix=203=20-=20=D0=B4=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=BB=D0=B0=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20?=
 =?UTF-8?q?=D1=82=D0=B5=D0=BA=D1=81=D1=82=D0=B0=20=D0=B2=20textarea=20?=
 =?UTF-8?q?=D0=B8=20=D1=83=D0=B1=D1=80=D0=B0=D0=BB=D0=B0=20=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B8=20=D0=B4=D0=B5=D1=84=D0=BE=D0=BB=D1=82=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B3=D0=BE=20=D1=84=D0=BE=D0=BA=D1=83=D1=81=D0=B0=20(?=
 =?UTF-8?q?=D0=B2=D0=BE=D0=BF=D1=80=D0=BE=D1=81=20=D0=BF=D0=BE=20=D1=88?=
 =?UTF-8?q?=D0=B8=D1=80=D0=B8=D0=BD=D0=B5=20=D0=BE=D1=81=D1=82=D0=B0=D0=BB?=
 =?UTF-8?q?=D1=81=D1=8F=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D1=82=D1=8B=D0=BC?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/comment-action/style.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/comment-action/style.css b/src/components/comment-action/style.css
index a562a1f54..2e1d2c650 100644
--- a/src/components/comment-action/style.css
+++ b/src/components/comment-action/style.css
@@ -17,8 +17,17 @@
     min-height: 88px;
     padding: 8px 12px;
     border-radius: 4px;
-    border: 1px solid #D3D3D3;
+    border: 1px solid var(--filter-border);
     resize: none;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 130%;
+    letter-spacing: 0;
+    vertical-align: middle;
+    &:focus {
+      outline: none;
+      border: 1px solid var(--filter-border);
+    }
   }
 
   a {

From e5c48c9c99db0995f935af1cadcbf64370deb4b2 Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Mon, 21 Apr 2025 18:51:51 +0200
Subject: [PATCH 11/16] =?UTF-8?q?fix=204,=206=20-=20=D0=BF=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B5=D1=80=D0=BA=D0=B0=20=D0=BD=D0=B0=20=D0=BF=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=BE=D0=B9=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0=D1=80=D0=B8=D0=B9,=20=D1=84=D0=BE=D1=80=D0=BC?=
 =?UTF-8?q?=D0=B0=D1=82=20=D0=B4=D0=B0=D1=82=D1=8B,=20=D0=BA=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=BF=D0=BA=D0=B0=20=D0=BE=D1=82=D0=BC=D0=B5=D0=BD=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Добавила дизейбл кнопке отправки, и условие проверку на пустой текст для запроса, чуть переписала формирование даты, кнопку отмены в комментарии сделала всегда видимой
---
 src/components/button/index.js           |  5 +++--
 src/components/button/style.css          |  6 ++++++
 src/components/comment-action/index.js   | 16 ++++++++--------
 src/containers/article-comments/index.js |  6 ++----
 src/store-redux/comments/actions.js      |  2 +-
 src/utils/format-pretty-date.js          | 18 ++++++++----------
 6 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/components/button/index.js b/src/components/button/index.js
index 7d1d3d05c..12f8f4cb7 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
-function Button({ onClick = () => {}, title, style, type = 'button' }) {
+function Button({ onClick = () => {}, title, style, type = 'button', disabled = false }) {
   const cn = bem('Button');
 
   return (
     <div className={cn()}>
-      <button type={type} className={cn({ style })} onClick={() => onClick()}>{title}</button>
+      <button type={type} className={cn({ style })} onClick={() => onClick()} disabled={disabled}>{title}</button>
     </div>
   );
 }
@@ -18,6 +18,7 @@ Button.propTypes = {
   title: PropTypes.string,
   style: PropTypes.oneOf(['text', 'primary', 'delete', 'outline']),
   type: PropTypes.oneOf(['button', 'submit']),
+  disabled: PropTypes.bool,
 };
 
 export default memo(Button);
diff --git a/src/components/button/style.css b/src/components/button/style.css
index b0f2f607c..c0ba11c33 100644
--- a/src/components/button/style.css
+++ b/src/components/button/style.css
@@ -7,6 +7,12 @@
     border-color: var(--primary);
     color: var(--primary);
   }
+
+  &:disabled&:hover {
+    color: var(--second-text);
+    border-color: var(--filter-border);
+    background-color: var(--filter-border);
+  }
 }
 
 .Button_style_delete {
diff --git a/src/components/comment-action/index.js b/src/components/comment-action/index.js
index 92f35f329..04a4829b4 100644
--- a/src/components/comment-action/index.js
+++ b/src/components/comment-action/index.js
@@ -36,17 +36,17 @@ function CommentAction(props) {
 
   return (
     <div className={cn()}>
-      <label htmlFor="story">{label}</label>
-      <textarea id="story"
-                name="story"
+      <label htmlFor="comment">{label}</label>
+      <textarea id="comment"
+                name="comment"
                 onChange={onChangeHandler}
                 value={value}/>
       <div className={cn('controls')}>
-        <Button title={t('comment.send')} style={'primary'} onClick={() => {
-          onAdd();
-          cancel();
-        }}/>
-        {isReply && value !== '' && <Button title={t('comment.cancel')} style={'outline'} onClick={cancel}/>}
+        <Button title={t('comment.send')}
+                disabled={!value.trim()}
+                style={'primary'}
+                onClick={() => { onAdd(); cancel(); }}/>
+        {isReply && <Button title={t('comment.cancel')} style={'outline'} onClick={cancel}/>}
       </div>
     </div>
   );
diff --git a/src/containers/article-comments/index.js b/src/containers/article-comments/index.js
index cadae8be4..68cf10c39 100644
--- a/src/containers/article-comments/index.js
+++ b/src/containers/article-comments/index.js
@@ -65,13 +65,11 @@ function ArticleComments() {
       setCommentValue('')
       setAddComment(id)}, []),
     cancelToAnswer: useCallback(() => {
-
-      setAddComment(''),
-        setCommentValue('');
+      setAddComment('');
+      setCommentValue('');
     }, []),
 
     addApiToAnswer: useCallback((parent) => {
-
       dispatch(commentsActions.addComment(parent, commentValue, selectStore.token, () => dispatch(commentsActions.load(select.article._id))));
     }, [parent, commentValue, selectStore.token]),
 
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
index 57f7db099..7a90ab6ca 100644
--- a/src/store-redux/comments/actions.js
+++ b/src/store-redux/comments/actions.js
@@ -28,9 +28,9 @@ export default {
    * @return {Function}
    */
   addComment: (parent, text, token, callback) => {
-
     return async (dispatch, getState, services) => {
       try {
+        if (!text?.trim()) return;
         const res = await services.api.request({
           url: `/api/v1/comments`,
           method: 'POST',
diff --git a/src/utils/format-pretty-date.js b/src/utils/format-pretty-date.js
index 298776456..054d9d80f 100644
--- a/src/utils/format-pretty-date.js
+++ b/src/utils/format-pretty-date.js
@@ -8,25 +8,23 @@
  */
 export function formatPrettyDate(dateString, locale = 'ru') {
   const date = new Date(dateString);
-  const yearLiteral = 'г.';
+
+  const incorrectLiteral = 'г. в';
+  const correctLiteral = ' в ';
   const formatter = {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
+    dateStyle: "long",
+    timeStyle: "short",
   };
 
   const datePart = new Intl.DateTimeFormat(locale, formatter).formatToParts(date);
 
   const customDate = datePart.reduce((dateString, part) => {
     // Пропускаем литерал, если это "г." (обязательно с trim что бы удалить все виды пробелов)
-    if (part.type === 'literal' && part.value.trim() === yearLiteral) {
-      return dateString;
+    if (part.type === 'literal' && part.value.trim() === incorrectLiteral) {
+      return dateString + correctLiteral;
     }
     return dateString + part.value;
   }, '');
 
-  const hours = String(date.getHours()).padStart(2, '0');
-  const minutes = String(date.getMinutes()).padStart(2, '0');
-
-  return `${customDate} в ${hours}:${minutes}`;
+  return customDate;
 }

From 20a63ec1dedd38500f1a5af8270259465fcb3a51 Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Mon, 21 Apr 2025 19:10:00 +0200
Subject: [PATCH 12/16] =?UTF-8?q?fix=209=20-=20=D1=83=D0=B4=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B0=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B4=D0=B0=D1=87?=
 =?UTF-8?q?=D1=83=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Удалила передачу токена в запрос, так как при авторизации происходит установка заголовка методом сервиса апи. Переписала логику установки заголовка и с локалью по подобию модуля сессии сервиса стор
---
 src/config.js                            | 4 ++++
 src/containers/article-comments/index.js | 7 ++-----
 src/i18n/index.js                        | 6 +++++-
 src/index.js                             | 4 ----
 src/services.js                          | 2 +-
 src/store-redux/comments/actions.js      | 5 +----
 6 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/config.js b/src/config.js
index 67c72f734..4f610797d 100644
--- a/src/config.js
+++ b/src/config.js
@@ -15,6 +15,10 @@ const config = {
       },
     },
   },
+  i18n: {
+  // Названия локали в АПИ
+  localeHeader: 'Accept-Language',
+  },
   api: {
     baseUrl: '',
   },
diff --git a/src/containers/article-comments/index.js b/src/containers/article-comments/index.js
index 68cf10c39..b82c194bc 100644
--- a/src/containers/article-comments/index.js
+++ b/src/containers/article-comments/index.js
@@ -1,5 +1,4 @@
 import { memo, useCallback, useMemo, useState } from 'react';
-import { cn as bem } from '@bem-react/classname';
 import './style.css';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
@@ -16,7 +15,6 @@ import Spinner from '../../components/spinner';
 import useLocale from '../../hooks/use-locale';
 
 function ArticleComments() {
-  const cn = bem('ArticleComments');
 
   const { t, locale } = useLocale()
   const select = useSelector(
@@ -34,7 +32,6 @@ function ArticleComments() {
   const selectStore = useSelectorStore(state => ({
     user: state.session.user,
     exists: state.session.exists,
-    token: state.session.token,
   }));
 
   const options = listToTree(select.comments || []);
@@ -70,8 +67,8 @@ function ArticleComments() {
     }, []),
 
     addApiToAnswer: useCallback((parent) => {
-      dispatch(commentsActions.addComment(parent, commentValue, selectStore.token, () => dispatch(commentsActions.load(select.article._id))));
-    }, [parent, commentValue, selectStore.token]),
+      dispatch(commentsActions.addComment(parent, commentValue, () => dispatch(commentsActions.load(select.article._id))));
+    }, [parent, commentValue]),
 
   };
 
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 127299dd4..18fa68ba2 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -4,7 +4,10 @@ import baseTranslate from './translate';
  * Сервис для хранения локали и перевода
  */
 class I18nService {
-  constructor(defaultLocale = 'ru') {
+
+  constructor(services, config = {}, defaultLocale = 'ru') {
+    this.services = services;
+    this.config = config;
     this.locale = defaultLocale;
     this.listeners = [];
   }
@@ -18,6 +21,7 @@ class I18nService {
       this.locale = locale;
       this._notify();
     }
+    this.services.api.setHeader(this.config.localeHeader, locale);
   }
 
   translate(key, plural, locale = this.locale) {
diff --git a/src/index.js b/src/index.js
index 6bfb12342..d540a3148 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,10 +9,6 @@ import 'global.css';
 
 const services = new Services(config);
 
-services.i18n.subscribe((newLocale) => {
-  services.api.setHeader('Accept-Language', newLocale);
-});
-
 const root = createRoot(document.getElementById('root'));
 
 // Первый рендер приложения
diff --git a/src/services.js b/src/services.js
index 250ea8bf9..b22d0903d 100644
--- a/src/services.js
+++ b/src/services.js
@@ -45,7 +45,7 @@ class Services {
    */
   get i18n() {
     if (!this._i18n) {
-      this._i18n = new I18nService(this.config.locale );
+      this._i18n = new I18nService(this, this.config.i18n);
     }
     return this._i18n;
   }
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
index 7a90ab6ca..d652b7a94 100644
--- a/src/store-redux/comments/actions.js
+++ b/src/store-redux/comments/actions.js
@@ -24,17 +24,14 @@ export default {
 
   /**
    * Загрузка комментариев по товару
-   * @param id
-   * @return {Function}
    */
-  addComment: (parent, text, token, callback) => {
+  addComment: (parent, text, callback) => {
     return async (dispatch, getState, services) => {
       try {
         if (!text?.trim()) return;
         const res = await services.api.request({
           url: `/api/v1/comments`,
           method: 'POST',
-          headers: {"X-Token": token},
           body: JSON.stringify(
 
         {

From 2143ce9dd02ceb389f7b87911658093fe1a051cd Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Mon, 21 Apr 2025 21:13:59 +0200
Subject: [PATCH 13/16] =?UTF-8?q?fix=207=20-=20=D0=B2=D0=BE=D0=B7=D0=B2?=
 =?UTF-8?q?=D1=80=D0=B0=D1=82=20=D0=BA=20=D1=82=D0=B5=D0=BA=D1=83=D1=89?=
 =?UTF-8?q?=D0=B5=D0=BC=D1=83=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B0=D1=80=D0=B8=D1=8E=20=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=B3=D0=B8=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/login/index.js                   |  2 +-
 src/components/comment-action/index.js   |  5 ++++-
 src/components/comment-item/index.js     |  2 +-
 src/containers/article-comments/index.js | 24 +++++++++++++++++++++---
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/app/login/index.js b/src/app/login/index.js
index 59a58e586..b48a65d4f 100644
--- a/src/app/login/index.js
+++ b/src/app/login/index.js
@@ -52,7 +52,7 @@ function Login() {
             location.state?.back && location.state?.back !== location.pathname
               ? location.state?.back
               : '/';
-          navigate(back);
+          navigate(back, {state: {replyTo: location.state?.replyTo}});
         });
       },
       [data, location.state],
diff --git a/src/components/comment-action/index.js b/src/components/comment-action/index.js
index 04a4829b4..b00956aee 100644
--- a/src/components/comment-action/index.js
+++ b/src/components/comment-action/index.js
@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 
 function CommentAction(props) {
   const {
+    id='',
     t = text => text,
     onAdd = () => {},
     setValue = () => {},
@@ -25,10 +26,11 @@ function CommentAction(props) {
     setValue(event.target.value);
   };
 
+
   if (!auth) {
     return (
       <div className={cn({type: 'alert'})}>
-        <Link to={link} state={{back: backLink}}>{t('comment.authHint.link')}</Link>{t('comment.authHint.text')}
+        <Link to={link} state={{back: backLink, replyTo: id}}>{t('comment.authHint.link')}</Link>{t('comment.authHint.text')}
       </div>
     );
   }
@@ -55,6 +57,7 @@ function CommentAction(props) {
 CommentAction.propTypes = {
   onAdd: PropTypes.func,
   t: PropTypes.func,
+  id: PropTypes.string,
   value: PropTypes.string,
   isReply: PropTypes.bool,
   auth: PropTypes.bool,
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 7c8008f7f..2afeb551b 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -31,7 +31,7 @@ function CommentItem(props) {
   }, [active, onStartReply, onCancelReply]);
 
   return (
-    <div className={cn()}>
+    <div className={cn()} id={`comment-${comment.value}`}>
       <p className={cn('caption', { my })}>
         <b>{comment.author}</b>{formattedDate}
       </p>
diff --git a/src/containers/article-comments/index.js b/src/containers/article-comments/index.js
index b82c194bc..444902e98 100644
--- a/src/containers/article-comments/index.js
+++ b/src/containers/article-comments/index.js
@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState, useEffect } from 'react';
 import './style.css';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
@@ -57,6 +57,22 @@ function ArticleComments() {
   const [commentValue, setCommentValue] = useState('');
   const dispatch = useDispatch();
 
+
+  const location = useLocation();
+  const replyTo = location.state?.replyTo;
+
+
+  useEffect(() => {
+    if (replyTo) {
+      const target = document.getElementById(`comment-${replyTo}`);
+      if (target) {
+        target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        // можно ещё подсветить или открыть форму ответа
+      }
+    }
+  }, [replyTo]);
+
+
   const callbacks = {
     addToAnswer: useCallback(id => {
       setCommentValue('')
@@ -72,7 +88,7 @@ function ArticleComments() {
 
   };
 
-  const location = useLocation();
+
 
   const backLink = location.pathname;
 
@@ -91,6 +107,7 @@ function ArticleComments() {
           />
           {addComment === item.value &&
             renders.action({
+              id: item.value,
               isReply: true,
               onAdd: () =>
                 callbacks.addApiToAnswer({
@@ -104,8 +121,9 @@ function ArticleComments() {
       [addComment, commentValue, selectStore, t, callbacks],
     ),
 
-    action: ({ isReply, onAdd, cancel }) => (
+    action: ({ isReply, onAdd, cancel, id }) => (
       <CommentAction
+        id={id}
         t={t}
         auth={selectStore.exists}
         backLink={backLink}

From 46746cd411ef5af8942a8b78842aa3451992aa1b Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Tue, 22 Apr 2025 16:35:46 +0200
Subject: [PATCH 14/16] =?UTF-8?q?fix=201,=205,=2010=20-=20=D0=B2=D0=B5?=
 =?UTF-8?q?=D1=80=D0=BD=D1=83=D0=BB=D0=B0=20=D0=BE=D1=82=D1=81=D1=82=D1=83?=
 =?UTF-8?q?=D0=BF=D1=8B=20=D0=BA=D0=B0=D0=BA=20=D0=B1=D1=8B=D0=BB=D0=B8,?=
 =?UTF-8?q?=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D0=B5=20=D1=84?=
 =?UTF-8?q?=D0=BE=D1=80=D0=BC=D1=8B=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0=D1=80=D0=B8=D1=8F=20=D1=87=D0=B5=D1=80=D0=B5=D0=B7?=
 =?UTF-8?q?=20=D1=81=D0=B5=D1=80=D0=B2=D0=B8=D1=81,=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=D0=B0=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB?=
 =?UTF-8?q?=D0=BB=20=D0=B4=D0=BE=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=80=D0=B8=D1=8F,?=
 =?UTF-8?q?=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=D0=B0=20=D1=84?=
 =?UTF-8?q?=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8E=20=D1=84=D0=BE=D1=80=D0=BC?=
 =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F=20=D1=81=D0=BF?=
 =?UTF-8?q?=D0=B8=D1=81=D0=BA=D0=B0.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Сломала скролл после авторизации
---
 src/components/comment-action/index.js     |  4 +-
 src/components/comment-action/style.css    |  7 +-
 src/components/comment-item/index.js       |  2 +-
 src/components/ladder-list/index.js        | 26 ++------
 src/containers/article-comments/index.js   | 74 ++++++++++++----------
 src/store-redux/comments/actions.js        | 45 +++++++++++++
 src/store-redux/comments/reducer.js        | 19 ++++++
 src/utils/list-from-flat/list-from-flat.js | 24 +++++++
 8 files changed, 141 insertions(+), 60 deletions(-)
 create mode 100644 src/utils/list-from-flat/list-from-flat.js

diff --git a/src/components/comment-action/index.js b/src/components/comment-action/index.js
index b00956aee..b865a70e2 100644
--- a/src/components/comment-action/index.js
+++ b/src/components/comment-action/index.js
@@ -29,7 +29,7 @@ function CommentAction(props) {
 
   if (!auth) {
     return (
-      <div className={cn({type: 'alert'})}>
+      <div {...(isReply ? { id: 'reply' } : {})} className={cn({type: 'alert'})}>
         <Link to={link} state={{back: backLink, replyTo: id}}>{t('comment.authHint.link')}</Link>{t('comment.authHint.text')}
       </div>
     );
@@ -37,7 +37,7 @@ function CommentAction(props) {
 
 
   return (
-    <div className={cn()}>
+    <div {...(isReply ? { id: 'reply' } : {})} className={cn(isReply ? { type: 'reply' } : {})}>
       <label htmlFor="comment">{label}</label>
       <textarea id="comment"
                 name="comment"
diff --git a/src/components/comment-action/style.css b/src/components/comment-action/style.css
index 2e1d2c650..bad88440b 100644
--- a/src/components/comment-action/style.css
+++ b/src/components/comment-action/style.css
@@ -1,5 +1,5 @@
 .CommentAction {
-  padding-top: 24px;
+  padding: 24px 0;
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -46,6 +46,11 @@
 }
 
 .CommentAction_type_alert {
+  padding: 8px 0;
   flex-direction: row;
   gap: 0;
 }
+
+.CommentAction_type_reply {
+  padding: 8px 0;
+}
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 2afeb551b..ebf7e2213 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -31,7 +31,7 @@ function CommentItem(props) {
   }, [active, onStartReply, onCancelReply]);
 
   return (
-    <div className={cn()} id={`comment-${comment.value}`}>
+    <div className={cn()} id={`comment-${comment.parent._id}`}>
       <p className={cn('caption', { my })}>
         <b>{comment.author}</b>{formattedDate}
       </p>
diff --git a/src/components/ladder-list/index.js b/src/components/ladder-list/index.js
index 659845632..07a9abdc0 100644
--- a/src/components/ladder-list/index.js
+++ b/src/components/ladder-list/index.js
@@ -1,47 +1,29 @@
-import { memo, useRef, useState, useEffect } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import './style.css';
 
 function LadderList({
                       list,
                       renderItem = item => {},
-                      indentPercent = 4,
                       indentMaxPx = 40,
-                      maxLevel = 20
+                      maxLevel = 15
                     }) {
-  const listRef = useRef(null);
-  const [calculatedIndent, setCalculatedIndent] = useState(0);
 
   function clampLevel(level) {
     const safeLevel = typeof level === 'number' ? level : 0;
     return Math.max(0, Math.min(safeLevel, maxLevel));
   }
 
-  useEffect(() => {
-    function updateIndent() {
-      if (!listRef.current) return;
-
-      const containerWidth = listRef.current.offsetWidth;
-      const indentFromPercent = (containerWidth * indentPercent) / 100;
-      const finalIndent = Math.min(indentFromPercent, indentMaxPx);
-
-      setCalculatedIndent(finalIndent);
-    }
-
-    updateIndent();
-    window.addEventListener('resize', updateIndent);
-    return () => window.removeEventListener('resize', updateIndent);
-  }, [indentPercent, indentMaxPx]);
 
   return (
-    <ul className="LadderList" ref={listRef}>
+    <ul className="LadderList">
       {list.map(item => (
         <li
           key={item.value}
           className="LadderList-item"
           style={{
             '--level': clampLevel(item.level),
-            '--indent': `${calculatedIndent}px`,
+            '--indent': `${indentMaxPx}px`,
           }}
         >
           {renderItem(item)}
diff --git a/src/containers/article-comments/index.js b/src/containers/article-comments/index.js
index 444902e98..257b627e5 100644
--- a/src/containers/article-comments/index.js
+++ b/src/containers/article-comments/index.js
@@ -5,14 +5,13 @@ import { useLocation } from 'react-router-dom';
 import commentsActions from '../../store-redux/comments/actions';
 import shallowequal from 'shallowequal';
 import useSelectorStore from '../../hooks/use-selector';
-import listToTree from '../../utils/list-to-tree';
-import treeToList from '../../utils/tree-to-list';
 import CommentAction from '../../components/comment-action';
 import LadderList from '../../components/ladder-list';
 import CommentsLayout from '../../components/comments-layout';
 import CommentItem from '../../components/comment-item';
 import Spinner from '../../components/spinner';
 import useLocale from '../../hooks/use-locale';
+import { listFromFlat } from '../../utils/list-from-flat/list-from-flat';
 
 function ArticleComments() {
 
@@ -24,6 +23,7 @@ function ArticleComments() {
       comments: state.comments.data,
       commentsCount: state.comments.count,
       commentsWaiting: state.comments.waiting,
+/*      commentsReplyTarget: state.comments.replyTarget,*/
     }),
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
@@ -34,37 +34,39 @@ function ArticleComments() {
     exists: state.session.exists,
   }));
 
-  const options = listToTree(select.comments || []);
-
-  const test = options?.[0]?.children || [];
-
   const comments = useMemo(
-    () => [
-      ...treeToList(test, (item, level) => ({
-        value: item._id,
-        level: level,
-        text: item.text,
-        author: item.author?.profile?.name,
-        authorId: item.author?._id,
-        dateCreate: item.dateCreate,
-        parent: item.parent,
-      })),
-    ],
-    [select.comments],
+    () => listFromFlat(select.comments || []),
+    [select.comments]
   );
 
-  const [addComment, setAddComment] = useState('');
+  const [addComment, setAddComment] = useState(false);
   const [commentValue, setCommentValue] = useState('');
   const dispatch = useDispatch();
 
 
   const location = useLocation();
   const replyTo = location.state?.replyTo;
+  console.log("location.replyTo", replyTo)
+
+
+  useEffect(() => {
+    // Автоскролл до формы ответа, если она появилась
+    const target = document.getElementById('reply');
+
+    console.log("location.target", target)
+
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [select.comments]); // каждый раз, когда список комментариев меняется
 
 
   useEffect(() => {
     if (replyTo) {
       const target = document.getElementById(`comment-${replyTo}`);
+
+
+      console.log("location.target", target)
       if (target) {
         target.scrollIntoView({ behavior: 'smooth', block: 'center' });
         // можно ещё подсветить или открыть форму ответа
@@ -73,19 +75,26 @@ function ArticleComments() {
   }, [replyTo]);
 
 
+
+
+
   const callbacks = {
-    addToAnswer: useCallback(id => {
-      setCommentValue('')
-      setAddComment(id)}, []),
+    addToAnswer: useCallback(comment => {
+      setAddComment(true)
+      setCommentValue(`Мой ответ для ${comment.author} `)
+      dispatch(commentsActions.setReplyTarget2(comment, selectStore.user))
+    }, []),
+
     cancelToAnswer: useCallback(() => {
-      setAddComment('');
+      setAddComment(false)
       setCommentValue('');
+      dispatch(commentsActions.removeReplyPlaceholder())
+
     }, []),
 
     addApiToAnswer: useCallback((parent) => {
       dispatch(commentsActions.addComment(parent, commentValue, () => dispatch(commentsActions.load(select.article._id))));
     }, [parent, commentValue]),
-
   };
 
 
@@ -96,24 +105,21 @@ function ArticleComments() {
     item: useCallback(
       item => (
         <>
-          <CommentItem
+          {item.value !== 'reply' && <CommentItem
             active={addComment === item.value}
             comment={item}
             my={selectStore.user._id === item.authorId}
-            onStartReply={() => callbacks.addToAnswer(item.value)}
+            onStartReply={() => callbacks.addToAnswer(item)}
             onCancelReply={() => callbacks.cancelToAnswer()}
             t={t}
             locale={locale}
-          />
-          {addComment === item.value &&
+          />}
+          {item.value === 'reply' &&
             renders.action({
-              id: item.value,
+              id: item.parent._id,
               isReply: true,
               onAdd: () =>
-                callbacks.addApiToAnswer({
-                  _id: item.value,
-                  _type: 'comment',
-                }),
+                callbacks.addApiToAnswer(item.parent),
               cancel: callbacks.cancelToAnswer,
             })}
         </>
@@ -140,7 +146,7 @@ function ArticleComments() {
   return (
     <Spinner active={select.waiting}>    <CommentsLayout title={`${t('comment.title')} (${select.commentsCount})`}>
       {comments && <LadderList list={comments} renderItem={renders.item}/>}
-      {addComment === '' && renders.action({
+      {!addComment && renders.action({
         isReply: false,
         onAdd: () =>
           callbacks.addApiToAnswer({
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
index d652b7a94..01ad2322d 100644
--- a/src/store-redux/comments/actions.js
+++ b/src/store-redux/comments/actions.js
@@ -13,6 +13,7 @@ export default {
         const res = await services.api.request({
           url: `/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=${id}`,
         });
+        console.log('res.data.result.items', res.data.result.items);
         // Список комментариев загружен успешно
         dispatch({ type: 'comments/load-success', payload: { data: res.data.result.items, count: res.data.result.count } });
       } catch (e) {
@@ -47,4 +48,48 @@ export default {
       }
     };
   },
+
+
+/*  setReplyTarget: (comment) => ({
+    type: 'comments/set-reply-target',
+    payload: {
+      id: comment.value,
+      authorName: comment.author,
+      level: comment.level ?? 0,
+    },
+  }),*/
+
+
+  setReplyTarget2: (comment, user) => {
+    return (dispatch) => {
+      dispatch({ type: 'comments/remove-reply-placeholder' });
+
+      const newReply = {
+        _id: 'reply',
+        level: (comment.level + 1) || 0,
+        text: '',
+        author: {
+          profile: {
+            name: user.name,
+          },
+          _id: user._id
+        },
+        dateCreate: '',
+        parent: {
+          _id: comment.value,
+          _type: 'comment'
+        }
+      };
+
+      dispatch({
+        type: 'comments/set-reply-target2',
+        payload: newReply
+      });
+    };
+  },
+
+
+  removeReplyPlaceholder: () => ({
+    type: 'comments/remove-reply-placeholder',
+  }),
 };
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
index 66a140929..f07015d94 100644
--- a/src/store-redux/comments/reducer.js
+++ b/src/store-redux/comments/reducer.js
@@ -3,6 +3,12 @@ export const initialState = {
   data: [],
   count: 0,
   waiting: false, // признак ожидания загрузки
+/*  replyTarget: {
+    id: '',
+    authorName: '',
+    level: '',
+  }*/
+
 };
 
 // Обработчик действий
@@ -17,6 +23,19 @@ function reducer(state = initialState, action) {
     case 'comments/load-error':
       return { ...state, data: [], count: 0, waiting: false };
 
+/*    case 'comments/set-reply-target':
+      return { ...state, replyTarget: action.payload };*/
+
+    case 'comments/set-reply-target2':
+      return { ...state,
+        data: [...state.data, action.payload] };
+
+    case 'comments/remove-reply-placeholder':
+      return {
+        ...state,
+        data: state.data.filter(comment => comment._id !== 'reply'),
+      };
+
     default:
       // Нет изменений
       return state;
diff --git a/src/utils/list-from-flat/list-from-flat.js b/src/utils/list-from-flat/list-from-flat.js
new file mode 100644
index 000000000..0649bb36e
--- /dev/null
+++ b/src/utils/list-from-flat/list-from-flat.js
@@ -0,0 +1,24 @@
+import listToTree from '../list-to-tree';
+import treeToList from '../tree-to-list';
+
+/**
+ * Преобразует список комментариев в плоский список с уровнями вложенности.
+ * @param list - список комментариев
+ * @param key - ключ идентификатора (по умолчанию "_id")
+ */
+export function listFromFlat(list, key = '_id') {
+
+  console.log("listFromFlatlist", list);
+
+  const tree = listToTree(list, key);
+  console.log("listFromFlattree", tree);
+  return treeToList(tree[0]?.children || [], (item, level) => ({
+    value: item[key],
+    level,
+    text: item.text,
+    author: item.author?.profile?.name,
+    authorId: item.author?._id,
+    dateCreate: item.dateCreate,
+    parent: item.parent,
+  }));
+}

From 1afcd6e8c4388a2f92a17915275655b9236efa09 Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Tue, 22 Apr 2025 16:50:39 +0200
Subject: [PATCH 15/16] =?UTF-8?q?fix=20-=20=D1=81=D0=BB=D0=BE=D0=BC=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D1=81=D0=BB=D0=B5=20=D0=B0=D0=B2=D1=82=D0=BE=D1=80=D0=B8?=
 =?UTF-8?q?=D0=B7=D0=B0=D1=86=D0=B8=D0=B8,=20=D0=BF=D0=B5=D1=80=D0=B5?=
 =?UTF-8?q?=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=B5=D1=82=D1=8C=20=D0=BF=D0=B5?=
 =?UTF-8?q?=D1=80=D0=B5=D1=80=D0=B5=D0=BD=D0=B4=D0=B5=D1=80=D1=8B=20=D0=B8?=
 =?UTF-8?q?=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D1=83,=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BA=D0=B0=20=D0=BA=D0=BE=D1=81=D1=82=D1=8B=D0=BB=D1=8C?=
 =?UTF-8?q?=20=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0=20=D1=81=20=D1=82?=
 =?UTF-8?q?=D0=B0=D0=B9=D0=BC=D0=B0=D1=83=D1=82=D0=BE=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/article-comments/index.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/containers/article-comments/index.js b/src/containers/article-comments/index.js
index 257b627e5..b8260effc 100644
--- a/src/containers/article-comments/index.js
+++ b/src/containers/article-comments/index.js
@@ -62,22 +62,29 @@ function ArticleComments() {
 
 
   useEffect(() => {
-    if (replyTo) {
-      const target = document.getElementById(`comment-${replyTo}`);
+    if (!replyTo) return;
+
+    const didScroll = { current: false }; // локально внутри эффекта — сбрасывается на каждый новый replyTo
 
+    const timeout = setTimeout(() => {
+      console.log('2123214location.targetreplyTo', replyTo);
+      const target = document.getElementById(`comment-${replyTo}`);
+      console.log('123123123location.target', target);
 
-      console.log("location.target", target)
-      if (target) {
+      if (target && !didScroll.current) {
         target.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        // можно ещё подсветить или открыть форму ответа
+        didScroll.current = true;
       }
-    }
+    }, 2000); // Подождать, пока DOM обновится
+
+    return () => clearTimeout(timeout);
   }, [replyTo]);
 
 
 
 
 
+
   const callbacks = {
     addToAnswer: useCallback(comment => {
       setAddComment(true)

From 350a63e96fa4bda7bf3f503e8af0e65885f24c05 Mon Sep 17 00:00:00 2001
From: Kochkina Ekaterina <gudrum1983@gmail.com>
Date: Tue, 22 Apr 2025 20:04:05 +0200
Subject: [PATCH 16/16] =?UTF-8?q?=D1=80=D0=B5=D1=84=D0=B0=D0=BA=D1=82?=
 =?UTF-8?q?=D0=BE=D1=80=D0=B8=D0=BD=D0=B3,=20=D0=BD=D0=B5=D0=B9=D0=BC?=
 =?UTF-8?q?=D0=B8=D0=BD=D0=B3=20=D0=B8=20=D0=BA=D0=BE=D0=BD=D1=81=D0=BE?=
 =?UTF-8?q?=D0=BB=D1=8C=20=D0=BB=D0=BE=D0=B3=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api-examples/comments.http                 |  4 +-
 src/components/comment-action/style.css    |  1 +
 src/containers/article-comments/index.js   | 59 ++++++----------------
 src/store-redux/comments/actions.js        | 34 +++++--------
 src/store-redux/comments/reducer.js        | 18 +++----
 src/utils/list-from-flat/list-from-flat.js |  4 +-
 6 files changed, 41 insertions(+), 79 deletions(-)

diff --git a/api-examples/comments.http b/api-examples/comments.http
index fd797fb83..843b5b82a 100644
--- a/api-examples/comments.http
+++ b/api-examples/comments.http
@@ -20,9 +20,9 @@ X-Token: 7ee15209d8429544dea8123fbdae254f5f79e6da5d720fec3127d9385b6eb9bc
 # Создание ответа на коммент коммента
 POST http://query.rest/api/v1/comments
 Content-Type: application/json
-X-Token: 7ee15209d8429544dea8123fbdae254f5f79e6da5d720fec3127d9385b6eb9bc
+X-Token: 40717d1c056933a15c15a0d8ccd6684cd8ff2805b845d9810a4446c85d2f93c4
 
 {
   "text": "Первый ответ на коммент!",
-  "parent": {"_id":  "670429839c74519426f378bd", "_type":  "comment"}
+  "parent": {"_id": "68056df17e843dad89610a98", "_type": "comment"}
 }
diff --git a/src/components/comment-action/style.css b/src/components/comment-action/style.css
index bad88440b..24f39a64d 100644
--- a/src/components/comment-action/style.css
+++ b/src/components/comment-action/style.css
@@ -43,6 +43,7 @@
 .CommentAction-controls {
   display: flex;
   gap: 16px;
+  flex-wrap: wrap;
 }
 
 .CommentAction_type_alert {
diff --git a/src/containers/article-comments/index.js b/src/containers/article-comments/index.js
index b8260effc..abab9fed6 100644
--- a/src/containers/article-comments/index.js
+++ b/src/containers/article-comments/index.js
@@ -16,6 +16,14 @@ import { listFromFlat } from '../../utils/list-from-flat/list-from-flat';
 function ArticleComments() {
 
   const { t, locale } = useLocale()
+  const [addComment, setAddComment] = useState(false);
+  const [commentValue, setCommentValue] = useState('');
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const replyTo = location.state?.replyTo;
+  const backLink = location.pathname;
+
+
   const select = useSelector(
     state => ({
       article: state.article.data,
@@ -23,7 +31,6 @@ function ArticleComments() {
       comments: state.comments.data,
       commentsCount: state.comments.count,
       commentsWaiting: state.comments.waiting,
-/*      commentsReplyTarget: state.comments.replyTarget,*/
     }),
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
@@ -39,75 +46,41 @@ function ArticleComments() {
     [select.comments]
   );
 
-  const [addComment, setAddComment] = useState(false);
-  const [commentValue, setCommentValue] = useState('');
-  const dispatch = useDispatch();
-
-
-  const location = useLocation();
-  const replyTo = location.state?.replyTo;
-  console.log("location.replyTo", replyTo)
-
-
   useEffect(() => {
-    // Автоскролл до формы ответа, если она появилась
-    const target = document.getElementById('reply');
-
-    console.log("location.target", target)
+    if (!addComment) return;
 
+    const target = document.getElementById('reply');
     if (target) {
       target.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
-  }, [select.comments]); // каждый раз, когда список комментариев меняется
+  }, [select.comments, addComment]);
 
 
   useEffect(() => {
     if (!replyTo) return;
-
-    const didScroll = { current: false }; // локально внутри эффекта — сбрасывается на каждый новый replyTo
-
-    const timeout = setTimeout(() => {
-      console.log('2123214location.targetreplyTo', replyTo);
       const target = document.getElementById(`comment-${replyTo}`);
-      console.log('123123123location.target', target);
-
-      if (target && !didScroll.current) {
+      if (target) {
         target.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        didScroll.current = true;
-      }
-    }, 2000); // Подождать, пока DOM обновится
-
-    return () => clearTimeout(timeout);
-  }, [replyTo]);
-
-
-
-
-
+  }}, [replyTo]);
 
   const callbacks = {
     addToAnswer: useCallback(comment => {
       setAddComment(true)
       setCommentValue(`Мой ответ для ${comment.author} `)
-      dispatch(commentsActions.setReplyTarget2(comment, selectStore.user))
+      dispatch(commentsActions.setReplyAction(comment, selectStore.user))
     }, []),
 
     cancelToAnswer: useCallback(() => {
       setAddComment(false)
       setCommentValue('');
-      dispatch(commentsActions.removeReplyPlaceholder())
-
+      dispatch(commentsActions.removeReplyAction())
     }, []),
 
     addApiToAnswer: useCallback((parent) => {
-      dispatch(commentsActions.addComment(parent, commentValue, () => dispatch(commentsActions.load(select.article._id))));
+      dispatch(commentsActions.addComment(parent, commentValue));
     }, [parent, commentValue]),
   };
 
-
-
-  const backLink = location.pathname;
-
   const renders = {
     item: useCallback(
       item => (
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
index 01ad2322d..542e09d0b 100644
--- a/src/store-redux/comments/actions.js
+++ b/src/store-redux/comments/actions.js
@@ -13,7 +13,6 @@ export default {
         const res = await services.api.request({
           url: `/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=${id}`,
         });
-        console.log('res.data.result.items', res.data.result.items);
         // Список комментариев загружен успешно
         dispatch({ type: 'comments/load-success', payload: { data: res.data.result.items, count: res.data.result.count } });
       } catch (e) {
@@ -26,22 +25,26 @@ export default {
   /**
    * Загрузка комментариев по товару
    */
-  addComment: (parent, text, callback) => {
+  addComment: (parent, text) => {
     return async (dispatch, getState, services) => {
+
       try {
         if (!text?.trim()) return;
         const res = await services.api.request({
           url: `/api/v1/comments`,
           method: 'POST',
           body: JSON.stringify(
-
         {
           "text": text,
           "parent": {...parent}
         })
-        }).then(()=>{
-          callback()
         });
+
+        dispatch({
+          type: 'comments/set-reply-comment',
+          payload: res.data.result
+        });
+
       } catch (e) {
         //Ошибка загрузки
         dispatch({ type: 'comments/load-error' });
@@ -49,20 +52,9 @@ export default {
     };
   },
 
-
-/*  setReplyTarget: (comment) => ({
-    type: 'comments/set-reply-target',
-    payload: {
-      id: comment.value,
-      authorName: comment.author,
-      level: comment.level ?? 0,
-    },
-  }),*/
-
-
-  setReplyTarget2: (comment, user) => {
+  setReplyAction: (comment, user) => {
     return (dispatch) => {
-      dispatch({ type: 'comments/remove-reply-placeholder' });
+      dispatch({ type: 'comments/remove-reply-action' });
 
       const newReply = {
         _id: 'reply',
@@ -82,14 +74,14 @@ export default {
       };
 
       dispatch({
-        type: 'comments/set-reply-target2',
+        type: 'comments/set-reply-action',
         payload: newReply
       });
     };
   },
 
 
-  removeReplyPlaceholder: () => ({
-    type: 'comments/remove-reply-placeholder',
+  removeReplyAction: () => ({
+    type: 'comments/remove-reply-action',
   }),
 };
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
index f07015d94..91c615397 100644
--- a/src/store-redux/comments/reducer.js
+++ b/src/store-redux/comments/reducer.js
@@ -3,12 +3,6 @@ export const initialState = {
   data: [],
   count: 0,
   waiting: false, // признак ожидания загрузки
-/*  replyTarget: {
-    id: '',
-    authorName: '',
-    level: '',
-  }*/
-
 };
 
 // Обработчик действий
@@ -23,14 +17,18 @@ function reducer(state = initialState, action) {
     case 'comments/load-error':
       return { ...state, data: [], count: 0, waiting: false };
 
-/*    case 'comments/set-reply-target':
-      return { ...state, replyTarget: action.payload };*/
+    case 'comments/set-reply-action':
+      return { ...state,
+        data: [...state.data, action.payload] };
 
-    case 'comments/set-reply-target2':
+
+    case 'comments/set-reply-comment':
       return { ...state,
+        count: state.count + 1,
         data: [...state.data, action.payload] };
 
-    case 'comments/remove-reply-placeholder':
+
+    case 'comments/remove-reply-action':
       return {
         ...state,
         data: state.data.filter(comment => comment._id !== 'reply'),
diff --git a/src/utils/list-from-flat/list-from-flat.js b/src/utils/list-from-flat/list-from-flat.js
index 0649bb36e..c1328c9a2 100644
--- a/src/utils/list-from-flat/list-from-flat.js
+++ b/src/utils/list-from-flat/list-from-flat.js
@@ -8,10 +8,8 @@ import treeToList from '../tree-to-list';
  */
 export function listFromFlat(list, key = '_id') {
 
-  console.log("listFromFlatlist", list);
-
   const tree = listToTree(list, key);
-  console.log("listFromFlattree", tree);
+
   return treeToList(tree[0]?.children || [], (item, level) => ({
     value: item[key],
     level,