Kirill
175 lines
10 KiB
Markdown
175 lines
10 KiB
Markdown
# 2026-05-21 — Avatar & Display Name Fixes
|
||
|
||
## Overview
|
||
|
||
8 замечаний по отображению аватаров, имён, ссылок и stock-статусов в админке и на клиенте.
|
||
|
||
## Approach
|
||
|
||
Локальные изолированные правки (Подход 1). Каждый пункт правится в своём контексте без переиспользования общих компонентов с `/me` — минимизирует риск регрессии.
|
||
|
||
---
|
||
|
||
## 1. Admin settings page (`/admin/settings`)
|
||
|
||
**Проблема:** Админ не может настроить displayName/avatar. Страница `/me/settings` существует, но админ редиректится с `/me` на `/admin`.
|
||
|
||
**Решение:**
|
||
- Новая FSD-страница `client/src/pages/admin-settings/`
|
||
- Пункт «Настройки» в сайдбаре `AdminLayoutPage` (после «Уведомления»)
|
||
- Форма: редактирование `displayName`, выбор/генерация аватара (DiceBear, 16 стилей), загрузка своего аватара. Копирует UI с `/me/settings` (SettingsPage), но как отдельный компонент, не шаринг.
|
||
- API: `GET /api/admin/profile` и `PATCH /api/admin/profile` (новый роут в `server/src/routes/api/`)
|
||
- Роут защищён `verifyAdmin`, работает с полями: `displayName`, `avatar`, `avatarType`, `avatarStyle`
|
||
- После сохранения — инвалидация `$user` стора на клиенте, чтобы хедер подхватил новый аватар
|
||
|
||
**Файлы:**
|
||
- `client/src/pages/admin-settings/ui/AdminSettingsPage.tsx` (новый)
|
||
- `client/src/pages/admin-layout/ui/AdminLayoutPage.tsx` (добавить пункт меню)
|
||
- `server/src/routes/api/admin-profile.js` (новый)
|
||
- `server/src/index.js` (зарегистрировать роут)
|
||
|
||
---
|
||
|
||
## 2. Admin avatar in header
|
||
|
||
**Проблема:** В хедере админ видит только кнопку «Выход», без аватара.
|
||
|
||
**Решение:**
|
||
- В `AppHeader` для админа: `IconButton` с `UserAvatar` + выпадающее меню с пунктами «Настройки» (`/admin/settings`) и «Выход»
|
||
- Аватар из `AuthUser.avatar/avatarType/avatarStyle`, при отсутствии — DiceBear fallback
|
||
- Компонент по аналогии с `UserMenu`, но упрощённый: только 2 пункта, без профиля покупателя. Можно сделать как `AdminUserMenu` в `features/user/user-menu/` или прямо в `AppHeader`
|
||
|
||
**Файлы:**
|
||
- `client/src/app/layout/AppHeader.tsx` (заменить кнопку «Выход» на меню с аватаром)
|
||
|
||
---
|
||
|
||
## 3. Avatar column in admin users table
|
||
|
||
**Проблема:** В таблице пользователей (`/admin/users`) нет колонки с аватарами.
|
||
|
||
**Решение:**
|
||
- `AdminUser` тип (`entities/user/model/types.ts`): добавить `avatar`, `avatarType`, `avatarStyle` (опциональные)
|
||
- Серверный `GET /api/admin/users`: добавить эти поля в SELECT
|
||
- `AdminUsersPage`: колонка «Аватар» первой (перед email), рендер через `<UserAvatar size={28} />`
|
||
|
||
**Файлы:**
|
||
- `client/src/entities/user/model/types.ts`
|
||
- `client/src/pages/admin-users/ui/AdminUsersPage.tsx`
|
||
- `server/src/routes/api/admin-users.js`
|
||
|
||
---
|
||
|
||
## 4. Avatars in order messages
|
||
|
||
**Проблема:** `ChatMessageBubble` показывает только текст «Админ»/«Вы»/«Пользователь», без аватаров.
|
||
|
||
**Решение:**
|
||
- `ChatMessageBubble`: добавить опциональный проп `avatar?: ReactNode` — рендерится слева от сообщения для `authorType='admin'`, справа для `'user'`
|
||
- `OrderChat` (пользователь): для админских сообщений — DiceBear по `'admin'` seed, для своих — аватар из `AuthUser`
|
||
- `OrderDetailContent` (админ): для пользователя — аватар из `order.user.avatar/avatarType/avatarStyle`, для админа — из `AuthUser`
|
||
- API `GET /api/orders/:id` и `GET /api/admin/orders/:id`: добавить `user { avatar, avatarType, avatarStyle }` в ответ
|
||
- Клиентский тип заказа: добавить эти поля в `user`
|
||
|
||
**Файлы:**
|
||
- `client/src/shared/ui/ChatMessageBubble.tsx`
|
||
- `client/src/features/order-chat/ui/OrderChat.tsx`
|
||
- `client/src/features/order-detail/ui/OrderDetailContent.tsx`
|
||
- `server/src/routes/user-orders.js` (GET /:id)
|
||
- `server/src/routes/api/admin-orders.js` (GET /:id)
|
||
- Типы заказа на клиенте
|
||
|
||
---
|
||
|
||
## 5. Actual user avatars in reviews
|
||
|
||
**Проблема:** В отзывах всегда генерируется DiceBear по строке `authorDisplay`, а не используется реальный аватар пользователя.
|
||
|
||
**Решение:**
|
||
- API `public-reviews`: добавить `authorAvatar`, `authorAvatarType`, `authorAvatarStyle` в ответ (из `user.avatar/avatarType/avatarStyle`)
|
||
- Тип `PublicProductReviewItem` и `PublicReviewFeedItem`: добавить эти поля
|
||
- `ReviewsBlock` и `ProductReviewsList`: передавать реальные значения в `UserAvatar` вместо `null`
|
||
|
||
**Файлы:**
|
||
- `server/src/routes/api/public-reviews.js`
|
||
- `client/src/entities/review/api/reviews-api.ts` (типы)
|
||
- `client/src/widgets/reviews-block/ui/ReviewsBlock.tsx`
|
||
- `client/src/features/product-review/ui/ProductReviewsList.tsx`
|
||
- `server/src/routes/api/admin-reviews.js` (тоже может использовать)
|
||
|
||
---
|
||
|
||
## 6. Product link in reviews only if published
|
||
|
||
**Проблема:** В `ReviewsBlock` ссылка на товар показывается всегда, даже если товар скрыт из каталога.
|
||
|
||
**Решение:**
|
||
- API `public-reviews`: добавить объект `product: { id, title, published, slug }` в каждый элемент фида
|
||
- Тип `PublicReviewFeedItem`: обновить поле с `productId`/`productTitle` на `product: { id, title, published, slug }`
|
||
- `ReviewsBlock`: если `product.published === true` — ссылка `<RouterLink>`, иначе — просто текст `<Typography>`
|
||
|
||
**Файлы:**
|
||
- `server/src/routes/api/public-reviews.js`
|
||
- `client/src/entities/review/api/reviews-api.ts`
|
||
- `client/src/widgets/reviews-block/ui/ReviewsBlock.tsx`
|
||
|
||
---
|
||
|
||
## 7. "Out of stock" chip visibility in catalog
|
||
|
||
**Проблема:** Чип «Нет в наличии» существует в DOM, но визуально не виден в каталоге.
|
||
|
||
**Решение:**
|
||
- Проверить `z-index` чипа в `ProductCard` — поднять выше (например `zIndex: 2`), чтобы не перекрывался `CardMedia` или другими элементами
|
||
- Предположительно проблема в том, что чип рендерится до изображения в DOM, и изображение перекрывает его по z-order
|
||
|
||
**Файлы:**
|
||
- `client/src/entities/product/ui/ProductCard.tsx`
|
||
|
||
---
|
||
|
||
## 8. Person icon for unauthenticated users
|
||
|
||
**Проблема:** До авторизации в хедере нет иконки пользователя.
|
||
|
||
**Решение:**
|
||
- В `AppHeader`: когда `user === null` и `!loading`, показывать `IconButton` с `PersonIcon`, ведущую на `/auth`
|
||
- Сейчас `UserMenu` не рендерится без `user` — добавить условие `user ? <UserMenu ...> : <IconButton href="/auth"><PersonIcon /></IconButton>`
|
||
|
||
**Файлы:**
|
||
- `client/src/app/layout/AppHeader.tsx`
|
||
|
||
---
|
||
|
||
## Data flow summary
|
||
|
||
```
|
||
┌─ Admin settings ─────────────────────────────────────┐
|
||
│ PATCH /api/admin/profile → DB → invalidate $user │
|
||
│ → AppHeader reads $user.avatar → UserAvatar │
|
||
└───────────────────────────────────────────────────────┘
|
||
|
||
┌─ Admin users table ───────────────────────────────────┐
|
||
│ GET /api/admin/users → { ..., avatar, avatarType, │
|
||
│ avatarStyle } → AdminUsersPage → <UserAvatar /> │
|
||
└───────────────────────────────────────────────────────┘
|
||
|
||
┌─ Order chat ──────────────────────────────────────────┐
|
||
│ GET /api/orders/:id → { user: { avatar, ... } } │
|
||
│ → OrderChat → ChatMessageBubble(avatar={<UserAvatar/>})│
|
||
│ Admin avatar: from AuthUser store │
|
||
└───────────────────────────────────────────────────────┘
|
||
|
||
┌─ Reviews ─────────────────────────────────────────────┐
|
||
│ GET /api/public-reviews → { authorAvatar, ..., │
|
||
│ product: { published, ... } } │
|
||
│ → ReviewsBlock/ProductReviewsList → UserAvatar + link│
|
||
└───────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## Testing
|
||
|
||
- **Client unit tests:** Проверить рендер аватаров в `ProductReviewsList`, `ReviewsBlock`, `AdminUsersPage`, `ChatMessageBubble`, `AppHeader` для разных состояний (авторизован/неавторизован/админ)
|
||
- **Server tests:** Проверить новые поля в ответах API
|
||
- **Manual:** Проверить видимость чипа «Нет в наличии», отображение ссылки в отзывах для published/unpublished товаров
|