Набросать редактирование пользователя

apps/web/src/app/AppWrapper/App/ModalRoot/index.tsx

@@ -4,10 +4,15 @@ import {
 } from '@vkontakte/vk-mini-apps-router'
 import { ModalRoot as VKUIModalRoot } from '@vkontakte/vkui'
 
-import { MODAL_PAGE_LESSON, MODAL_PAGE_MARK } from '../../../../shared/config'
+import {
+  MODAL_PAGE_LESSON,
+  MODAL_PAGE_MARK,
+  MODAL_PAGE_USER_EDIT
+} from '../../../../shared/config'
 
 import LessonModal from './modals/LessonModal'
 import MarkDetailedModal from './modals/MarkDetailedModal'
+import UserEditModal from './modals/UserEditModal'
 
 const ModalRoot = () => {
   const routeNavigator = useRouteNavigator()
@@ -20,6 +25,7 @@ const ModalRoot = () => {
     >
       <LessonModal id={MODAL_PAGE_LESSON} />
       <MarkDetailedModal id={MODAL_PAGE_MARK} />
+      <UserEditModal id={MODAL_PAGE_USER_EDIT} />
     </VKUIModalRoot>
   )
 }

apps/web/src/app/AppWrapper/App/ModalRoot/modals/UserEditModal/index.tsx

@@ -0,0 +1,58 @@
+import {
+  Avatar,
+  Flex,
+  Group,
+  Header,
+  ModalPage,
+  ModalPageHeader,
+  Separator,
+  SimpleCell,
+  Spacing
+} from '@vkontakte/vkui'
+import { useUserEditModal } from '../../../../../../store/userEditModal'
+const urls = [
+  'https://mangabuff.ru/img/avatars/x150/806.gif',
+  'https://mangabuff.ru/img/avatars/x150/1209.gif',
+  'https://mangabuff.ru/img/avatars/x150/689.jpg',
+  'https://mangabuff.ru/img/avatars/x150/688.jpg',
+  'https://mangabuff.ru/img/avatars/x150/685.gif',
+  'https://mangabuff.ru/img/avatars/x150/682.jpg',
+  'https://mangabuff.ru/img/avatars/x150/476.jpg',
+  'https://mangabuff.ru/img/avatars/x150/477.jpg',
+  'https://mangabuff.ru/img/avatars/x150/478.jpg',
+  'https://mangabuff.ru/img/avatars/x150/479.jpg',
+  'https://mangabuff.ru/img/avatars/x150/480.jpg',
+  'https://mangabuff.ru/img/avatars/x150/482.jpg',
+  'https://mangabuff.ru/img/avatars/x150/483.jpg',
+  'https://mangabuff.ru/img/avatars/x150/484.jpg',
+  'https://mangabuff.ru/img/avatars/x150/485.jpg',
+  'https://mangabuff.ru/img/avatars/x150/652.jpg'
+]
+
+const UserEditModal = ({ id }: { id: string }) => {
+  const { modalData } = useUserEditModal()
+  return (
+    <ModalPage id={id} size={500} dynamicContentHeight>
+      <ModalPageHeader>Сменить аву</ModalPageHeader>
+      <Group>
+        <Group header={<Header mode='secondary'>Текущая ава</Header>}>
+          <SimpleCell before={<Avatar src={urls[0]} />}>
+            {modalData.name}
+          </SimpleCell>
+        </Group>
+
+        <Spacing size={24}>
+          <Separator />
+        </Spacing>
+
+        <Flex margin='auto' gap='2xl' justify='center'>
+          {urls.map((url, index) => (
+            <Avatar key={index} size={110} src={url} />
+          ))}
+        </Flex>
+      </Group>
+    </ModalPage>
+  )
+}
+
+export default UserEditModal

apps/web/src/pages/Achievements/Tabs/Summary/UserInfo/index.css

@@ -8,12 +8,6 @@
   align-items: center;
 }
 
-.userInfo__Title {
-  margin-bottom: 8px;
-  margin-top: 20px;
-}
-
-.userInfo__Text {
-  margin-bottom: 24px;
-  color: var(--vkui--color_text_secondary);
+.userInfo__Content {
+  padding: 12px;
 }

apps/web/src/pages/Achievements/Tabs/Summary/UserInfo/index.tsx

@@ -1,10 +1,12 @@
 import { Icon28SchoolOutline } from '@vkontakte/icons'
 import {
   Avatar,
+  Button,
   Div,
   Gradient,
   Group,
   Header,
+  Placeholder,
   SimpleCell,
   Spinner,
   Text,
@@ -15,6 +17,9 @@ import { type FC, useEffect, useState } from 'react'
 import { winxAva } from '../../../../../shared/config/images.ts'
 
 import './index.css'
+import { useRouteNavigator } from '@vkontakte/vk-mini-apps-router'
+import { MODAL_PAGE_USER_EDIT } from '../../../../../shared/config'
+import { useUserEditModal } from '../../../../../store/userEditModal'
 
 interface UserData {
   city: string
@@ -68,6 +73,18 @@ const UserInfo: FC = () => {
     getUserInfo()
   }, [])
 
+  const { setData } = useUserEditModal()
+  const routeNavigator = useRouteNavigator()
+
+  const handleEditUserButtonClick = () => {
+    const modalData = {
+      name: userData.name
+    }
+
+    setData(modalData)
+    routeNavigator.showModal(MODAL_PAGE_USER_EDIT)
+  }
+
   if (isLoading) {
     return (
       <Div>
@@ -81,11 +98,22 @@ const UserInfo: FC = () => {
   return (
     <Group mode='plain' header={header}>
       <Gradient mode='tint' className='userInfo__Wrapper'>
-        <Avatar size={96} src={winxAva} />
-        <Title className='userInfo__Title' level='2' weight='2' Component='h2'>
-          {userData.name}
-        </Title>
-        <Text className='userInfo__Text'>Студент ({userData.group})</Text>
+        <Avatar size={96} src='https://mangabuff.ru/img/avatars/x150/806.gif' />
+        <Placeholder
+          header={userData.name}
+          className='userInfo__Content'
+          action={
+            <Button
+              size='m'
+              mode='secondary'
+              onClick={handleEditUserButtonClick}
+            >
+              Редактировать
+            </Button>
+          }
+        >
+          Студент ({userData.group})
+        </Placeholder>
       </Gradient>
       <Group
         mode='plain'

apps/web/src/shared/config/constants.ts

@@ -3,3 +3,4 @@ export const THIRD_SEC = 30 * SECOND
 /** Modal's ids */
 export const MODAL_PAGE_LESSON = 'lesson'
 export const MODAL_PAGE_MARK = 'mark'
+export const MODAL_PAGE_USER_EDIT = 'user-edit'

apps/web/src/store/userEditModal/index.ts

@@ -0,0 +1,23 @@
+import { useSyncExternalStore } from 'react'
+
+import { createStore } from '../store'
+
+interface ModalProps {
+  name: string
+}
+
+// TODO: add data
+const modalStore = createStore<ModalProps>({
+  initialState: {
+    name: ''
+  }
+})
+
+export const useUserEditModal = () => {
+  const modal = useSyncExternalStore(modalStore.subscribe, modalStore.getState)
+
+  return {
+    modalData: modal,
+    setData: (data: ModalProps) => modalStore.setState(data)
+  }
+}