Refactor Header and TaskWorkspace components to enhance UI and user feedback. Header now accepts chainName and taskProgress props for improved context display. TaskWorkspace updates include styling adjustments, conditional rendering for queue status, and feedback messages, streamlining user interaction during task processing.

src/pages/main/main.tsx

@@ -1,9 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import {
   Box,
-  Button,
-  Flex,
-  Heading,
   Text,
 } from '@chakra-ui/react'
 import { Alert } from '@chakra-ui/react/alert'
@@ -44,11 +41,6 @@ export const MainPage = () => {
     }
   }
 
-  const handleBackToChains = () => {
-    setSelectedChain(null)
-    setSelectedTask(null)
-  }
-
   useEffect(() => {
     const unsubscribe = eventEmitter.on('submission_completed', (event) => {
       const submission = (event.data as { submission?: { status: string; attemptNumber: number } })?.submission
@@ -100,11 +92,13 @@ export const MainPage = () => {
     )
   }
 
+  const taskProgress = `Задание ${selectedChain.tasks.findIndex(t => t.id === selectedTask?.id) + 1} из ${selectedChain.tasks.length}`
+
   // Показываем выбранную цепочку и задания
   return (
     <>
-      <Header />
-      <Box bg="gray.50" minH="100vh" py={8} px={{ base: 4, md: 8 }}>
+      <Header chainName={selectedChain.name} taskProgress={taskProgress} />
+      <Box bg="gray.50" minH="100vh" py={4} px={{ base: 4, md: 8 }}>
         <Box maxW="1200px" mx="auto">
           {notification && (
             <Alert.Root status={notification.status} borderRadius="md" mb={4}>
@@ -123,20 +117,6 @@ export const MainPage = () => {
             </Alert.Root>
           )}
 
-          <Flex justify="space-between" align="center" mb={8}>
-            <Box>
-              <Heading size="lg" mb={1}>
-                {selectedChain.name}
-              </Heading>
-              <Text color="gray.600">
-                Задание {selectedChain.tasks.findIndex(t => t.id === selectedTask?.id) + 1} из {selectedChain.tasks.length}
-              </Text>
-            </Box>
-            <Button onClick={handleBackToChains} variant="outline">
-              Вернуться к цепочкам
-            </Button>
-          </Flex>
-
           {selectedTask && (
             <TaskWorkspace task={selectedTask} onTaskComplete={handleTaskComplete} />
           )}