rust/forkmessager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 3 Releases Wiki Activity

Миграции, сборка

Browse Source
This commit is contained in:
Халимов Рустам
2026-03-27 23:09:16 +03:00
parent 030ae1e4e4
commit ba5c5210d4
43 changed files with 406 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
client-web/src/modules/admin/presentation/pages/AdminPage.tsx
View File

@@ -1,8 +1,8 @@
import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Settings, Shield, Activity, Users, Database, Globe, Search, Trash2, Plus, Download, Upload, Loader2, User, CheckCircle, XCircle } from 'lucide-react';
import { httpClient } from '../../../core/infrastructure/httpClient';
import { deepNormalize } from '../../../core/utils/normalize';
import { httpClient } from '../../../../core/infrastructure/httpClient';
import { deepNormalize } from '../../../../core/utils/normalize';
interface Stats {
storageUsedBytes: number;
@@ -894,47 +894,47 @@ export default function AdminPage() {
{isSearching && <Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 text-accent w-5 h-5 animate-spin" />}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-max">
{users.length === 0 && !isSearching && (
<div className="col-span-full text-center py-20 text-gray-500">
{t.noUsersFound}
</div>
)}
{users.map(u => (
<div key={u.id} className="bg-surface border border-white/10 p-5 rounded-2xl flex items-center gap-4 hover:border-accent/50 transition-colors cursor-pointer" onClick={() => fetchUserDetails(u.id)}>
{u.avatar ? (
<img src={u.avatar} alt="avatar" className="w-14 h-14 rounded-full object-cover border border-white/10" />
) : (
<div className="w-14 h-14 rounded-full bg-white/10 flex items-center justify-center border border-white/5">
<User className="text-gray-400 w-6 h-6" />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-max">
{users.length === 0 && !isSearching && (
<div className="col-span-full text-center py-20 text-gray-500">
{t.noUsersFound}
</div>
)}
<div className="flex-1 min-w-0">
<h4 className="font-semibold text-white truncate">{u.displayName}</h4>
<div className="text-sm text-gray-400 truncate">@{u.username}</div>
</div>
{users.map(u => (
<div key={u.id} className="bg-surface border border-white/10 p-5 rounded-2xl flex items-center gap-4 hover:border-accent/50 transition-colors cursor-pointer" onClick={() => fetchUserDetails(u.id)}>
{u.avatarUrl || u.avatar ? (
<img src={u.avatarUrl || u.avatar || undefined} alt="avatar" className="w-14 h-14 rounded-full object-cover border border-white/10" />
) : (
<div className="w-14 h-14 rounded-full bg-white/10 flex items-center justify-center border border-white/5">
<User className="text-gray-400 w-6 h-6" />
</div>
)}
<div className="flex-1 min-w-0">
<h4 className="font-semibold text-white truncate">{u.displayName || u.userName || u.username || ''}</h4>
<div className="text-sm text-gray-400 truncate">@{u.userName || u.username || ''}</div>
</div>
</div>
))}
</div>
))}
</div>
</>
) : (
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="flex flex-col gap-6 max-w-2xl">
<button onClick={() => setSelectedUser(null)} className="text-accent hover:underline self-start flex items-center gap-2">
&larr; {t.backToList}
</button>
<div className="bg-surface border border-white/10 rounded-2xl p-8 flex flex-col items-center relative overflow-hidden">
<div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-accent/20 to-transparent" />
{selectedUser.avatar ? (
<img src={selectedUser.avatar} className="w-32 h-32 rounded-full object-cover border-4 border-surface shadow-2xl relative z-10 z-10" alt="Avatar" />
) : (
<div className="w-32 h-32 rounded-full bg-black border-4 border-surface shadow-2xl relative z-10 flex items-center justify-center">
<User className="text-gray-400 w-12 h-12" />
</div>
)}
<h2 className="text-3xl font-bold text-white mt-4 relative z-10">{selectedUser.displayName}</h2>
<p className="text-gray-400 text-lg relative z-10">@{selectedUser.username}</p>
</>
) : (
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="flex flex-col gap-6 max-w-2xl">
<button onClick={() => setSelectedUser(null)} className="text-accent hover:underline self-start flex items-center gap-2">
&larr; {t.backToList}
</button>
<div className="bg-surface border border-white/10 rounded-2xl p-8 flex flex-col items-center relative overflow-hidden">
<div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-accent/20 to-transparent" />
{selectedUser.avatarUrl || selectedUser.avatar ? (
<img src={selectedUser.avatarUrl || selectedUser.avatar || undefined} className="w-32 h-32 rounded-full object-cover border-4 border-surface shadow-2xl relative z-10" alt="Avatar" />
) : (
<div className="w-32 h-32 rounded-full bg-black border-4 border-surface shadow-2xl relative z-10 flex items-center justify-center">
<User className="text-gray-400 w-12 h-12" />
</div>
)}
<h2 className="text-3xl font-bold text-white mt-4 relative z-10">{selectedUser.displayName || selectedUser.userName || selectedUser.username || ''}</h2>
<p className="text-gray-400 text-lg relative z-10">@{selectedUser.userName || selectedUser.username || ''}</p>
<div className="w-full mt-8 flex flex-col gap-4 relative z-10">
<div className="bg-black/30 p-4 rounded-xl border border-white/5 flex flex-col gap-1">

2
client-web/src/modules/calls/presentation/components/CallModal.tsx
View File

@@ -11,7 +11,7 @@ type CallState = 'idle' | 'calling' | 'incoming' | 'connected' | 'ended';
interface CallModalProps {
isOpen: boolean;
onClose: () => void;
targetUser: { id: string; displayName?: string; username: string; avatar?: string | null } | null;
targetUser: { id: string; displayName?: string; username?: string; avatar?: string | null } | null;
callType: 'voice' | 'video';
incoming?: {
from: string;

2
client-web/src/modules/chats/presentation/ChatPage.tsx
View File

@@ -6,7 +6,7 @@ import { getSocket, disconnectSocket } from '../../../core/infrastructure/socket
import { ChatApi } from '../infrastructure/chatApi';
import { playNotificationSound, isChatMuted, playCallRingtone, stopCallRingtone } from '../../../core/utils/sounds';
import { useLang } from '../../../core/infrastructure/i18n';
import type { Message, UserBasic, CallInfo } from '../../../core/domain/types';
import type { Message, UserBasic, CallInfo, ChatMember } from '../../../core/domain/types';
import { Send, Check, Phone, PhoneOff } from 'lucide-react';
import Sidebar from '../../../core/presentation/layouts/Sidebar';
import ChatView from './components/ChatView';

17
client-web/src/modules/chats/presentation/components/ChatListItem.tsx
View File

@@ -32,19 +32,19 @@ function ChatListItem({ chat, isActive }: ChatListItemProps) {
const otherMember = chat.members.find((m) => m.user.id !== user?.id);
const isFavorites = chat.type === 'favorites';
const chatName = isFavorites
const chatName = (isFavorites
? t('favorites')
: chat.type === 'personal'
? otherMember?.user.displayName || otherMember?.user.userName || otherMember?.user.username || t('chat')
: chat.name || t('group');
: chat.name || t('group')) || '??';
const chatAvatar = isFavorites
const chatAvatar: string | null = isFavorites
? null
: chat.type === 'personal'
? otherMember?.user.avatarUrl || otherMember?.user.avatar
: chat.avatarUrl || chat.avatar;
? otherMember?.user.avatarUrl || otherMember?.user.avatar || null
: chat.avatarUrl || chat.avatar || null;
const isOnline = chat.type === 'personal' && otherMember?.user.isOnline;
const isOnline = chat.type === 'personal' && !!otherMember?.user.isOnline;
// Check if someone is typing in this chat
const typingInChat = typingUsers.filter((t) => t.chatId === chat.id && t.userId !== user?.id);
@@ -128,8 +128,9 @@ function ChatListItem({ chat, isActive }: ChatListItemProps) {
} catch (e) { console.error(e); }
};
const initials = chatName
const initials = (chatName || '??')
.split(' ')
.filter(Boolean)
.map((w: string) => w[0])
.join('')
.slice(0, 2)
@@ -151,7 +152,7 @@ function ChatListItem({ chat, isActive }: ChatListItemProps) {
<Bookmark size={22} className="text-white" />
</div>
) : (
<Avatar src={chatAvatar} name={chatName} size="lg" online={isOnline ? true : undefined} />
<Avatar src={chatAvatar || undefined} name={chatName || '??'} size="lg" online={isOnline ? true : false} />
)}
</div>

8
client-web/src/modules/chats/presentation/components/ChatView.tsx
View File

@@ -93,13 +93,13 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
const chatName = isFavorites
? t('favorites')
: chat?.type === 'personal'
? otherMember?.user.displayName || otherMember?.user.username || t('chat')
? otherMember?.user.displayName || otherMember?.user.userName || otherMember?.user.username || t('chat')
: chat?.name || t('group');
const chatAvatar = isFavorites
? null
: chat?.type === 'personal'
? otherMember?.user.avatar
: chat?.avatar;
? otherMember?.user.avatarUrl || otherMember?.user.avatar || null
: chat?.avatarUrl || chat?.avatar || null;
const isOnline = chat?.type === 'personal' && otherMember?.user.isOnline;
const typingInChat = typingUsers.filter((t) => t.chatId === activeChat && t.userId !== user?.id);
@@ -422,7 +422,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
);
}
const initials = chatName
const initials = (chatName || '??')
.split(' ')
.map((w: string) => w[0])
.join('')

15
client-web/src/modules/chats/presentation/components/MessageBubble.tsx
View File

@@ -151,10 +151,9 @@ function MessageBubble({
};
const chatForDelete = chats.find(c => c.id === message.chatId);
const otherMember = chatForDelete?.members.find(m => m.user.id !== user?.id);
const otherMemberName = chatForDelete?.type === 'personal'
? chatForDelete.members.find(m => m.user.id !== user?.id)?.user.displayName
|| chatForDelete.members.find(m => m.user.id !== user?.id)?.user.username
|| ''
? otherMember?.user.displayName || otherMember?.user.userName || otherMember?.user.username || ''
: '';
const isPinned = pinnedMessages[message.chatId]?.id === message.id;
@@ -306,7 +305,7 @@ function MessageBubble({
reactionGroups[r.emoji] = { count: 0, users: [], isMine: false, avatars: [] };
}
reactionGroups[r.emoji].count++;
const displayName = r.user?.displayName || r.user?.username || '?';
const displayName = r.user?.displayName || r.user?.userName || r.user?.username || '?';
reactionGroups[r.emoji].users.push(displayName);
if (reactionGroups[r.emoji].avatars.length < 3) {
reactionGroups[r.emoji].avatars.push({
@@ -318,8 +317,8 @@ function MessageBubble({
if (r.userId === user?.id) reactionGroups[r.emoji].isMine = true;
});
const senderName = message.sender?.displayName || message.sender?.username || '';
const senderAvatar = message.sender?.avatar;
const senderName = message.sender?.displayName || message.sender?.userName || message.sender?.username || '';
const senderAvatar = message.sender?.avatarUrl || message.sender?.avatar;
const firstUrlMatch = message.content?.match(/https?:\/\/[^\s]+/);
const firstUrl = firstUrlMatch ? firstUrlMatch[0] : null;
@@ -453,7 +452,7 @@ function MessageBubble({
}}
>
<p className={`text-[13.5px] font-semibold mb-0.5 truncate ${isMine ? 'text-white' : 'text-knot-500'}`}>
{message.replyTo.sender?.displayName || message.replyTo.sender?.username}
{message.replyTo.sender?.displayName || message.replyTo.sender?.userName || message.replyTo.sender?.username || ''}
</p>
<div className="flex items-center gap-1.5">
{message.replyTo.isDeleted ? (
@@ -536,7 +535,7 @@ function MessageBubble({
onClick={() => onViewProfile?.(message.forwardedFromId!)}
>
<div className={`font-medium ${isMine ? 'text-white/90' : 'text-knot-500'}`}>
{(t('forwardedFrom' as any) === 'forwardedFrom' ? 'Переслано от' : t('forwardedFrom' as any))} <span className="font-semibold">{message.forwardedFrom.displayName || message.forwardedFrom.username}</span>
{(t('forwardedFrom' as any) === 'forwardedFrom' ? 'Переслано от' : t('forwardedFrom' as any))} <span className="font-semibold">{message.forwardedFrom.displayName || message.forwardedFrom.userName || message.forwardedFrom.username || ''}</span>
</div>
</div>
)}

26
client-web/src/modules/chats/presentation/components/MessageInput.tsx
View File

@@ -22,7 +22,7 @@ import { useAuthStore } from '../../../auth/application/authStore';
import { ChatApi } from '../../infrastructure/chatApi';
import { getSocket } from '../../../../core/infrastructure/socket';
import { useLang } from '../../../../core/infrastructure/i18n';
import { AUDIO_EXTENSIONS, MAX_FILE_SIZE } from '../../../../core/domain/types';
import { AUDIO_EXTENSIONS, MAX_FILE_SIZE, type ChatMember } from '../../../../core/domain/types';
import { useNotificationStore } from '../../../../core/application/stores/notificationStore';
import EmojiPicker from './EmojiPicker';
@@ -70,27 +70,31 @@ export default function MessageInput({ chatId }: MessageInputProps) {
const filteredMembers = mentionQuery !== null && isGroup
? chatMembers.filter((m) => {
const q = mentionQuery.toLowerCase();
return m.user.displayName.toLowerCase().includes(q) || m.user.username.toLowerCase().includes(q);
return (m.user.displayName || '').toLowerCase().includes(q)
|| (m.user.userName || '').toLowerCase().includes(q)
|| (m.user.username || '').toLowerCase().includes(q);
}).slice(0, 6)
: [];
const insertMention = (member: { user: { username: string } }) => {
const insertMention = (member: ChatMember) => {
const el = inputRef.current;
if (!el) return;
const username = member.user.userName || member.user.username;
if (!username) return;
const cursorPos = el.selectionStart;
const before = text.substring(0, cursorPos);
const after = text.substring(cursorPos);
// Find the @ that started this mention
const atIdx = before.lastIndexOf('@');
if (atIdx === -1) return;
const newText = before.substring(0, atIdx) + `@${member.user.username} ` + after;
const newText = before.substring(0, atIdx) + `@${username} ` + after;
setText(newText);
setDraft(chatId, newText);
setMentionQuery(null);
setMentionIndex(0);
setTimeout(() => {
el.focus();
const newPos = atIdx + member.user.username.length + 2;
const newPos = atIdx + username.length + 2;
el.setSelectionRange(newPos, newPos);
}, 0);
};
@@ -617,7 +621,7 @@ export default function MessageInput({ chatId }: MessageInputProps) {
<p className="text-xs font-semibold text-knot-400 mb-0.5">
{editingMessage
? t('editing')
: `${t('replyTo')} ${replyTo?.sender?.displayName || replyTo?.sender?.username || ''}`}
: `${t('replyTo')} ${replyTo?.sender?.displayName || replyTo?.sender?.userName || replyTo?.sender?.username || ''}`}
</p>
<div className="text-xs text-zinc-300 truncate opacity-80 border-l border-white/20 pl-2 ml-1">
{replyTo?.quote ? `«${replyTo.quote}»` : (editingMessage || replyTo)?.content || t('media') || 'Медиа'}
@@ -813,16 +817,16 @@ export default function MessageInput({ chatId }: MessageInputProps) {
i === mentionIndex ? 'bg-accent/20 text-white' : 'text-zinc-300 hover:bg-white/5'
}`}
>
{m.user.avatar ? (
<img src={m.user.avatar} className="w-7 h-7 rounded-full object-cover" alt="" />
{m.user.avatarUrl || m.user.avatar ? (
<img src={m.user.avatarUrl || m.user.avatar || ''} className="w-7 h-7 rounded-full object-cover" alt="" />
) : (
<div className="w-7 h-7 rounded-full bg-gradient-to-br from-knot-500 to-purple-600 flex items-center justify-center text-white text-xs font-semibold">
{(m.user.displayName || m.user.username)[0]?.toUpperCase()}
{(m.user.displayName || m.user.userName || m.user.username || '?')[0]?.toUpperCase()}
</div>
)}
<div className="min-w-0">
<p className="text-sm font-medium truncate">{m.user.displayName || m.user.username}</p>
<p className="text-xs text-zinc-500 truncate">@{m.user.username}</p>
<p className="text-sm font-medium truncate">{m.user.displayName || m.user.userName || m.user.username || '??'}</p>
<p className="text-xs text-zinc-500 truncate">@{m.user.userName || m.user.username || '??'}</p>
</div>
</button>
))}

18
client-web/src/modules/chats/presentation/components/NewChatModal.tsx
View File

@@ -171,10 +171,10 @@ export default function NewChatModal({ onClose }: NewChatModalProps) {
<img src={u.avatar} alt="" className="w-5 h-5 rounded-full object-cover" />
) : (
<div className="w-5 h-5 rounded-full bg-gradient-to-br from-knot-500 to-purple-600 flex items-center justify-center text-white text-[9px] font-semibold">
{(u.displayName || u.username)?.[0]?.toUpperCase()}
{(u.displayName || u.userName || u.username || '?')[0]?.toUpperCase()}
</div>
)}
<span className="text-xs text-white">{u.displayName || u.username}</span>
<span className="text-xs text-white">{u.displayName || u.userName || u.username || ''}</span>
<button
onClick={() => setSelectedUsers((prev) => prev.filter((p) => p.id !== u.id))}
className="text-zinc-500 hover:text-zinc-300"
@@ -230,7 +230,7 @@ export default function NewChatModal({ onClose }: NewChatModalProps) {
onClick={() => setSelectedUsers((prev) => prev.filter((p) => p.id !== u.id))}
className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-knot-500/20 border border-knot-500/30 text-xs text-white hover:bg-knot-500/30 transition-colors"
>
{(u.displayName || u.username)}
{(u.displayName || u.userName || u.username || '')}
<X size={11} />
</button>
))}
@@ -276,7 +276,7 @@ export default function NewChatModal({ onClose }: NewChatModalProps) {
<img src={u.avatar} alt="" className="w-10 h-10 rounded-full object-cover" />
) : (
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-knot-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm">
{(u.displayName || u.username)?.[0]?.toUpperCase() || '?'}
{(u.displayName || u.userName || u.username || '?')[0]?.toUpperCase() || '?'}
</div>
)}
{u.isOnline && (
@@ -285,9 +285,9 @@ export default function NewChatModal({ onClose }: NewChatModalProps) {
</div>
<div className="min-w-0 text-left flex-1">
<p className="text-sm font-medium text-white truncate">
{u.displayName || u.username}
{u.displayName || u.userName || u.username || ''}
</p>
<p className="text-xs text-zinc-500 truncate">@{u.username}</p>
<p className="text-xs text-zinc-500 truncate">@{u.userName || u.username || ''}</p>
</div>
{mode === 'group-select' && (
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors ${
@@ -326,7 +326,7 @@ export default function NewChatModal({ onClose }: NewChatModalProps) {
<img src={u.avatar} alt="" className="w-10 h-10 rounded-full object-cover" />
) : (
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-knot-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm">
{(u.displayName || u.username)?.[0]?.toUpperCase() || '?'}
{(u.displayName || u.userName || u.username || '?')[0]?.toUpperCase() || '?'}
</div>
)}
{u.isOnline && (
@@ -335,9 +335,9 @@ export default function NewChatModal({ onClose }: NewChatModalProps) {
</div>
<div className="min-w-0 text-left flex-1">
<p className="text-sm font-medium text-white truncate">
{u.displayName || u.username}
{u.displayName || u.userName || u.username || ''}
</p>
<p className="text-xs text-zinc-500 truncate">@{u.username}</p>
<p className="text-xs text-zinc-500 truncate">@{u.userName || u.username || ''}</p>
</div>
{mode === 'group-select' && (
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors ${

17
client-web/src/modules/stories/presentation/components/StoryViewer.tsx
View File

@@ -45,7 +45,7 @@ export default function StoryViewer({ stories, initialUserIndex, initialStoryInd
const TICK = 50;
const [showViewers, setShowViewers] = useState(false);
const [viewers, setViewers] = useState<Array<{ userId: string; username: string; displayName: string; avatar: string | null; viewedAt: string }>>([]);
const [viewers, setViewers] = useState<Array<{ userId: string; username: string; userName?: string; displayName: string; avatar: string | null; viewedAt: string }>>([]);
const [viewersLoading, setViewersLoading] = useState(false);
const [showReplyInput, setShowReplyInput] = useState(false);
@@ -207,7 +207,7 @@ export default function StoryViewer({ stories, initialUserIndex, initialStoryInd
const socket = getSocket();
const handleStoryViewed = (data: { storyId: string; userId: string; username: string; displayName: string; avatar: string | null; viewedAt: string; viewCount: number; ownerId: string }) => {
const handleStoryViewed = (data: { storyId: string; userId: string; username: string; userName?: string; displayName: string; avatar: string | null; viewedAt: string; viewCount: number; ownerId: string }) => {
// console.log('[StoryViewer] story_viewed received:', data);
if (!currentStory || data.storyId !== currentStory.id) return;
// Only process if this user is the owner
@@ -227,6 +227,7 @@ export default function StoryViewer({ stories, initialUserIndex, initialStoryInd
return [...prev, {
userId: data.userId,
username: data.username,
userName: data.userName,
displayName: data.displayName,
avatar: data.avatar,
viewedAt: data.viewedAt
@@ -235,14 +236,14 @@ export default function StoryViewer({ stories, initialUserIndex, initialStoryInd
}
};
const handleStoryReply = (data: { storyId: string; userId: string; username: string; displayName: string; avatar: string | null; content: string; createdAt: string; ownerId: string }) => {
const handleStoryReply = (data: { storyId: string; userId: string; username: string; userName?: string; displayName: string; avatar: string | null; content: string; createdAt: string; ownerId: string }) => {
// console.log('[StoryViewer] story_reply received:', data);
// Only process if this user is the owner
if (data.ownerId !== user?.id) return;
// Could show notification or update UI
};
const handleStoryReaction = (data: { storyId: string; userId: string; username: string; displayName: string; avatar: string | null; emoji: string; createdAt: string; ownerId: string }) => {
const handleStoryReaction = (data: { storyId: string; userId: string; username: string; userName?: string; displayName: string; avatar: string | null; emoji: string; createdAt: string; ownerId: string }) => {
// console.log('[StoryViewer] story_reaction received:', data);
// Only process if this user is the owner
if (data.ownerId !== user?.id) return;
@@ -408,13 +409,13 @@ export default function StoryViewer({ stories, initialUserIndex, initialStoryInd
<div className="absolute top-4 left-0 right-0 flex items-center gap-3 px-4 pt-2 z-10">
<Avatar
src={avatarUrl}
name={currentUser.user.displayName || currentUser.user.username}
name={currentUser.user.displayName || currentUser.user.userName || currentUser.user.username || '?'}
size="sm"
className="ring-2 ring-white/20 rounded-full"
/>
<div className="flex-1 min-w-0">
<p className="text-white text-sm font-semibold truncate drop-shadow">
{currentUser.user.id === user?.id ? t('myStory') : currentUser.user.displayName || currentUser.user.username}
{currentUser.user.id === user?.id ? t('myStory') : currentUser.user.displayName || currentUser.user.userName || currentUser.user.username || ''}
</p>
<p className="text-white/60 text-xs drop-shadow">{timeAgo(currentStory.createdAt)}</p>
</div>
@@ -600,12 +601,12 @@ export default function StoryViewer({ stories, initialUserIndex, initialStoryInd
<div key={v.userId} className="flex items-center gap-3 py-1.5">
<Avatar
src={v.avatar ? getMediaUrl(v.avatar) : null}
name={v.displayName || v.username}
name={v.displayName || v.username || '?'}
size="sm"
className="rounded-full"
/>
<div className="flex-1 min-w-0">
<p className="text-white text-sm truncate">{v.displayName || v.username}</p>
<p className="text-white text-sm truncate">{v.displayName || v.username || ''}</p>
<p className="text-white/40 text-xs">@{v.username}</p>
</div>
<span className="text-white/30 text-xs">{timeAgo(v.viewedAt)}</span>

12
client-web/src/modules/users/presentation/components/UserProfile.tsx
View File

@@ -501,14 +501,14 @@ export default function UserProfile({ userId, chatId, onClose, onGoToMessage, is
</div>
) : (
<h3 className="mt-5 text-[24px] font-semibold text-white tracking-tight text-center px-4">
{profile.displayName || profile.userName || profile.username}
{profile.displayName || profile.userName || profile.username || ''}
</h3>
)}
{/* Username (неизменяемый) */}
<div className="flex items-center gap-1.5 mt-2 bg-accent/10 px-4 py-1.5 rounded-full border border-accent/20 cursor-default">
<AtSign size={14} className="text-accent" />
<span className="text-sm font-medium text-accent">{profile.userName || profile.username}</span>
<span className="text-sm font-medium text-accent">{profile.userName || profile.username || ''}</span>
</div>
{/* Онлайн статус */}
@@ -985,10 +985,10 @@ export default function UserProfile({ userId, chatId, onClose, onGoToMessage, is
user: {
id: profile.id,
userName: profile.userName || profile.username || '',
username: profile.username,
displayName: profile.displayName,
avatar: profile.avatar,
avatarUrl: profile.avatarUrl || profile.avatar
username: profile.username || '',
displayName: profile.displayName || '',
avatar: profile.avatar ?? null,
avatarUrl: (profile.avatarUrl || profile.avatar) ?? null
},
stories: sortedStories,
hasUnviewed: false