test commit

client/src/app/layout/MainLayout.tsx

@@ -10,12 +10,16 @@ import Typography from '@mui/material/Typography'
 import { Link as RouterLink } from 'react-router-dom'
 import { AppHeader } from '@/app/layout/AppHeader'
 import { STORE_EMAIL, STORE_NAME, STORE_PHONE, VK_URL } from '@/shared/config'
+import { ScrollOnNavigate } from '@/shared/ui/ScrollOnNavigate'
+import { ScrollToTop } from '@/shared/ui/ScrollToTop'
 
 export function MainLayout({ children }: PropsWithChildren) {
   const year = new Date().getFullYear()
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <ScrollOnNavigate />
+      <ScrollToTop />
       <AppHeader />
 
       <Box component="main" sx={{ flex: 1, py: { xs: 4, md: 6 } }}>

client/src/pages/admin-layout/ui/AdminLayoutPage.tsx

@@ -25,6 +25,8 @@ import { AdminProductsPage } from '@/pages/admin-products'
 import { AdminReviewsPage } from '@/pages/admin-reviews'
 import { AdminUsersPage } from '@/pages/admin-users'
 import { $user } from '@/shared/model/auth'
+import { ScrollOnNavigate } from '@/shared/ui/ScrollOnNavigate'
+import { ScrollToTop } from '@/shared/ui/ScrollToTop'
 import { AdminNotificationsPage } from './AdminNotificationsPage'
 
 type NavItem = {
@@ -124,6 +126,8 @@ export function AdminLayoutPage() {
 
   return (
     <Stack direction={{ xs: 'column', md: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
+      <ScrollOnNavigate />
+      <ScrollToTop />
       {isMobile ? (
         <>
           <Stack direction="row" spacing={1} sx={{ width: '100%', alignItems: 'center' }}>

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

@@ -26,6 +26,8 @@ import { OrderDetailPage } from '@/pages/me/ui/sections/OrderDetailPage'
 import { OrdersPage } from '@/pages/me/ui/sections/OrdersPage'
 import { SettingsPage } from '@/pages/me/ui/sections/SettingsPage'
 import { $user } from '@/shared/model/auth'
+import { ScrollOnNavigate } from '@/shared/ui/ScrollOnNavigate'
+import { ScrollToTop } from '@/shared/ui/ScrollToTop'
 
 type NavItem = {
   to: string
@@ -128,6 +130,8 @@ export function MeLayoutPage() {
 
   return (
     <Stack direction={{ xs: 'column', md: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
+      <ScrollOnNavigate />
+      <ScrollToTop />
       {isMobile ? (
         <>
           <Stack direction="row" spacing={1} sx={{ width: '100%', alignItems: 'center' }}>

client/src/shared/lib/avatar-styles.ts

@@ -81,7 +81,7 @@ export const AVATAR_STYLES: StyleDef[] = [
   },
 ]
 
-export const DEFAULT_STYLE_ID = 'bottts'
+export const DEFAULT_STYLE_ID = 'avataaars'
 
 export function getStyleById(id: string | null | undefined): StyleDef {
   return AVATAR_STYLES.find((s) => s.id === id) ?? AVATAR_STYLES[0]

client/src/shared/ui/ScrollOnNavigate.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+export function ScrollOnNavigate() {
+  const { pathname } = useLocation()
+
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [pathname])
+
+  return null
+}

client/src/shared/ui/ScrollToTop.tsx

@@ -0,0 +1,31 @@
+import Fab from '@mui/material/Fab'
+import useScrollTrigger from '@mui/material/useScrollTrigger'
+import Zoom from '@mui/material/Zoom'
+import { ArrowUp } from 'lucide-react'
+
+export function ScrollToTop() {
+  const trigger = useScrollTrigger({ threshold: 400, disableHysteresis: true })
+
+  const handleClick = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  return (
+    <Zoom in={trigger}>
+      <Fab
+        color="primary"
+        size="small"
+        onClick={handleClick}
+        aria-label="К началу страницы"
+        sx={{
+          position: 'fixed',
+          bottom: 24,
+          right: 24,
+          zIndex: 1100,
+        }}
+      >
+        <ArrowUp size={20} />
+      </Fab>
+    </Zoom>
+  )
+}