feat: Добавить модальные окна для импорта данных и компонент QuickAddBar в менеджерах ASNs, Domains и IPRanges, улучшив пользовательский интерфейс и упрощая процесс добавления записей

frontend/src/DomainsNewManager.jsx

@@ -29,6 +29,8 @@ import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
 import HistoryModal from './components/HistoryModal.jsx';
 import ErrorAlert from './components/ErrorAlert.jsx';
 import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
+import ImportModal from './components/ImportModal.jsx';
+import QuickAddBar from './components/QuickAddBar.jsx';
 
 const API_URL = '/api';
 
@@ -297,23 +299,7 @@ function DomainsNewManager() {
   };
 
   const handleImport = () => {
-    const text = window.prompt('Вставьте строки: DOMAIN ПРОБЕЛ COMMUNITY (по одной записи на строку)');
-    if (!text) return;
-    const lines = text.split(/\r?\n/).map(l => l.trim()).filter(Boolean);
-    const parsed = lines.map(l => {
-      const [d, c] = l.split(/\s+/);
-      return { domain: (d || '').toLowerCase(), community: (c || '').trim() };
-    }).filter(i => isValidDomain(i.domain) && isValidCommunity(i.community));
-    // merge and dedup
-    setItems(prev => {
-      const merged = [...prev, ...parsed];
-      const map = new Map();
-      for (const it of merged) {
-        const key = String(it.domain).trim().toLowerCase();
-        if (!map.has(key)) map.set(key, { domain: key, community: String(it.community).trim() });
-      }
-      return Array.from(map.values());
-    });
+    setImportOpen(true);
   };
 
   const handleExport = async () => {
@@ -343,6 +329,26 @@ function DomainsNewManager() {
     );
   };
 
+  // ===== Импорт через модалку =====
+  const [importOpen, setImportOpen] = useState(false);
+  const parseLine = (line) => {
+    const [d, c] = String(line).split(/\s+/);
+    return { domain: (d || '').toLowerCase(), community: (c || '').trim() };
+  };
+  const validateItem = (obj) => isValidDomain(obj.domain) && isValidCommunity(obj.community);
+  const applyImportedItems = (list) => {
+    setItems(prev => {
+      const merged = [...prev, ...list];
+      const map = new Map();
+      for (const it of merged) {
+        const key = String(it.domain).trim().toLowerCase();
+        if (!map.has(key)) map.set(key, { domain: key, community: String(it.community).trim() });
+      }
+      return Array.from(map.values());
+    });
+    setImportOpen(false);
+  };
+
   // Сортировка
   const sortedItems = [...items].sort((a, b) => {
     let valA = a[sortField] || '';
@@ -433,6 +439,8 @@ function DomainsNewManager() {
         actions={(
           <PageHeaderActions
               loading={loading}
+              onPreview={handlePreviewDiff}
+              disablePreview={loading || items.length === 0}
               onRefresh={fetchItems}
               disableRefresh={loading}
               onImport={handleImport}
@@ -463,63 +471,23 @@ function DomainsNewManager() {
       />
       <div className="row">
         <div className="col-lg-3">
-          {/* Add New Item Card */}
-          <div className="card card-md">
-            <div className="card-header">
-              <h3 className="card-title">
-                <IconPlus className="icon me-2" />
-                Добавить новый домен
-              </h3>
-            </div>
-            <div className="card-body">
-              <form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
-                <div className="mb-3">
-                  <label className="form-label">Домен</label>
-                  <input
-                    type="text"
-                    className={`form-control${newInvalid.domain ? ' is-invalid' : ''}`}
-                    placeholder="example.com"
-                    value={newItem.domain}
-                    onChange={(e) => setNewItem({ ...newItem, domain: e.target.value })}
-                  />
-                  {newInvalid.domain && <div className="invalid-feedback">Неверный формат домена</div>}
-                  <div className="form-text">Без http/https, только доменное имя</div>
-                  <div className="form-text">Формат: sub.domain.tld (например foo.example.org)</div>
-                </div>
-                <div className="mb-3">
-                  <label className="form-label">Community</label>
-                  <CommunityAutocompleteInput
-                    value={newItem.community}
-                    onChange={(v) => setNewItem({ ...newItem, community: v })}
-                    communities={communities}
-                    placeholder="Начните вводить номер или имя"
-                    className={`form-control${newInvalid.community ? ' is-invalid' : ''}`}
-                  />
-                  {newInvalid.community && <div className="invalid-feedback">Только цифры</div>}
-                  <div className="form-text">Формат: N или N:N (например 65000:100)</div>
-                  {(() => {
-                    const match = communities.find(c => c.value === String(newItem.community).trim());
-                    if (!match) return null;
-                    return (
-                      <div className="form-text">
-                        {match.name && (<><strong>{match.name}</strong> — </>)}
-                        {match.description || ''}
-                        {match.tags && match.tags.length > 0 && (
-                          <> (<span className="text-muted">{match.tags.join(', ')}</span>)</>
-                        )}
-                      </div>
-                    );
-                  })()}
-                </div>
-                <div className="form-footer">
-                  <button type="submit" className="btn btn-primary w-100">
-                    <IconPlus className="icon me-2" />
-                    Добавить
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
+          <QuickAddBar
+            placeholder={'example.com 65000:100'}
+            help={'Вставьте строки: DOMAIN ПРОБЕЛ COMMUNITY'}
+            parseLine={(line) => { const [d, c] = String(line).split(/\s+/); return { domain: (d||'').toLowerCase(), community: (c||'').trim() }; }}
+            validateItem={(obj) => isValidDomain(obj.domain) && isValidCommunity(obj.community)}
+            onApply={(list) => {
+              setItems(prev => {
+                const merged = [...prev, ...list];
+                const map = new Map();
+                for (const it of merged) {
+                  const key = String(it.domain).trim().toLowerCase();
+                  if (!map.has(key)) map.set(key, { domain: key, community: String(it.community).trim() });
+                }
+                return Array.from(map.values());
+              });
+            }}
+          />
 
           {/* Карточка действий больше не нужна — действия перенесены в page-header */}
           {/* Drag & Drop импорт */}
@@ -722,6 +690,17 @@ function DomainsNewManager() {
         onConfirm={performSave}
         onClose={() => setConfirmSaveOpen(false)}
       />
+      <ImportModal
+        show={importOpen}
+        title={'Импорт доменов'}
+        description={'Формат: DOMAIN ПРОБЕЛ COMMUNITY'}
+        parseLine={parseLine}
+        validateItem={validateItem}
+        onConfirm={applyImportedItems}
+        onClose={() => setImportOpen(false)}
+        sampleHeader={['domain','community']}
+        placeholder={'example.com 65000:100'}
+      />
       <HistoryModal
         resource="domains-new"
         show={historyOpen}