From afa1049f1f402b3bec774eb98acfefe50fade804 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Thu, 13 Nov 2025 16:49:48 +0700
Subject: [PATCH] style: Improve filter table header layout and styling

---
 frontend/src/FilterManager.jsx | 60 +++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/frontend/src/FilterManager.jsx b/frontend/src/FilterManager.jsx
index 97aef10..fd9e955 100644
--- a/frontend/src/FilterManager.jsx
+++ b/frontend/src/FilterManager.jsx
@@ -1007,33 +1007,41 @@ function FilterManager() {
             {selectedServer && (
               <div className="card">
                 <div className="card-header">
-                  <h3 className="card-title">
-                    <IconFilter className="me-2" />
-                    Фильтры сервера: {selectedServer.name}
-                    <span className="badge bg-blue-lt text-blue ms-2">
-                      {serverFilters.length}
-                    </span>
-                  </h3>
-                  <div className="card-actions">
-                    <div className="input-icon me-2">
-                      <input
-                        type="text"
-                        className="form-control"
-                        placeholder="Поиск фильтров..."
-                        value={filterSearch}
-                        onChange={(e) => setFilterSearch(e.target.value)}
-                      />
-                      <span className="input-icon-addon">
-                        <IconSearch />
-                      </span>
+                  <div className="row align-items-center">
+                    <div className="col">
+                      <h3 className="card-title mb-1">
+                        <IconFilter size={20} className="me-2" />
+                        Фильтры сервера: {selectedServer.name}
+                      </h3>
+                      <div className="text-muted">
+                        <span className="badge bg-blue-lt text-blue">
+                          {serverFilters.length} {serverFilters.length === 1 ? 'фильтр' : serverFilters.length > 1 && serverFilters.length < 5 ? 'фильтра' : 'фильтров'}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="col-auto">
+                      <div className="d-flex gap-2">
+                        <div className="input-icon" style={{ minWidth: '280px' }}>
+                          <input
+                            type="text"
+                            className="form-control"
+                            placeholder="Поиск фильтров..."
+                            value={filterSearch}
+                            onChange={(e) => setFilterSearch(e.target.value)}
+                          />
+                          <span className="input-icon-addon">
+                            <IconSearch size={18} />
+                          </span>
+                        </div>
+                        <button
+                          className="btn btn-primary"
+                          onClick={() => setAddFilterModalOpen(true)}
+                        >
+                          <IconPlus className="icon me-1" />
+                          Добавить фильтр
+                        </button>
+                      </div>
                     </div>
-                    <button
-                      className="btn btn-primary"
-                      onClick={() => setAddFilterModalOpen(true)}
-                    >
-                      <IconPlus className="icon" />
-                      Добавить фильтр
-                    </button>
                   </div>
                 </div>
               <div className="card-body">