base commit

client/src/pages/me/ui/MeLayoutPage.tsx

@@ -6,6 +6,7 @@ import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined'
 import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined'
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'
 import Alert from '@mui/material/Alert'
+import Badge from '@mui/material/Badge'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import Drawer from '@mui/material/Drawer'
@@ -18,8 +19,10 @@ import Stack from '@mui/material/Stack'
 import { useTheme } from '@mui/material/styles'
 import Typography from '@mui/material/Typography'
 import useMediaQuery from '@mui/material/useMediaQuery'
+import { useQuery } from '@tanstack/react-query'
 import { useUnit } from 'effector-react'
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
+import { fetchUnreadMessageCount } from '@/entities/user/api/messages-api'
 import { AddressesPage } from '@/pages/me/ui/sections/AddressesPage'
 import { MessagesPage } from '@/pages/me/ui/sections/MessagesPage'
 import { OrderDetailPage } from '@/pages/me/ui/sections/OrderDetailPage'
@@ -41,6 +44,16 @@ export function MeLayoutPage() {
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))
   const [mobileOpen, setMobileOpen] = useState(false)
 
+  const unreadQuery = useQuery({
+    queryKey: ['me', 'messages', 'unread-count'],
+    queryFn: fetchUnreadMessageCount,
+    enabled: Boolean(user),
+    refetchInterval: 45_000,
+    refetchOnWindowFocus: true,
+  })
+
+  const unreadMessages = unreadQuery.data?.count ?? 0
+
   const navItems: NavItem[] = useMemo(
     () => [
       { to: '/me/orders', label: 'Заказы', icon: <LocalShippingOutlinedIcon /> },
@@ -81,7 +94,19 @@ export function MeLayoutPage() {
               setMobileOpen(false)
             }}
           >
-            <ListItemIcon>{i.icon}</ListItemIcon>
+            <ListItemIcon>
+              {i.to === '/me/messages' ? (
+                <Badge
+                  color="error"
+                  badgeContent={unreadMessages > 99 ? '99+' : unreadMessages}
+                  invisible={unreadMessages === 0}
+                >
+                  {i.icon}
+                </Badge>
+              ) : (
+                i.icon
+              )}
+            </ListItemIcon>
             <ListItemText primary={i.label} />
           </ListItemButton>
         ))}