refactor(EasySwitchManager): enhance filter panel layout and button styles for improved usability

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,10 +785,11 @@ function EasySwitchManager() {
 
           {activeTab === 'proxies' && (
             <>
-              {/* Панель фильтров — Tabler form-check, input-icon, btn-list */}
+              {/* Панель фильтров — отдельная карточка, чёткая структура без наложений */}
-              <div className="mb-4">
+              <div className="card mb-4">
-                <div className="row g-2 align-items-center flex-wrap">
+                <div className="card-body py-3">
-                  <div className="col-auto">
+                  <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"
@@ -798,8 +799,6 @@ function EasySwitchManager() {
                         />
                         <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"
@@ -810,8 +809,7 @@ function EasySwitchManager() {
                         <span className="form-check-label">Группировать по тегам</span>
                       </label>
                     </div>
-                  <div className="col">
+                    <div className="input-icon flex-grow-1" style={{ minWidth: '220px', maxWidth: '340px' }}>
-                    <div className="input-icon">
                       <span className="input-icon-addon">
                         <IconSearch size={18} />
                       </span>
@@ -825,21 +823,18 @@ function EasySwitchManager() {
                         style={searchQuery ? { paddingRight: '2.5rem' } : undefined}
                       />
                       {searchQuery && (
-                        <span
+                        <button
-                          className="input-icon-addon"
+                          type="button"
-                          style={{ right: 0, left: 'auto', cursor: 'pointer' }}
+                          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('')}
+                          aria-label="Очистить поиск"
-                          role="button"
-                          tabIndex={0}
-                          aria-label="Очистить"
                         >
                           <IconX size={18} />
-                        </span>
+                        </button>
                       )}
                     </div>
-                  </div>
+                    <div className="d-flex align-items-center gap-1 flex-shrink-0">
-                  <div className="col-auto btn-list">
                       <button
                         type="button"
                         className="btn btn-outline-secondary btn-sm"
@@ -853,16 +848,11 @@ function EasySwitchManager() {
                         title={expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'}
                       >
                         {expandedServers.size === filteredServers.length ? (
-                        <>
                           <IconChevronUp size={18} className="me-1" />
-                          Свернуть все
-                        </>
                         ) : (
-                        <>
                           <IconChevronDown size={18} className="me-1" />
-                          Развернуть все
-                        </>
                         )}
+                        {expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'}
                       </button>
                       <button type="button" className="btn btn-icon btn-outline-secondary" title="Настройки" aria-label="Настройки">
                         <IconSettings size={18} />
@@ -873,6 +863,7 @@ function EasySwitchManager() {
                     </div>
                   </div>
                 </div>
+              </div>
 
               {/* Список серверов */}
               {filteredServers.length === 0 ? (