From a058df010ae0870ebae1deea6c28d1499d1f44f2 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Sat, 6 Dec 2025 22:02:04 +0700
Subject: [PATCH] refactor: Revise FilterManager layout with enhanced column
 structure and card design for server details, improving user interaction and
 visual clarity.

---
 frontend/src/FilterManager.jsx | 77 +++++++++++++++++++++++++++-------
 1 file changed, 63 insertions(+), 14 deletions(-)

diff --git a/frontend/src/FilterManager.jsx b/frontend/src/FilterManager.jsx
index ce17bf4..7eb5516 100644
--- a/frontend/src/FilterManager.jsx
+++ b/frontend/src/FilterManager.jsx
@@ -943,7 +943,8 @@ function FilterManager() {
                   </div>
                 ) : (
                   <div className="row g-3">
-                    <div className="col-12 col-lg-4">
+                    {/* Левая колонка: список серверов */}
+                    <div className="col-12 col-xl-7">
                       <div className="input-icon mb-2">
                         <input
                           type="text"
@@ -972,7 +973,7 @@ function FilterManager() {
                             <div className="flex-grow-1 text-start">
                               <div className="fw-bold">{server.name}</div>
                               {server.description && (
-                                <div className="text-muted small text-truncate" style={{ maxWidth: '220px' }}>
+                                <div className="text-muted small text-truncate" style={{ maxWidth: '240px' }}>
                                   {server.description}
                                 </div>
                               )}
@@ -995,7 +996,7 @@ function FilterManager() {
                             <div className="flex-grow-1 text-start">
                               <div className="fw-bold">{server.name}</div>
                               {server.description && (
-                                <div className="text-muted small text-truncate" style={{ maxWidth: '220px' }}>
+                                <div className="text-muted small text-truncate" style={{ maxWidth: '240px' }}>
                                   {server.description}
                                 </div>
                               )}
@@ -1014,21 +1015,69 @@ function FilterManager() {
                         </button>
                       </div>
                     </div>
-                    <div className="col-12 col-lg-8">
+
+                    {/* Правая колонка: детали выбранного сервера / подсказка */}
+                    <div className="col-12 col-xl-5">
                       {selectedServer ? (
-                        <div className="alert alert-info d-flex align-items-center" role="alert">
-                          <IconServer className="me-2" />
-                          <div>
-                            Текущий сервер: <span className="fw-bold">{selectedServer.name}</span>
-                            {selectedServer.description && (
-                              <span className="text-muted ms-2">{selectedServer.description}</span>
-                            )}
+                        <div className="card card-sm">
+                          <div className="card-body">
+                            <div className="d-flex align-items-start mb-2">
+                              <span className="avatar bg-primary-lt me-3">
+                                <IconServer size={18} />
+                              </span>
+                              <div className="flex-grow-1">
+                                <div className="d-flex align-items-center gap-2">
+                                  <span className="fw-bold">{selectedServer.name}</span>
+                                  <span className="badge bg-green-lt text-green">Активен</span>
+                                </div>
+                                {selectedServer.description && (
+                                  <div className="text-muted small mt-1">{selectedServer.description}</div>
+                                )}
+                              </div>
+                            </div>
+
+                            <div className="d-flex flex-wrap gap-3 text-muted small mb-2">
+                              <span>Фильтров: <span className="badge bg-blue-lt text-blue">{serverFilters.length}</span></span>
+                              <span>Поиск: <code className="text-blue">{filterSearch || '—'}</code></span>
+                            </div>
+
+                            <div className="btn-list">
+                              <button 
+                                className="btn btn-outline-primary"
+                                onClick={handlePreviewConfig}
+                                disabled={serverFilters.length === 0}
+                              >
+                                <IconEye className="icon" />
+                                Просмотр
+                              </button>
+                              <button 
+                                className="btn btn-outline-primary"
+                                onClick={copyConfigToClipboard}
+                                disabled={serverFilters.length === 0}
+                              >
+                                <IconCopy className="icon" />
+                                Копировать
+                              </button>
+                              <button 
+                                className="btn btn-success"
+                                onClick={() => handleSaveServerConfig(selectedServer.id)}
+                                disabled={loading || serverFilters.length === 0}
+                              >
+                                <IconDeviceFloppy className="icon" />
+                                Сохранить
+                              </button>
+                            </div>
                           </div>
                         </div>
                       ) : (
-                        <div className="alert alert-warning d-flex align-items-center" role="alert">
-                          <IconAlertTriangle className="me-2" />
-                          <div>Выберите сервер слева, чтобы работать с фильтрами.</div>
+                        <div className="card card-sm">
+                          <div className="card-body d-flex align-items-start">
+                            <IconAlertTriangle className="me-3 text-warning" />
+                            <div>
+                              <div className="fw-bold">Сначала выберите сервер</div>
+                              <div className="text-muted">Нажмите на сервер слева, чтобы открыть его фильтры.</div>
+                            </div>
+                          </div>
                         </div>
                       )}
                     </div>