Update frontend for new backend

frontend/src/components/Comments/CommentItem.jsx

@@ -1,31 +1,57 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { currentUser } from '../../services/auth';
 import './CommentItem.css';
 
 export default function CommentItem({ comment, author }) {
-  const displayName = author?.username || author?.first_name || 'Аноним';
-  const date = comment.creation_date
+  const [imageError, setImageError] = useState(false);
+  const isMe = comment.author_id === currentUser?.id;
+  
+  const displayName = isMe 
+    ? (currentUser?.username ? `@${currentUser.username}` : currentUser?.first_name || 'Вы')
+    : (author?.username ? `@${author.username}` : author?.first_name || `Игрок #${comment.author_id}`);
+
+  const photoUrl = isMe ? currentUser?.photo_url : author?.photo_url;
+
+  useEffect(() => {
+    setImageError(false);
+  }, [photoUrl]);
+
+  const dateStr = comment.creation_date
     ? new Date(comment.creation_date).toLocaleDateString('ru-RU', {
         day: '2-digit',
         month: '2-digit',
-        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
       })
     : '';
 
+  const initial = displayName.replace(/^@/, '')[0]?.toUpperCase() || '?';
+
   return (
-    <div className="comment-item">
+    <div className={`comment-item ${isMe ? 'comment-item--me' : ''}`}>
       <div className="comment-avatar">
-        {author?.photo_url ? (
-          <img src={author.photo_url} alt="" className="comment-avatar-img" />
+        {photoUrl && !imageError ? (
+          <img
+            src={photoUrl}
+            alt=""
+            className="comment-avatar-img"
+            referrerPolicy="no-referrer"
+            onError={() => setImageError(true)}
+          />
         ) : (
-          <span className="comment-avatar-fallback">
-            {displayName[0]?.toUpperCase() || '?'}
+          <span className={`comment-avatar-fallback ${isMe ? 'comment-avatar-fallback--me' : ''}`}>
+            {initial}
           </span>
         )}
       </div>
+
       <div className="comment-body">
         <div className="comment-header">
-          <span className="comment-author">{displayName}</span>
-          <span className="comment-date">{date}</span>
+          <div className="comment-author-group">
+            <span className="comment-author">{displayName}</span>
+            {isMe && <span className="comment-me-badge">Вы</span>}
+          </div>
+          <span className="comment-date">{dateStr}</span>
         </div>
         <p className="comment-text">{comment.comment_text || comment.commet_text}</p>
       </div>