test commit

client/src/pages/auth/ui/AuthPage.tsx

@@ -16,7 +16,14 @@ import { $user, tokenSet } from '@/shared/model/auth'
 
 type AuthResponse = {
   token: string
-  user: { id: string; email: string; displayName?: string | null; phone?: string | null }
+  user: {
+    id: string
+    email: string
+    displayName?: string | null
+    avatar?: string | null
+    avatarType?: string | null
+    avatarStyle?: string | null
+  }
 }
 
 function getApiErrorMessage(err: unknown): string | null {

client/src/pages/me/ui/sections/SettingsPage.tsx

@@ -1,12 +1,19 @@
+import { useState } from 'react'
 import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Divider from '@mui/material/Divider'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
 import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
+import { createAvatar } from '@dicebear/core'
 import { useUnit } from 'effector-react'
 import { useForm } from 'react-hook-form'
+import { AVATAR_STYLES, DEFAULT_STYLE_ID, getStyleById } from '@/shared/lib/avatar-styles'
 import {
   $requestEmailChangeCodeError,
   $updateProfileError,
@@ -16,6 +23,7 @@ import {
   updateProfileFx,
   verifyEmailChangeFx,
 } from '@/shared/model/auth'
+import { UserAvatar } from '@/shared/ui/UserAvatar'
 import type { AxiosError } from 'axios'
 
 function getApiErrorMessage(error: unknown): string | null {
@@ -38,10 +46,9 @@ export function SettingsPage() {
     mode: 'onChange',
   })
 
-  const profileForm = useForm<{ displayName: string; phone: string }>({
+  const profileForm = useForm<{ displayName: string }>({
     defaultValues: {
       displayName: user?.displayName ? String(user.displayName) : '',
-      phone: user?.phone ? String(user.phone) : '',
     },
     mode: 'onChange',
   })
@@ -49,6 +56,16 @@ export function SettingsPage() {
   const emailErrorMsg = getApiErrorMessage(errorEmailReq) ?? getApiErrorMessage(errorEmailVerify)
   const profileErrorMsg = getApiErrorMessage(errorProfile)
 
+  const hasOAuthAvatar = Boolean(user?.avatar && user.avatarType !== 'generated')
+  const useOAuth = user?.avatarType === 'oauth'
+  const useGenerated = user?.avatarType === 'generated'
+
+  const [selectedStyle, setSelectedStyle] = useState(user?.avatarStyle || DEFAULT_STYLE_ID)
+  const [previewSrc, setPreviewSrc] = useState<string | null>(null)
+  const [previewStyle, setPreviewStyle] = useState<string>(DEFAULT_STYLE_ID)
+
+  const hasUnsavedPreview = previewSrc !== null
+
   if (!user) {
     return <Alert severity="info">Нужно войти. Перейдите на страницу «Вход».</Alert>
   }
@@ -85,20 +102,13 @@ export function SettingsPage() {
               slotProps={{ htmlInput: { maxLength: 40 } }}
               {...profileForm.register('displayName')}
             />
-            <TextField
-              label="Телефон"
-              helperText="Можно указать для связи по заказам"
-              {...profileForm.register('phone')}
-            />
             <Button
               variant="contained"
               disabled={pendingProfile}
               onClick={() => {
                 const raw = profileForm.getValues('displayName')
                 const name = raw.trim()
-                const phoneRaw = profileForm.getValues('phone')
-                const phone = phoneRaw.trim()
-                updateProfileFx({ displayName: name.length ? name : null, phone: phone.length ? phone : null })
+                updateProfileFx({ displayName: name.length ? name : null })
               }}
             >
               Сохранить
@@ -108,6 +118,112 @@ export function SettingsPage() {
 
         <Divider />
 
+        <Box>
+          <Typography variant="h6" gutterBottom>
+            Аватар
+          </Typography>
+
+          <Stack direction="row" spacing={3} sx={{ alignItems: 'flex-start', mb: 2 }}>
+            <Box sx={{ textAlign: 'center' }}>
+              <UserAvatar
+                userId={user.id}
+                avatarUrl={hasUnsavedPreview ? previewSrc : user.avatar}
+                avatarType={hasUnsavedPreview ? 'generated' : user.avatarType}
+                avatarStyle={hasUnsavedPreview ? previewStyle : user.avatarStyle}
+                size={80}
+                sx={{
+                  border: 2,
+                  borderColor: hasUnsavedPreview ? 'warning.main' : 'primary.main',
+                }}
+              />
+              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
+                {hasUnsavedPreview ? 'Предпросмотр' : useOAuth ? 'Сохранён' : useGenerated ? 'Сохранён' : 'Авто'}
+              </Typography>
+            </Box>
+            {hasUnsavedPreview && (
+              <Box sx={{ textAlign: 'center' }}>
+                <UserAvatar
+                  userId={user.id}
+                  avatarUrl={user.avatar}
+                  avatarType={user.avatarType}
+                  avatarStyle={user.avatarStyle}
+                  size={80}
+                  sx={{ border: 2, borderColor: 'divider', opacity: 0.6 }}
+                />
+                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
+                  Текущий
+                </Typography>
+              </Box>
+            )}
+          </Stack>
+
+          <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 1, mb: 1 }}>
+            <FormControl size="small" sx={{ minWidth: 140 }}>
+              <InputLabel>Стиль</InputLabel>
+              <Select value={selectedStyle} label="Стиль" onChange={(e) => setSelectedStyle(e.target.value)}>
+                {AVATAR_STYLES.map((s) => (
+                  <MenuItem key={s.id} value={s.id}>
+                    {s.label}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <Button
+              variant="outlined"
+              onClick={() => {
+                const seed = `${user.id}_${Date.now()}`
+                const styleDef = getStyleById(selectedStyle)
+                const avatar = createAvatar(styleDef.style, { seed })
+                setPreviewSrc(avatar.toDataUri())
+                setPreviewStyle(selectedStyle)
+              }}
+            >
+              Сгенерировать
+            </Button>
+          </Stack>
+
+          {hasUnsavedPreview && (
+            <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 1, mb: 1 }}>
+              <Button
+                variant="contained"
+                disabled={pendingProfile}
+                onClick={() => {
+                  updateProfileFx({
+                    displayName: user.displayName?.trim() || null,
+                    avatar: previewSrc,
+                    avatarType: 'generated',
+                    avatarStyle: previewStyle,
+                  })
+                  setPreviewSrc(null)
+                }}
+              >
+                Сохранить
+              </Button>
+              <Button variant="text" onClick={() => setPreviewSrc(null)}>
+                Отмена
+              </Button>
+            </Stack>
+          )}
+
+          {hasOAuthAvatar && !hasUnsavedPreview && (
+            <Button
+              variant="outlined"
+              disabled={pendingProfile || useOAuth}
+              onClick={() => {
+                updateProfileFx({
+                  displayName: user.displayName?.trim() || null,
+                  avatarType: 'oauth',
+                })
+              }}
+              sx={{ mt: 0.5 }}
+            >
+              Использовать OAuth
+            </Button>
+          )}
+        </Box>
+
+        <Divider />
+
         <Box>
           <Typography variant="h6" gutterBottom>
             Смена почты