Enhance localization support by integrating i18next for translations across various components and pages. Update UI elements to utilize translated strings for improved user experience in both English and Russian. Additionally, refactor the Toaster component to support a context-based approach for toast notifications.

src/pages/chains/ChainFormPage.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import {
   Box,
   Heading,
@@ -29,6 +30,7 @@ export const ChainFormPage: React.FC = () => {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
   const isEdit = !!id
+  const { t } = useTranslation()
 
   const { data: chain, isLoading: isLoadingChain, error: loadError } = useGetChainQuery(id!, {
     skip: !id,
@@ -53,8 +55,8 @@ export const ChainFormPage: React.FC = () => {
 
     if (!name.trim()) {
       toaster.create({
-        title: 'Ошибка валидации',
-        description: 'Введите название цепочки',
+        title: t('challenge.admin.common.validation.error'),
+        description: t('challenge.admin.chains.validation.enter.name'),
         type: 'error',
       })
       return
@@ -62,8 +64,8 @@ export const ChainFormPage: React.FC = () => {
 
     if (selectedTasks.length === 0) {
       toaster.create({
-        title: 'Ошибка валидации',
-        description: 'Добавьте хотя бы одно задание',
+        title: t('challenge.admin.common.validation.error'),
+        description: t('challenge.admin.chains.validation.add.task'),
         type: 'error',
       })
       return
@@ -81,8 +83,8 @@ export const ChainFormPage: React.FC = () => {
           },
         }).unwrap()
         toaster.create({
-          title: 'Успешно',
-          description: 'Цепочка обновлена',
+          title: t('challenge.admin.common.success'),
+          description: t('challenge.admin.chains.updated'),
           type: 'success',
         })
       } else {
@@ -91,16 +93,24 @@ export const ChainFormPage: React.FC = () => {
           tasks: taskIds,
         }).unwrap()
         toaster.create({
-          title: 'Успешно',
-          description: 'Цепочка создана',
+          title: t('challenge.admin.common.success'),
+          description: t('challenge.admin.chains.created'),
           type: 'success',
         })
       }
       navigate(URLs.chains)
-    } catch (err: any) {
+    } catch (err: unknown) {
+      const errorMessage = 
+        (err && typeof err === 'object' && 'data' in err && 
+         err.data && typeof err.data === 'object' && 'error' in err.data &&
+         err.data.error && typeof err.data.error === 'object' && 'message' in err.data.error &&
+         typeof err.data.error.message === 'string')
+          ? err.data.error.message
+          : t('challenge.admin.chains.save.error')
+      
       toaster.create({
-        title: 'Ошибка',
-        description: err?.data?.error?.message || 'Не удалось сохранить цепочку',
+        title: t('challenge.admin.common.error'),
+        description: errorMessage,
         type: 'error',
       })
     }
@@ -131,19 +141,19 @@ export const ChainFormPage: React.FC = () => {
   }
 
   if (isEdit && isLoadingChain) {
-    return <LoadingSpinner message="Загрузка цепочки..." />
+    return <LoadingSpinner message={t('challenge.admin.chains.loading')} />
   }
 
   if (isEdit && loadError) {
-    return <ErrorAlert message="Не удалось загрузить цепочку" />
+    return <ErrorAlert message={t('challenge.admin.chains.load.error')} />
   }
 
   if (isLoadingTasks) {
-    return <LoadingSpinner message="Загрузка заданий..." />
+    return <LoadingSpinner message={t('challenge.admin.common.loading.tasks')} />
   }
 
   if (!allTasks) {
-    return <ErrorAlert message="Не удалось загрузить список заданий" />
+    return <ErrorAlert message={t('challenge.admin.chains.tasks.load.error')} />
   }
 
   const isLoading = isCreating || isUpdating
@@ -156,7 +166,7 @@ export const ChainFormPage: React.FC = () => {
 
   return (
     <Box>
-      <Heading mb={6}>{isEdit ? 'Редактировать цепочку' : 'Создать цепочку'}</Heading>
+      <Heading mb={6}>{isEdit ? t('challenge.admin.chains.edit.title') : t('challenge.admin.chains.create.title')}</Heading>
 
       <Box
         as="form"
@@ -171,11 +181,11 @@ export const ChainFormPage: React.FC = () => {
         <VStack gap={6} align="stretch">
           {/* Name */}
           <Field.Root required>
-            <Field.Label>Название цепочки</Field.Label>
+            <Field.Label>{t('challenge.admin.chains.field.name')}</Field.Label>
             <Input
               value={name}
               onChange={(e) => setName(e.target.value)}
-              placeholder="Введите название цепочки"
+              placeholder={t('challenge.admin.chains.field.name.placeholder')}
               maxLength={255}
               disabled={isLoading}
             />
@@ -184,7 +194,7 @@ export const ChainFormPage: React.FC = () => {
           {/* Selected Tasks */}
           <Box>
             <Text fontWeight="bold" mb={3}>
-              Задания в цепочке ({selectedTasks.length})
+              {t('challenge.admin.chains.selected.tasks')} ({selectedTasks.length})
             </Text>
             {selectedTasks.length === 0 ? (
               <Box
@@ -195,7 +205,7 @@ export const ChainFormPage: React.FC = () => {
                 borderRadius="md"
                 textAlign="center"
               >
-                <Text color="gray.500">Добавьте задания из списка ниже</Text>
+                <Text color="gray.500">{t('challenge.admin.chains.selected.tasks.empty')}</Text>
               </Box>
             ) : (
               <VStack gap={2} align="stretch">
@@ -255,10 +265,10 @@ export const ChainFormPage: React.FC = () => {
           {/* Available Tasks */}
           <Box>
             <Text fontWeight="bold" mb={3}>
-              Доступные задания
+              {t('challenge.admin.chains.available.tasks')}
             </Text>
             <Input
-              placeholder="Поиск заданий..."
+              placeholder={t('challenge.admin.chains.search.placeholder')}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               mb={3}
@@ -273,8 +283,8 @@ export const ChainFormPage: React.FC = () => {
               >
                 <Text color="gray.500">
                   {allTasks.length === selectedTasks.length
-                    ? 'Все задания уже добавлены'
-                    : 'Ничего не найдено'}
+                    ? t('challenge.admin.chains.all.tasks.added')
+                    : t('challenge.admin.common.not.found')}
                 </Text>
               </Box>
             ) : (
@@ -295,7 +305,7 @@ export const ChainFormPage: React.FC = () => {
                   >
                     <Text>{task.title}</Text>
                     <Button size="sm" colorPalette="teal" variant="ghost">
-                      + Добавить
+                      {t('challenge.admin.chains.button.add')}
                     </Button>
                   </Flex>
                 ))}
@@ -306,10 +316,10 @@ export const ChainFormPage: React.FC = () => {
           {/* Actions */}
           <HStack gap={3} justify="flex-end">
             <Button variant="outline" onClick={() => navigate(URLs.chains)} disabled={isLoading}>
-              Отмена
+              {t('challenge.admin.common.cancel')}
             </Button>
-            <Button type="submit" colorPalette="teal" loading={isLoading}>
-              {isEdit ? 'Сохранить изменения' : 'Создать цепочку'}
+            <Button type="submit" colorPalette="teal" disabled={isLoading}>
+              {isEdit ? t('challenge.admin.chains.button.save') : t('challenge.admin.chains.button.create')}
             </Button>
           </HStack>
         </VStack>