From 9a4d05c2fa1c73f2ca3deab7415ba5c15bfc5cf6 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 01:35:13 +0400
Subject: [PATCH 01/28] feat: add actions and reducer for comment loading,
 creation and handling errors

---
 src/store-redux/comments/actions.js | 77 +++++++++++++++++++++++++++++
 src/store-redux/comments/reducer.js | 43 ++++++++++++++++
 src/store-redux/exports.js          |  1 +
 3 files changed, 121 insertions(+)
 create mode 100644 src/store-redux/comments/actions.js
 create mode 100644 src/store-redux/comments/reducer.js

diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
new file mode 100644
index 000000000..dae03af8b
--- /dev/null
+++ b/src/store-redux/comments/actions.js
@@ -0,0 +1,77 @@
+import listToTree from '../../utils/list-to-tree';
+
+export default {
+  /**
+   * Загрузка комментариев по ID
+   */
+  load: articleId => {
+    return async (dispatch, getState, services) => {
+      dispatch({ type: 'comments/load-start' });
+
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments?fields=${encodeURIComponent(
+            'items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count',
+          )}&limit=*&search[parent]=${articleId}`,
+        });
+
+        // фильтрация валидных комментариев
+        const validItems = res.data.result.items.filter(item => item._id && !item.isDeleted);
+
+        const tree = listToTree(validItems);
+
+        dispatch({ type: 'comments/load-success', payload: { items: tree } });
+        dispatch({ type: 'comments/set-article-id', payload: { articleId } });
+        dispatch({ type: 'comments/reset-form-target' });
+
+        return Promise.resolve();
+      } catch (e) {
+        dispatch({ type: 'comments/load-error' });
+        return Promise.reject(e);
+      }
+    };
+  },
+
+  /**
+   * Создание комментария или ответа
+   */
+  create: (text, parent) => {
+    return async (dispatch, getState, services) => {
+      dispatch({ type: 'comments/create-start' });
+
+      try {
+        // Создаем комментарий
+        await services.api.request({
+          url: '/api/v1/comments',
+          method: 'POST',
+          body: JSON.stringify({ text, parent }),
+        });
+
+        dispatch({ type: 'comments/create-success' });
+
+        // Перезагружаем комментарии с сервера
+        const articleId = parent._type === 'article' ? parent._id : getState().comments.articleId;
+        const resLoad = await services.api.request({
+          url: `/api/v1/comments?fields=${encodeURIComponent(
+            'items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count',
+          )}&limit=*&search[parent]=${articleId}`,
+        });
+
+        const validItems = resLoad.data.result.items.filter(item => item._id && !item.isDeleted);
+        const tree = listToTree(validItems);
+
+        dispatch({ type: 'comments/load-success', payload: { items: [...tree] } });
+        dispatch({ type: 'comments/set-article-id', payload: { articleId } });
+        dispatch({ type: 'comments/reset-form-target' });
+      } catch (e) {
+        dispatch({
+          type: 'comments/create-error',
+          payload: e.message || 'Ошибка создания',
+        });
+      }
+    };
+  },
+
+  setFormTarget: id => ({ type: 'comments/set-form-target', payload: id }),
+  resetFormTarget: () => ({ type: 'comments/reset-form-target' }),
+};
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..409b2fe0e
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,43 @@
+const initialState = {
+  items: [], // дерево комментариев
+  waiting: false, // загрузка
+  creating: false, // отправка
+  error: null, // ошибка
+  articleId: null, // текущая статья
+  activeFormTargetId: null, // id комментария, к которому пишем ответ
+};
+
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comments/load-start':
+      return { ...state, waiting: true };
+
+    case 'comments/load-success':
+      return { ...state, waiting: false, items: action.payload.items };
+
+    case 'comments/load-error':
+      return { ...state, waiting: false, error: 'Ошибка загрузки комментариев' };
+
+    case 'comments/create-start':
+      return { ...state, creating: true };
+
+    case 'comments/create-success':
+      return { ...state, creating: false };
+
+    case 'comments/create-error':
+      return { ...state, creating: false, error: action.payload || 'Ошибка создания комментария' };
+
+    case 'comments/set-form-target':
+      return { ...state, activeFormTargetId: action.payload };
+
+    case 'comments/reset-form-target':
+      return { ...state, activeFormTargetId: null };
+
+    case 'comments/set-article-id':
+      return { ...state, articleId: action.payload.articleId };
+
+    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';

From cb766f5cc9c0ed9bc26421c2229e961992bfc7dc Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 01:42:17 +0400
Subject: [PATCH 02/28] feat: refactor list-to-tree function for better
 readability and performance

---
 src/utils/list-to-tree/index.js | 41 +++++++++++++++------------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/utils/list-to-tree/index.js b/src/utils/list-to-tree/index.js
index fb4d20a66..62d4e0b32 100644
--- a/src/utils/list-to-tree/index.js
+++ b/src/utils/list-to-tree/index.js
@@ -5,31 +5,26 @@
  * @returns {Array} Корневые узлы
  */
 export default function listToTree(list, key = '_id') {
-  let trees = {};
-  let roots = {};
+  const map = {};
+  const roots = [];
+
+  // Индексируем комментарии по id
   for (const item of list) {
-    // Добавление элемента в индекс узлов и создание свойства children
-    if (!trees[item[key]]) {
-      trees[item[key]] = item;
-      trees[item[key]].children = [];
-      // Ещё никто не ссылался, поэтому пока считаем корнем
-      roots[item[key]] = trees[item[key]];
-    } else {
-      trees[item[key]] = Object.assign(trees[item[key]], item);
-    }
+    if (!item[key]) continue; // защита от пустых _id
+    map[item[key]] = { ...item, children: [] };
+  }
 
-    // Если элемент имеет родителя, то добавляем его в подчиненные родителя
-    if (item.parent?.[key]) {
-      // Если родителя ещё нет в индексе, то индекс создаётся, ведь _id родителя известен
-      if (!trees[item.parent[key]]) {
-        trees[item.parent[key]] = { children: [] };
-        roots[item.parent[key]] = trees[item.parent[key]];
-      }
-      // Добавления в подчиненные родителя
-      trees[item.parent[key]].children.push(trees[item[key]]);
-      // Так как элемент добавлен к родителю, то он уже не является корневым
-      if (roots[item[key]]) delete roots[item[key]];
+  // Формируем дерево
+  for (const item of list) {
+    const id = item[key];
+    const parentId = item.parent?.[key];
+
+    if (parentId && map[parentId]) {
+      map[parentId].children.push(map[id]);
+    } else {
+      roots.push(map[id]);
     }
   }
-  return Object.values(roots);
+
+  return roots;
 }

From e1b3aed213e58dd34a64ce96446846cf28068454 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 01:42:58 +0400
Subject: [PATCH 03/28] feat: refactor article reducer to handle loading state
 more effectively

---
 src/store-redux/article/reducer.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/store-redux/article/reducer.js b/src/store-redux/article/reducer.js
index 1df8020ce..b79ee6636 100644
--- a/src/store-redux/article/reducer.js
+++ b/src/store-redux/article/reducer.js
@@ -1,6 +1,5 @@
-// Начальное состояние
 export const initialState = {
-  data: {},
+  data: {}, // данные о товаре
   waiting: false, // признак ожидания загрузки
 };
 
@@ -8,16 +7,15 @@ export const initialState = {
 function reducer(state = initialState, action) {
   switch (action.type) {
     case 'article/load-start':
-      return { ...state, data: {}, waiting: true };
+      return { ...state, waiting: true, data: {} };
 
     case 'article/load-success':
-      return { ...state, data: action.payload.data, waiting: false };
+      return { ...state, waiting: false, data: action.payload.data };
 
     case 'article/load-error':
-      return { ...state, data: {}, waiting: false }; //@todo текст ошибки сохранять?
+      return { ...state, waiting: false }; // можно добавить error, если нужно
 
     default:
-      // Нет изменений
       return state;
   }
 }

From 1e2f2359b8fe561e03a2fa61d012bf8fe408e00b Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 01:44:01 +0400
Subject: [PATCH 04/28] feat: add CommentForm component with styles

---
 src/components/comment-form/index.js  | 47 +++++++++++++++++++++++++++
 src/components/comment-form/style.css | 24 ++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 src/components/comment-form/index.js
 create mode 100644 src/components/comment-form/style.css

diff --git a/src/components/comment-form/index.js b/src/components/comment-form/index.js
new file mode 100644
index 000000000..4b2b8fe13
--- /dev/null
+++ b/src/components/comment-form/index.js
@@ -0,0 +1,47 @@
+import { memo, useState } from 'react';
+import PropTypes from 'prop-types';
+import './style.css';
+import Button from '../button';
+
+function CommentForm({ onSubmit, onCancel, isReply }) {
+  const [text, setText] = useState('');
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    const trimmed = text.trim();
+    if (!trimmed) return;
+
+    await onSubmit(trimmed);
+    setText('');
+    if (onCancel) onCancel();
+  };
+
+  return (
+    <form className="comment-form" onSubmit={handleSubmit} style={{ marginTop: '1rem' }}>
+      <span>{isReply ? 'Новый ответ' : 'Новый комментарий'}</span>
+      <textarea
+        className="comment-form__textarea"
+        value={text}
+        onChange={e => setText(e.target.value)}
+        required
+      />
+      <div className="comment-form__controls" style={{ marginTop: '0.5rem' }}>
+        <Button type="submit" style="primary" title="Отправить" />
+        {onCancel && <Button style="outline" onClick={onCancel} title="Отмена" />}
+      </div>
+    </form>
+  );
+}
+
+CommentForm.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func,
+  isReply: PropTypes.bool,
+};
+
+CommentForm.defaultProps = {
+  onCancel: null,
+  isReply: false,
+};
+
+export default memo(CommentForm);
diff --git a/src/components/comment-form/style.css b/src/components/comment-form/style.css
new file mode 100644
index 000000000..0152d106e
--- /dev/null
+++ b/src/components/comment-form/style.css
@@ -0,0 +1,24 @@
+.comment-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: 182px;
+}
+.comment-form span {
+  font-weight: 700;
+}
+.comment-form__textarea {
+  width: 100%;
+  height: 88px;
+  padding: 12px;
+  font-size: 16px;
+  line-height: 1.4;
+  border-color: #D3D3D3;
+  border-radius: 4px;
+  background-color: #FFFFFF;
+  resize: none;
+}
+.comment-form__controls {
+  display: flex;
+  gap: 16px;
+}

From 5e69e7ab7451edf215d197a30b04f15e843beb19 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 01:44:14 +0400
Subject: [PATCH 05/28] feat: add CommentItem component with styles

---
 src/components/comment-item/index.js  | 89 +++++++++++++++++++++++++++
 src/components/comment-item/style.css | 27 ++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 src/components/comment-item/index.js
 create mode 100644 src/components/comment-item/style.css

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
new file mode 100644
index 000000000..7b4b04102
--- /dev/null
+++ b/src/components/comment-item/index.js
@@ -0,0 +1,89 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import CommentForm from '../comment-form';
+import './style.css';
+
+function CommentItem({
+  comment,
+  onReply,
+  onCancel,
+  onSend,
+  activeFormTargetId,
+  isAuthorized,
+  user,
+}) {
+  const isReplying = activeFormTargetId === comment._id;
+
+  const handleReplyClick = () => {
+    onReply(comment._id);
+  };
+
+  const handleSubmitReply = text => {
+    onSend(text, { _id: comment._id, _type: 'comment' });
+  };
+
+  return (
+    <div className="comment-item" key={String(comment._id)}>
+      <div className="comment">
+        <div className="comment-item__info">
+          <strong>{comment.author?.profile?.name || 'Аноним'}</strong>{' '}
+          <span style={{ fontSize: '0.85em', color: '#888' }}>
+            {new Date(comment.dateCreate)
+              .toLocaleString('ru-RU', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+              })
+              .replace(' г.', '')
+              .replace(',', ' в')}{' '}
+          </span>
+        </div>
+
+        <div className="comment-item__text">{comment.text}</div>
+        {!isReplying && (
+          <button
+            className="comment-item__reply"
+            style={{ padding: 0, color: 'var(--primary)' }}
+            onClick={isAuthorized ? handleReplyClick : undefined}
+          >
+            Ответить
+          </button>
+        )}
+      </div>
+      {isReplying && (
+        <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true} />
+      )}
+
+      {Array.isArray(comment.children) && comment.children.length > 0 && (
+        <div className="comment-item__children">
+          {comment.children.map(child => (
+            <CommentItem
+              key={String(child._id)}
+              comment={child}
+              onReply={onReply}
+              onCancel={onCancel}
+              onSend={onSend}
+              activeFormTargetId={activeFormTargetId}
+              isAuthorized={isAuthorized}
+              user={user}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+CommentItem.propTypes = {
+  comment: PropTypes.object.isRequired,
+  onReply: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onSend: PropTypes.func.isRequired,
+  activeFormTargetId: PropTypes.string,
+  isAuthorized: PropTypes.bool,
+  user: PropTypes.object,
+};
+
+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..5916588b0
--- /dev/null
+++ b/src/components/comment-item/style.css
@@ -0,0 +1,27 @@
+.comment {
+  padding: 8px 0;
+}
+.comment-item__children {
+  margin-left: 1rem;
+}
+
+.comment-item__info {
+  display: flex;
+  gap: 12px;
+  align-items: baseline;
+}
+.comment-item__info span {
+  font-size: 16px;
+  font-weight: 400;
+  color: #666666;
+}
+.comment-item__text {
+  font-weight: 400;
+  color: #000000;
+  font-size: 18px;
+  padding: 6px 0;
+}
+
+.comment-item__reply button {
+  color:var(--primary)
+}

From 4c67e417c4eb699421597805c42f74d9f3a0cdb5 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 01:45:16 +0400
Subject: [PATCH 06/28] feat: add comments loading on article page

---
 src/app/article/index.js                 | 19 +++--
 src/containers/comments-section/index.js | 95 ++++++++++++++++++++++++
 2 files changed, 106 insertions(+), 8 deletions(-)
 create mode 100644 src/containers/comments-section/index.js

diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..9f3cbc94b 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -14,18 +14,17 @@ import { useDispatch, useSelector } from 'react-redux';
 import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
 import HeadLayout from '../../components/head-layout';
+import CommentsSection from '../../containers/comments-section';
+import commentsActions from '../../store-redux/comments/actions';
 
 function Article() {
   const store = useStore();
-
   const dispatch = useDispatch();
-  // Параметры из пути /articles/:id
-
   const params = useParams();
 
   useInit(() => {
-    //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
+    dispatch(commentsActions.load(params.id));
   }, [params.id]);
 
   const select = useSelector(
@@ -34,12 +33,11 @@ function Article() {
       waiting: state.article.waiting,
     }),
     shallowequal,
-  ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
+  );
 
   const { t } = useTranslate();
 
   const callbacks = {
-    // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
   };
 
@@ -48,13 +46,18 @@ function Article() {
       <HeadLayout>
         <TopHead />
       </HeadLayout>
-      <Head title={select.article.title}>
+      <Head title={select.article?.title || '...'}>
         <LocaleSelect />
       </Head>
       <PageLayout>
         <Navigation />
         <Spinner active={select.waiting}>
-          <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+          {select.article && select.article._id && (
+            <>
+              <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+              <CommentsSection articleId={select.article._id} />
+            </>
+          )}
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/containers/comments-section/index.js b/src/containers/comments-section/index.js
new file mode 100644
index 000000000..1fad5e2c2
--- /dev/null
+++ b/src/containers/comments-section/index.js
@@ -0,0 +1,95 @@
+import { memo, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+
+import CommentItem from '../../components/comment-item';
+import CommentForm from '../../components/comment-form';
+import commentsActions from '../../store-redux/comments/actions';
+import useStore from '../../hooks/use-store';
+
+function CommentsSection({ articleId }) {
+  const dispatch = useDispatch();
+  const store = useStore();
+  const navigate = useNavigate();
+
+  const [isAuthorized, setIsAuthorized] = useState(store.getState().session.exists);
+  const [user, setUser] = useState(store.getState().profile.data);
+
+  useEffect(() => {
+    const unsubscribe = store.subscribe(state => {
+      setIsAuthorized(state.session.exists);
+      setUser(state.profile.data);
+    });
+    return unsubscribe;
+  }, [store]);
+
+  const commentsTree = useSelector(state => state.comments.items);
+  const activeFormTargetId = useSelector(state => state.comments.activeFormTargetId);
+
+  const countComments = list => {
+    let count = 0;
+    const walk = items => {
+      for (const item of items) {
+        count += 1;
+        if (Array.isArray(item.children)) walk(item.children);
+      }
+    };
+    walk(list);
+    return count;
+  };
+
+  const totalComments = countComments(commentsTree);
+
+  const handleReply = id => dispatch(commentsActions.setFormTarget(id));
+  const handleCancel = () => dispatch(commentsActions.resetFormTarget());
+  const handleSend = (text, parent) => dispatch(commentsActions.create(text, parent));
+  const handleLoginRedirect = () => navigate('/login');
+  const waiting = useSelector(state => state.comments.waiting);
+  return (
+    <div className="comments">
+      <h2 style={{ padding: '20px 0', fontFamily: 'var(--second-font-family)' }}>
+        Комментарии ({totalComments})
+      </h2>
+
+      {waiting ? (
+        <p>Загрузка комментариев...</p>
+      ) : (
+        commentsTree.map((comment, i) => (
+          <CommentItem
+            key={`${comment._id}-${i}`}
+            comment={comment}
+            onReply={handleReply}
+            onCancel={handleCancel}
+            onSend={handleSend}
+            activeFormTargetId={activeFormTargetId}
+            isAuthorized={isAuthorized}
+            user={user}
+          />
+        ))
+      )}
+
+      {isAuthorized ? (
+        !activeFormTargetId && (
+          <CommentForm onSubmit={text => handleSend(text, { _id: articleId, _type: 'article' })} />
+        )
+      ) : (
+        <p>
+          <span
+            onClick={handleLoginRedirect}
+            style={{ cursor: 'pointer', color: 'var(--primary)' }}
+          >
+            Войдите
+          </span>
+          , чтобы иметь возможность комментировать
+        </p>
+      )}
+    </div>
+  );
+}
+
+CommentsSection.propTypes = {
+  articleId: PropTypes.string.isRequired,
+};
+
+export default memo(CommentsSection);

From 22f71e227e8902fa0dae13ab554487a4129be0cb Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 01:48:00 +0400
Subject: [PATCH 07/28] fix: remove deprecated defaultProps usage in
 CommentForm

---
 src/components/comment-form/index.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/comment-form/index.js b/src/components/comment-form/index.js
index 4b2b8fe13..681466db1 100644
--- a/src/components/comment-form/index.js
+++ b/src/components/comment-form/index.js
@@ -39,9 +39,4 @@ CommentForm.propTypes = {
   isReply: PropTypes.bool,
 };
 
-CommentForm.defaultProps = {
-  onCancel: null,
-  isReply: false,
-};
-
 export default memo(CommentForm);

From 540d78e806ca379103fc8accac06abe879e418b9 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 01:53:50 +0400
Subject: [PATCH 08/28] feat: redirect unauthorized users to login on reply
 click

---
 src/components/comment-item/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 7b4b04102..938a2d9e4 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -2,6 +2,7 @@ import { memo } from 'react';
 import PropTypes from 'prop-types';
 import CommentForm from '../comment-form';
 import './style.css';
+import { useNavigate } from 'react-router-dom';
 
 function CommentItem({
   comment,
@@ -13,7 +14,8 @@ function CommentItem({
   user,
 }) {
   const isReplying = activeFormTargetId === comment._id;
-
+  const navigate = useNavigate();
+  const handleLoginRedirect = () => navigate('/login');
   const handleReplyClick = () => {
     onReply(comment._id);
   };
@@ -46,7 +48,7 @@ function CommentItem({
           <button
             className="comment-item__reply"
             style={{ padding: 0, color: 'var(--primary)' }}
-            onClick={isAuthorized ? handleReplyClick : undefined}
+            onClick={isAuthorized ? handleReplyClick : handleLoginRedirect}
           >
             Ответить
           </button>

From 170a813840d6cd37a9efbb9fae719163cd19cdb0 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 04:29:12 +0400
Subject: [PATCH 09/28] feat: added new I18n service for language management
 and translation

---
 src/services/I18n.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/services/I18n.js

diff --git a/src/services/I18n.js b/src/services/I18n.js
new file mode 100644
index 000000000..e3ef7ea94
--- /dev/null
+++ b/src/services/I18n.js
@@ -0,0 +1,33 @@
+import translate from '../i18n/translate';
+
+export default class I18n {
+  constructor(defaultLocale = 'ru') {
+    this.locale = defaultLocale;
+    this.listeners = [];
+  }
+
+  getLocale() {
+    return this.locale;
+  }
+
+  getAvailableLocales() {
+    return [
+      { value: 'ru', title: 'Русский' },
+      { value: 'en', title: 'English' },
+    ];
+  }
+
+  setLocale(newLocale) {
+    this.locale = newLocale;
+    this.listeners.forEach(fn => fn(this.locale));
+  }
+
+  translate = (key, plural) => translate(this.locale, key, plural);
+
+  onChange(fn) {
+    this.listeners.push(fn);
+    return () => {
+      this.listeners = this.listeners.filter(listener => listener !== fn);
+    };
+  }
+}

From 24e6d3c1eea59e2952d8e2dee3e10e25124fb13f Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 04:30:06 +0400
Subject: [PATCH 10/28] chore: integrated I18n service into Services with
 Accept-Language header

---
 src/services.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/services.js b/src/services.js
index a32b14d57..7c44b47f8 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 I18n from './services/I18n';
 
 class Services {
   constructor(config) {
@@ -8,7 +9,26 @@ class Services {
   }
 
   /**
-   * Сервис АПИ
+   * Сервис мультиязычности
+   * @returns {I18n}
+   */
+  get i18n() {
+    if (!this._i18n) {
+      this._i18n = new I18n('ru'); // язык по умолчанию
+
+      // Установить заголовок в API при инициализации
+      this.api.setHeader('Accept-Language', this._i18n.getLocale());
+
+      // При смене языка — обновить заголовок
+      this._i18n.onChange(lang => {
+        this.api.setHeader('Accept-Language', lang);
+      });
+    }
+    return this._i18n;
+  }
+
+  /**
+   * Сервис API
    * @returns {APIService}
    */
   get api() {
@@ -19,7 +39,7 @@ class Services {
   }
 
   /**
-   * Сервис Store
+   * Кастомный store
    * @returns {Store}
    */
   get store() {

From fbd601a6c4c67b73912f4952736a9774a8aace37 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 04:30:43 +0400
Subject: [PATCH 11/28] chore: updated useTranslate hook to use I18n service
 instead of context

---
 src/hooks/use-translate.js | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..decb866e2 100644
--- a/src/hooks/use-translate.js
+++ b/src/hooks/use-translate.js
@@ -1,9 +1,24 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
+import { useEffect, useState } from 'react';
+import useServices from './use-services';
 
 /**
- * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
+ * Хук для доступа к переводу и текущему языку.
+ * Использует i18n-сервис напрямую, без контекста.
  */
 export default function useTranslate() {
-  return useContext(I18nContext);
+  const { i18n } = useServices();
+
+  const [locale, setLocale] = useState(i18n.getLocale());
+
+  useEffect(() => {
+    const unsubscribe = i18n.onChange(setLocale);
+    return unsubscribe;
+  }, [i18n]);
+
+  return {
+    t: i18n.translate,
+    locale,
+    setLocale: i18n.setLocale.bind(i18n),
+    getAvailableLocales: i18n.getAvailableLocales.bind(i18n),
+  };
 }

From 9e1b3f9dc164f51ea2cc770c870edeff861e0e74 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 04:31:25 +0400
Subject: [PATCH 12/28] fix: replaced hardcoded labels with i18n translations
 in component

---
 src/app/article/index.js             |  5 ++---
 src/app/main/index.js                |  5 ++---
 src/components/profile-card/index.js | 10 ++++++----
 src/containers/catalog-list/index.js |  9 +++------
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/app/article/index.js b/src/app/article/index.js
index 9f3cbc94b..728bae851 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -21,11 +21,12 @@ function Article() {
   const store = useStore();
   const dispatch = useDispatch();
   const params = useParams();
+  const { locale, t } = useTranslate();
 
   useInit(() => {
     dispatch(articleActions.load(params.id));
     dispatch(commentsActions.load(params.id));
-  }, [params.id]);
+  }, [params.id, locale]);
 
   const select = useSelector(
     state => ({
@@ -35,8 +36,6 @@ function Article() {
     shallowequal,
   );
 
-  const { t } = useTranslate();
-
   const callbacks = {
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
   };
diff --git a/src/app/main/index.js b/src/app/main/index.js
index d9fb1c6c2..6bb464722 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -13,17 +13,16 @@ import HeadLayout from '../../components/head-layout';
 
 function Main() {
   const store = useStore();
+  const { t, locale } = useTranslate();
 
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
-    [],
+    [locale], // чтобы данные обновлялись при смене языка
     true,
   );
 
-  const { t } = useTranslate();
-
   return (
     <>
       <HeadLayout>
diff --git a/src/components/profile-card/index.js b/src/components/profile-card/index.js
index 121610ff4..6b2cc1153 100644
--- a/src/components/profile-card/index.js
+++ b/src/components/profile-card/index.js
@@ -1,24 +1,26 @@
 import { memo } from 'react';
 import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
+import useTranslate from '../../hooks/use-translate';
 import './style.css';
 
 function ProfileCard({ data }) {
   const cn = bem('ProfileCard');
+  const { t } = useTranslate();
 
   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.email')}:</div>
         <div className={cn('value')}>{data?.email}</div>
       </div>
     </div>
diff --git a/src/containers/catalog-list/index.js b/src/containers/catalog-list/index.js
index d6af63ead..c28988e16 100644
--- a/src/containers/catalog-list/index.js
+++ b/src/containers/catalog-list/index.js
@@ -20,12 +20,11 @@ function CatalogList() {
     waiting: state.catalog.waiting,
   }));
 
+  const { t } = useTranslate();
+
   const callbacks = {
-    // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
-    // Пагинация
     onPaginate: useCallback(page => store.actions.catalog.setParams({ page }), [store]),
-    // генератор ссылки для пагинатора
     makePaginatorLink: useCallback(
       page => {
         return `?${new URLSearchParams({
@@ -39,8 +38,6 @@ function CatalogList() {
     ),
   };
 
-  const { t } = useTranslate();
-
   const renders = {
     item: useCallback(
       item => (
@@ -51,7 +48,7 @@ function CatalogList() {
           labelAdd={t('article.add')}
         />
       ),
-      [callbacks.addToBasket, t],
+      [callbacks.addToBasket, t], // теперь t в зависимостях
     ),
   };
 

From cc87d61310d78431f86463e0cd4a1ce93e40f076 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 04:31:42 +0400
Subject: [PATCH 13/28] chore: added profile section translations to ru/en
 dictionaries

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

diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 0ebbcf8f2..de8aee9a9 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -22,5 +22,9 @@
   "auth.login-placeholder": "Enter login",
   "auth.password-placeholder": "Enter password",
   "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
+  "session.signOut": "Sign Out",
+  "profile.title": "Profile",
+  "profile.name": "Name",
+  "profile.phone": "Phone",
+  "profile.email": "Email"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index a18fb845e..657ab2160 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -24,5 +24,9 @@
   "auth.login-placeholder": "Введите логин",
   "auth.password-placeholder": "Введите пароль",
   "session.signIn": "Вход",
-  "session.signOut": "Выход"
+  "session.signOut": "Выход",
+  "profile.title": "Профиль",
+  "profile.name": "Имя",
+  "profile.phone": "Телефон",
+  "profile.email": "Email"
 }

From e6ff599f3a18bce970eb255de918e0b73b81d52c Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Fri, 18 Apr 2025 04:33:03 +0400
Subject: [PATCH 14/28] feat: dynamic locale options from I18n service in
 LocaleSelect

---
 src/containers/locale-select/index.js | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/containers/locale-select/index.js b/src/containers/locale-select/index.js
index a60df2a9a..fa100234b 100644
--- a/src/containers/locale-select/index.js
+++ b/src/containers/locale-select/index.js
@@ -1,23 +1,13 @@
-import { memo, useCallback, useMemo } from 'react';
-import useStore from '../../hooks/use-store';
-import useSelector from '../../hooks/use-selector';
+import { memo, useMemo } from 'react';
 import useTranslate from '../../hooks/use-translate';
 import Select from '../../components/select';
 
 function LocaleSelect() {
-  const { lang, setLang } = useTranslate();
+  const { locale, setLocale, getAvailableLocales } = useTranslate();
 
-  const options = {
-    lang: useMemo(
-      () => [
-        { value: 'ru', title: 'Русский' },
-        { value: 'en', title: 'English' },
-      ],
-      [],
-    ),
-  };
+  const options = useMemo(() => getAvailableLocales(), [getAvailableLocales]);
 
-  return <Select onChange={setLang} value={lang} options={options.lang} size="small" text />;
+  return <Select onChange={setLocale} value={locale} options={options} size="small" text />;
 }
 
 export default memo(LocaleSelect);

From 2e25c736dbc345fb812fe128120d8d467b1670d9 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Sat, 19 Apr 2025 18:54:13 +0400
Subject: [PATCH 15/28] fix: commit

---
 src/index.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/index.js b/src/index.js
index f49db385a..f5f59ee27 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,8 @@
-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 {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';
@@ -18,7 +18,7 @@ root.render(
     <ServicesContext.Provider value={services}>
       <I18nProvider>
         <BrowserRouter>
-          <App />
+          <App/>
         </BrowserRouter>
       </I18nProvider>
     </ServicesContext.Provider>

From b575835b4a22ef332c42e6de5b5850550cee0b7e Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Sat, 19 Apr 2025 20:42:28 +0400
Subject: [PATCH 16/28] feat: add dynamic indentation for nested comments

---
 src/components/comment-item/index.js  | 33 +++++++++++++++------------
 src/components/comment-item/style.css |  3 ---
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 938a2d9e4..b9a8d75ff 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -1,18 +1,19 @@
-import { memo } from 'react';
+import {memo} from 'react';
 import PropTypes from 'prop-types';
 import CommentForm from '../comment-form';
 import './style.css';
-import { useNavigate } from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 
 function CommentItem({
-  comment,
-  onReply,
-  onCancel,
-  onSend,
-  activeFormTargetId,
-  isAuthorized,
-  user,
-}) {
+                       comment,
+                       onReply,
+                       onCancel,
+                       onSend,
+                       activeFormTargetId,
+                       isAuthorized,
+                       user,
+                       level = 0
+                     }) {
   const isReplying = activeFormTargetId === comment._id;
   const navigate = useNavigate();
   const handleLoginRedirect = () => navigate('/login');
@@ -21,15 +22,15 @@ function CommentItem({
   };
 
   const handleSubmitReply = text => {
-    onSend(text, { _id: comment._id, _type: 'comment' });
+    onSend(text, {_id: comment._id, _type: 'comment'});
   };
 
   return (
-    <div className="comment-item" key={String(comment._id)}>
+    <div className="comment-item" style={{marginLeft: `${Math.min(level, 4) * 40}px`}} key={String(comment._id)}>
       <div className="comment">
         <div className="comment-item__info">
           <strong>{comment.author?.profile?.name || 'Аноним'}</strong>{' '}
-          <span style={{ fontSize: '0.85em', color: '#888' }}>
+          <span style={{fontSize: '0.85em', color: '#888'}}>
             {new Date(comment.dateCreate)
               .toLocaleString('ru-RU', {
                 day: 'numeric',
@@ -47,7 +48,7 @@ function CommentItem({
         {!isReplying && (
           <button
             className="comment-item__reply"
-            style={{ padding: 0, color: 'var(--primary)' }}
+            style={{padding: 0, color: 'var(--primary)'}}
             onClick={isAuthorized ? handleReplyClick : handleLoginRedirect}
           >
             Ответить
@@ -55,7 +56,7 @@ function CommentItem({
         )}
       </div>
       {isReplying && (
-        <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true} />
+        <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true}/>
       )}
 
       {Array.isArray(comment.children) && comment.children.length > 0 && (
@@ -70,6 +71,7 @@ function CommentItem({
               activeFormTargetId={activeFormTargetId}
               isAuthorized={isAuthorized}
               user={user}
+              level={level + 1}
             />
           ))}
         </div>
@@ -86,6 +88,7 @@ CommentItem.propTypes = {
   activeFormTargetId: PropTypes.string,
   isAuthorized: PropTypes.bool,
   user: PropTypes.object,
+  level: PropTypes.number,
 };
 
 export default memo(CommentItem);
diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
index 5916588b0..5090b8c52 100644
--- a/src/components/comment-item/style.css
+++ b/src/components/comment-item/style.css
@@ -1,9 +1,6 @@
 .comment {
   padding: 8px 0;
 }
-.comment-item__children {
-  margin-left: 1rem;
-}
 
 .comment-item__info {
   display: flex;

From 4e8898e98ab2ce641a84f793d593c23eb33948dc Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Sat, 19 Apr 2025 20:54:46 +0400
Subject: [PATCH 17/28] fix: update comment item typography to match Figma spec
 (12px, weights)

---
 src/components/comment-item/index.js  |  2 +-
 src/components/comment-item/style.css | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index b9a8d75ff..cb65de874 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -30,7 +30,7 @@ function CommentItem({
       <div className="comment">
         <div className="comment-item__info">
           <strong>{comment.author?.profile?.name || 'Аноним'}</strong>{' '}
-          <span style={{fontSize: '0.85em', color: '#888'}}>
+          <span>
             {new Date(comment.dateCreate)
               .toLocaleString('ru-RU', {
                 day: 'numeric',
diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
index 5090b8c52..59f66c6df 100644
--- a/src/components/comment-item/style.css
+++ b/src/components/comment-item/style.css
@@ -2,20 +2,26 @@
   padding: 8px 0;
 }
 
+.comment-item__info strong {
+  font-size: 12px;
+  font-weight: 700;
+}
+
 .comment-item__info {
   display: flex;
   gap: 12px;
   align-items: baseline;
 }
+
 .comment-item__info span {
-  font-size: 16px;
+  font-size: 12px;
   font-weight: 400;
   color: #666666;
 }
 .comment-item__text {
   font-weight: 400;
   color: #000000;
-  font-size: 18px;
+  font-size: 14px;
   padding: 6px 0;
 }
 

From e341566a51a64f559339c9affef741f2c40e9833 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Sat, 19 Apr 2025 21:37:57 +0400
Subject: [PATCH 18/28] fix: prevent visual and DOM nesting overflow in comment
 thread

---
 src/components/comment-item/index.js     | 16 ++++++++++------
 src/containers/comments-section/index.js |  1 +
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index cb65de874..3c14ebcd6 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -12,7 +12,7 @@ function CommentItem({
                        activeFormTargetId,
                        isAuthorized,
                        user,
-                       level = 0
+                       level
                      }) {
   const isReplying = activeFormTargetId === comment._id;
   const navigate = useNavigate();
@@ -24,9 +24,13 @@ function CommentItem({
   const handleSubmitReply = text => {
     onSend(text, {_id: comment._id, _type: 'comment'});
   };
-
+  const MAX_INDENT_LEVEL = 4;
   return (
-    <div className="comment-item" style={{marginLeft: `${Math.min(level, 4) * 40}px`}} key={String(comment._id)}>
+    <div className="comment-item"
+         style={{
+           marginLeft: `${Math.min(level, 4) * 40}px`,
+           // border: '1px dashed red',
+         }} key={String(comment._id)}>
       <div className="comment">
         <div className="comment-item__info">
           <strong>{comment.author?.profile?.name || 'Аноним'}</strong>{' '}
@@ -59,8 +63,8 @@ function CommentItem({
         <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true}/>
       )}
 
-      {Array.isArray(comment.children) && comment.children.length > 0 && (
-        <div className="comment-item__children">
+      {level < MAX_INDENT_LEVEL && Array.isArray(comment.children) && comment.children.length > 0 && (
+        <>
           {comment.children.map(child => (
             <CommentItem
               key={String(child._id)}
@@ -74,7 +78,7 @@ function CommentItem({
               level={level + 1}
             />
           ))}
-        </div>
+        </>
       )}
     </div>
   );
diff --git a/src/containers/comments-section/index.js b/src/containers/comments-section/index.js
index 1fad5e2c2..466b06102 100644
--- a/src/containers/comments-section/index.js
+++ b/src/containers/comments-section/index.js
@@ -65,6 +65,7 @@ function CommentsSection({ articleId }) {
             activeFormTargetId={activeFormTargetId}
             isAuthorized={isAuthorized}
             user={user}
+            level={0}
           />
         ))
       )}

From 3448118828c40a5a55abce086af98fcd8e3d1524 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Sat, 19 Apr 2025 21:44:14 +0400
Subject: [PATCH 19/28] feat: add forced word wrap to prevent overflow of long
 text in comments

---
 src/components/comment-item/style.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
index 59f66c6df..b71980230 100644
--- a/src/components/comment-item/style.css
+++ b/src/components/comment-item/style.css
@@ -23,6 +23,9 @@
   color: #000000;
   font-size: 14px;
   padding: 6px 0;
+
+  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .comment-item__reply button {

From a477609744aae10f020345d50cc9cd212b698752 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Sat, 19 Apr 2025 22:18:29 +0400
Subject: [PATCH 20/28] fix: refresh user state after logout to update comment
 styles

---
 src/components/comment-item/index.js     | 5 ++++-
 src/containers/comments-section/index.js | 3 +++
 src/store/session/index.js               | 5 +++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 3c14ebcd6..a3fbdf2ca 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -25,6 +25,7 @@ function CommentItem({
     onSend(text, {_id: comment._id, _type: 'comment'});
   };
   const MAX_INDENT_LEVEL = 4;
+  console.log(user._id)
   return (
     <div className="comment-item"
          style={{
@@ -33,7 +34,9 @@ function CommentItem({
          }} key={String(comment._id)}>
       <div className="comment">
         <div className="comment-item__info">
-          <strong>{comment.author?.profile?.name || 'Аноним'}</strong>{' '}
+          <strong style={{
+            color: comment.author?._id === user?._id ? '#666' : undefined,
+          }}>{comment.author?.profile?.name || 'Аноним'}</strong>{' '}
           <span>
             {new Date(comment.dateCreate)
               .toLocaleString('ru-RU', {
diff --git a/src/containers/comments-section/index.js b/src/containers/comments-section/index.js
index 466b06102..55d9c9e9b 100644
--- a/src/containers/comments-section/index.js
+++ b/src/containers/comments-section/index.js
@@ -21,6 +21,9 @@ function CommentsSection({ articleId }) {
       setIsAuthorized(state.session.exists);
       setUser(state.profile.data);
     });
+    if (store.getState().session.exists && !store.getState().profile.data._id) {
+      store.actions.profile.load();
+    }
     return unsubscribe;
   }, [store]);
 
diff --git a/src/store/session/index.js b/src/store/session/index.js
index 32fecf0c4..9c863c31a 100644
--- a/src/store/session/index.js
+++ b/src/store/session/index.js
@@ -86,6 +86,11 @@ class SessionState extends StoreModule {
       console.error(error);
     }
     this.setState({ ...this.initState(), waiting: false });
+    this.services.store.setState({
+      ...this.services.store.getState(),
+      session: { ...this.initState(), waiting: false },
+      profile: { data: {} }
+    }, 'Выход');
   }
 
   /**

From ad13b595306b79951843ec0ea32c22b546849211 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Sat, 19 Apr 2025 22:31:52 +0400
Subject: [PATCH 21/28] feat: add AuthHint component for unauthorized reply
 prompt

---
 src/components/auth-hint/index.js        | 22 ++++++++++++++++++++++
 src/components/comment-item/index.js     | 16 ++++++++++++----
 src/containers/comments-section/index.js | 16 ++++------------
 3 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 src/components/auth-hint/index.js

diff --git a/src/components/auth-hint/index.js b/src/components/auth-hint/index.js
new file mode 100644
index 000000000..80b7265ab
--- /dev/null
+++ b/src/components/auth-hint/index.js
@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import {useNavigate} from "react-router-dom";
+
+function AuthHint() {
+  const navigate = useNavigate();
+  const handleLoginRedirect = () => navigate('/login');
+  return (
+    <>
+      <p>
+          <span
+            onClick={handleLoginRedirect}
+            style={{cursor: 'pointer', color: 'var(--primary)'}}
+          >
+            Войдите
+          </span>
+        , чтобы иметь возможность комментировать
+      </p>
+    </>
+  );
+}
+
+export default memo(AuthHint);
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index a3fbdf2ca..88bd912b3 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import CommentForm from '../comment-form';
 import './style.css';
 import {useNavigate} from 'react-router-dom';
+import AuthHint from "../auth-hint";
 
 function CommentItem({
                        comment,
@@ -16,7 +17,6 @@ function CommentItem({
                      }) {
   const isReplying = activeFormTargetId === comment._id;
   const navigate = useNavigate();
-  const handleLoginRedirect = () => navigate('/login');
   const handleReplyClick = () => {
     onReply(comment._id);
   };
@@ -56,16 +56,24 @@ function CommentItem({
           <button
             className="comment-item__reply"
             style={{padding: 0, color: 'var(--primary)'}}
-            onClick={isAuthorized ? handleReplyClick : handleLoginRedirect}
+            onClick={() => {
+              if (isAuthorized) {
+                handleReplyClick();
+              } else {
+                onReply(comment._id);
+              }
+            }}
           >
             Ответить
           </button>
         )}
       </div>
-      {isReplying && (
+      {isReplying && isAuthorized && (
         <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true}/>
       )}
-
+      {!isAuthorized && isReplying && (
+        <AuthHint/>
+      )}
       {level < MAX_INDENT_LEVEL && Array.isArray(comment.children) && comment.children.length > 0 && (
         <>
           {comment.children.map(child => (
diff --git a/src/containers/comments-section/index.js b/src/containers/comments-section/index.js
index 55d9c9e9b..abc645e5b 100644
--- a/src/containers/comments-section/index.js
+++ b/src/containers/comments-section/index.js
@@ -1,17 +1,17 @@
 import { memo, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 
 import CommentItem from '../../components/comment-item';
 import CommentForm from '../../components/comment-form';
 import commentsActions from '../../store-redux/comments/actions';
 import useStore from '../../hooks/use-store';
+import AuthHint from "../../components/auth-hint";
 
 function CommentsSection({ articleId }) {
   const dispatch = useDispatch();
   const store = useStore();
-  const navigate = useNavigate();
+
 
   const [isAuthorized, setIsAuthorized] = useState(store.getState().session.exists);
   const [user, setUser] = useState(store.getState().profile.data);
@@ -47,7 +47,7 @@ function CommentsSection({ articleId }) {
   const handleReply = id => dispatch(commentsActions.setFormTarget(id));
   const handleCancel = () => dispatch(commentsActions.resetFormTarget());
   const handleSend = (text, parent) => dispatch(commentsActions.create(text, parent));
-  const handleLoginRedirect = () => navigate('/login');
+
   const waiting = useSelector(state => state.comments.waiting);
   return (
     <div className="comments">
@@ -78,15 +78,7 @@ function CommentsSection({ articleId }) {
           <CommentForm onSubmit={text => handleSend(text, { _id: articleId, _type: 'article' })} />
         )
       ) : (
-        <p>
-          <span
-            onClick={handleLoginRedirect}
-            style={{ cursor: 'pointer', color: 'var(--primary)' }}
-          >
-            Войдите
-          </span>
-          , чтобы иметь возможность комментировать
-        </p>
+        <AuthHint/>
       )}
     </div>
   );

From 5ea0e4a4e50d6d00e22bd486666cb5746cb8a113 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Sat, 19 Apr 2025 22:49:34 +0400
Subject: [PATCH 22/28] fix: comment nesting margin to consistent 40px

---
 src/components/comment-item/index.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 88bd912b3..7325b4cb9 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -29,7 +29,7 @@ function CommentItem({
   return (
     <div className="comment-item"
          style={{
-           marginLeft: `${Math.min(level, 4) * 40}px`,
+           marginLeft: level > 0 ? '40px' : '0px',
            // border: '1px dashed red',
          }} key={String(comment._id)}>
       <div className="comment">
@@ -72,7 +72,13 @@ function CommentItem({
         <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true}/>
       )}
       {!isAuthorized && isReplying && (
-        <AuthHint/>
+        <div style={{marginLeft: level > 0 ? '40px' : '0px'}}>
+          {isAuthorized ? (
+            <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true}/>
+          ) : (
+            <AuthHint/>
+          )}
+        </div>
       )}
       {level < MAX_INDENT_LEVEL && Array.isArray(comment.children) && comment.children.length > 0 && (
         <>

From e28a03a81205d722596873d9b92de011850f6ec4 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Sat, 19 Apr 2025 23:12:33 +0400
Subject: [PATCH 23/28] feat: add autoscroll to reply form and correct left
 indent logic

---
 src/components/comment-form/style.css |  1 +
 src/components/comment-item/index.js  | 43 +++++++++++++++++----------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/components/comment-form/style.css b/src/components/comment-form/style.css
index 0152d106e..653d7bc36 100644
--- a/src/components/comment-form/style.css
+++ b/src/components/comment-form/style.css
@@ -3,6 +3,7 @@
   flex-direction: column;
   gap: 16px;
   max-height: 182px;
+  margin-bottom: 1rem;
 }
 .comment-form span {
   font-weight: 700;
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 7325b4cb9..bb11989eb 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -1,4 +1,4 @@
-import {memo} from 'react';
+import {memo, useEffect, useRef} from 'react';
 import PropTypes from 'prop-types';
 import CommentForm from '../comment-form';
 import './style.css';
@@ -17,6 +17,14 @@ function CommentItem({
                      }) {
   const isReplying = activeFormTargetId === comment._id;
   const navigate = useNavigate();
+  const replyRef = useRef(null);
+
+  useEffect(() => {
+    if (isReplying && replyRef.current) {
+      replyRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [isReplying]);
+
   const handleReplyClick = () => {
     onReply(comment._id);
   };
@@ -24,19 +32,24 @@ function CommentItem({
   const handleSubmitReply = text => {
     onSend(text, {_id: comment._id, _type: 'comment'});
   };
+
   const MAX_INDENT_LEVEL = 4;
-  console.log(user._id)
+
   return (
-    <div className="comment-item"
-         style={{
-           marginLeft: level > 0 ? '40px' : '0px',
-           // border: '1px dashed red',
-         }} key={String(comment._id)}>
+    <div
+      className="comment-item"
+      style={{
+        marginLeft: level > 0 ? '40px' : '0px',
+      }}
+      key={String(comment._id)}
+    >
       <div className="comment">
         <div className="comment-item__info">
           <strong style={{
             color: comment.author?._id === user?._id ? '#666' : undefined,
-          }}>{comment.author?.profile?.name || 'Аноним'}</strong>{' '}
+          }}>
+            {comment.author?.profile?.name || 'Аноним'}
+          </strong>{' '}
           <span>
             {new Date(comment.dateCreate)
               .toLocaleString('ru-RU', {
@@ -52,6 +65,7 @@ function CommentItem({
         </div>
 
         <div className="comment-item__text">{comment.text}</div>
+
         {!isReplying && (
           <button
             className="comment-item__reply"
@@ -68,18 +82,17 @@ function CommentItem({
           </button>
         )}
       </div>
-      {isReplying && isAuthorized && (
-        <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true}/>
-      )}
-      {!isAuthorized && isReplying && (
-        <div style={{marginLeft: level > 0 ? '40px' : '0px'}}>
+
+      {isReplying && (
+        <div ref={replyRef} style={{ marginLeft: level > 0 ? '40px' : '0px' }}>
           {isAuthorized ? (
-            <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true}/>
+            <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true} />
           ) : (
-            <AuthHint/>
+            <AuthHint />
           )}
         </div>
       )}
+
       {level < MAX_INDENT_LEVEL && Array.isArray(comment.children) && comment.children.length > 0 && (
         <>
           {comment.children.map(child => (

From 2d7bb12e3c69d847c9a0f26d86f44a56368842d9 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Sat, 19 Apr 2025 23:40:32 +0400
Subject: [PATCH 24/28] feat: Exit and reset the response form

---
 src/components/comment-item/index.js     | 11 ++++++++---
 src/containers/comments-section/index.js |  1 +
 src/store/session/index.js               |  9 ++++++---
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index bb11989eb..3dc54ae18 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -15,8 +15,7 @@ function CommentItem({
                        user,
                        level
                      }) {
-  const isReplying = activeFormTargetId === comment._id;
-  const navigate = useNavigate();
+  const isReplying = activeFormTargetId === comment._id;;
   const replyRef = useRef(null);
 
   useEffect(() => {
@@ -24,6 +23,11 @@ function CommentItem({
       replyRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
   }, [isReplying]);
+  useEffect(() => {
+    if (isReplying && !isAuthorized) {
+      onCancel();
+    }
+  }, [isAuthorized, isReplying, onCancel]);
 
   const handleReplyClick = () => {
     onReply(comment._id);
@@ -34,6 +38,7 @@ function CommentItem({
   };
 
   const MAX_INDENT_LEVEL = 4;
+  const isOwnComment = !!user?._id && comment.author?._id === user._id;
 
   return (
     <div
@@ -46,7 +51,7 @@ function CommentItem({
       <div className="comment">
         <div className="comment-item__info">
           <strong style={{
-            color: comment.author?._id === user?._id ? '#666' : undefined,
+            color: isOwnComment ? '#666' : undefined,
           }}>
             {comment.author?.profile?.name || 'Аноним'}
           </strong>{' '}
diff --git a/src/containers/comments-section/index.js b/src/containers/comments-section/index.js
index abc645e5b..68b00b7f8 100644
--- a/src/containers/comments-section/index.js
+++ b/src/containers/comments-section/index.js
@@ -21,6 +21,7 @@ function CommentsSection({ articleId }) {
       setIsAuthorized(state.session.exists);
       setUser(state.profile.data);
     });
+
     if (store.getState().session.exists && !store.getState().profile.data._id) {
       store.actions.profile.load();
     }
diff --git a/src/store/session/index.js b/src/store/session/index.js
index 9c863c31a..92dde12ba 100644
--- a/src/store/session/index.js
+++ b/src/store/session/index.js
@@ -85,12 +85,15 @@ class SessionState extends StoreModule {
     } catch (error) {
       console.error(error);
     }
-    this.setState({ ...this.initState(), waiting: false });
     this.services.store.setState({
       ...this.services.store.getState(),
       session: { ...this.initState(), waiting: false },
-      profile: { data: {} }
-    }, 'Выход');
+      profile: { data: {} },
+      comments: {
+        ...this.services.store.getState().comments,
+        activeFormTargetId: null
+      }
+    }, 'Выход и сброс формы ответа');
   }
 
   /**

From 24979459c71fba795b09e31011f7fb929dd85b5b Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Sat, 19 Apr 2025 23:44:15 +0400
Subject: [PATCH 25/28] feat: support custom root type in listToTree conversion

---
 src/components/comment-item/index.js |  3 +--
 src/utils/list-to-tree/index.js      | 10 ++++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 3dc54ae18..bc2356d90 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -2,7 +2,6 @@ import {memo, useEffect, useRef} from 'react';
 import PropTypes from 'prop-types';
 import CommentForm from '../comment-form';
 import './style.css';
-import {useNavigate} from 'react-router-dom';
 import AuthHint from "../auth-hint";
 
 function CommentItem({
@@ -15,7 +14,7 @@ function CommentItem({
                        user,
                        level
                      }) {
-  const isReplying = activeFormTargetId === comment._id;;
+  const isReplying = activeFormTargetId === comment._id;
   const replyRef = useRef(null);
 
   useEffect(() => {
diff --git a/src/utils/list-to-tree/index.js b/src/utils/list-to-tree/index.js
index 62d4e0b32..f7b75359f 100644
--- a/src/utils/list-to-tree/index.js
+++ b/src/utils/list-to-tree/index.js
@@ -2,15 +2,16 @@
  * Преобразование списка в иерархию
  * @param list {Array} Список объектов с отношением на родителя
  * @param [key] {String} Свойство с первичным ключом
+ * @param [rootType] {String} Тип корневого узла (например, 'article')
  * @returns {Array} Корневые узлы
  */
-export default function listToTree(list, key = '_id') {
+export default function listToTree(list, key = '_id', rootType = 'article') {
   const map = {};
   const roots = [];
 
-  // Индексируем комментарии по id
+  // Индексируем элементы по ключу
   for (const item of list) {
-    if (!item[key]) continue; // защита от пустых _id
+    if (!item[key]) continue; // защита от пустых ключей
     map[item[key]] = { ...item, children: [] };
   }
 
@@ -18,10 +19,11 @@ export default function listToTree(list, key = '_id') {
   for (const item of list) {
     const id = item[key];
     const parentId = item.parent?.[key];
+    const parentType = item.parent?._type;
 
     if (parentId && map[parentId]) {
       map[parentId].children.push(map[id]);
-    } else {
+    } else if (parentType === rootType || !item.parent) {
       roots.push(map[id]);
     }
   }

From 5c9371b8abf98627351cfc281a1b979defe39659 Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Mon, 21 Apr 2025 03:52:32 +0400
Subject: [PATCH 26/28] feat: implement full multilingual UI with dynamic date
 and label translations

---
 src/components/article-card/index.js     |  9 +--
 src/components/basket-tool/index.js      |  6 +-
 src/components/comment-item/index.js     | 89 ++++++++++++------------
 src/components/menu/index.js             |  4 +-
 src/containers/comments-section/index.js | 12 ++--
 src/containers/navigation/index.js       |  6 +-
 src/i18n/translations/en.json            |  9 ++-
 src/i18n/translations/ru.json            |  9 ++-
 8 files changed, 82 insertions(+), 62 deletions(-)

diff --git a/src/components/article-card/index.js b/src/components/article-card/index.js
index d636d9f88..9bbfb33db 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('product.manufacturer')}:</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('product.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('product.year')}:</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('product.price')}:</div>
         <div className={cn('value')}>{numberFormat(article.price)} ₽</div>
       </div>
       <Button style="primary" onClick={() => onAdd(article._id)} title={t('article.add')} />
@@ -36,6 +36,7 @@ function ArticleCard(props) {
   );
 }
 
+
 ArticleCard.propTypes = {
   article: PropTypes.shape({
     _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
diff --git a/src/components/basket-tool/index.js b/src/components/basket-tool/index.js
index 8564a9d0b..217cbc79a 100644
--- a/src/components/basket-tool/index.js
+++ b/src/components/basket-tool/index.js
@@ -4,11 +4,14 @@ import { cn as bem } from '@bem-react/classname';
 import numberFormat from '../../utils/number-format';
 import Cart from '../../assets/icon/cart.svg';
 import './style.css';
+import useTranslate from "../../hooks/use-translate";
 
 function BasketTool(props) {
-  const { sum = 0, amount = 0, onOpen = () => {}, t = text => text } = props;
+  const { sum = 0, amount = 0, onOpen = () => {} } = props;
 
   const cn = bem('BasketTool');
+  const { t } = useTranslate();
+
   return (
     <div className={cn()}>
       <button className={cn('action')} onClick={onOpen}>
@@ -27,7 +30,6 @@ BasketTool.propTypes = {
   onOpen: PropTypes.func.isRequired,
   sum: PropTypes.number,
   amount: PropTypes.number,
-  t: PropTypes.func,
 };
 
 export default memo(BasketTool);
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index bc2356d90..0b02c7034 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -1,8 +1,9 @@
 import {memo, useEffect, useRef} from 'react';
 import PropTypes from 'prop-types';
 import CommentForm from '../comment-form';
+import AuthHint from '../auth-hint';
+import useTranslate from '../../hooks/use-translate';
 import './style.css';
-import AuthHint from "../auth-hint";
 
 function CommentItem({
                        comment,
@@ -12,16 +13,22 @@ function CommentItem({
                        activeFormTargetId,
                        isAuthorized,
                        user,
-                       level
+                       level,
                      }) {
   const isReplying = activeFormTargetId === comment._id;
   const replyRef = useRef(null);
 
+  const MAX_INDENT_LEVEL = 4;
+  const isOwnComment = !!user?._id && comment.author?._id === user._id;
+
+  const {t, locale} = useTranslate();
+
   useEffect(() => {
     if (isReplying && replyRef.current) {
-      replyRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      replyRef.current.scrollIntoView({behavior: 'smooth', block: 'center'});
     }
   }, [isReplying]);
+
   useEffect(() => {
     if (isReplying && !isAuthorized) {
       onCancel();
@@ -36,36 +43,28 @@ function CommentItem({
     onSend(text, {_id: comment._id, _type: 'comment'});
   };
 
-  const MAX_INDENT_LEVEL = 4;
-  const isOwnComment = !!user?._id && comment.author?._id === user._id;
+  const date = new Date(comment.dateCreate);
+  const formattedDate = `${date.toLocaleDateString(locale, {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })} ${locale === 'ru' ? 'в' : ''} ${date.toLocaleTimeString(locale, {
+    hour: '2-digit',
+    minute: '2-digit',
+  })}`;
 
   return (
     <div
       className="comment-item"
-      style={{
-        marginLeft: level > 0 ? '40px' : '0px',
-      }}
+      style={{marginLeft: level > 0 ? '40px' : '0px'}}
       key={String(comment._id)}
     >
       <div className="comment">
         <div className="comment-item__info">
-          <strong style={{
-            color: isOwnComment ? '#666' : undefined,
-          }}>
+          <strong style={{color: isOwnComment ? '#666' : undefined}}>
             {comment.author?.profile?.name || 'Аноним'}
           </strong>{' '}
-          <span>
-            {new Date(comment.dateCreate)
-              .toLocaleString('ru-RU', {
-                day: 'numeric',
-                month: 'long',
-                year: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-              })
-              .replace(' г.', '')
-              .replace(',', ' в')}{' '}
-          </span>
+          <span>{formattedDate}</span>
         </div>
 
         <div className="comment-item__text">{comment.text}</div>
@@ -82,38 +81,40 @@ function CommentItem({
               }
             }}
           >
-            Ответить
+            {t('comments.reply')}
           </button>
         )}
       </div>
 
       {isReplying && (
-        <div ref={replyRef} style={{ marginLeft: level > 0 ? '40px' : '0px' }}>
+        <div ref={replyRef} style={{marginLeft: level > 0 ? '40px' : '0px'}}>
           {isAuthorized ? (
-            <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true} />
+            <CommentForm onSubmit={handleSubmitReply} onCancel={onCancel} isReply={true}/>
           ) : (
-            <AuthHint />
+            <AuthHint/>
           )}
         </div>
       )}
 
-      {level < MAX_INDENT_LEVEL && Array.isArray(comment.children) && comment.children.length > 0 && (
-        <>
-          {comment.children.map(child => (
-            <CommentItem
-              key={String(child._id)}
-              comment={child}
-              onReply={onReply}
-              onCancel={onCancel}
-              onSend={onSend}
-              activeFormTargetId={activeFormTargetId}
-              isAuthorized={isAuthorized}
-              user={user}
-              level={level + 1}
-            />
-          ))}
-        </>
-      )}
+      {level < MAX_INDENT_LEVEL &&
+        Array.isArray(comment.children) &&
+        comment.children.length > 0 && (
+          <>
+            {comment.children.map(child => (
+              <CommentItem
+                key={String(child._id)}
+                comment={child}
+                onReply={onReply}
+                onCancel={onCancel}
+                onSend={onSend}
+                activeFormTargetId={activeFormTargetId}
+                isAuthorized={isAuthorized}
+                user={user}
+                level={level + 1}
+              />
+            ))}
+          </>
+        )}
     </div>
   );
 }
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
index 663ad6393..972236fa9 100644
--- a/src/components/menu/index.js
+++ b/src/components/menu/index.js
@@ -3,15 +3,17 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import { Link } from 'react-router-dom';
 import './style.css';
+import useTranslate from "../../hooks/use-translate";
 
 function Menu({ items = [], onNavigate = () => {} }) {
   const cn = bem('Menu');
+  const { t } = useTranslate();
   return (
     <ul className={cn()}>
       {items.map(item => (
         <li key={item.key} className={cn('item')}>
           <Link to={item.link} onClick={() => onNavigate(item)}>
-            {item.title}
+            {t(item.title)}
           </Link>
         </li>
       ))}
diff --git a/src/containers/comments-section/index.js b/src/containers/comments-section/index.js
index 68b00b7f8..d4bbda529 100644
--- a/src/containers/comments-section/index.js
+++ b/src/containers/comments-section/index.js
@@ -5,13 +5,16 @@ import { useSelector, useDispatch } from 'react-redux';
 import CommentItem from '../../components/comment-item';
 import CommentForm from '../../components/comment-form';
 import commentsActions from '../../store-redux/comments/actions';
-import useStore from '../../hooks/use-store';
 import AuthHint from "../../components/auth-hint";
 
+import useStore from '../../hooks/use-store';
+import useTranslate from "../../hooks/use-translate";
+
+
 function CommentsSection({ articleId }) {
   const dispatch = useDispatch();
   const store = useStore();
-
+  const { t } = useTranslate();
 
   const [isAuthorized, setIsAuthorized] = useState(store.getState().session.exists);
   const [user, setUser] = useState(store.getState().profile.data);
@@ -50,14 +53,15 @@ function CommentsSection({ articleId }) {
   const handleSend = (text, parent) => dispatch(commentsActions.create(text, parent));
 
   const waiting = useSelector(state => state.comments.waiting);
+
   return (
     <div className="comments">
       <h2 style={{ padding: '20px 0', fontFamily: 'var(--second-font-family)' }}>
-        Комментарии ({totalComments})
+        {t('comments.title')} ({totalComments})
       </h2>
 
       {waiting ? (
-        <p>Загрузка комментариев...</p>
+        <p>{t('comments.loading')}</p>
       ) : (
         commentsTree.map((comment, i) => (
           <CommentItem
diff --git a/src/containers/navigation/index.js b/src/containers/navigation/index.js
index 44a2f8a4f..bfe05f728 100644
--- a/src/containers/navigation/index.js
+++ b/src/containers/navigation/index.js
@@ -33,11 +33,8 @@ function Navigation() {
     ),
   };
 
-  // Функция для локализации текстов
-  const { t } = useTranslate();
-
   const options = {
-    menu: useMemo(() => [{ key: 1, title: t('menu.main'), link: '/' }], [t]),
+    menu: useMemo(() => [{ key: 1, title: 'menu.main', link: '/' }], []),
   };
 
   return (
@@ -47,7 +44,6 @@ function Navigation() {
         onOpen={callbacks.openModalBasket}
         amount={select.amount}
         sum={select.sum}
-        t={t}
       />
     </SideLayout>
   );
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index de8aee9a9..3338c9276 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -26,5 +26,12 @@
   "profile.title": "Profile",
   "profile.name": "Name",
   "profile.phone": "Phone",
-  "profile.email": "Email"
+  "profile.email": "Email",
+  "product.manufacturer": "Manufacturer",
+  "product.category": "Category",
+  "product.year": "Year",
+  "product.price": "Price",
+  "comments.title": "Comments",
+  "comments.loading": "Loading comments...",
+  "comments.reply": "Reply"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index 657ab2160..d4397ddec 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -28,5 +28,12 @@
   "profile.title": "Профиль",
   "profile.name": "Имя",
   "profile.phone": "Телефон",
-  "profile.email": "Email"
+  "profile.email": "Email",
+  "product.manufacturer": "Страна производитель",
+  "product.category": "Категория",
+  "product.year": "Год выпуска",
+  "product.price": "Цена",
+  "comments.title": "Комментарии",
+  "comments.loading": "Загрузка комментариев...",
+  "comments.reply": "Ответить"
 }

From 731f6d2d7d7e9fdb92165e3fb3215db5d65e1d2e Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Mon, 21 Apr 2025 04:01:24 +0400
Subject: [PATCH 27/28] feat: add localized comment dates and auth hint message

---
 src/components/auth-hint/index.js    | 20 ++++++++------------
 src/components/comment-item/index.js |  7 +------
 src/i18n/translations/en.json        |  3 ++-
 src/i18n/translations/ru.json        |  3 ++-
 4 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/components/auth-hint/index.js b/src/components/auth-hint/index.js
index 80b7265ab..e0bc3be2f 100644
--- a/src/components/auth-hint/index.js
+++ b/src/components/auth-hint/index.js
@@ -1,21 +1,17 @@
 import { memo } from 'react';
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
+import useTranslate from '../../hooks/use-translate';
 
 function AuthHint() {
   const navigate = useNavigate();
+  const { t } = useTranslate();
+
   const handleLoginRedirect = () => navigate('/login');
+
   return (
-    <>
-      <p>
-          <span
-            onClick={handleLoginRedirect}
-            style={{cursor: 'pointer', color: 'var(--primary)'}}
-          >
-            Войдите
-          </span>
-        , чтобы иметь возможность комментировать
-      </p>
-    </>
+    <p style={{ cursor: 'pointer', color: 'var(--primary)' }} onClick={handleLoginRedirect}>
+      {t('authHint.message')}
+    </p>
   );
 }
 
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 0b02c7034..660dd75c2 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -25,15 +25,10 @@ function CommentItem({
 
   useEffect(() => {
     if (isReplying && replyRef.current) {
-      replyRef.current.scrollIntoView({behavior: 'smooth', block: 'center'});
+      replyRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
   }, [isReplying]);
 
-  useEffect(() => {
-    if (isReplying && !isAuthorized) {
-      onCancel();
-    }
-  }, [isAuthorized, isReplying, onCancel]);
 
   const handleReplyClick = () => {
     onReply(comment._id);
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 3338c9276..1f4e522d0 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -33,5 +33,6 @@
   "product.price": "Price",
   "comments.title": "Comments",
   "comments.loading": "Loading comments...",
-  "comments.reply": "Reply"
+  "comments.reply": "Reply",
+  "authHint.message": "Sign in to leave a comment"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index d4397ddec..50dc1ef38 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -35,5 +35,6 @@
   "product.price": "Цена",
   "comments.title": "Комментарии",
   "comments.loading": "Загрузка комментариев...",
-  "comments.reply": "Ответить"
+  "comments.reply": "Ответить",
+  "authHint.message": "Войдите, чтобы иметь возможность комментировать"
 }

From 98c09a44e63a02bad03b8e733cb8521bb55f619e Mon Sep 17 00:00:00 2001
From: SempaiDarcy <mr_darcy_1@mail.ru>
Date: Mon, 21 Apr 2025 04:05:41 +0400
Subject: [PATCH 28/28] feat: localize comment hint and improve AuthHint UX

---
 src/components/auth-hint/index.js | 10 ++++++++--
 src/i18n/translations/en.json     |  3 ++-
 src/i18n/translations/ru.json     |  3 ++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/auth-hint/index.js b/src/components/auth-hint/index.js
index e0bc3be2f..e30009638 100644
--- a/src/components/auth-hint/index.js
+++ b/src/components/auth-hint/index.js
@@ -9,8 +9,14 @@ function AuthHint() {
   const handleLoginRedirect = () => navigate('/login');
 
   return (
-    <p style={{ cursor: 'pointer', color: 'var(--primary)' }} onClick={handleLoginRedirect}>
-      {t('authHint.message')}
+    <p>
+      <span
+        onClick={handleLoginRedirect}
+        style={{ cursor: 'pointer', color: 'var(--primary)' }}
+      >
+        {t('authHint.login')}
+      </span>{', '}
+      {t('authHint.continue')}
     </p>
   );
 }
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 1f4e522d0..db5799a81 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -34,5 +34,6 @@
   "comments.title": "Comments",
   "comments.loading": "Loading comments...",
   "comments.reply": "Reply",
-  "authHint.message": "Sign in to leave a comment"
+  "authHint.login": "Sign in",
+  "authHint.continue": "to leave a comment"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index 50dc1ef38..f688f5f6f 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -36,5 +36,6 @@
   "comments.title": "Комментарии",
   "comments.loading": "Загрузка комментариев...",
   "comments.reply": "Ответить",
-  "authHint.message": "Войдите, чтобы иметь возможность комментировать"
+  "authHint.login": "Войти",
+  "authHint.continue": "чтобы иметь возможность комментировать"
 }