Merge branch 'master' of ssh://85.143.175.152:222/bro-js/journal.pl

2025-03-24 00:01:26 +03:00
parent 8906ae6239 b7133f5889
commit 2f84f4a00a
42 changed files with 4264 additions and 934 deletions
--- a/src/components/app-header/app-header.tsx
+++ b/src/components/app-header/app-header.tsx
@@ -1,22 +1,74 @@
 import React from 'react';
 import {
-    Box,
+  Box,
  Flex,
  IconButton,
  useColorMode,
  Button,
-  HStack
+  HStack,
+  VStack,
+  Container,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Heading,
+  useBreakpointValue,
+  Text,
+  Tooltip,
+  useMediaQuery,
 } from '@chakra-ui/react';
-import { MoonIcon, SunIcon } from '@chakra-ui/icons';
+import { MoonIcon, SunIcon, ChevronRightIcon, InfoIcon, ChevronDownIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router-dom';
+import { getNavigationValue } from '@brojs/cli';

 interface AppHeaderProps {
  serviceMenuContainerRef?: React.RefObject<HTMLDivElement>;
+  breadcrumbs?: Array<{
+    title: string;
+    path?: string;
+    isCurrentPage?: boolean;
+  }>;
 }

-export const AppHeader = ({ serviceMenuContainerRef }: AppHeaderProps) => {
+export const AppHeader = ({ serviceMenuContainerRef, breadcrumbs }: AppHeaderProps) => {
  const { colorMode, toggleColorMode } = useColorMode();
  const { t, i18n } = useTranslation();
+  const location = useLocation();
+  
+  // Получаем путь к главной странице
+  const mainPagePath = getNavigationValue('journal.main');
+  
+  // Функция для формирования правильного пути с учетом mainPagePath
+  const getFullPath = (path?: string): string => {
+    if (!path) return '#';
+    if (path === '/') return mainPagePath;
+    
+    // Если путь уже начинается с mainPagePath, оставляем как есть
+    if (path.startsWith(mainPagePath)) return path;
+    
+    // Если путь начинается со слеша, добавляем mainPagePath
+    if (path.startsWith('/')) return `${mainPagePath}${path}`;
+    
+    // Иначе просто объединяем пути
+    return `${mainPagePath}/${path}`;
+  };
+  
+  // Определяем размеры для разных устройств
+  const fontSize = useBreakpointValue({ base: 'xs', sm: 'xs', md: 'sm' });
+  
+  // Проверяем, на каком устройстве находимся
+  const [isLargerThan768] = useMediaQuery("(min-width: 768px)");
+  const [isLargerThan480] = useMediaQuery("(min-width: 480px)");
+  
+  // Вертикальное отображение на мобильных устройствах
+  const isMobile = !isLargerThan480;
+  
+  // Горизонтальный сепаратор для десктопов
+  const horizontalSeparator = useBreakpointValue({ 
+    sm: <ChevronRightIcon color="gray.400" fontSize="xs" />, 
+    md: <ChevronRightIcon color="gray.400" /> 
+  });

  const toggleLanguage = () => {
    const newLang = i18n.language === 'ru' ? 'en' : 'ru';
@@ -24,47 +76,200 @@ export const AppHeader = ({ serviceMenuContainerRef }: AppHeaderProps) => {
  };

  return (
-    <Flex 
+    <Box 
      as="header" 
      width="100%" 
-      py={4} 
-      px={8} 
-      justifyContent="space-between" 
-      alignItems="center"
+      py={{ base: 2, md: 3 }}
+      bg={colorMode === 'light' ? 'white' : 'gray.800'}
+      boxShadow="sm"
      position="sticky"
      top={0}
      zIndex={10}
-      bg={colorMode === 'light' ? 'white' : 'gray.800'}
-      boxShadow="sm"
    >
-      {serviceMenuContainerRef && <div id="dots" ref={serviceMenuContainerRef}></div>}
-      <Box>
-        
-      </Box>
-      <HStack spacing={4}>
-        <Button 
-          onClick={toggleLanguage} 
-          size="sm" 
-          variant="ghost"
-          aria-label={i18n.language === 'ru' 
-            ? t('journal.pl.lang.switchToEn') 
-            : t('journal.pl.lang.switchToRu')
-          }
-        >
-          {i18n.language === 'ru' ? 'EN' : 'RU'}
-        </Button>
-        
-        <IconButton
-          aria-label={colorMode === 'light' 
-            ? t('journal.pl.theme.switchDark') 
-            : t('journal.pl.theme.switchLight')
-          }
-          icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
-          onClick={toggleColorMode}
-          variant="ghost"
-          size="md"
+      {/* Рендеринг dots контейнера вне условной логики, всегда присутствует в DOM */}
+      {serviceMenuContainerRef && (
+        <Box
+          id="dots"
+          ref={serviceMenuContainerRef}
+          position="absolute"
+          top="3"
+          left="0"
+          height="0"
+          width="0"
+          overflow="visible"
        />
-      </HStack>
-    </Flex>
+      )}
+      
+      <Container maxW="container.xl" px={{ base: 2, sm: 4 }}>
+        {isMobile ? (
+          <>
+            {/* Мобильная версия: верхняя строка с кнопками */}
+            <Flex justifyContent="space-between" alignItems="center" h={{ base: "40px" }}>
+              <Box>
+                {/* Пустой контейнер для поддержания расположения */}
+              </Box>
+              
+              <HStack spacing={{ base: 1 }} flexShrink={0}>
+                <Button 
+                  onClick={toggleLanguage} 
+                  size="sm" 
+                  variant="ghost"
+                  aria-label={i18n.language === 'ru' 
+                    ? t('journal.pl.lang.switchToEn') 
+                    : t('journal.pl.lang.switchToRu')
+                  }
+                  fontSize={fontSize}
+                  px={{ base: 1 }}
+                  minW={{ base: "30px" }}
+                  h={{ base: "30px" }}
+                >
+                  {i18n.language === 'ru' ? 'EN' : 'RU'}
+                </Button>
+                
+                <IconButton
+                  aria-label={colorMode === 'light' 
+                    ? t('journal.pl.theme.switchDark') 
+                    : t('journal.pl.theme.switchLight')
+                  }
+                  icon={colorMode === 'light' ? <MoonIcon boxSize={{ base: "14px" }} /> : <SunIcon boxSize={{ base: "14px" }} />}
+                  onClick={toggleColorMode}
+                  variant="ghost"
+                  size={{ base: "sm" }}
+                  minW={{ base: "30px" }}
+                  h={{ base: "30px" }}
+                />
+              </HStack>
+            </Flex>
+            
+            {/* Вертикальные хлебные крошки */}
+            {breadcrumbs && breadcrumbs.length > 0 && (
+              <VStack 
+                align="flex-start" 
+                spacing={0}
+                mt={1}
+              >
+                {breadcrumbs.map((crumb, index) => (
+                  <Flex 
+                    key={index} 
+                    align="center" 
+                    w="100%"
+                    pl={index > 0 ? 3 : 1}
+                    py={1}
+                    borderRadius="md"
+                    _hover={!crumb.isCurrentPage && crumb.path ? {
+                      bg: colorMode === 'light' ? 'gray.50' : 'gray.700',
+                    } : {}}
+                  >
+                    {index > 0 && (
+                      <ChevronDownIcon 
+                        color="gray.400" 
+                        fontSize="10px" 
+                        mr={2} 
+                        transform="translateY(-2px)"
+                      />
+                    )}
+                    
+                    {crumb.path && !crumb.isCurrentPage ? (
+                      <Link to={getFullPath(crumb.path)}>
+                        <Text
+                          fontWeight="medium"
+                          color={undefined}
+                          fontSize={fontSize}
+                          noOfLines={1}
+                          title={crumb.title}
+                        >
+                          {crumb.title}
+                        </Text>
+                      </Link>
+                    ) : (
+                      <Text
+                        fontWeight={crumb.isCurrentPage ? "bold" : "medium"}
+                        color={crumb.isCurrentPage ? (colorMode === 'light' ? 'cyan.600' : 'cyan.300') : undefined}
+                        fontSize={fontSize}
+                        noOfLines={1}
+                        title={crumb.title}
+                      >
+                        {crumb.title}
+                      </Text>
+                    )}
+                  </Flex>
+                ))}
+              </VStack>
+            )}
+          </>
+        ) : (
+          /* Десктопная версия: всё в одну строку */
+          <Flex justifyContent="space-between" alignItems="center" h="40px">
+            <Flex align="center" overflow="hidden" flex={1} minW={0}>
+              {/* Контейнер для разметки */}
+              <Box w="24px" mr={{ sm: 3, md: 4 }} flexShrink={0} />
+              
+              {breadcrumbs && breadcrumbs.length > 0 && (
+                <Breadcrumb 
+                  fontWeight="medium" 
+                  fontSize={fontSize}
+                  separator={horizontalSeparator}
+                  spacing={{ sm: "1" }}
+                  overflow="hidden"
+                  whiteSpace="nowrap"
+                  textOverflow="ellipsis"
+                  minW={0}
+                >
+                  {breadcrumbs.map((crumb, index) => (
+                    <BreadcrumbItem key={index} isCurrentPage={crumb.isCurrentPage}>
+                      <BreadcrumbLink 
+                        as={crumb.path ? Link : undefined} 
+                        to={getFullPath(crumb.path)} 
+                        href={!crumb.path ? "#" : undefined}
+                        maxWidth={{ sm: "120px", md: "200px", lg: "300px" }}
+                        overflow="hidden"
+                        textOverflow="ellipsis"
+                        display="inline-block"
+                        fontWeight={crumb.isCurrentPage ? "bold" : "medium"}
+                        color={crumb.isCurrentPage ? (colorMode === 'light' ? 'cyan.600' : 'cyan.300') : undefined}
+                        title={crumb.title}
+                      >
+                        {crumb.title}
+                      </BreadcrumbLink>
+                    </BreadcrumbItem>
+                  ))}
+                </Breadcrumb>
+              )}
+            </Flex>
+            
+            <HStack spacing={{ sm: 2, md: 4 }} flexShrink={0} ml={{ sm: 2, md: 3 }}>
+              <Button 
+                onClick={toggleLanguage} 
+                size="sm" 
+                variant="ghost"
+                aria-label={i18n.language === 'ru' 
+                  ? t('journal.pl.lang.switchToEn') 
+                  : t('journal.pl.lang.switchToRu')
+                }
+                fontSize={fontSize}
+                px={{ sm: 2, md: 3 }}
+                minW={{ sm: "40px" }}
+                h={{ sm: "34px" }}
+              >
+                {i18n.language === 'ru' ? 'EN' : 'RU'}
+              </Button>
+              
+              <IconButton
+                aria-label={colorMode === 'light' 
+                  ? t('journal.pl.theme.switchDark') 
+                  : t('journal.pl.theme.switchLight')
+                }
+                icon={colorMode === 'light' ? <MoonIcon boxSize={{ sm: "14px", md: "16px" }} /> : <SunIcon boxSize={{ sm: "14px", md: "16px" }} />}
+                onClick={toggleColorMode}
+                variant="ghost"
+                size={{ sm: "sm", md: "md" }}
+                minW={{ sm: "34px" }}
+                h={{ sm: "34px" }}
+              />
+            </HStack>
+          </Flex>
+        )}
+      </Container>
+    </Box>
  );
 }; 
--- a/src/components/breadcrumbs/breadcrumbs-context.tsx
+++ b/src/components/breadcrumbs/breadcrumbs-context.tsx
@@ -0,0 +1,45 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+export type Breadcrumb = {
+  title: string;
+  path?: string;
+  isCurrentPage?: boolean;
+};
+
+type BreadcrumbsContextType = {
+  breadcrumbs: Breadcrumb[];
+  setBreadcrumbs: (breadcrumbs: Breadcrumb[]) => void;
+};
+
+const BreadcrumbsContext = createContext<BreadcrumbsContextType | undefined>(undefined);
+
+export const BreadcrumbsProvider: React.FC<{children: ReactNode}> = ({ children }) => {
+  const [breadcrumbs, setBreadcrumbs] = useState<Breadcrumb[]>([]);
+
+  return (
+    <BreadcrumbsContext.Provider value={{ breadcrumbs, setBreadcrumbs }}>
+      {children}
+    </BreadcrumbsContext.Provider>
+  );
+};
+
+export const useBreadcrumbs = () => {
+  const context = useContext(BreadcrumbsContext);
+  if (context === undefined) {
+    throw new Error('useBreadcrumbs must be used within a BreadcrumbsProvider');
+  }
+  return context;
+};
+
+export const useSetBreadcrumbs = (newBreadcrumbs: Breadcrumb[]) => {
+  const { setBreadcrumbs } = useBreadcrumbs();
+  
+  React.useEffect(() => {
+    setBreadcrumbs(newBreadcrumbs);
+    
+    return () => {
+      // При размонтировании компонента очищаем хлебные крошки
+      setBreadcrumbs([]);
+    };
+  }, [setBreadcrumbs, JSON.stringify(newBreadcrumbs)]);
+}; 
--- a/src/components/breadcrumbs/index.ts
+++ b/src/components/breadcrumbs/index.ts
@@ -0,0 +1 @@
+export * from './breadcrumbs-context'; 
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,5 @@
 export { PageLoader } from './page-loader/page-loader';
 export { XlSpinner } from './xl-spinner/xl-spinner';
 export { ErrorBoundary } from './error-boundary';
-export { AppHeader } from './app-header'; 
+export { AppHeader } from './app-header';
+export { BreadcrumbsProvider, useBreadcrumbs, useSetBreadcrumbs } from './breadcrumbs'; 
--- a/src/components/user-card/style.ts
+++ b/src/components/user-card/style.ts
@@ -1,26 +1,96 @@
 import styled from '@emotion/styled'
 import { css, keyframes } from '@emotion/react'

-export const Avatar = styled.img`
-  width: 96px;
-  height: 96px;
-  margin: 0 auto;
-  border-radius: 6px;
+// Правильное определение анимации с помощью keyframes
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 `

+const pulse = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(72, 187, 120, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0);
+  }
+`
+
+export const Avatar = styled.img`
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+`
+
+export const NameOverlay = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  color: white;
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  opacity: 0.9;
+  transition: opacity 0.3s ease;
+  
+  .chakra-ui-dark & {
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+  }
+`
+
+// Стили без интерполяций компонентов
 export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
  list-style: none;
-  background-color: var(--chakra-colors-white);
-  padding: 16px;
-  border-radius: 12px;
-  box-shadow: 2px 2px 6px var(--chakra-colors-blackAlpha-400);
-  transition: all 0.5;
  position: relative;
-  width: 180px;
-  min-height: 190px;
-  max-height: 200px;
-  margin-right: 12px;
-  padding-bottom: 22px;
+  border-radius: 12px;
+  width: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+  cursor: pointer;
+  animation: ${fadeIn} 0.5s ease;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  }
+  
+  &:hover img {
+    transform: scale(1.05);
+  }
+  
+  &:hover > div:last-of-type:not(button) {
+    opacity: 1;
+  }
+  
+  &.recent {
+    animation: ${pulse} 1.5s infinite;
+    border: 2px solid var(--chakra-colors-green-400);
+  }
+  
+  .chakra-ui-dark & {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    
+    &.recent {
+      border: 2px solid var(--chakra-colors-green-300);
+    }
+  }
+  
  ${({ width }) =>
    width
      ? css`
@@ -31,35 +101,36 @@ export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
  ${(props) =>
    props.warn
      ? css`
-          background-color: var(--chakra-colors-blackAlpha-800);
          opacity: 0.7;
-          color: var(--chakra-colors-gray-200);
+          filter: grayscale(0.8);
        `
      : ''}
-
-  .chakra-ui-dark & {
-    background-color: var(--chakra-colors-gray-700);
-    color: var(--chakra-colors-white);
-    box-shadow: 2px 2px 6px var(--chakra-colors-blackAlpha-600);
-  }
-  
-  .chakra-ui-dark &.warn {
-    background-color: var(--chakra-colors-blackAlpha-900);
-    color: var(--chakra-colors-gray-300);
-  }
 `

 export const AddMissedButton = styled.button`
  position: absolute;
  bottom: 8px;
-  right: 12px;
+  right: 8px;
  border: none;
-  background-color: transparent;
-  opacity: 0.2;
-  color: inherit;
+  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 {
+  &:hover {
    cursor: pointer;
    opacity: 1;
+    transform: scale(1.1);
+  }
+  
+  .chakra-ui-dark & {
+    background-color: var(--chakra-colors-blue-400);
  }
 `
--- a/src/components/user-card/user-card.tsx
+++ b/src/components/user-card/user-card.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
 import { sha256 } from 'js-sha256'
-import { useColorMode } from '@chakra-ui/react'
 import { useState } from 'react'
+import { Box, useColorMode } from '@chakra-ui/react'
+import { CheckCircleIcon, AddIcon } from '@chakra-ui/icons'

 import { User } from '../../__data__/model'

-import { AddMissedButton, Avatar, Wrapper } from './style'
+import { AddMissedButton, Avatar, Wrapper, NameOverlay } from './style'

 export function getGravatarURL(email, user) {
  if (!email) return void 0
@@ -18,15 +19,17 @@ export function getGravatarURL(email, user) {
 export const UserCard = ({
  student,
  present,
-  onAddUser,
-  wrapperAS,
-  width
+  onAddUser = undefined,
+  wrapperAS = 'div',
+  width,
+  recentlyPresent = false
 }: {
  student: User
  present: boolean
  width?: string | number
  onAddUser?: (user: User) => void
  wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+  recentlyPresent?: boolean
 }) => {
  const { colorMode } = useColorMode();
  const [imageError, setImageError] = useState(false);
@@ -36,7 +39,7 @@ export const UserCard = ({
      warn={!present} 
      as={wrapperAS} 
      width={width}
-      className={!present ? 'warn' : ''}
+      className={!present ? 'warn' : recentlyPresent ? 'recent' : ''}
    >
      <Avatar 
        src={imageError ? getGravatarURL(student.email, null) : (student.picture || getGravatarURL(student.email, null))} 
@@ -46,22 +49,19 @@ export const UserCard = ({
          }
        }} 
      />
-      <p style={{ 
-        marginTop: 6,
-        color: colorMode === 'light' ? 'inherit' : 'var(--chakra-colors-gray-100)'
-      }}>
-        {student.name || student.preferred_username}{' '}
-      </p>
+      <NameOverlay>
+        {student.name || student.preferred_username}
+        {present && (
+          <Box as="span" ml={2} display="inline-block" color={recentlyPresent ? "green.100" : "green.300"}>
+            <CheckCircleIcon boxSize={3} />
+          </Box>
+        )}
+      </NameOverlay>
      {onAddUser && !present && (
-        <AddMissedButton onClick={() => onAddUser(student)}>
-          add
+        <AddMissedButton onClick={() => onAddUser(student)} aria-label="Отметить присутствие">
+          <AddIcon boxSize={3} />
        </AddMissedButton>
      )}
    </Wrapper>
  )
 }
-
-UserCard.defaultProps = {
-  wrapperAS: 'div',
-  onAddUser: void 0,
-}