Add Notification and new mini desing

frontend/src/App.jsx

@@ -11,6 +11,7 @@ import Profile from './components/Profile';
 import Auth from './components/Auth';
 import ErrorBoundary from './components/ErrorBoundary';
 import ThemeSelector from './components/ThemeSelector';
+import NotificationSystem, { notify } from './components/NotificationSystem';
 import axios from 'axios';
 import { API_URL } from './config';
 import { getTheme } from './themes';
@@ -27,7 +28,7 @@ function App() {
   const [showProfile, setShowProfile] = useState(false);
   const [viewingUsername, setViewingUsername] = useState(null);
   const [connectionError, setConnectionError] = useState(false);
-  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'dark');
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'modern');
   const [sidebarOpen, setSidebarOpen] = useState(true);
 
   const currentTheme = getTheme(theme);
@@ -149,11 +150,13 @@ function App() {
         { headers: { Authorization: `Bearer ${token}` } }
       );
       console.log('Сервер запущен:', response.data);
+      notify('success', 'Сервер запущен', `Сервер "${serverName}" успешно запущен`);
       setTimeout(() => {
         loadServers();
       }, 1000);
     } catch (error) {
       console.error('Ошибка запуска сервера:', error);
+      notify('error', 'Ошибка запуска', error.response?.data?.detail || 'Не удалось запустить сервер');
       alert(error.response?.data?.detail || 'Ошибка запуска сервера');
     }
   };
@@ -166,11 +169,13 @@ function App() {
         { headers: { Authorization: `Bearer ${token}` } }
       );
       console.log('Сервер остановлен:', response.data);
+      notify('info', 'Сервер остановлен', `Сервер "${serverName}" успешно остановлен`);
       setTimeout(() => {
         loadServers();
       }, 1000);
     } catch (error) {
       console.error('Ошибка остановки сервера:', error);
+      notify('error', 'Ошибка остановки', error.response?.data?.detail || 'Не удалось остановить сервер');
       alert(error.response?.data?.detail || 'Ошибка остановки сервера');
     }
   };
@@ -334,6 +339,7 @@ function App() {
 
   return (
     <div className={`min-h-screen ${currentTheme.primary} ${currentTheme.text} transition-colors duration-300`}>
+      <NotificationSystem theme={currentTheme} />
       {/* Header */}
       <header className={`${currentTheme.secondary} ${currentTheme.border} border-b backdrop-blur-sm bg-opacity-95 sticky top-0 z-40`}>
         <div className="px-6 py-4">
@@ -486,6 +492,42 @@ function App() {
         <main className="flex-1 flex flex-col overflow-hidden">
           {selectedServer ? (
             <>
+              {/* Server Header with Controls */}
+              <div className={`${currentTheme.secondary} ${currentTheme.border} border-b px-6 py-3 flex items-center justify-between`}>
+                <div className="flex items-center gap-3">
+                  <Server className="w-5 h-5" />
+                  <span className="font-semibold text-lg">
+                    {servers.find(s => s.name === selectedServer)?.displayName || selectedServer}
+                  </span>
+                  <span className={`px-2 py-1 rounded text-xs font-medium ${
+                    servers.find(s => s.name === selectedServer)?.status === 'running'
+                      ? 'bg-green-600 text-white'
+                      : 'bg-gray-600 text-white'
+                  }`}>
+                    {servers.find(s => s.name === selectedServer)?.status === 'running' ? 'Запущен' : 'Остановлен'}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  {servers.find(s => s.name === selectedServer)?.status === 'stopped' ? (
+                    <button
+                      onClick={() => startServer(selectedServer)}
+                      className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 text-white transition shadow-lg"
+                    >
+                      <Play className="w-4 h-4" />
+                      Запустить
+                    </button>
+                  ) : (
+                    <button
+                      onClick={() => stopServer(selectedServer)}
+                      className="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 text-white transition shadow-lg"
+                    >
+                      <Square className="w-4 h-4" />
+                      Сброс
+                    </button>
+                  )}
+                </div>
+              </div>
+
               {/* Tabs */}
               <div className={`${currentTheme.secondary} ${currentTheme.border} border-b flex overflow-x-auto`}>
                 {[

frontend/src/components/Auth.jsx

@@ -11,7 +11,7 @@ export default function Auth({ onLogin }) {
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
-  const [theme] = useState(localStorage.getItem('theme') || 'dark');
+  const [theme] = useState(localStorage.getItem('theme') || 'modern');
   const [oidcProviders, setOidcProviders] = useState({});
 
   const currentTheme = getTheme(theme);
@@ -182,7 +182,7 @@ export default function Auth({ onLogin }) {
           {isLogin && (
             <div className={`mt-6 text-center text-sm ${currentTheme.textSecondary}`}>
               <p>Учётные данные по умолчанию:</p>
-              <p className={`${currentTheme.text} font-mono mt-1`}>Sofa12345 / arkonsad123</p>
+              <p className={`${currentTheme.text} font-mono mt-1`}>none / none</p>
             </div>
           )}
         </div>

frontend/src/components/Console.jsx

@@ -54,32 +54,63 @@ export default function Console({ serverName, token, theme }) {
     }
   };
 
+  // Функция для раскраски логов
+  const colorizeLog = (log) => {
+    // INFO - зеленый
+    if (log.includes('[INFO]') || log.includes('Done (')) {
+      return <span className="text-green-400">{log}</span>;
+    }
+    // WARN - желтый
+    if (log.includes('[WARN]') || log.includes('WARNING')) {
+      return <span className="text-yellow-400">{log}</span>;
+    }
+    // ERROR - красный
+    if (log.includes('[ERROR]') || log.includes('Exception')) {
+      return <span className="text-red-400">{log}</span>;
+    }
+    // Время - серый
+    if (log.match(/^\[\d{2}:\d{2}:\d{2}\]/)) {
+      const time = log.match(/^\[\d{2}:\d{2}:\d{2}\]/)[0];
+      const rest = log.substring(time.length);
+      return (
+        <>
+          <span className="text-gray-500">{time}</span>
+          <span className="text-gray-300">{rest}</span>
+        </>
+      );
+    }
+    // Обычный текст
+    return <span className="text-gray-300">{log}</span>;
+  };
+
   return (
     <div className={`flex flex-col h-full ${theme.primary}`}>
-      <div className={`flex-1 overflow-y-auto p-4 font-mono text-sm ${theme.secondary}`}>
+      {/* Консоль */}
+      <div className={`flex-1 overflow-y-auto p-4 font-mono text-sm ${theme.console || theme.secondary}`}>
         {logs.length === 0 ? (
           <div className={theme.textSecondary}>Консоль пуста. Запустите сервер для просмотра логов.</div>
         ) : (
           logs.map((log, index) => (
-            <div key={index} className={`${theme.text} whitespace-pre-wrap leading-relaxed`}>
-              {log}
+            <div key={index} className="whitespace-pre-wrap leading-relaxed">
+              {colorizeLog(log)}
             </div>
           ))
         )}
         <div ref={logsEndRef} />
       </div>
 
+      {/* Поле ввода команды */}
       <form onSubmit={sendCommand} className={`${theme.border} border-t p-4 flex gap-2`}>
         <input
           type="text"
           value={command}
           onChange={(e) => setCommand(e.target.value)}
-          placeholder="Введите команду..."
-          className={`flex-1 ${theme.input} ${theme.border} border rounded-xl px-4 py-2 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+          placeholder="Введите команду и нажмите Enter для отправки, используйте стрелки для навигации между предыдущими командами"
+          className={`flex-1 ${theme.input} ${theme.border} border rounded-lg px-4 py-2.5 ${theme.text} placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 transition`}
         />
         <button
           type="submit"
-          className={`${theme.accent} ${theme.accentHover} px-6 py-2 rounded-xl flex items-center gap-2 text-white transition`}
+          className={`${theme.success} ${theme.successHover} px-6 py-2.5 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg`}
         >
           <Send className="w-4 h-4" />
           Отправить

frontend/src/components/CreateServerModal.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { X } from 'lucide-react';
 import axios from 'axios';
 import { API_URL } from '../config';
+import { notify } from './NotificationSystem';
 
 export default function CreateServerModal({ token, theme, onClose, onCreated }) {
   const [formData, setFormData] = useState({
@@ -21,9 +22,11 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
         formData,
         { headers: { Authorization: `Bearer ${token}` } }
       );
+      notify('success', 'Сервер создан', `Сервер "${formData.displayName}" успешно создан`);
       onCreated();
       onClose();
     } catch (error) {
+      notify('error', 'Ошибка создания', error.response?.data?.detail || 'Не удалось создать сервер');
       alert(error.response?.data?.detail || 'Ошибка создания сервера');
     } finally {
       setLoading(false);

frontend/src/components/FileEditorModal.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { X, Save } from 'lucide-react';
 
-export default function FileEditorModal({ file, onClose, onSave }) {
+export default function FileEditorModal({ file, onClose, onSave, theme }) {
   const [content, setContent] = useState(file.content);
   const [saving, setSaving] = useState(false);
 
@@ -25,37 +25,37 @@ export default function FileEditorModal({ file, onClose, onSave }) {
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-gray-800 rounded-lg w-full max-w-4xl h-[80vh] flex flex-col">
-        <div className="flex items-center justify-between p-4 border-b border-gray-700">
-          <h2 className="text-xl font-bold">Редактирование: {file.name}</h2>
+      <div className={`${theme.secondary} rounded-lg w-full max-w-4xl h-[80vh] flex flex-col ${theme.border} border`}>
+        <div className={`flex items-center justify-between p-4 ${theme.border} border-b`}>
+          <h2 className={`text-xl font-bold ${theme.text}`}>Редактирование: {file.name}</h2>
           <div className="flex gap-2">
             <button
               onClick={handleSave}
               disabled={saving}
-              className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded flex items-center gap-2 disabled:opacity-50"
+              className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded flex items-center gap-2 disabled:opacity-50 text-white transition"
             >
               <Save className="w-4 h-4" />
               {saving ? 'Сохранение...' : 'Сохранить'}
             </button>
             <button
               onClick={onClose}
-              className="text-gray-400 hover:text-white"
+              className={`${theme.textSecondary} hover:${theme.text} transition`}
             >
               <X className="w-6 h-6" />
             </button>
           </div>
         </div>
 
-        <div className="flex-1 overflow-hidden p-4 bg-gray-900">
+        <div className={`flex-1 overflow-hidden p-4 ${theme.console || theme.primary}`}>
           <textarea
             value={content}
             onChange={(e) => setContent(e.target.value)}
-            className="w-full h-full bg-black text-gray-300 font-mono text-sm p-4 rounded border border-gray-700 focus:outline-none focus:border-blue-500 resize-none"
+            className={`w-full h-full ${theme.console || theme.primary} ${theme.consoleText || theme.text} font-mono text-sm p-4 rounded ${theme.border} border focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none`}
             spellCheck={false}
           />
         </div>
 
-        <div className="p-4 border-t border-gray-700 text-sm text-gray-400">
+        <div className={`p-4 ${theme.border} border-t text-sm ${theme.textSecondary}`}>
           Используйте Ctrl+S для быстрого сохранения
         </div>
       </div>

frontend/src/components/FileManager.jsx

@@ -1,22 +1,42 @@
 import { useState, useEffect } from 'react';
-import { Folder, File, Download, Trash2, Upload, Edit, Eye } from 'lucide-react';
+import { Folder, File, Download, Trash2, Upload, Edit, Eye, Search } from 'lucide-react';
 import axios from 'axios';
 import FileEditorModal from './FileEditorModal';
 import FileViewerModal from './FileViewerModal';
 import { API_URL } from '../config';
+import { notify } from './NotificationSystem';
 
-export default function FileManager({ serverName, token }) {
+export default function FileManager({ serverName, token, theme }) {
   const [files, setFiles] = useState([]);
   const [currentPath, setCurrentPath] = useState('');
   const [editingFile, setEditingFile] = useState(null);
   const [viewingFile, setViewingFile] = useState(null);
   const [renamingFile, setRenamingFile] = useState(null);
   const [newFileName, setNewFileName] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedFiles, setSelectedFiles] = useState([]);
+  const [selectAll, setSelectAll] = useState(false);
+  const [showNewMenu, setShowNewMenu] = useState(false);
+  const [creatingNew, setCreatingNew] = useState(null); // 'file' or 'folder'
+  const [newItemName, setNewItemName] = useState('');
+  const [cutFiles, setCutFiles] = useState([]); // Файлы для перемещения
 
   useEffect(() => {
     loadFiles();
   }, [serverName, currentPath]);
 
+  // Закрытие меню "Новый" при клике вне его
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (showNewMenu && !e.target.closest('.new-menu-container')) {
+        setShowNewMenu(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showNewMenu]);
+
   const loadFiles = async () => {
     try {
       const { data } = await axios.get(`${API_URL}/api/servers/${serverName}/files`, {
@@ -53,8 +73,10 @@ export default function FileManager({ serverName, token }) {
         params: { path: filePath },
         headers: { Authorization: `Bearer ${token}` }
       });
+      notify('success', 'Файл удален', `"${fileName}" успешно удален`);
       loadFiles();
     } catch (error) {
+      notify('error', 'Ошибка удаления', 'Не удалось удалить файл');
       alert('Ошибка удаления файла');
     }
   };
@@ -72,8 +94,10 @@ export default function FileManager({ serverName, token }) {
         formData,
         { headers: { Authorization: `Bearer ${token}` } }
       );
+      notify('success', 'Файл загружен', `"${file.name}" успешно загружен`);
       loadFiles();
     } catch (error) {
+      notify('error', 'Ошибка загрузки', 'Не удалось загрузить файл');
       alert('Ошибка загрузки файла');
     }
   };
@@ -115,8 +139,10 @@ export default function FileManager({ serverName, token }) {
         }
       );
       setEditingFile(null);
+      notify('success', 'Файл сохранен', 'Изменения успешно сохранены');
       alert('Файл сохранен');
     } catch (error) {
+      notify('error', 'Ошибка сохранения', error.response?.data?.detail || 'Не удалось сохранить файл');
       alert(error.response?.data?.detail || 'Ошибка сохранения файла');
     }
   };
@@ -144,8 +170,10 @@ export default function FileManager({ serverName, token }) {
         }
       );
       setRenamingFile(null);
+      notify('success', 'Файл переименован', `"${oldName}" → "${newFileName}"`);
       loadFiles();
     } catch (error) {
+      notify('error', 'Ошибка переименования', error.response?.data?.detail || 'Не удалось переименовать файл');
       alert(error.response?.data?.detail || 'Ошибка переименования файла');
     }
   };
@@ -158,124 +186,493 @@ export default function FileManager({ serverName, token }) {
     return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
   };
 
+  const filteredFiles = files.filter(file => 
+    file.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Выбор всех файлов
+  const handleSelectAll = () => {
+    if (selectAll) {
+      setSelectedFiles([]);
+    } else {
+      setSelectedFiles(filteredFiles.map(f => f.name));
+    }
+    setSelectAll(!selectAll);
+  };
+
+  // Выбор отдельного файла
+  const handleSelectFile = (fileName) => {
+    if (selectedFiles.includes(fileName)) {
+      setSelectedFiles(selectedFiles.filter(f => f !== fileName));
+    } else {
+      setSelectedFiles([...selectedFiles, fileName]);
+    }
+  };
+
+  // Создание нового файла
+  const createNewFile = async () => {
+    if (!newItemName.trim()) {
+      alert('Введите имя файла');
+      return;
+    }
+
+    try {
+      console.log('Creating file:', {
+        type: 'file',
+        name: newItemName,
+        path: currentPath
+      });
+
+      const response = await axios.post(
+        `${API_URL}/api/servers/${serverName}/files/create`,
+        {
+          type: 'file',
+          name: newItemName,
+          path: currentPath
+        },
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      
+      console.log('File created successfully:', response.data);
+      notify('success', 'Файл создан', `"${newItemName}" успешно создан`);
+      setCreatingNew(null);
+      setNewItemName('');
+      loadFiles();
+    } catch (error) {
+      console.error('Ошибка создания файла:', error);
+      console.error('Error details:', error.response?.data);
+      notify('error', 'Ошибка создания', error.response?.data?.detail || 'Не удалось создать файл');
+      alert(error.response?.data?.detail || 'Ошибка создания файла');
+    }
+  };
+
+  // Создание новой папки
+  const createNewFolder = async () => {
+    if (!newItemName.trim()) {
+      alert('Введите имя папки');
+      return;
+    }
+
+    try {
+      console.log('Creating folder:', {
+        type: 'folder',
+        name: newItemName,
+        path: currentPath
+      });
+
+      const response = await axios.post(
+        `${API_URL}/api/servers/${serverName}/files/create`,
+        {
+          type: 'folder',
+          name: newItemName,
+          path: currentPath
+        },
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      
+      console.log('Folder created successfully:', response.data);
+      notify('success', 'Папка создана', `"${newItemName}" успешно создана`);
+      setCreatingNew(null);
+      setNewItemName('');
+      loadFiles();
+    } catch (error) {
+      console.error('Ошибка создания папки:', error);
+      console.error('Error details:', error.response?.data);
+      notify('error', 'Ошибка создания', error.response?.data?.detail || 'Не удалось создать папку');
+      alert(error.response?.data?.detail || 'Ошибка создания папки');
+    }
+  };
+
+  // Перемещение файла
+  const moveFile = async (sourcePath, destinationPath) => {
+    try {
+      console.log('Moving file:', { sourcePath, destinationPath });
+
+      const response = await axios.post(
+        `${API_URL}/api/servers/${serverName}/files/move`,
+        {
+          source: sourcePath,
+          destination: destinationPath
+        },
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      
+      console.log('File moved successfully:', response.data);
+      const fileName = sourcePath.split('/').pop();
+      notify('success', 'Файл перемещен', `"${fileName}" успешно перемещен`);
+      loadFiles();
+    } catch (error) {
+      console.error('Ошибка перемещения файла:', error);
+      notify('error', 'Ошибка перемещения', error.response?.data?.detail || 'Не удалось переместить файл');
+      alert(error.response?.data?.detail || 'Ошибка перемещения файла');
+    }
+  };
+
+  // Вырезать файлы
+  const handleCut = () => {
+    if (selectedFiles.length === 0) {
+      alert('Выберите файлы для перемещения');
+      return;
+    }
+
+    const filesToCut = selectedFiles.map(fileName => {
+      const filePath = currentPath ? `${currentPath}/${fileName}` : fileName;
+      return { name: fileName, path: filePath };
+    });
+
+    setCutFiles(filesToCut);
+    console.log('Files cut:', filesToCut);
+  };
+
+  // Вставить файлы
+  const handlePaste = async () => {
+    if (cutFiles.length === 0) {
+      alert('Нет файлов для вставки');
+      return;
+    }
+
+    try {
+      // Перемещаем каждый файл
+      for (const file of cutFiles) {
+        await moveFile(file.path, currentPath);
+      }
+
+      notify('success', 'Файлы перемещены', `Перемещено файлов: ${cutFiles.length}`);
+
+      // Очищаем список вырезанных файлов
+      setCutFiles([]);
+      setSelectedFiles([]);
+      setSelectAll(false);
+    } catch (error) {
+      console.error('Ошибка вставки файлов:', error);
+    }
+  };
+
+  // Отмена вырезания
+  const handleCancelCut = () => {
+    setCutFiles([]);
+  };
+
   return (
-    <div className="h-full flex flex-col bg-gray-900">
-      <div className="border-b border-gray-700 p-4 flex items-center justify-between">
+    <div className={`h-full flex flex-col ${theme.primary}`}>
+      {/* Header */}
+      <div className={`${theme.border} border-b p-4`}>
+        <h2 className={`text-xl font-semibold mb-4 ${theme.text}`}>Управление файлами</h2>
+        
+        <div className="flex items-center gap-3">
+          {/* Search */}
+          <div className="flex-1 relative">
+            <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${theme.textSecondary}`} />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Поиск по названию ф..."
+              className={`w-full ${theme.input} ${theme.border} border rounded-lg pl-10 pr-4 py-2 ${theme.text} placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500`}
+            />
+          </div>
+
+          {/* Buttons */}
+          <label className={`${theme.success} ${theme.successHover} px-4 py-2 rounded-lg cursor-pointer flex items-center gap-2 text-white font-medium transition shadow-lg`}>
+            <Download className="w-4 h-4" />
+            Загрузить
+            <input type="file" onChange={uploadFile} className="hidden" />
+          </label>
+
+          <button 
+            onClick={loadFiles}
+            className={`${theme.danger} ${theme.dangerHover} px-4 py-2 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg`}
+          >
+            Обновить
+          </button>
+
+          {/* Кнопки вырезать/вставить */}
+          <button
+            onClick={handleCut}
+            disabled={selectedFiles.length === 0}
+            className={`bg-orange-600 hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed px-4 py-2 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg`}
+            title="Вырезать выбранные файлы"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 10-4.243 4.243 3 3 0 004.243-4.243zm0-5.758a3 3 0 10-4.243-4.243 3 3 0 004.243 4.243z" />
+            </svg>
+            Вырезать {selectedFiles.length > 0 && `(${selectedFiles.length})`}
+          </button>
+
+          <button
+            onClick={handlePaste}
+            disabled={cutFiles.length === 0}
+            className={`bg-purple-600 hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed px-4 py-2 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg`}
+            title="Вставить файлы"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+            </svg>
+            Вставить {cutFiles.length > 0 && `(${cutFiles.length})`}
+          </button>
+
+          {cutFiles.length > 0 && (
+            <button
+              onClick={handleCancelCut}
+              className="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg"
+              title="Отменить вырезание"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+              Отмена
+            </button>
+          )}
+
+          <div className="relative new-menu-container">
+            <button 
+              onClick={() => setShowNewMenu(!showNewMenu)}
+              className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg"
+            >
+              Новый
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+
+            {showNewMenu && (
+              <div className={`absolute right-0 mt-2 w-48 ${theme.secondary} rounded-lg shadow-xl ${theme.border} border z-10`}>
+                <button
+                  onClick={() => {
+                    setCreatingNew('file');
+                    setShowNewMenu(false);
+                    setNewItemName('');
+                  }}
+                  className={`w-full text-left px-4 py-2 ${theme.hover} ${theme.text} transition rounded-t-lg`}
+                >
+                  📄 Создать файл
+                </button>
+                <button
+                  onClick={() => {
+                    setCreatingNew('folder');
+                    setShowNewMenu(false);
+                    setNewItemName('');
+                  }}
+                  className={`w-full text-left px-4 py-2 ${theme.hover} ${theme.text} transition rounded-b-lg`}
+                >
+                  📁 Создать папку
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Path */}
+      <div className={`${theme.secondary} px-4 py-3 ${theme.border} border-b`}>
         <div className="flex items-center gap-2">
           {currentPath && (
             <button
               onClick={goBack}
-              className="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded"
+              className={`${theme.hover} px-3 py-1 rounded text-sm ${theme.text} transition`}
             >
               ← Назад
             </button>
           )}
-          <span className="text-gray-400">/{currentPath || 'root'}</span>
+          <span className={`${theme.textSecondary} font-mono text-sm`}>
+            /{currentPath || ''}
+          </span>
+          
+          {/* Индикатор вырезанных файлов */}
+          {cutFiles.length > 0 && (
+            <span className="ml-auto text-sm text-orange-400 flex items-center gap-2">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 10-4.243 4.243 3 3 0 004.243-4.243zm0-5.758a3 3 0 10-4.243-4.243 3 3 0 004.243 4.243z" />
+              </svg>
+              Вырезано файлов: {cutFiles.length}
+            </span>
+          )}
         </div>
-        <label className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded cursor-pointer flex items-center gap-2">
-          <Upload className="w-4 h-4" />
-          Загрузить
-          <input type="file" onChange={uploadFile} className="hidden" />
-        </label>
       </div>
 
+      {/* Table */}
       <div className="flex-1 overflow-y-auto">
         <table className="w-full">
-          <thead className="bg-gray-800 sticky top-0">
+          <thead className={`${theme.secondary} sticky top-0 ${theme.border} border-b`}>
             <tr>
-              <th className="text-left p-4">Имя</th>
-              <th className="text-left p-4">Размер</th>
-              <th className="text-right p-4">Действия</th>
+              <th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>
+                <input 
+                  type="checkbox" 
+                  className="mr-3 cursor-pointer"
+                  checked={selectAll}
+                  onChange={handleSelectAll}
+                />
+                Имя
+              </th>
+              <th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Тип</th>
+              <th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Размер</th>
+              <th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Последнее изменение</th>
+              <th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Разрешение</th>
+              <th className={`text-right p-4 ${theme.textSecondary} font-medium text-sm`}>Действия</th>
             </tr>
           </thead>
           <tbody>
-            {files.map((file) => (
-              <tr
-                key={file.name}
-                className="border-b border-gray-800 hover:bg-gray-800"
-              >
-                <td className="p-4">
-                  {renamingFile === file.name ? (
-                    <div className="flex items-center gap-2">
-                      {file.type === 'directory' ? (
-                        <Folder className="w-5 h-5 text-blue-400" />
-                      ) : (
-                        <File className="w-5 h-5 text-gray-400" />
-                      )}
-                      <input
-                        type="text"
-                        value={newFileName}
-                        onChange={(e) => setNewFileName(e.target.value)}
-                        onBlur={() => renameFile(file.name)}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter') renameFile(file.name);
-                          if (e.key === 'Escape') setRenamingFile(null);
-                        }}
-                        autoFocus
-                        className="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-sm focus:outline-none focus:border-blue-500"
-                      />
-                    </div>
-                  ) : (
-                    <div
-                      className="flex items-center gap-2 cursor-pointer"
-                      onClick={() => file.type === 'directory' && openFolder(file.name)}
-                      onDoubleClick={() => file.type === 'file' && viewFile(file.name)}
-                    >
-                      {file.type === 'directory' ? (
-                        <Folder className="w-5 h-5 text-blue-400" />
-                      ) : (
-                        <File className="w-5 h-5 text-gray-400" />
-                      )}
-                      <span>{file.name}</span>
-                    </div>
-                  )}
-                </td>
-                <td className="p-4 text-gray-400">{formatSize(file.size)}</td>
-                <td className="p-4">
-                  <div className="flex gap-2 justify-end">
-                    {file.type === 'file' && (
-                      <>
-                        <button
-                          onClick={() => viewFile(file.name)}
-                          className="bg-blue-600 hover:bg-blue-700 p-2 rounded"
-                          title="Просмотр"
-                        >
-                          <Eye className="w-4 h-4" />
-                        </button>
-                        <button
-                          onClick={() => editFile(file.name)}
-                          className="bg-purple-600 hover:bg-purple-700 p-2 rounded"
-                          title="Редактировать"
-                        >
-                          <Edit className="w-4 h-4" />
-                        </button>
-                        <button
-                          onClick={() => downloadFile(file.name)}
-                          className="bg-green-600 hover:bg-green-700 p-2 rounded"
-                          title="Скачать"
-                        >
-                          <Download className="w-4 h-4" />
-                        </button>
-                      </>
+            {/* Форма создания нового файла/папки */}
+            {creatingNew && (
+              <tr className={`${theme.border} border-b bg-blue-900 bg-opacity-20`}>
+                <td className="p-4" colSpan="6">
+                  <div className="flex items-center gap-3">
+                    {creatingNew === 'file' ? (
+                      <File className="w-5 h-5 text-gray-400" />
+                    ) : (
+                      <Folder className="w-5 h-5 text-blue-400" />
                     )}
+                    <input
+                      type="text"
+                      value={newItemName}
+                      onChange={(e) => setNewItemName(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          creatingNew === 'file' ? createNewFile() : createNewFolder();
+                        }
+                        if (e.key === 'Escape') {
+                          setCreatingNew(null);
+                          setNewItemName('');
+                        }
+                      }}
+                      placeholder={creatingNew === 'file' ? 'Имя файла...' : 'Имя папки...'}
+                      autoFocus
+                      className={`flex-1 ${theme.input} ${theme.border} border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500`}
+                    />
                     <button
-                      onClick={() => startRename(file.name)}
-                      className="bg-yellow-600 hover:bg-yellow-700 p-2 rounded"
-                      title="Переименовать"
+                      onClick={creatingNew === 'file' ? createNewFile : createNewFolder}
+                      className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded text-sm text-white transition"
                     >
-                      <Edit className="w-4 h-4" />
+                      Создать
                     </button>
                     <button
-                      onClick={() => deleteFile(file.name)}
-                      className="bg-red-600 hover:bg-red-700 p-2 rounded"
-                      title="Удалить"
+                      onClick={() => {
+                        setCreatingNew(null);
+                        setNewItemName('');
+                      }}
+                      className={`${theme.danger} ${theme.dangerHover} px-4 py-2 rounded text-sm text-white transition`}
                     >
-                      <Trash2 className="w-4 h-4" />
+                      Отмена
                     </button>
                   </div>
                 </td>
               </tr>
-            ))}
+            )}
+
+            {filteredFiles.length === 0 ? (
+              <tr>
+                <td colSpan="6" className="text-center py-12">
+                  <div className={theme.textSecondary}>
+                    <Folder className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                    <p>No data</p>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              filteredFiles.map((file) => {
+                const isCut = cutFiles.some(f => f.name === file.name);
+                
+                return (
+                  <tr
+                    key={file.name}
+                    className={`${theme.border} border-b ${theme.hover} transition ${
+                      isCut ? 'opacity-50 bg-orange-900 bg-opacity-20' : ''
+                    }`}
+                  >
+                  <td className="p-4">
+                    {renamingFile === file.name ? (
+                      <div className="flex items-center gap-2">
+                        <input 
+                          type="checkbox" 
+                          checked={selectedFiles.includes(file.name)}
+                          onChange={() => handleSelectFile(file.name)}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                        {file.type === 'directory' ? (
+                          <Folder className="w-5 h-5 text-blue-400" />
+                        ) : (
+                          <File className="w-5 h-5 text-gray-400" />
+                        )}
+                        <input
+                          type="text"
+                          value={newFileName}
+                          onChange={(e) => setNewFileName(e.target.value)}
+                          onBlur={() => renameFile(file.name)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') renameFile(file.name);
+                            if (e.key === 'Escape') setRenamingFile(null);
+                          }}
+                          autoFocus
+                          className={`${theme.input} ${theme.border} border rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500`}
+                        />
+                      </div>
+                    ) : (
+                      <div
+                        className="flex items-center gap-2 cursor-pointer"
+                        onClick={() => file.type === 'directory' && openFolder(file.name)}
+                        onDoubleClick={() => file.type === 'file' && viewFile(file.name)}
+                      >
+                        <input 
+                          type="checkbox" 
+                          checked={selectedFiles.includes(file.name)}
+                          onChange={() => handleSelectFile(file.name)}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                        {file.type === 'directory' ? (
+                          <Folder className="w-5 h-5 text-blue-400" />
+                        ) : (
+                          <File className="w-5 h-5 text-gray-400" />
+                        )}
+                        <span className={theme.text}>{file.name}</span>
+                      </div>
+                    )}
+                  </td>
+                  <td className={`p-4 ${theme.textSecondary} text-sm`}>
+                    {file.type === 'directory' ? 'Папка' : 'Файл'}
+                  </td>
+                  <td className={`p-4 ${theme.textSecondary} text-sm`}>{formatSize(file.size)}</td>
+                  <td className={`p-4 ${theme.textSecondary} text-sm`}>-</td>
+                  <td className={`p-4 ${theme.textSecondary} text-sm`}>-</td>
+                  <td className="p-4">
+                    <div className="flex gap-2 justify-end">
+                      {file.type === 'file' && (
+                        <>
+                          <button
+                            onClick={() => viewFile(file.name)}
+                            className={`${theme.card} ${theme.hover} p-2 rounded transition`}
+                            title="Просмотр"
+                          >
+                            <Eye className="w-4 h-4" />
+                          </button>
+                          <button
+                            onClick={() => editFile(file.name)}
+                            className={`${theme.card} ${theme.hover} p-2 rounded transition`}
+                            title="Редактировать"
+                          >
+                            <Edit className="w-4 h-4" />
+                          </button>
+                          <button
+                            onClick={() => downloadFile(file.name)}
+                            className={`${theme.card} ${theme.hover} p-2 rounded transition`}
+                            title="Скачать"
+                          >
+                            <Download className="w-4 h-4" />
+                          </button>
+                        </>
+                      )}
+                      <button
+                        onClick={() => deleteFile(file.name)}
+                        className={`${theme.card} ${theme.hover} p-2 rounded text-red-400 transition`}
+                        title="Удалить"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })
+            )}
           </tbody>
         </table>
       </div>
@@ -288,6 +685,7 @@ export default function FileManager({ serverName, token }) {
             setEditingFile(viewingFile);
             setViewingFile(null);
           }}
+          theme={theme}
         />
       )}
 
@@ -296,6 +694,7 @@ export default function FileManager({ serverName, token }) {
           file={editingFile}
           onClose={() => setEditingFile(null)}
           onSave={saveFile}
+          theme={theme}
         />
       )}
     </div>

frontend/src/components/FileViewerModal.jsx

@@ -1,30 +1,30 @@
 import { X, Edit } from 'lucide-react';
 
-export default function FileViewerModal({ file, onClose, onEdit }) {
+export default function FileViewerModal({ file, onClose, onEdit, theme }) {
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-gray-800 rounded-lg w-full max-w-4xl h-[80vh] flex flex-col">
-        <div className="flex items-center justify-between p-4 border-b border-gray-700">
-          <h2 className="text-xl font-bold">{file.name}</h2>
+      <div className={`${theme.secondary} rounded-lg w-full max-w-4xl h-[80vh] flex flex-col ${theme.border} border`}>
+        <div className={`flex items-center justify-between p-4 ${theme.border} border-b`}>
+          <h2 className={`text-xl font-bold ${theme.text}`}>{file.name}</h2>
           <div className="flex gap-2">
             <button
               onClick={onEdit}
-              className="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded flex items-center gap-2"
+              className="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded flex items-center gap-2 text-white transition"
             >
               <Edit className="w-4 h-4" />
               Редактировать
             </button>
             <button
               onClick={onClose}
-              className="text-gray-400 hover:text-white"
+              className={`${theme.textSecondary} hover:${theme.text} transition`}
             >
               <X className="w-6 h-6" />
             </button>
           </div>
         </div>
 
-        <div className="flex-1 overflow-auto p-4 bg-gray-900">
-          <pre className="text-sm text-gray-300 font-mono whitespace-pre-wrap">
+        <div className={`flex-1 overflow-auto p-4 ${theme.console || theme.primary}`}>
+          <pre className={`text-sm ${theme.consoleText || theme.text} font-mono whitespace-pre-wrap`}>
             {file.content}
           </pre>
         </div>

frontend/src/components/NotificationSystem.jsx

@@ -0,0 +1,95 @@
+import { useState, useEffect } from 'react';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+
+export default function NotificationSystem({ theme }) {
+  const [notifications, setNotifications] = useState([]);
+
+  useEffect(() => {
+    // Слушаем события уведомлений
+    const handleNotification = (event) => {
+      const { type, title, message } = event.detail;
+      addNotification(type, title, message);
+    };
+
+    window.addEventListener('notification', handleNotification);
+    return () => window.removeEventListener('notification', handleNotification);
+  }, []);
+
+  const addNotification = (type, title, message) => {
+    const id = Date.now();
+    const notification = { id, type, title, message };
+    
+    setNotifications(prev => [...prev, notification]);
+
+    // Автоматически удаляем через 5 секунд
+    setTimeout(() => {
+      removeNotification(id);
+    }, 5000);
+  };
+
+  const removeNotification = (id) => {
+    setNotifications(prev => prev.filter(n => n.id !== id));
+  };
+
+  const getIcon = (type) => {
+    switch (type) {
+      case 'success':
+        return <CheckCircle className="w-5 h-5" />;
+      case 'error':
+        return <AlertCircle className="w-5 h-5" />;
+      case 'warning':
+        return <AlertTriangle className="w-5 h-5" />;
+      case 'info':
+      default:
+        return <Info className="w-5 h-5" />;
+    }
+  };
+
+  const getColors = (type) => {
+    switch (type) {
+      case 'success':
+        return 'bg-green-600 border-green-500';
+      case 'error':
+        return 'bg-red-600 border-red-500';
+      case 'warning':
+        return 'bg-yellow-600 border-yellow-500';
+      case 'info':
+      default:
+        return 'bg-blue-600 border-blue-500';
+    }
+  };
+
+  return (
+    <div className="fixed top-4 right-4 z-50 space-y-2 max-w-sm">
+      {notifications.map((notification) => (
+        <div
+          key={notification.id}
+          className={`${getColors(notification.type)} border-l-4 rounded-lg shadow-2xl p-4 text-white animate-slide-in-right`}
+        >
+          <div className="flex items-start gap-3">
+            <div className="flex-shrink-0 mt-0.5">
+              {getIcon(notification.type)}
+            </div>
+            <div className="flex-1 min-w-0">
+              <h4 className="font-semibold text-sm mb-1">{notification.title}</h4>
+              <p className="text-sm opacity-90">{notification.message}</p>
+            </div>
+            <button
+              onClick={() => removeNotification(notification.id)}
+              className="flex-shrink-0 hover:bg-white hover:bg-opacity-20 rounded p-1 transition"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Вспомогательная функция для отправки уведомлений
+export const notify = (type, title, message) => {
+  window.dispatchEvent(new CustomEvent('notification', {
+    detail: { type, title, message }
+  }));
+};

frontend/src/components/Profile.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { User, Lock, Server, MessageSquare, Shield, TrendingUp, Eye, EyeOff } from 'lucide-react';
 import axios from 'axios';
 import { API_URL } from '../config';
+import { notify } from './NotificationSystem';
 
 export default function Profile({ token, user, theme, onUsernameChange, viewingUsername }) {
   const [stats, setStats] = useState(null);
@@ -66,6 +67,7 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
       // Обновляем токен
       localStorage.setItem('token', data.access_token);
       
+      notify('success', 'Имя изменено', `Ваше новое имя: ${data.username}`);
       alert('Имя пользователя успешно изменено!');
       setUsernameForm({ new_username: '', password: '' });
       
@@ -76,6 +78,7 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
       
       loadStats();
     } catch (error) {
+      notify('error', 'Ошибка изменения', error.response?.data?.detail || 'Не удалось изменить имя');
       alert(error.response?.data?.detail || 'Ошибка изменения имени пользователя');
     } finally {
       setUsernameLoading(false);
@@ -111,9 +114,11 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
         { headers: { Authorization: `Bearer ${token}` } }
       );
       
+      notify('success', 'Пароль изменён', 'Ваш пароль успешно обновлен');
       alert('Пароль успешно изменён!');
       setPasswordForm({ old_password: '', new_password: '', confirm_password: '' });
     } catch (error) {
+      notify('error', 'Ошибка изменения', error.response?.data?.detail || 'Не удалось изменить пароль');
       alert(error.response?.data?.detail || 'Ошибка изменения пароля');
     } finally {
       setPasswordLoading(false);

frontend/src/components/Stats.jsx

@@ -3,7 +3,7 @@ import { Cpu, HardDrive, Activity } from 'lucide-react';
 import axios from 'axios';
 import { API_URL } from '../config';
 
-export default function Stats({ serverName, token }) {
+export default function Stats({ serverName, token, theme }) {
   const [stats, setStats] = useState({
     status: 'stopped',
     cpu: 0,
@@ -29,17 +29,17 @@ export default function Stats({ serverName, token }) {
   };
 
   return (
-    <div className="p-8 bg-gray-900">
-      <h2 className="text-2xl font-bold mb-6">Статистика сервера</h2>
+    <div className={`p-8 ${theme.primary}`}>
+      <h2 className={`text-2xl font-bold mb-6 ${theme.text}`}>Статистика сервера</h2>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${theme.card} rounded-lg p-6 ${theme.border} border`}>
           <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-semibold">CPU</h3>
+            <h3 className={`text-lg font-semibold ${theme.text}`}>CPU</h3>
             <Cpu className="w-6 h-6 text-blue-400" />
           </div>
-          <div className="text-3xl font-bold mb-2">{stats.cpu}%</div>
-          <div className="w-full bg-gray-700 rounded-full h-2">
+          <div className={`text-3xl font-bold mb-2 ${theme.text}`}>{stats.cpu}%</div>
+          <div className={`w-full ${theme.tertiary} rounded-full h-2`}>
             <div
               className="bg-blue-500 h-2 rounded-full transition-all"
               style={{ width: `${Math.min(stats.cpu, 100)}%` }}
@@ -47,13 +47,13 @@ export default function Stats({ serverName, token }) {
           </div>
         </div>
 
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${theme.card} rounded-lg p-6 ${theme.border} border`}>
           <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-semibold">ОЗУ</h3>
+            <h3 className={`text-lg font-semibold ${theme.text}`}>ОЗУ</h3>
             <Activity className="w-6 h-6 text-green-400" />
           </div>
-          <div className="text-3xl font-bold mb-2">{stats.memory} МБ</div>
-          <div className="w-full bg-gray-700 rounded-full h-2">
+          <div className={`text-3xl font-bold mb-2 ${theme.text}`}>{stats.memory} МБ</div>
+          <div className={`w-full ${theme.tertiary} rounded-full h-2`}>
             <div
               className="bg-green-500 h-2 rounded-full transition-all"
               style={{ width: `${Math.min((stats.memory / 2048) * 100, 100)}%` }}
@@ -61,27 +61,27 @@ export default function Stats({ serverName, token }) {
           </div>
         </div>
 
-        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div className={`${theme.card} rounded-lg p-6 ${theme.border} border`}>
           <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-semibold">Диск</h3>
+            <h3 className={`text-lg font-semibold ${theme.text}`}>Диск</h3>
             <HardDrive className="w-6 h-6 text-purple-400" />
           </div>
-          <div className="text-3xl font-bold mb-2">{stats.disk} МБ</div>
-          <div className="text-sm text-gray-400 mt-2">
+          <div className={`text-3xl font-bold mb-2 ${theme.text}`}>{stats.disk} МБ</div>
+          <div className={`text-sm ${theme.textSecondary} mt-2`}>
             Использовано на диске
           </div>
         </div>
       </div>
 
-      <div className="mt-8 bg-gray-800 rounded-lg p-6 border border-gray-700">
-        <h3 className="text-lg font-semibold mb-4">Статус</h3>
+      <div className={`mt-8 ${theme.card} rounded-lg p-6 ${theme.border} border`}>
+        <h3 className={`text-lg font-semibold mb-4 ${theme.text}`}>Статус</h3>
         <div className="flex items-center gap-3">
           <div
             className={`w-4 h-4 rounded-full ${
               stats.status === 'running' ? 'bg-green-500' : 'bg-red-500'
             }`}
           />
-          <span className="text-xl">
+          <span className={`text-xl ${theme.text}`}>
             {stats.status === 'running' ? 'Запущен' : 'Остановлен'}
           </span>
         </div>

frontend/src/components/ThemeSelector.jsx

@@ -5,6 +5,7 @@ export default function ThemeSelector({ currentTheme, onThemeChange }) {
   const theme = getTheme(currentTheme);
   
   const themeColors = {
+    modern: 'bg-gradient-to-r from-green-600 to-emerald-600',
     dark: 'bg-gray-800',
     light: 'bg-gray-100',
     purple: 'bg-purple-600',

frontend/src/components/TicketChat.jsx

@@ -2,12 +2,14 @@ import { useState, useEffect, useRef } from 'react';
 import { ArrowLeft, Send, Clock, AlertCircle, CheckCircle } from 'lucide-react';
 import axios from 'axios';
 import { API_URL } from '../config';
+import { notify } from './NotificationSystem';
 
 export default function TicketChat({ ticket, token, user, theme, onBack }) {
   const [messages, setMessages] = useState(ticket.messages || []);
   const [newMessage, setNewMessage] = useState('');
   const [currentTicket, setCurrentTicket] = useState(ticket);
   const [loading, setLoading] = useState(false);
+  const [previousMessagesCount, setPreviousMessagesCount] = useState(ticket.messages?.length || 0);
   const messagesEndRef = useRef(null);
 
   useEffect(() => {
@@ -29,6 +31,30 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
       const { data } = await axios.get(`${API_URL}/api/tickets/${ticket.id}`, {
         headers: { Authorization: `Bearer ${token}` }
       });
+      
+      // Проверяем новые сообщения
+      if (data.messages.length > previousMessagesCount) {
+        const newMessagesCount = data.messages.length - previousMessagesCount;
+        const lastMessage = data.messages[data.messages.length - 1];
+        
+        // Уведомляем только если сообщение не от текущего пользователя
+        if (lastMessage.author !== user.username && lastMessage.author !== 'system') {
+          notify('info', 'Новое сообщение', `${lastMessage.author}: ${lastMessage.text.substring(0, 50)}${lastMessage.text.length > 50 ? '...' : ''}`);
+        }
+        
+        setPreviousMessagesCount(data.messages.length);
+      }
+      
+      // Проверяем изменение статуса
+      if (data.status !== currentTicket.status) {
+        const statusNames = {
+          'pending': 'На рассмотрении',
+          'in_progress': 'В работе',
+          'closed': 'Закрыт'
+        };
+        notify('info', 'Статус изменён', `Тикет #${ticket.id}: ${statusNames[data.status]}`);
+      }
+      
       setCurrentTicket(data);
       setMessages(data.messages || []);
     } catch (error) {
@@ -49,9 +75,12 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
       );
       setMessages(data.ticket.messages);
       setCurrentTicket(data.ticket);
+      setPreviousMessagesCount(data.ticket.messages.length);
       setNewMessage('');
+      notify('success', 'Сообщение отправлено', 'Ваше сообщение успешно отправлено');
     } catch (error) {
       console.error('Ошибка отправки сообщения:', error);
+      notify('error', 'Ошибка отправки', error.response?.data?.detail || 'Не удалось отправить сообщение');
       alert(error.response?.data?.detail || 'Ошибка отправки сообщения');
     } finally {
       setLoading(false);
@@ -59,6 +88,12 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
   };
 
   const changeStatus = async (newStatus) => {
+    const statusNames = {
+      'pending': 'На рассмотрении',
+      'in_progress': 'В работе',
+      'closed': 'Закрыт'
+    };
+    
     try {
       const { data } = await axios.put(
         `${API_URL}/api/tickets/${ticket.id}/status`,
@@ -67,8 +102,11 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
       );
       setCurrentTicket(data.ticket);
       setMessages(data.ticket.messages);
+      setPreviousMessagesCount(data.ticket.messages.length);
+      notify('success', 'Статус изменён', `Тикет #${ticket.id} теперь: ${statusNames[newStatus]}`);
     } catch (error) {
       console.error('Ошибка изменения статуса:', error);
+      notify('error', 'Ошибка изменения статуса', error.response?.data?.detail || 'Не удалось изменить статус');
       alert(error.response?.data?.detail || 'Ошибка изменения статуса');
     }
   };

frontend/src/components/Tickets.jsx

@@ -4,12 +4,14 @@ import axios from 'axios';
 import { API_URL } from '../config';
 import TicketChat from './TicketChat';
 import CreateTicketModal from './CreateTicketModal';
+import { notify } from './NotificationSystem';
 
 export default function Tickets({ token, user, theme }) {
   const [tickets, setTickets] = useState([]);
   const [selectedTicket, setSelectedTicket] = useState(null);
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [previousTickets, setPreviousTickets] = useState([]);
 
   useEffect(() => {
     loadTickets();
@@ -22,6 +24,22 @@ export default function Tickets({ token, user, theme }) {
       const { data } = await axios.get(`${API_URL}/api/tickets`, {
         headers: { Authorization: `Bearer ${token}` }
       });
+      
+      // Проверяем новые сообщения в тикетах
+      if (previousTickets.length > 0) {
+        data.forEach(ticket => {
+          const prevTicket = previousTickets.find(t => t.id === ticket.id);
+          if (prevTicket && ticket.messages.length > prevTicket.messages.length) {
+            const newMessage = ticket.messages[ticket.messages.length - 1];
+            // Уведомляем только если сообщение не от текущего пользователя
+            if (newMessage.author !== user.username) {
+              notify('info', 'Новое сообщение', `Тикет #${ticket.id}: ${newMessage.author} ответил`);
+            }
+          }
+        });
+      }
+      
+      setPreviousTickets(data);
       setTickets(data);
       setLoading(false);
     } catch (error) {
@@ -32,6 +50,7 @@ export default function Tickets({ token, user, theme }) {
 
   const handleTicketCreated = () => {
     setShowCreateModal(false);
+    notify('success', 'Тикет создан', 'Ваш тикет успешно создан');
     loadTickets();
   };
 

frontend/src/index.css

@@ -20,3 +20,19 @@ body {
   width: 100%;
   height: 100vh;
 }
+
+/* Анимация для уведомлений */
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.animate-slide-in-right {
+  animation: slide-in-right 0.3s ease-out;
+}

frontend/src/themes.js

@@ -1,4 +1,27 @@
 export const themes = {
+  modern: {
+    name: 'Современная',
+    gradient: 'from-green-400 to-emerald-600',
+    primary: 'bg-[#0f1115]',
+    secondary: 'bg-[#1a1d24]',
+    tertiary: 'bg-[#23262e]',
+    accent: 'bg-green-600',
+    accentHover: 'hover:bg-green-700',
+    text: 'text-gray-100',
+    textSecondary: 'text-gray-400',
+    border: 'border-gray-800',
+    hover: 'hover:bg-[#23262e]',
+    input: 'bg-[#0f1115] border-gray-700',
+    card: 'bg-[#1a1d24]',
+    cardHover: 'hover:bg-[#23262e]',
+    success: 'bg-green-600',
+    successHover: 'hover:bg-green-700',
+    danger: 'bg-gray-700',
+    dangerHover: 'hover:bg-gray-600',
+    warning: 'bg-yellow-600',
+    console: 'bg-[#0f1115]',
+    consoleText: 'text-gray-300',
+  },
   dark: {
     name: 'Тёмная',
     gradient: 'from-blue-400 to-purple-600',