fix and update

apps/frontend/components/id/user-menu.tsx

@@ -13,10 +13,9 @@ import {
   UserRound
 } from 'lucide-react';
 import { AdminBadge } from '@/components/id/admin-badge';
+import { UserAvatar } from '@/components/id/user-avatar';
 import { useAuth } from '@/components/id/auth-provider';
-import { useAvatarUrl } from '@/hooks/use-avatar-url';
 import { getAdminLandingPath } from '@/lib/admin-access';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
 
@@ -38,17 +37,10 @@ const menuItems = [
 export function UserMenu({ className }: { className?: string }) {
   const router = useRouter();
   const { user, token, logout } = useAuth();
-  const { avatarUrl } = useAvatarUrl(user?.id, user?.hasAvatar, token);
 
   if (!user) return null;
 
   const contactLine = [maskPhone(user.phone), user.username ?? user.email].filter(Boolean).join(' · ');
-  const initials = user.displayName
-    .split(' ')
-    .map((part) => part[0])
-    .join('')
-    .slice(0, 2)
-    .toUpperCase();
 
   return (
     <Popover>
@@ -58,19 +50,31 @@ export function UserMenu({ className }: { className?: string }) {
           className={cn('flex items-center gap-2 rounded-full border border-[#eceef4] bg-white py-1 pl-1 pr-3 shadow-sm transition hover:bg-[#fafbfd]', className)}
           aria-label="Меню пользователя"
         >
-          <Avatar className="h-9 w-9">
-            {avatarUrl ? <AvatarImage src={avatarUrl} alt={user.displayName} /> : null}
-            <AvatarFallback className="text-xs font-semibold">{initials}</AvatarFallback>
-          </Avatar>
+          <UserAvatar
+            userId={user.id}
+            displayName={user.displayName}
+            hasAvatar={user.hasAvatar}
+            token={token}
+            isVerified={user.isVerified}
+            verificationIcon={user.verificationIcon}
+            className="h-9 w-9"
+            badgeSize="xs"
+          />
           <span className="hidden max-w-[120px] truncate text-sm font-medium md:inline">{user.displayName}</span>
         </button>
       </PopoverTrigger>
       <PopoverContent align="end" className="w-[min(92vw,360px)] rounded-[28px] border-[#eceef4] p-0 shadow-2xl">
         <div className="border-b border-[#eceef4] px-5 pb-5 pt-5 text-center">
-          <Avatar className="mx-auto h-20 w-20">
-            {avatarUrl ? <AvatarImage src={avatarUrl} alt={user.displayName} /> : null}
-            <AvatarFallback className="text-lg font-semibold">{initials}</AvatarFallback>
-          </Avatar>
+          <UserAvatar
+            userId={user.id}
+            displayName={user.displayName}
+            hasAvatar={user.hasAvatar}
+            token={token}
+            isVerified={user.isVerified}
+            verificationIcon={user.verificationIcon}
+            className="mx-auto h-20 w-20"
+            badgeSize="md"
+          />
           <div className="mt-3 flex items-center justify-center gap-2">
             <p className="text-lg font-semibold">{user.displayName}</p>
             <AdminBadge user={user} />