package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "journal.pl",
-    "version": "3.16.5",
+    "version": "3.16.4",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "journal.pl",
-            "version": "3.16.5",
+            "version": "3.16.4",
             "license": "MIT",
             "dependencies": {
                 "@brojs/cli": "^1.8.4",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "journal.pl",
-    "version": "3.16.5",
+    "version": "3.16.4",
     "description": "bro-js platform journal ui repo",
     "main": "./src/index.tsx",
     "scripts": {

src/components/user-card/style.ts

@@ -114,3 +114,30 @@ 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 { Avatar, Wrapper, NameOverlay } from './style'
+import { AddMissedButton, Avatar, Wrapper, NameOverlay } from './style'
 
 // Map of reaction types to emojis
 const REACTION_EMOJIS = {
@@ -30,6 +30,7 @@ export function getGravatarURL(email, user) {
 export const UserCard = ({
   student,
   present,
+  onAddUser = undefined,
   wrapperAS = 'div',
   width,
   recentlyPresent = false,
@@ -38,6 +39,7 @@ 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
@@ -96,7 +98,11 @@ 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,7 +4,6 @@ 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,
@@ -23,7 +22,6 @@ import { formatDate } from '../utils/dayjs-config'
 import { useSetBreadcrumbs } from '../components'
 
 import {
-  AddMissedButton,
   QRCanvas,
   StudentList,
 } from './style'
@@ -383,6 +381,7 @@ 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>
@@ -407,12 +406,6 @@ 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,34 +15,6 @@ 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;