Refactor TaskWorkspace to conditionally display learning materials with a button for user interaction. Update TaskPage to filter task navigation buttons based on accessibility, improving user experience in task management.

src/components/personal/TaskWorkspace.tsx

@@ -76,7 +76,29 @@ export const TaskWorkspace = ({ task, onTaskComplete }: TaskWorkspaceProps) => {
 
   return (
     <VStack align="stretch" gap={3}>
+      {/* Дополнительные материалы - показываются сверху */}
+      {task.learningMaterial && showLearningMaterial && (
+        <LearningMaterialViewer
+          content={task.learningMaterial}
+          linesPerPage={30}
+        />
+      )}
+
       <Box borderWidth="1px" borderRadius="md" borderColor="gray.200" p={4} bg="white" shadow="sm">
+        {/* Кнопка для показа дополнительного материала */}
+        {task.learningMaterial && !showLearningMaterial && (
+          <HStack justify="center" mb={4}>
+            <Button
+              size="sm"
+              variant="outline"
+              colorScheme="blue"
+              onClick={() => setShowLearningMaterial(true)}
+            >
+              📚 Прочитать доп. материал
+            </Button>
+          </HStack>
+        )}
+
         <Text fontSize="lg" fontWeight="bold" mb={3} color="gray.800">
           {task.title}
         </Text>
@@ -249,30 +271,8 @@ export const TaskWorkspace = ({ task, onTaskComplete }: TaskWorkspaceProps) => {
         >
           <ReactMarkdown remarkPlugins={[remarkGfm]}>{task.description}</ReactMarkdown>
         </Box>
-
-        {/* Кнопка для показа дополнительного материала */}
-        {task.learningMaterial && !showLearningMaterial && (
-          <HStack justify="center" mt={4}>
-            <Button
-              size="sm"
-              variant="outline"
-              colorScheme="blue"
-              onClick={() => setShowLearningMaterial(true)}
-            >
-              📚 Прочитать доп. материал
-            </Button>
-          </HStack>
-        )}
       </Box>
 
-      {/* Дополнительные материалы - показываются отдельно */}
-      {task.learningMaterial && showLearningMaterial && (
-        <LearningMaterialViewer
-          content={task.learningMaterial}
-          linesPerPage={30}
-        />
-      )}
-
 
 
       {/* Статус проверки и результат - фиксированное место */}

src/pages/task/TaskPage.tsx

@@ -115,6 +115,7 @@ export const TaskPage = () => {
     navigate(URLs.task(chain.id, newTaskId))
   }
 
+
   // Проверяем доступность текущего задания при загрузке
   useEffect(() => {
     if (chain && currentTaskIndex >= 0 && !isTaskAccessible(currentTaskIndex)) {
@@ -138,7 +139,7 @@ export const TaskPage = () => {
     return null
   }
 
-  const taskProgress = `Задание ${currentTaskIndex + 1}`
+  const taskProgress = `Задание`
 
   return (
     <>
@@ -160,27 +161,34 @@ export const TaskPage = () => {
                 <Text fontSize="sm" fontWeight="medium" color="gray.600" mr={2}>
                   Задания:
                 </Text>
-                {chain.tasks.map((t, index) => {
+                {chain.tasks
-                  const isAccessible = isTaskAccessible(index)
+                  .filter((_, index) => {
-                  const isCurrent = t.id === taskId
+                    const isAccessible = isTaskAccessible(index)
+                    // Показываем все доступные + только следующую недоступную
+                    return isAccessible || index === furthestTaskIndex + 1
+                  })
+                  .map((t) => {
+                    const taskIndex = chain.tasks.indexOf(t)
+                    const isAccessible = isTaskAccessible(taskIndex)
+                    const isCurrent = t.id === taskId
 
-                  return (
+                    return (
-                    <Button
+                      <Button
-                      key={t.id}
+                        key={t.id}
-                      size="sm"
+                        size="sm"
-                      variant={isCurrent ? 'solid' : isAccessible ? 'outline' : 'ghost'}
+                        variant={isCurrent ? 'solid' : isAccessible ? 'outline' : 'ghost'}
-                      colorScheme={isCurrent ? 'teal' : 'gray'}
+                        colorScheme={isCurrent ? 'teal' : 'gray'}
-                      // @ts-expect-error Chakra UI v2 uses isDisabled
+                        // @ts-expect-error Chakra UI v2 uses isDisabled
-                      isDisabled={!isAccessible}
+                        isDisabled={!isAccessible}
-                      onClick={() => isAccessible && handleNavigateToTask(t.id)}
+                        onClick={() => isAccessible && handleNavigateToTask(t.id)}
-                      minW="40px"
+                        minW="40px"
-                      opacity={isAccessible ? 1 : 0.5}
+                        opacity={isAccessible ? 1 : 0.5}
-                      cursor={isAccessible ? 'pointer' : 'not-allowed'}
+                        cursor={isAccessible ? 'pointer' : 'not-allowed'}
-                    >
+                      >
-                      {isAccessible ? index + 1 : `🔒${index + 1}`}
+                        {isAccessible ? taskIndex + 1 : `🔒${taskIndex + 1}`}
-                    </Button>
+                      </Button>
-                  )
+                    )
-                })}
+                  })}
               </HStack>
 
               <Button