feat: Integrate react-router-dom for routing and enhance App component with new navigation structure

frontend/src/ServerManager.jsx

@@ -526,17 +526,35 @@ function ServerManager() {
 
 // Модальное окно для редактирования сервера с backdrop и анимацией
 function EditServerModal({ show, server, onChange, onSave, onClose }) {
-  if (!show || !server) return null;
+  const modalRef = useRef(null);
+
+  useEffect(() => {
+    if (window.Tabler && window.Tabler.Modal && modalRef.current) {
+      const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
+      if (show) {
+        modalInstance.show();
+      } else {
+        modalInstance.hide();
+      }
+      // Закрытие по событию Tabler
+      const handler = () => onClose && onClose();
+      modalRef.current.addEventListener('hide.bs.modal', handler);
+      return () => {
+        modalRef.current.removeEventListener('hide.bs.modal', handler);
+      };
+    }
+  }, [show, onClose]);
+
   return (
-    <>
-      <div className="modal fade show" style={{display: 'block'}} tabIndex="-1" role="dialog" aria-modal="true">
-        <div className="modal-dialog" role="document">
-          <div className="modal-content animate__animated animate__fadeInDown">
-            <div className="modal-header">
-              <h5 className="modal-title">Редактировать сервер</h5>
-              <button type="button" className="btn-close" onClick={onClose}></button>
-            </div>
-            <div className="modal-body">
+    <div className="modal" tabIndex="-1" ref={modalRef}>
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">Редактировать сервер</h5>
+            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div className="modal-body">
+            {server && (
               <form onSubmit={e => { e.preventDefault(); onSave(); }}>
                 <div className="mb-3">
                   <label className="form-label">IP адрес</label>
@@ -559,16 +577,15 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
                   <input type="text" className="form-control" value={server.tunnel} onChange={e => onChange({ ...server, tunnel: e.target.value })} />
                 </div>
               </form>
-            </div>
-            <div className="modal-footer">
-              <button type="button" className="btn btn-secondary" onClick={onClose}>Отмена</button>
-              <button type="button" className="btn btn-primary" onClick={onSave}>Сохранить</button>
-            </div>
+            )}
+          </div>
+          <div className="modal-footer">
+            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
+            <button type="button" className="btn btn-primary" onClick={onSave}>Сохранить</button>
           </div>
         </div>
       </div>
-      <div className="modal-backdrop fade show"></div>
-    </>
+    </div>
   );
 }