From 053b7b52ad56037100ea027680be9d0b1941e1ff Mon Sep 17 00:00:00 2001
From: SlimusMinus <moscow_city231@rambler.ru>
Date: Thu, 13 Aug 2026 00:52:56 +0300
Subject: [PATCH] added date on chat

---
 src/components/chat/MessageBubble.jsx |  9 ++++++++-
 src/styles/card.css                   |  2 +-
 src/styles/chat.css                   |  9 +++++++++
 src/utils/chatDisplay.jsx             | 27 +++++++++++++++++++++++++++
 4 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/MessageBubble.jsx b/src/components/chat/MessageBubble.jsx
index 9d0e9fc..b6e269d 100644
--- a/src/components/chat/MessageBubble.jsx
+++ b/src/components/chat/MessageBubble.jsx
@@ -1,7 +1,14 @@
+import { useTranslation } from "react-i18next";
+import { formatMessageTime } from "../../utils/chatDisplay";
+
 export default function MessageBubble({ message, isMine }) {
+  const { i18n } = useTranslation();
+  const time = formatMessageTime(message.createdAt, i18n.language);
+
   return (
       <div className={`chat-bubble${isMine ? " mine" : ""}`}>
         {message.content}
+        {time && <div className="chat-bubble-time">{time}</div>}
       </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/styles/card.css b/src/styles/card.css
index a084dd0..8d2c477 100644
--- a/src/styles/card.css
+++ b/src/styles/card.css
@@ -29,7 +29,7 @@
   position: relative;
 }
 .f-cat-badge {
-  background: rgba(13,16,24,.8); backdrop-filter: blur(8px);
+  background: var(--bg-surface); backdrop-filter: blur(8px);
   border: 1px solid var(--border); border-radius: 20px;
   padding: 3px 10px; font-size: .72rem; font-weight: 700; color: var(--teal);
 }
diff --git a/src/styles/chat.css b/src/styles/chat.css
index 5b359eb..559c782 100644
--- a/src/styles/chat.css
+++ b/src/styles/chat.css
@@ -110,6 +110,15 @@
   background: #2de0c8;
   color: #082320;
 }
+.chat-bubble-time {
+  display: block;
+  margin-top: 4px;
+  font-size: .68rem;
+  line-height: 1;
+  text-align: right;
+  opacity: .6;
+  white-space: nowrap;
+}
 
 /* Input row */
 .chat-input-row {
diff --git a/src/utils/chatDisplay.jsx b/src/utils/chatDisplay.jsx
index e18e302..cf30095 100644
--- a/src/utils/chatDisplay.jsx
+++ b/src/utils/chatDisplay.jsx
@@ -31,6 +31,33 @@ export function getLastMessageText(chat) {
   return lm?.content || "";
 }
 
+/**
+ * Красиво форматирует время сообщения из createdAt (ISO-строка без таймзоны):
+ * сегодня — только время ("14:05"), раньше — дата + время ("12 авг, 14:05").
+ */
+export function formatMessageTime(createdAt, locale) {
+  const ms = toTimeMs(createdAt);
+  if (!ms) return "";
+  const date = new Date(ms);
+  const now = new Date();
+  const isSameDay =
+      date.getFullYear() === now.getFullYear() &&
+      date.getMonth() === now.getMonth() &&
+      date.getDate() === now.getDate();
+  const isSameYear = date.getFullYear() === now.getFullYear();
+
+  const time = new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit" }).format(date);
+  if (isSameDay) return time;
+
+  const datePart = new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "short",
+    year: isSameYear ? undefined : "numeric",
+  }).format(date);
+
+  return `${datePart}, ${time}`;
+}
+
 export function getChatDisplayInfo(chat, post, unreadMap, t) {
   const title = post?.title || chat.otherUserName || chat.otherUser?.name || t('chat.user');
   const imgSrc = getImageUrl(post?.images?.[0]);