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 (
{message.content}
+ {time &&
{time}
}
);
-}
\ 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]);