base commit

client/src/app/layout/AppHeader.tsx

@@ -3,6 +3,7 @@ import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined
 import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined'
 import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined'
 import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined'
+import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'
 import AppBar from '@mui/material/AppBar'
 import Badge from '@mui/material/Badge'
 import Box from '@mui/material/Box'
@@ -19,12 +20,15 @@ import Select from '@mui/material/Select'
 import type { SelectChangeEvent } from '@mui/material/Select'
 import { useTheme } from '@mui/material/styles'
 import Toolbar from '@mui/material/Toolbar'
+import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import useMediaQuery from '@mui/material/useMediaQuery'
+import { useQuery } from '@tanstack/react-query'
 import { useUnit } from 'effector-react'
 import { Link as RouterLink, useNavigate } from 'react-router-dom'
 import type { ColorScheme } from '@/app/providers/theme-controller'
 import { useThemeController } from '@/app/providers/theme-controller'
+import { fetchMyCart } from '@/entities/cart/api/cart-api'
 import { STORE_NAME } from '@/shared/config'
 import { $user, logout, tokenSet } from '@/shared/model/auth'
 import { BearLogo } from '@/shared/ui/BearLogo'
@@ -33,7 +37,6 @@ type NavItem = { label: string; to: string }
 
 const navItems: NavItem[] = [
   { label: 'Каталог', to: '/' },
-  { label: 'Корзина', to: '/cart' },
   { label: 'Админка', to: '/admin' },
 ]
 
@@ -166,6 +169,14 @@ export function AppHeader() {
   const user = useUnit($user)
   const navigate = useNavigate()
 
+  const cartQuery = useQuery({
+    queryKey: ['me', 'cart'],
+    queryFn: fetchMyCart,
+    enabled: Boolean(user),
+  })
+
+  const cartCount = cartQuery.data?.items?.length ?? 0
+
   const [userAnchorEl, setUserAnchorEl] = useState<null | HTMLElement>(null)
   const userMenuOpen = Boolean(userAnchorEl)
 
@@ -238,6 +249,25 @@ export function AppHeader() {
               </Button>
             ))}
 
+          <Tooltip title={user ? 'Корзина' : 'Авторизуйтесь для совершения покупок'}>
+            <span>
+              <IconButton
+                color="inherit"
+                sx={{ ml: 1 }}
+                disabled={!user}
+                onClick={() => {
+                  if (!user) navigate('/auth')
+                  else navigate('/cart')
+                }}
+                aria-label="Корзина"
+              >
+                <Badge color="secondary" badgeContent={user ? cartCount : 0} invisible={!user || cartCount === 0}>
+                  <ShoppingCartOutlinedIcon />
+                </Badge>
+              </IconButton>
+            </span>
+          </Tooltip>
+
           <IconButton color="inherit" onClick={openUserMenu} sx={{ ml: 1 }} aria-label="Пользователь">
             <Badge
               variant="dot"
@@ -300,6 +330,14 @@ export function AppHeader() {
                 {i.label}
               </Button>
             ))}
+            <Button
+              variant="text"
+              onClick={() => go(user ? '/cart' : '/auth')}
+              sx={{ justifyContent: 'flex-start' }}
+              disabled={!user}
+            >
+              Корзина
+            </Button>
             <Button variant="text" onClick={() => go(user ? '/me' : '/auth')} sx={{ justifyContent: 'flex-start' }}>
               {user ? 'Профиль' : 'Вход / регистрация'}
             </Button>