lendry/IdP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix and update

Browse Source
This commit is contained in:
lendry
2026-06-29 22:51:25 +03:00
parent 885b07d76b
commit 57cb58347b
30 changed files with 799 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/frontend/components/chat/chat-image-lightbox.tsx
View File

@@ -3,6 +3,7 @@
import { useEffect } from 'react';
import { ChevronLeft, ChevronRight, Download, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { MediaImageSkeleton } from '@/components/ui/media-image-skeleton';
import type { ChatMessage } from '@/lib/api';
import { cn } from '@/lib/utils';
@@ -97,7 +98,7 @@ export function ChatImageLightbox({
// eslint-disable-next-line @next/next/no-img-element
<img src={media.blobUrl} alt="" className="max-h-[calc(100vh-140px)] max-w-full object-contain" />
) : (
<div className="text-sm text-white/70">Загрузка изображения...</div>
<MediaImageSkeleton className="h-[min(70vh,520px)] w-[min(92vw,720px)]" rounded="2xl" />
)}
</div>
@@ -137,7 +138,9 @@ export function ChatImageLightbox({
{thumb?.blobUrl ? (
// eslint-disable-next-line @next/next/no-img-element
<img src={thumb.blobUrl} alt="" className="h-full w-full object-cover" />
) : null}
) : (
<MediaImageSkeleton className="h-full w-full min-h-0" rounded="none" />
)}
</button>
);
})}

10
apps/frontend/components/chat/chat-media-album-grid.tsx
View File

@@ -1,12 +1,13 @@
'use client';
import type { ChatMessage } from '@/lib/api';
import { MediaImageSkeleton } from '@/components/ui/media-image-skeleton';
import { parseChatMediaMetadata } from '@/lib/chat-media-album';
import { cn } from '@/lib/utils';
interface ChatMediaAlbumGridProps {
messages: ChatMessage[];
mediaUrls: Record<string, { blobUrl?: string } | undefined>;
mediaUrls: Record<string, { blobUrl?: string; status?: string } | undefined>;
className?: string;
onImageClick?: (message: ChatMessage, index: number) => void;
}
@@ -58,6 +59,7 @@ export function ChatMediaAlbumGrid({ messages, mediaUrls, className, onImageClic
{imageMessages.map((message, index) => {
const media = message.storageKey ? mediaUrls[message.storageKey] : undefined;
const hiddenCount = count > 6 && index === 5 ? count - 6 : 0;
const isLoading = !media?.blobUrl || media.status === 'loading';
return (
<button
key={message.id}
@@ -65,11 +67,11 @@ export function ChatMediaAlbumGrid({ messages, mediaUrls, className, onImageClic
className={cn('relative overflow-hidden bg-[#dfe4ea]', tileClass(Math.min(count, 6), index))}
onClick={() => onImageClick?.(message, index)}
>
{media?.blobUrl ? (
{isLoading ? (
<MediaImageSkeleton className="h-full min-h-[96px] w-full rounded-none" rounded="none" />
) : (
// eslint-disable-next-line @next/next/no-img-element
<img src={media.blobUrl} alt="" className="h-full w-full object-cover" />
) : (
<div className="flex h-full min-h-[96px] items-center justify-center text-xs text-[#667085]">…</div>
)}
{hiddenCount > 0 ? (
<div className="absolute inset-0 flex items-center justify-center bg-black/45 text-2xl font-semibold text-white">

39
apps/frontend/components/family/chat-room-avatar-display.tsx
View File

@@ -4,8 +4,11 @@ import { Bot } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { UserAvatar } from '@/components/id/user-avatar';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { useAuth } from '@/components/id/auth-provider';
import { ChatRoom, apiFetch } from '@/lib/api';
import { CHAT_ROOM_AVATAR_UPDATED_EVENT } from '@/lib/avatar-events';
import { useResilientBlobUrl } from '@/hooks/use-resilient-blob-url';
import { cn } from '@/lib/utils';
interface ChatRoomAvatarDisplayProps {
@@ -21,7 +24,9 @@ function sizeClass(size: 'sm' | 'md') {
}
export function ChatRoomAvatarDisplay({ room, viewerUserId, token, className, size = 'md' }: ChatRoomAvatarDisplayProps) {
const { isLoading: authLoading } = useAuth();
const [roomAvatarUrl, setRoomAvatarUrl] = useState<string | null>(null);
const [resolvingRoomAvatar, setResolvingRoomAvatar] = useState(false);
const peerMember = useMemo(
() =>
room.type === 'DIRECT' || room.type === 'E2E' || room.type === 'BOT'
@@ -31,34 +36,44 @@ export function ChatRoomAvatarDisplay({ room, viewerUserId, token, className, si
);
useEffect(() => {
if (!token || !room.hasAvatar || room.type === 'DIRECT' || room.type === 'E2E' || room.type === 'BOT') {
if (!token || authLoading || !room.hasAvatar || room.type === 'DIRECT' || room.type === 'E2E' || room.type === 'BOT') {
setRoomAvatarUrl(null);
setResolvingRoomAvatar(false);
return;
}
let cancelled = false;
setResolvingRoomAvatar(true);
apiFetch<{ accessUrl: string }>(`/media/chat/${room.id}/avatar/url`, {}, token)
.then((response) => {
if (!cancelled) setRoomAvatarUrl(response.accessUrl);
})
.catch(() => {
if (!cancelled) setRoomAvatarUrl(null);
})
.finally(() => {
if (!cancelled) setResolvingRoomAvatar(false);
});
return () => {
cancelled = true;
};
}, [room.hasAvatar, room.id, room.type, room.updatedAt, token]);
}, [authLoading, room.hasAvatar, room.id, room.type, room.updatedAt, token]);
useEffect(() => {
function handleRoomAvatarUpdated(event: Event) {
const detail = (event as CustomEvent<{ roomId?: string }>).detail;
if (detail?.roomId !== room.id || !room.hasAvatar || !token) return;
if (detail?.roomId !== room.id || !room.hasAvatar || !token || authLoading) return;
apiFetch<{ accessUrl: string }>(`/media/chat/${room.id}/avatar/url`, {}, token)
.then((response) => setRoomAvatarUrl(response.accessUrl))
.catch(() => setRoomAvatarUrl(null));
}
window.addEventListener(CHAT_ROOM_AVATAR_UPDATED_EVENT, handleRoomAvatarUpdated);
return () => window.removeEventListener(CHAT_ROOM_AVATAR_UPDATED_EVENT, handleRoomAvatarUpdated);
}, [room.hasAvatar, room.id, token]);
}, [authLoading, room.hasAvatar, room.id, token]);
const { blobUrl, isLoading: isLoadingRoomBlob } = useResilientBlobUrl(roomAvatarUrl, token, {
enabled: Boolean(room.hasAvatar && roomAvatarUrl && !authLoading),
label: `аватар чата ${room.name}`
});
if (peerMember && (room.type === 'DIRECT' || room.type === 'E2E')) {
return (
@@ -85,10 +100,22 @@ export function ChatRoomAvatarDisplay({ room, viewerUserId, token, className, si
);
}
if (room.hasAvatar && roomAvatarUrl) {
const isRoomAvatarLoading = Boolean(room.hasAvatar && (resolvingRoomAvatar || isLoadingRoomBlob || (roomAvatarUrl && !blobUrl)));
if (room.hasAvatar && isRoomAvatarLoading) {
return (
<Avatar className={cn(sizeClass(size), className)}>
<AvatarImage src={roomAvatarUrl} alt={room.name} />
<AvatarFallback className="bg-transparent p-0">
<Skeleton className="h-full w-full rounded-full" />
</AvatarFallback>
</Avatar>
);
}
if (room.hasAvatar && blobUrl) {
return (
<Avatar className={cn(sizeClass(size), className)}>
<AvatarImage src={blobUrl} alt={room.name} />
<AvatarFallback>{room.name.slice(0, 2).toUpperCase()}</AvatarFallback>
</Avatar>
);

41
apps/frontend/components/family/family-group-view.tsx
View File

@@ -65,6 +65,7 @@ import { useAuth } from '@/components/id/auth-provider';
import { useToast } from '@/components/id/toast-provider';
import { useRealtime } from '@/components/notifications/realtime-provider';
import { Button } from '@/components/ui/button';
import { MediaImageSkeleton } from '@/components/ui/media-image-skeleton';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { useRequireAuth } from '@/hooks/use-require-auth';
@@ -88,6 +89,7 @@ import {
fetchFamilyPresence,
forwardChatMessages,
getApiErrorMessage,
getAccessToken,
leaveFamilyGroup,
markChatRoomRead,
removeChatRoomMember,
@@ -197,22 +199,24 @@ function FamilySidebarAvatar({
uploading?: boolean;
onUpload: (file: File) => void;
}) {
const { isLoading: authLoading } = useAuth();
const [url, setUrl] = useState<string | null>(null);
useEffect(() => {
if (!hasAvatar || !token) {
if (!hasAvatar || !token || authLoading) {
setUrl(null);
return;
}
apiFetch<{ accessUrl: string }>(`/media/families/${groupId}/avatar/url`, {}, token)
.then((response) => setUrl(response.accessUrl))
.catch(() => setUrl(null));
}, [groupId, hasAvatar, token]);
}, [authLoading, groupId, hasAvatar, token]);
return (
<HoverUploadAvatar
name={name}
imageUrl={url}
imageToken={token}
uploading={uploading}
onFileSelect={onUpload}
className="h-11 w-11 shrink-0"
@@ -230,6 +234,10 @@ function familyMemberRoleLabel(role: string) {
return role === 'owner' ? 'Создатель семьи' : 'Участник';
}
/** Desktop: зона под fixed UserMenu + колокольчик (IdShell), на mobile не применяется */
const DESKTOP_CHAT_RIGHT_GUTTER = 'lg:pr-64';
const DESKTOP_CHAT_TOP_GUTTER = 'lg:pt-14';
function shouldSkipGroupedAlbumMessage(messages: ChatMessage[], index: number) {
const message = messages[index];
if (!message) return false;
@@ -257,7 +265,7 @@ function collectAlbumMessages(messages: ChatMessage[], startIndex: number) {
export function FamilyGroupView({ groupId }: { groupId: string }) {
const router = useRouter();
const { user, token } = useAuth();
const { user, token, isLoading: authLoading } = useAuth();
const { isReady, isPinLocked } = useRequireAuth();
const { showToast } = useToast();
const { subscribe, connected } = useRealtime();
@@ -469,9 +477,10 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
}, [isPinLocked, rooms, showToast, token]);
const loadPresence = useCallback(async () => {
if (!token || isPinLocked) return;
const accessToken = getAccessToken() ?? token?.trim() ?? null;
if (!accessToken || isPinLocked) return;
try {
const response = await fetchFamilyPresence(groupId, token);
const response = await fetchFamilyPresence(groupId, accessToken);
setPresenceMembers(response.members ?? []);
} catch {
// ignore background presence errors
@@ -479,13 +488,14 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
}, [groupId, isPinLocked, token]);
useEffect(() => {
if (!isReady || !token || isPinLocked) return;
const accessToken = getAccessToken() ?? token?.trim() ?? null;
if (!isReady || !accessToken || isPinLocked || authLoading) return;
setLoading(true);
loadGroup()
.catch((error) => showToast(getApiErrorMessage(error, 'Не удалось загрузить семью') ?? 'Ошибка'))
.finally(() => setLoading(false));
void loadPresence();
}, [isPinLocked, isReady, loadGroup, loadPresence, showToast, token]);
}, [authLoading, isPinLocked, isReady, loadGroup, loadPresence, showToast, token]);
useEffect(() => {
function handleAvatarUpdated() {
@@ -496,11 +506,12 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
}, [loadGroup]);
useEffect(() => {
if (!token || isPinLocked) return;
const accessToken = getAccessToken() ?? token?.trim() ?? null;
if (!accessToken || isPinLocked || authLoading) return;
void loadPresence();
const timer = window.setInterval(() => void loadPresence(), 25_000);
return () => window.clearInterval(timer);
}, [connected, isPinLocked, loadPresence, token]);
}, [authLoading, connected, isPinLocked, loadPresence, token]);
useEffect(() => {
if (!activeRoomId || activeRoomIsBot) return;
@@ -1699,7 +1710,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
>
{activeRoom ? (
<>
<div className="flex items-center justify-between gap-2 border-b border-[#dce3ec] bg-white px-3 py-3 sm:px-4 lg:pr-48">
<div className={cn('flex items-center justify-between gap-2 border-b border-[#dce3ec] bg-white px-3 py-3 sm:px-4', DESKTOP_CHAT_RIGHT_GUTTER)}>
<div className="flex min-w-0 flex-1 items-center gap-2 sm:gap-3">
<button
type="button"
@@ -1903,6 +1914,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
<ChatPinnedMessageBanner
senderName={pinnedMessage.senderName}
preview={pinnedPreview}
className={DESKTOP_CHAT_RIGHT_GUTTER}
onClick={() => {
if (!scrollToChatMessage(pinnedMessage.id)) {
showToast('Закреплённое сообщение пока не загружено в ленте');
@@ -1910,7 +1922,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
}}
/>
) : null}
<div className={cn('flex-1 space-y-2 overflow-y-auto px-4 py-4', isDragging && 'select-none')}>
<div className={cn('flex-1 space-y-2 overflow-y-auto px-4 py-4', DESKTOP_CHAT_RIGHT_GUTTER, DESKTOP_CHAT_TOP_GUTTER, isDragging && 'select-none')}>
{visibleMessages.map((message, messageIndex) => {
if (shouldSkipGroupedAlbumMessage(visibleMessages, messageIndex)) {
return null;
@@ -2055,10 +2067,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
}
if (!media?.blobUrl || media.status === 'loading') {
return (
<div className="flex items-center gap-2 text-sm text-[#667085]">
<Loader2 className="h-4 w-4 animate-spin" />
Загрузка файла...
</div>
<MediaImageSkeleton className="max-h-72 w-full max-w-[320px]" rounded="xl" />
);
}
if (message.type === 'IMAGE') {
@@ -2256,7 +2265,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
onDelete={() => void handleBulkDelete()}
/>
) : (
<div className="border-t border-[#dce3ec] bg-white px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] sm:px-3 sm:py-3">
<div className={cn('border-t border-[#dce3ec] bg-white px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] sm:px-3 sm:py-3', DESKTOP_CHAT_RIGHT_GUTTER)}>
{editingMessageId ? (
<ChatMessageEditBanner
preview={draft.trim() || messages.find((item) => item.id === editingMessageId)?.content || undefined}

21
apps/frontend/components/family/hover-upload-avatar.tsx
View File

@@ -3,11 +3,14 @@
import { Camera, Loader2 } from 'lucide-react';
import { useId } from 'react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { useResilientBlobUrl } from '@/hooks/use-resilient-blob-url';
import { cn } from '@/lib/utils';
interface HoverUploadAvatarProps {
name: string;
imageUrl?: string | null;
imageToken?: string | null;
uploading?: boolean;
onFileSelect: (file: File) => void;
className?: string;
@@ -17,12 +20,18 @@ interface HoverUploadAvatarProps {
export function HoverUploadAvatar({
name,
imageUrl,
imageToken = null,
uploading = false,
onFileSelect,
className,
fallbackClassName
}: HoverUploadAvatarProps) {
const inputId = useId();
const { blobUrl, isLoading } = useResilientBlobUrl(imageUrl, imageToken, {
enabled: Boolean(imageUrl && imageToken),
label: `аватар ${name}`
});
const resolvedUrl = blobUrl ?? (imageToken ? null : imageUrl);
return (
<label
@@ -34,8 +43,16 @@ export function HoverUploadAvatar({
)}
>
<Avatar className="h-full w-full">
{imageUrl ? <AvatarImage src={imageUrl} alt={name} /> : null}
<AvatarFallback className={fallbackClassName}>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
{isLoading && imageUrl ? (
<AvatarFallback className="bg-transparent p-0">
<Skeleton className="h-full w-full rounded-full" />
</AvatarFallback>
) : (
<>
{resolvedUrl ? <AvatarImage src={resolvedUrl} alt={name} /> : null}
<AvatarFallback className={fallbackClassName}>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
</>
)}
</Avatar>
<span
className={cn(

45
apps/frontend/components/id/auth-provider.tsx
View File

@@ -13,9 +13,10 @@ import {
AuthTokens,
ensureApiGatewayReady,
fetchAuthSession,
getDeviceFingerprint,
buildAuthDevicePayload,
IdentifyResponse,
getApiErrorMessage,
isApiGatewayReady,
isPinRequiredError,
OtpSendResponse,
PasswordlessAuthResponse,
@@ -93,10 +94,9 @@ function applySessionState(
setters.activatePinLock(session.sessionId ?? '');
} else {
setters.clearPinLock();
const accessToken = window.localStorage.getItem(AUTH_TOKEN_KEY);
if (accessToken) {
void syncFedcmSession(accessToken);
}
void ensureApiGatewayReady().then(() => {
void syncFedcmSession();
});
}
}
@@ -169,10 +169,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
void ensureApiGatewayReady().finally(() => {
initialBootstrapDoneRef.current = true;
setIsLoading(false);
if (auth.pinVerified !== false) {
void syncFedcmSession(auth.accessToken);
}
});
if (auth.pinVerified !== false) {
void syncFedcmSession(auth.accessToken);
}
},
[clearPinLock]
);
@@ -277,10 +277,11 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
window.localStorage.getItem(AUTH_TOKEN_KEY) || window.localStorage.getItem(AUTH_REFRESH_KEY)
);
if (hasSession && isInitialBootstrap) {
try {
await ensureApiGatewayReady();
} catch {
// Продолжаем даже если gateway не ответил в срок прогрева.
const bootstrapDeadline = Date.now() + 120_000;
while (!isApiGatewayReady() && Date.now() < bootstrapDeadline) {
await ensureApiGatewayReady(true);
if (isApiGatewayReady()) break;
await new Promise((resolve) => setTimeout(resolve, 800));
}
}
if (isInitialBootstrap) {
@@ -339,9 +340,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
body: JSON.stringify({
login: loginValue,
password,
fingerprint: getDeviceFingerprint(),
deviceName: navigator.userAgent.includes('Windows') ? 'Windows Browser' : 'Browser',
deviceType: 'WEB'
...buildAuthDevicePayload(),
})
});
if (auth.pinVerified) {
@@ -376,9 +375,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
body: JSON.stringify({
recipient,
code,
fingerprint: getDeviceFingerprint(),
deviceName: navigator.userAgent.includes('Windows') ? 'Windows Browser' : 'Browser',
deviceType: 'WEB'
...buildAuthDevicePayload(),
})
});
if (response.auth?.pinVerified) {
@@ -399,9 +396,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
body: JSON.stringify({
login: loginValue,
password: passwordValue,
fingerprint: getDeviceFingerprint(),
deviceName: navigator.userAgent.includes('Windows') ? 'Windows Browser' : 'Browser',
deviceType: 'WEB'
...buildAuthDevicePayload(),
})
});
if (auth.pinVerified) {
@@ -422,9 +417,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
body: JSON.stringify({
username,
password: passwordValue,
fingerprint: getDeviceFingerprint(),
deviceName: navigator.userAgent.includes('Windows') ? 'Windows Browser' : 'Browser',
deviceType: 'WEB'
...buildAuthDevicePayload(),
})
});
if (auth.pinVerified) {
@@ -443,9 +436,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
method: 'POST',
body: JSON.stringify({
recipient,
fingerprint: getDeviceFingerprint(),
deviceName: navigator.userAgent.includes('Windows') ? 'Windows Browser' : 'Browser',
deviceType: 'WEB'
...buildAuthDevicePayload(),
})
});
return response.totpChallengeToken;

29
apps/frontend/components/id/avatar-upload.tsx
View File

@@ -3,6 +3,7 @@
import { useRef, useState } from 'react';
import { Camera, Loader2 } from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { useToast } from '@/components/id/toast-provider';
import { useAvatarUrl } from '@/hooks/use-avatar-url';
import { apiFetch, getApiErrorMessage, uploadMediaObject } from '@/lib/api';
@@ -41,7 +42,7 @@ export function AvatarUpload({
const inputRef = useRef<HTMLInputElement>(null);
const { showToast } = useToast();
const [isUploading, setIsUploading] = useState(false);
const { avatarUrl, refreshAvatarUrl } = useAvatarUrl(userId, hasAvatar, token);
const { avatarUrl, isAvatarLoading, refreshAvatarUrl } = useAvatarUrl(userId, hasAvatar, token);
const initials = (displayName ?? '').slice(0, 2).toUpperCase() || 'ID';
async function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -99,8 +100,16 @@ export function AvatarUpload({
onClick={openFilePicker}
>
<Avatar className={cn('border-4 border-white shadow-xl', className)}>
{avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
<AvatarFallback className="bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-2xl">{initials}</AvatarFallback>
{isAvatarLoading && hasAvatar ? (
<AvatarFallback className="bg-transparent p-0">
<Skeleton className="h-full w-full rounded-full" />
</AvatarFallback>
) : (
<>
{avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
<AvatarFallback className="bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-2xl">{initials}</AvatarFallback>
</>
)}
</Avatar>
<span
className={cn(
@@ -146,14 +155,22 @@ export function AvatarDisplay({
verificationIcon?: string | null;
badgeSize?: 'xs' | 'sm' | 'md' | 'lg';
}) {
const { avatarUrl } = useAvatarUrl(userId, hasAvatar, token);
const { avatarUrl, isAvatarLoading } = useAvatarUrl(userId, hasAvatar, token);
const initials = (displayName ?? '').slice(0, 2).toUpperCase() || 'ID';
return (
<div className="relative inline-flex shrink-0">
<Avatar className={className}>
{avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
<AvatarFallback className="bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)]">{initials}</AvatarFallback>
{isAvatarLoading && hasAvatar ? (
<AvatarFallback className="bg-transparent p-0">
<Skeleton className="h-full w-full rounded-full" />
</AvatarFallback>
) : (
<>
{avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
<AvatarFallback className="bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)]">{initials}</AvatarFallback>
</>
)}
</Avatar>
{isVerified ? (
<VerificationBadge

19
apps/frontend/components/id/user-avatar.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { VerificationBadge } from '@/components/id/verification-badge';
import { useAvatarUrl } from '@/hooks/use-avatar-url';
import { cn } from '@/lib/utils';
@@ -26,7 +27,7 @@ export function UserAvatar({
badgeSize?: 'xs' | 'sm' | 'md' | 'lg';
fallbackClassName?: string;
}) {
const { avatarUrl } = useAvatarUrl(userId, hasAvatar, token);
const { avatarUrl, isAvatarLoading } = useAvatarUrl(userId, hasAvatar, token);
const initials = (displayName ?? '')
.split(' ')
.map((part) => part[0])
@@ -37,10 +38,18 @@ export function UserAvatar({
return (
<div className="relative inline-flex shrink-0">
<Avatar className={className}>
{avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
<AvatarFallback className={cn('bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-xs font-semibold', fallbackClassName)}>
{initials.slice(0, 2)}
</AvatarFallback>
{isAvatarLoading && hasAvatar ? (
<AvatarFallback className="bg-transparent p-0">
<Skeleton className="h-full w-full rounded-full" />
</AvatarFallback>
) : (
<>
{avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
<AvatarFallback className={cn('bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-xs font-semibold', fallbackClassName)}>
{initials.slice(0, 2)}
</AvatarFallback>
</>
)}
</Avatar>
{isVerified ? (
<VerificationBadge

1
apps/frontend/components/notifications/realtime-provider.tsx
View File

@@ -101,6 +101,7 @@ export function RealtimeProvider({ children }: { children: React.ReactNode }) {
data.type === 'family_invite' ||
data.type === 'role_assigned' ||
data.type === 'role_removed' ||
data.type === 'login_success' ||
(data.type === 'chat_message' && data.payload?.notificationId)
) {
setUnreadCount((count) => count + 1);

22
apps/frontend/components/ui/media-image-skeleton.tsx Normal file
View File

@@ -0,0 +1,22 @@
'use client';
import { cn } from '@/lib/utils';
import { Skeleton } from '@/components/ui/skeleton';
export function MediaImageSkeleton({
className,
rounded = 'xl'
}: {
className?: string;
rounded?: 'xl' | '2xl' | 'none' | 'full';
}) {
const roundedClass =
rounded === '2xl' ? 'rounded-2xl' : rounded === 'full' ? 'rounded-full' : rounded === 'none' ? 'rounded-none' : 'rounded-xl';
return (
<Skeleton
className={cn('relative min-h-[120px] w-full overflow-hidden', roundedClass, className)}
aria-hidden
/>
);
}

12
apps/frontend/components/ui/skeleton.tsx Normal file
View File

@@ -0,0 +1,12 @@
'use client';
import { cn } from '@/lib/utils';
export function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
className={cn('animate-pulse rounded-md bg-gradient-to-r from-[#e8ebf0] via-[#f4f6f9] to-[#e8ebf0] bg-[length:200%_100%]', className)}
{...props}
/>
);
}