feat(MikrotikBackupsManager): implement diff modal for enhanced configuration comparison

frontend/src/MikrotikBackupsManager.jsx

@@ -7,6 +7,7 @@ import TableSkeleton from './components/TableSkeleton.jsx';
 import EmptyState from './components/EmptyState.jsx';
 import Tooltip from './components/Tooltip.jsx';
 import DataTable from './components/DataTable.jsx';
+import { FullscreenModal } from './components/Modal.jsx';
 import { countryToFlag } from './utils/serverUtils.js';
 import {
   IconRefresh,
@@ -139,6 +140,7 @@ function MikrotikBackupsManager() {
   const [viewLoading, setViewLoading] = useState(false);
   const [diffResult, setDiffResult] = useState(null);
   const [diffLoading, setDiffLoading] = useState(false);
+  const [diffModalOpen, setDiffModalOpen] = useState(false);
 
   // UI-состояние выбора сервера для просмотра бэкапов (в стиле /filters)
   const [serverSearch, setServerSearch] = useState('');
@@ -364,6 +366,7 @@ function MikrotikBackupsManager() {
       return;
     }
     try {
+      setDiffModalOpen(true);
       setDiffLoading(true);
       setDiffResult(null);
       const res = await api.post('/mikrotik/backups/diff', {
@@ -817,10 +820,9 @@ function MikrotikBackupsManager() {
         </div>
       </div>
 
-      {(viewConfigKey || diffResult) && (
-        <div className="row mt-4">
       {viewConfigKey && (
-            <div className={diffResult ? 'col-md-6' : 'col-12'}>
+        <div className="row mt-4">
+          <div className="col-12">
             <div className="card">
               <div className="card-header d-flex align-items-center justify-content-between">
                 <div>
@@ -855,32 +857,46 @@ function MikrotikBackupsManager() {
               </div>
             </div>
           </div>
+        </div>
       )}
 
-          {diffResult && (
+      <FullscreenModal
-            <div className={viewConfigKey ? 'col-md-6 mt-3 mt-md-0' : 'col-12'}>
+        show={diffModalOpen}
-              <div className="card">
+        onClose={() => {
-                <div className="card-header d-flex align-items-center justify-content-between">
+          setDiffModalOpen(false);
-                  <div>
+        }}
-                    <div className="card-title mb-0">Сравнение бэкапов</div>
+        title="Сравнение бэкапов MikroTik"
+        footer={(
+          <div className="d-flex justify-content-between w-100">
             <div className="text-muted small">
-                      {diffResult.same
+              {diffResult?.same
                 ? 'Конфигурации идентичны'
                 : 'Конфигурации отличаются — проверьте различия перед откатом.'}
-                      {!diffResult.same && (
+            </div>
-                        <span className="ms-2">
+            <button
-                          <span style={{ background: 'rgba(248, 81, 73, 0.35)', padding: '0 4px', borderRadius: 2 }}> удалено (A)</span>
+              type="button"
-                          {' · '}
+              className="btn btn-secondary"
-                          <span style={{ background: 'rgba(63, 185, 80, 0.35)', padding: '0 4px', borderRadius: 2 }}> добавлено (B)</span>
+              onClick={() => setDiffModalOpen(false)}
-                        </span>
+            >
+              Закрыть
+            </button>
+          </div>
         )}
-                    </div>
+      >
-                  </div>
-                </div>
-                <div className="card-body">
         {diffLoading ? (
-                    <TableSkeleton rows={6} columns={2} />
+          <TableSkeleton rows={8} columns={2} />
+        ) : !diffResult ? (
+          <div className="text-muted small">
+            Не удалось загрузить результат сравнения. Попробуйте ещё раз.
+          </div>
         ) : (
+          <>
+            {!diffResult.same && (
+              <div className="alert alert-info mb-3 small">
+                <IconAlertTriangle size={16} className="me-1 text-warning" />
+                Конфигурации отличаются — слева A, справа B. Проверьте различия перед откатом.
+              </div>
+            )}
             <div className="row">
               <div className="col-md-6 mb-3 mb-md-0">
                 <div className="mb-2 small text-muted text-truncate" title={diffResult.a?.key}>
@@ -901,13 +917,16 @@ function MikrotikBackupsManager() {
                 />
               </div>
             </div>
-                  )}
+            {!diffResult.same && (
-                </div>
+              <div className="mt-3 text-muted small">
-              </div>
+                <span style={{ background: 'rgba(248, 81, 73, 0.35)', padding: '0 4px', borderRadius: 2 }}> удалено (A)</span>
+                {' · '}
+                <span style={{ background: 'rgba(63, 185, 80, 0.35)', padding: '0 4px', borderRadius: 2 }}> добавлено (B)</span>
               </div>
             )}
-        </div>
+          </>
         )}
+      </FullscreenModal>
     </div>
   );
 }