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

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