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`}>
                 {[