From c84d4367b118b709b622bb5c6961d92d753ecde6 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Sat, 6 Dec 2025 22:12:32 +0700
Subject: [PATCH] refactor: Revise FilterManager layout to enhance server
 selection interface with improved button actions and card design,
 streamlining user interaction and visual presentation.

---
 frontend/src/FilterManager.jsx | 209 +++++++++++++++------------------
 1 file changed, 93 insertions(+), 116 deletions(-)

diff --git a/frontend/src/FilterManager.jsx b/frontend/src/FilterManager.jsx
index 7eb5516..a232b2e 100644
--- a/frontend/src/FilterManager.jsx
+++ b/frontend/src/FilterManager.jsx
@@ -942,10 +942,10 @@ function FilterManager() {
                     </div>
                   </div>
                 ) : (
-                  <div className="row g-3">
-                    {/* Левая колонка: список серверов */}
-                    <div className="col-12 col-xl-7">
-                      <div className="input-icon mb-2">
+                  <>
+                    {/* Тулбар: поиск + действия для выбранного сервера */}
+                    <div className="d-flex flex-column flex-md-row gap-2 align-items-md-center mb-3">
+                      <div className="input-icon flex-grow-1" style={{ minWidth: '240px' }}>
                         <input
                           type="text"
                           className="form-control"
@@ -957,131 +957,108 @@ function FilterManager() {
                           <IconSearch />
                         </span>
                       </div>
-                      <div className="list-group list-group-flush border rounded">
-                        {activeServers.length > 0 && (
-                          <div className="list-group-header px-3 pt-3 pb-2 text-uppercase text-muted small">Активные</div>
-                        )}
-                        {activeServers.map(server => (
-                          <button
-                            key={server.id}
-                            className={`list-group-item list-group-item-action d-flex align-items-center ${selectedServer?.id === server.id ? 'active' : ''}`}
-                            onClick={() => setSelectedServer(server)}
-                          >
-                            <span className="avatar bg-primary-lt me-3">
-                              <IconServer size={16} />
-                            </span>
-                            <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: '240px' }}>
-                                  {server.description}
-                                </div>
-                              )}
-                            </div>
-                            <span className="badge bg-green-lt text-green">Активен</span>
-                          </button>
-                        ))}
-                        {inactiveServers.length > 0 && (
-                          <div className="list-group-header px-3 pt-3 pb-2 text-uppercase text-muted small">Неактивные</div>
-                        )}
-                        {inactiveServers.map(server => (
-                          <button
-                            key={server.id}
-                            className={`list-group-item list-group-item-action d-flex align-items-center ${selectedServer?.id === server.id ? 'active' : ''}`}
-                            onClick={() => setSelectedServer(server)}
-                          >
-                            <span className="avatar bg-secondary-lt me-3">
-                              <IconServer size={16} />
-                            </span>
-                            <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: '240px' }}>
-                                  {server.description}
-                                </div>
-                              )}
-                            </div>
-                            <span className="badge bg-secondary-lt text-secondary">Выкл</span>
-                          </button>
-                        ))}
-                      </div>
-                      <div className="mt-2 text-end">
-                        <button
-                          className="btn btn-link px-0 text-decoration-none"
-                          onClick={() => setServerListModalOpen(true)}
+                      <div className="d-flex flex-wrap gap-2">
+                        <button 
+                          className="btn btn-outline-primary"
+                          onClick={handlePreviewConfig}
+                          disabled={!selectedServer || serverFilters.length === 0}
                         >
-                          <IconSettings size={16} className="me-1" />
-                          Управление серверами
+                          <IconEye className="icon" />
+                          Просмотр
+                        </button>
+                        <button 
+                          className="btn btn-outline-primary"
+                          onClick={copyConfigToClipboard}
+                          disabled={!selectedServer || serverFilters.length === 0}
+                        >
+                          <IconCopy className="icon" />
+                          Копировать
+                        </button>
+                        <button 
+                          className="btn btn-success"
+                          onClick={() => selectedServer && handleSaveServerConfig(selectedServer.id)}
+                          disabled={!selectedServer || loading || serverFilters.length === 0}
+                        >
+                          <IconDeviceFloppy className="icon" />
+                          Сохранить
                         </button>
                       </div>
                     </div>
 
-                    {/* Правая колонка: детали выбранного сервера / подсказка */}
-                    <div className="col-12 col-xl-5">
-                      {selectedServer ? (
-                        <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 className="d-flex flex-wrap gap-2 mb-2">
+                      {activeServers.map(server => (
+                        <div
+                          key={server.id}
+                          className={`card card-sm cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`}
+                          style={{ minWidth: '220px', maxWidth: '260px' }}
+                          onClick={() => setSelectedServer(server)}
+                        >
+                          <div className="card-body d-flex align-items-start gap-2">
+                            <span className="avatar bg-primary-lt">
+                              <IconServer size={16} />
+                            </span>
+                            <div className="flex-grow-1">
+                              <div className="d-flex align-items-center gap-2">
+                                <div className="fw-bold text-truncate" title={server.name}>{server.name}</div>
+                                <span className="badge bg-green-lt text-green">Активен</span>
                               </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>
+                              {server.description && (
+                                <div className="text-muted small text-truncate" title={server.description}>
+                                  {server.description}
+                                </div>
+                              )}
                             </div>
                           </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>
+                      ))}
+                      {inactiveServers.map(server => (
+                        <div
+                          key={server.id}
+                          className={`card card-sm cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`}
+                          style={{ minWidth: '220px', maxWidth: '260px' }}
+                          onClick={() => setSelectedServer(server)}
+                        >
+                          <div className="card-body d-flex align-items-start gap-2">
+                            <span className="avatar bg-secondary-lt">
+                              <IconServer size={16} />
+                            </span>
+                            <div className="flex-grow-1">
+                              <div className="d-flex align-items-center gap-2">
+                                <div className="fw-bold text-muted text-truncate" title={server.name}>{server.name}</div>
+                                <span className="badge bg-secondary-lt text-secondary">Выкл</span>
+                              </div>
+                              {server.description && (
+                                <div className="text-muted small text-truncate" title={server.description}>
+                                  {server.description}
+                                </div>
+                              )}
                             </div>
                           </div>
                         </div>
-                      )}
+                      ))}
                     </div>
-                  </div>
+
+                    <div className="d-flex justify-content-between align-items-center mt-2">
+                      <div className="text-muted small">
+                        {selectedServer ? (
+                          <>
+                            Текущий сервер: <span className="fw-bold">{selectedServer.name}</span>
+                            <span className="badge bg-blue-lt text-blue ms-2">{serverFilters.length} фильтров</span>
+                          </>
+                        ) : (
+                          'Выберите сервер для работы с фильтрами'
+                        )}
+                      </div>
+                      <button
+                        className="btn btn-link px-0 text-decoration-none"
+                        onClick={() => setServerListModalOpen(true)}
+                      >
+                        <IconSettings size={16} className="me-1" />
+                        Управление серверами
+                      </button>
+                    </div>
+                  </>
                 )}
               </div>
             </div>