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,8 +161,15 @@ export const TaskPage = () => {
                 <Text fontSize="sm" fontWeight="medium" color="gray.600" mr={2}>
                   Задания:
                 </Text>
-                {chain.tasks.map((t, index) => {
+                {chain.tasks
+                  .filter((_, index) => {
                     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 (
@@ -177,7 +185,7 @@ export const TaskPage = () => {
                         opacity={isAccessible ? 1 : 0.5}
                         cursor={isAccessible ? 'pointer' : 'not-allowed'}
                       >
-                      {isAccessible ? index + 1 : `🔒${index + 1}`}
+                        {isAccessible ? taskIndex + 1 : `🔒${taskIndex + 1}`}
                       </Button>
                     )
                   })}