From 5dfe76f1df1b803b802170ebc1fe7abffd9ea048 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Tue, 10 Feb 2026 18:22:34 +0700
Subject: [PATCH] feat(GatewayAutocomplete): enhance UI layout and improve
 gateway card display for better user interaction

---
 frontend/src/FilterManager.jsx | 65 +++++++++++++++-------------------
 1 file changed, 29 insertions(+), 36 deletions(-)

diff --git a/frontend/src/FilterManager.jsx b/frontend/src/FilterManager.jsx
index f2da96f..b2beeab 100644
--- a/frontend/src/FilterManager.jsx
+++ b/frontend/src/FilterManager.jsx
@@ -431,7 +431,7 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
   return (
     <div className="mb-3" ref={containerRef}>
       <label className={`form-label ${required ? 'required' : ''}`}>{label}</label>
-      <div className="position-relative">
+      <div className="position-relative mb-2">
         <div className="input-icon">
           <span className="input-icon-addon">
             <IconServer size={16} />
@@ -443,24 +443,17 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
             value={inputValue}
             onChange={handleInputChange}
             onFocus={() => setIsOpen(true)}
+            onBlur={() => setIsOpen(false)}
             onKeyDown={handleKeyDown}
             placeholder={placeholder}
             required={required && !value}
             autoComplete="off"
           />
-          <span 
-            className="input-icon-addon cursor-pointer" 
-            style={{ right: 0, left: 'auto' }}
-            onClick={() => setIsOpen(!isOpen)}
-          >
-            <IconChevronDown size={16} className={isOpen ? 'rotate-180' : ''} style={{ transition: 'transform 0.2s' }} />
-          </span>
         </div>
       </div>
 
-      {/* Карточки gateway вместо выпадающего списка */}
-      {isOpen && (
-        <div className="mt-3">
+      {/* Карточки gateway под полем, ВСЕГДА видимы */}
+      <div className="mt-1">
           {gateways.length === 0 ? (
             <div className="text-muted small d-flex align-items-center">
               <IconAlertTriangle size={14} className="me-2 text-warning" />
@@ -471,7 +464,7 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
               Ничего не найдено. Уточните запрос по IP, имени или описанию.
             </div>
           ) : (
-            <div className="row row-cols-1 row-cols-md-2 g-2">
+            <div className="row row-cols-1 row-cols-md-3 g-2">
               {filteredGateways.map((gw, idx) => {
                 const isSelected = gw.name === value;
                 const isHighlighted = highlightedIndex === idx;
@@ -486,35 +479,35 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
                       <div
                         className={
                           'card h-100 gateway-card ' +
-                          (isSelected ? 'border-primary shadow-sm ' : '') +
-                          (isHighlighted ? 'border-2 ' : '')
+                          (isSelected ? 'bg-primary text-white border-primary shadow-sm ' : 'bg-white ') +
+                          (!isSelected && isHighlighted ? 'border-primary ' : '')
                         }
                         style={{ borderRadius: '10px', transition: 'all 0.12s ease' }}
                       >
-                        <div className="card-body py-2 px-3 d-flex align-items-start gap-2">
-                          <span className="avatar avatar-sm bg-primary-lt">
-                            {gw.country ? countryToFlag(gw.country) : <IconServer size={16} />}
-                          </span>
-                          <div className="flex-grow-1 min-w-0">
-                            <div className="d-flex align-items-center gap-2 mb-1">
-                              <code className="fw-bold">{gw.name}</code>
-                              {gw.comment && (
-                                <span className="text-muted small text-truncate" style={{ maxWidth: '180px' }}>
-                                  {gw.comment}
-                                </span>
+                        <div className="card-body py-2 px-3">
+                          <div className="d-flex align-items-start gap-2 mb-1">
+                            <span className={`avatar avatar-sm ${isSelected ? 'bg-white text-primary' : 'bg-primary-lt'}`}>
+                              {gw.country ? countryToFlag(gw.country) : <IconServer size={16} />}
+                            </span>
+                            <div className="flex-grow-1 min-w-0">
+                              <div className="fw-bold text-truncate">
+                                {gw.ip || gw.name}
+                              </div>
+                              <div className={`small text-truncate ${isSelected ? 'text-white-75' : 'text-muted'}`}>
+                                {gw.comment || gw.name}
+                              </div>
+                              {gw.serverDns && (
+                                <div className={`small text-truncate ${isSelected ? 'text-white-75' : 'text-muted'}`}>
+                                  {gw.serverDns}
+                                </div>
                               )}
                             </div>
-                            <div className="text-muted small">
-                              {gw.ip && <span>IP: {gw.ip}</span>}
-                              {gw.ip && gw.serverDns && <span className="mx-1">•</span>}
-                              {gw.serverDns && <span>{gw.serverDns}</span>}
-                            </div>
+                            {gw.primary && (
+                              <span className={`badge ${isSelected ? 'bg-white text-primary' : 'bg-green-lt text-green'}`}>
+                                Основной
+                              </span>
+                            )}
                           </div>
-                          {gw.primary && (
-                            <span className="badge bg-green-lt text-green align-self-start">
-                              Основной
-                            </span>
-                          )}
                         </div>
                       </div>
                     </button>
@@ -524,7 +517,7 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
             </div>
           )}
         </div>
-      )}
+      </div>
       
       {/* Показываем выбранный gateway отдельной карточкой под полем */}
       {value && selectedGateway && !isOpen && (