From 497940b29fd6b931a1f9933ec5288dc519e90177 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Wed, 11 Feb 2026 01:13:59 +0700
Subject: [PATCH] refactor(EasySwitchManager): update gateway display to
 include comments and improve layout consistency

---
 frontend/src/EasySwitchManager.jsx | 87 ++++++++++++++++++++----------
 1 file changed, 58 insertions(+), 29 deletions(-)

diff --git a/frontend/src/EasySwitchManager.jsx b/frontend/src/EasySwitchManager.jsx
index 2513424..9ea3b89 100644
--- a/frontend/src/EasySwitchManager.jsx
+++ b/frontend/src/EasySwitchManager.jsx
@@ -915,14 +915,20 @@ function EasySwitchManager() {
                                       )}
                                     </div>
                                     
-                                    {/* Флаг и название шлюза */}
+                                    {/* Флаг и название (комментарий) шлюза */}
                                     <div className="d-flex align-items-center gap-2 mb-1">
                                       <span
-                                        className={`avatar avatar-sm ${
-                                          isActive ? 'bg-white text-primary' : 'bg-primary-lt'
-                                        }`}
+                                        className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
+                                        style={{
+                                          width: '28px',
+                                          height: '28px',
+                                          fontSize: '1.25rem',
+                                          lineHeight: 1,
+                                          backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
+                                        }}
+                                        title={gw.country || country || ''}
                                       >
-                                        {countryToFlag(gw.country || country || '')}
+                                        {countryToFlag(gw.country || country || '') || '🌐'}
                                       </span>
                                       <div className="flex-grow-1 min-w-0">
                                         <div
@@ -931,17 +937,17 @@ function EasySwitchManager() {
                                           }`}
                                           style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
                                         >
-                                          {gw.name}
+                                          {gw.comment || gw.name}
                                         </div>
                                       </div>
                                     </div>
-                                    {/* IP шлюза под названием */}
+                                    {/* IP шлюза ниже */}
                                     {gw.ip && (
                                       <div
                                         className={`small text-truncate ${
                                           isActive ? 'text-white-75' : 'text-muted'
                                         }`}
-                                        style={{ fontSize: '0.7rem' }}
+                                        style={{ fontSize: '0.75rem' }}
                                       >
                                         {gw.ip}
                                       </div>
@@ -1070,14 +1076,20 @@ function EasySwitchManager() {
                                                     )}
                                                   </div>
                                                   
-                                                  {/* Флаг и название шлюза */}
+                                                  {/* Флаг и название (комментарий) шлюза */}
                                                   <div className="d-flex align-items-center gap-2 mb-1">
                                                     <span
-                                                      className={`avatar avatar-sm ${
-                                                        isActive ? 'bg-white text-primary' : 'bg-primary-lt'
-                                                      }`}
+                                                      className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
+                                                      style={{
+                                                        width: '28px',
+                                                        height: '28px',
+                                                        fontSize: '1.25rem',
+                                                        lineHeight: 1,
+                                                        backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
+                                                      }}
+                                                      title={gw.country || country || ''}
                                                     >
-                                                      {countryToFlag(gw.country || country || '')}
+                                                      {countryToFlag(gw.country || country || '') || '🌐'}
                                                     </span>
                                                     <div className="flex-grow-1 min-w-0">
                                                       <div
@@ -1086,17 +1098,17 @@ function EasySwitchManager() {
                                                         }`}
                                                         style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
                                                       >
-                                                        {gw.name}
+                                                        {gw.comment || gw.name}
                                                       </div>
                                                     </div>
                                                   </div>
-                                                  {/* IP шлюза под названием */}
+                                                  {/* IP шлюза ниже */}
                                                   {gw.ip && (
                                                     <div
                                                       className={`small text-truncate ${
                                                         isActive ? 'text-white-75' : 'text-muted'
                                                       }`}
-                                                      style={{ fontSize: '0.7rem' }}
+                                                      style={{ fontSize: '0.75rem' }}
                                                     >
                                                       {gw.ip}
                                                     </div>
@@ -1214,23 +1226,40 @@ function EasySwitchManager() {
                                             )}
                                           </div>
                                           
-                                          {/* Название шлюза */}
-                                          <div className={`fw-bold mb-1 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '0.85rem', lineHeight: '1.2' }}>
-                                            {gw.name}
+                                          {/* Флаг и название (комментарий) шлюза */}
+                                          <div className="d-flex align-items-center gap-2 mb-1">
+                                            <span
+                                              className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
+                                              style={{
+                                                width: '28px',
+                                                height: '28px',
+                                                fontSize: '1.25rem',
+                                                lineHeight: 1,
+                                                backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
+                                              }}
+                                              title={gw.country || country || ''}
+                                            >
+                                              {countryToFlag(gw.country || country || '') || '🌐'}
+                                            </span>
+                                            <div className="flex-grow-1 min-w-0">
+                                              <div
+                                                className={`fw-bold text-truncate ${isActive ? 'text-white' : ''}`}
+                                                style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
+                                              >
+                                                {gw.comment || gw.name}
+                                              </div>
+                                            </div>
                                           </div>
-                                          
-                                          {/* Описание шлюза */}
-                                          {gw.comment && (
-                                            <div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.8 : 1, lineHeight: '1.2' }}>
-                                              {gw.comment}
+                                          {/* IP шлюза ниже */}
+                                          {gw.ip && (
+                                            <div
+                                              className={`small text-truncate mb-1 ${isActive ? 'text-white-75' : 'text-muted'}`}
+                                              style={{ fontSize: '0.75rem' }}
+                                            >
+                                              {gw.ip}
                                             </div>
                                           )}
                                           
-                                          {/* Протокол */}
-                                          <div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.85 : 1 }}>
-                                            {serverMeta?.provider || 'vless'}
-                                          </div>
-                                          
                                           {/* Метрика (пинг) */}
                                           <div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
                                             {ping != null ? ping : '—'}