mark student button

src/components/user-card/style.ts

@@ -114,30 +114,3 @@ export const Wrapper = styled.div<{ warn?: boolean; width?: string | number; pos
       : ''}
 `
 
-export const AddMissedButton = styled.button`
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  border: none;
-  background-color: var(--chakra-colors-blue-500);
-  color: white;
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-  opacity: 0.8;
-  transition: opacity 0.3s ease, transform 0.3s ease;
-
-  &:hover {
-    cursor: pointer;
-    opacity: 1;
-    transform: scale(1.1);
-  }
-  
-  .chakra-ui-dark & {
-    background-color: var(--chakra-colors-blue-400);
-  }
-`

src/components/user-card/user-card.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next'
 
 import { Reaction, User } from '../../__data__/model'
 
-import { AddMissedButton, Avatar, Wrapper, NameOverlay } from './style'
+import { Avatar, Wrapper, NameOverlay } from './style'
 
 // Map of reaction types to emojis
 const REACTION_EMOJIS = {
@@ -30,7 +30,6 @@ export function getGravatarURL(email, user) {
 export const UserCard = ({
   student,
   present,
-  onAddUser = undefined,
   wrapperAS = 'div',
   width,
   recentlyPresent = false,
@@ -39,7 +38,6 @@ export const UserCard = ({
   student: User
   present: boolean
   width?: string | number
-  onAddUser?: (user: User) => void
   wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>
   recentlyPresent?: boolean
   reaction?: Reaction
@@ -98,11 +96,7 @@ export const UserCard = ({
           </Box>
         )}
       </NameOverlay>
-      {onAddUser && !present && (
+      
-        <AddMissedButton onClick={() => onAddUser(student)} aria-label={t('journal.pl.common.add')}>
-          <AddIcon boxSize={3} />
-        </AddMissedButton>
-      )}
       
       {/* Анимация реакции */}
       <AnimatePresence>

src/pages/lesson-details.tsx

@@ -4,6 +4,7 @@ import QRCode from 'qrcode'
 import { sha256 } from 'js-sha256'
 import { getConfigValue, getNavigationValue } from '@brojs/cli'
 import { motion, AnimatePresence } from 'framer-motion'
+import { AddIcon } from '@chakra-ui/icons'
 import {
   Box,
   Container,
@@ -22,6 +23,7 @@ import { formatDate } from '../utils/dayjs-config'
 import { useSetBreadcrumbs } from '../components'
 
 import {
+  AddMissedButton,
   QRCanvas,
   StudentList,
 } from './style'
@@ -381,7 +383,6 @@ const LessonDetail = () => {
                             student={student}
                             present={student.present}
                             recentlyPresent={student.recentlyPresent}
-                            onAddUser={(user: User) => manualAdd({ lessonId, user })}
                             reaction={accessCode?.body?.lesson?.studentReactions?.find(r => r.sub === student.sub)}
                           />
                         </Box>
@@ -406,6 +407,12 @@ const LessonDetail = () => {
                             aspectRatio: "1"
                           }}
                         >
+                          <AddMissedButton
+                            onClick={() => manualAdd({ lessonId, user: student })}
+                            aria-label={t('journal.pl.common.add')}
+                          >
+                            <AddIcon boxSize={3} />
+                          </AddMissedButton>
                           <Box
                             position="absolute"
                             top="0"

src/pages/style.ts

@@ -15,6 +15,34 @@ const reveal = keyframes`
     }
 `
 
+export const AddMissedButton = styled.button`
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  border: none;
+  background-color: var(--chakra-colors-blue-500);
+  color: white;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  opacity: 0.8;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 1;
+    transform: scale(1.1);
+  }
+  
+  .chakra-ui-dark & {
+    background-color: var(--chakra-colors-blue-400);
+  }
+`
+
 export const StudentList = styled.ul`
   padding: 0;
   list-style: none;