From e70aa47a3468c89b74ba48175ac5dfeea6187b59 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Tue, 24 Feb 2026 11:08:16 +0700
Subject: [PATCH] refactor(EasySwitchManager): enhance filter panel layout and
 button styles for improved usability

---
 frontend/src/EasySwitchManager.jsx | 123 +++++++++++++----------------
 1 file changed, 57 insertions(+), 66 deletions(-)

diff --git a/frontend/src/EasySwitchManager.jsx b/frontend/src/EasySwitchManager.jsx
index 526d8ee..edf975d 100644
--- a/frontend/src/EasySwitchManager.jsx
+++ b/frontend/src/EasySwitchManager.jsx
@@ -730,7 +730,7 @@ function EasySwitchManager() {
                 Применить изменения
               </button>
             )}
-            <button type="button" className="btn btn-outline-primary" onClick={handleRefresh} disabled={loading}>
+            <button type="button" className="btn btn-primary" onClick={handleRefresh} disabled={loading}>
               <IconRefresh size={18} className={loading ? 'spin me-2' : 'me-2'} />
               {loading ? 'Загрузка…' : 'Обновить'}
             </button>
@@ -785,33 +785,31 @@ function EasySwitchManager() {
 
           {activeTab === 'proxies' && (
             <>
-              {/* Панель фильтров — Tabler form-check, input-icon, btn-list */}
-              <div className="mb-4">
-                <div className="row g-2 align-items-center flex-wrap">
-                  <div className="col-auto">
-                    <label className="form-check form-switch mb-0">
-                      <input
-                        className="form-check-input"
-                        type="checkbox"
-                        checked={showOnlyConfigured}
-                        onChange={(e) => setShowOnlyConfigured(e.target.checked)}
-                      />
-                      <span className="form-check-label">Только настроенные фильтры</span>
-                    </label>
-                  </div>
-                  <div className="col-auto">
-                    <label className="form-check form-switch mb-0">
-                      <input
-                        className="form-check-input"
-                        type="checkbox"
-                        checked={groupByTags}
-                        onChange={(e) => setGroupByTags(e.target.checked)}
-                      />
-                      <span className="form-check-label">Группировать по тегам</span>
-                    </label>
-                  </div>
-                  <div className="col">
-                    <div className="input-icon">
+              {/* Панель фильтров — отдельная карточка, чёткая структура без наложений */}
+              <div className="card mb-4">
+                <div className="card-body py-3">
+                  <div className="d-flex flex-wrap align-items-center gap-3">
+                    <div className="d-flex align-items-center gap-4 flex-shrink-0">
+                      <label className="form-check form-switch mb-0">
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          checked={showOnlyConfigured}
+                          onChange={(e) => setShowOnlyConfigured(e.target.checked)}
+                        />
+                        <span className="form-check-label">Только настроенные фильтры</span>
+                      </label>
+                      <label className="form-check form-switch mb-0">
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          checked={groupByTags}
+                          onChange={(e) => setGroupByTags(e.target.checked)}
+                        />
+                        <span className="form-check-label">Группировать по тегам</span>
+                      </label>
+                    </div>
+                    <div className="input-icon flex-grow-1" style={{ minWidth: '220px', maxWidth: '340px' }}>
                       <span className="input-icon-addon">
                         <IconSearch size={18} />
                       </span>
@@ -825,51 +823,44 @@ function EasySwitchManager() {
                         style={searchQuery ? { paddingRight: '2.5rem' } : undefined}
                       />
                       {searchQuery && (
-                        <span
-                          className="input-icon-addon"
-                          style={{ right: 0, left: 'auto', cursor: 'pointer' }}
+                        <button
+                          type="button"
+                          className="btn btn-icon btn-ghost-secondary position-absolute top-50 end-0 translate-middle-y me-1"
+                          style={{ zIndex: 2 }}
                           onClick={() => setSearchQuery('')}
-                          onKeyDown={(e) => e.key === 'Enter' && setSearchQuery('')}
-                          role="button"
-                          tabIndex={0}
-                          aria-label="Очистить"
+                          aria-label="Очистить поиск"
                         >
                           <IconX size={18} />
-                        </span>
+                        </button>
                       )}
                     </div>
-                  </div>
-                  <div className="col-auto btn-list">
-                    <button
-                      type="button"
-                      className="btn btn-outline-secondary btn-sm"
-                      onClick={() => {
-                        if (expandedServers.size === filteredServers.length) {
-                          setExpandedServers(new Set());
-                        } else {
-                          setExpandedServers(new Set(filteredServers.map((s) => s.id)));
-                        }
-                      }}
-                      title={expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'}
-                    >
-                      {expandedServers.size === filteredServers.length ? (
-                        <>
+                    <div className="d-flex align-items-center gap-1 flex-shrink-0">
+                      <button
+                        type="button"
+                        className="btn btn-outline-secondary btn-sm"
+                        onClick={() => {
+                          if (expandedServers.size === filteredServers.length) {
+                            setExpandedServers(new Set());
+                          } else {
+                            setExpandedServers(new Set(filteredServers.map((s) => s.id)));
+                          }
+                        }}
+                        title={expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'}
+                      >
+                        {expandedServers.size === filteredServers.length ? (
                           <IconChevronUp size={18} className="me-1" />
-                          Свернуть все
-                        </>
-                      ) : (
-                        <>
+                        ) : (
                           <IconChevronDown size={18} className="me-1" />
-                          Развернуть все
-                        </>
-                      )}
-                    </button>
-                    <button type="button" className="btn btn-icon btn-outline-secondary" title="Настройки" aria-label="Настройки">
-                      <IconSettings size={18} />
-                    </button>
-                    <button type="button" className="btn btn-icon btn-outline-secondary" title="Быстрые действия" aria-label="Быстрые действия">
-                      <IconFilter size={18} />
-                    </button>
+                        )}
+                        {expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'}
+                      </button>
+                      <button type="button" className="btn btn-icon btn-outline-secondary" title="Настройки" aria-label="Настройки">
+                        <IconSettings size={18} />
+                      </button>
+                      <button type="button" className="btn btn-icon btn-outline-secondary" title="Быстрые действия" aria-label="Быстрые действия">
+                        <IconFilter size={18} />
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>