From 583f9b255ea9e80a10b1b66437c36ead72cbb068 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Wed, 11 Feb 2026 00:53:48 +0700
Subject: [PATCH] refactor(EasySwitchManager): enhance gateway display with
 improved layout and additional information including IP and provider details

---
 frontend/src/EasySwitchManager.jsx | 132 +++++++++++++++++++++++------
 1 file changed, 104 insertions(+), 28 deletions(-)

diff --git a/frontend/src/EasySwitchManager.jsx b/frontend/src/EasySwitchManager.jsx
index a36579b..a561870 100644
--- a/frontend/src/EasySwitchManager.jsx
+++ b/frontend/src/EasySwitchManager.jsx
@@ -915,21 +915,56 @@ function EasySwitchManager() {
                                       )}
                                     </div>
                                     
-                                    {/* Название шлюза */}
-                                    <div className={`fw-bold mb-1 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '0.85rem', lineHeight: '1.2' }}>
-                                      {gw.name}
-                                    </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 */}
+                                    <div className="d-flex align-items-start gap-2 mb-1">
+                                      <span
+                                        className={`avatar avatar-sm ${
+                                          isActive ? 'bg-white text-primary' : 'bg-primary-lt'
+                                        }`}
+                                      >
+                                        {countryToFlag(gw.country || country || '')}
+                                      </span>
+                                      <div className="flex-grow-1 min-w-0">
+                                        {/* Основное название — имя gateway */}
+                                        <div
+                                          className={`fw-bold text-truncate ${
+                                            isActive ? 'text-white' : ''
+                                          }`}
+                                          style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
+                                        >
+                                          {gw.name}
+                                        </div>
+                                        {/* IP шлюза под названием */}
+                                        {gw.ip && (
+                                          <div
+                                            className={`small text-truncate ${
+                                              isActive ? 'text-white-75' : 'text-muted'
+                                            }`}
+                                            style={{ fontSize: '0.7rem' }}
+                                          >
+                                            {gw.ip}
+                                          </div>
+                                        )}
+                                        {/* Описание / провайдер */}
+                                        <div
+                                          className={`small text-truncate ${
+                                            isActive ? 'text-white-75' : 'text-muted'
+                                          }`}
+                                          style={{ fontSize: '0.7rem' }}
+                                        >
+                                          {gw.comment && <span className="me-1">{gw.comment}</span>}
+                                          {(gw.country || serverMeta?.country || serverMeta?.provider) && (
+                                            <>
+                                              {gw.country || serverMeta?.country ? (
+                                                <span className="me-1">
+                                                  {countryToFlag(gw.country || serverMeta?.country)}
+                                                </span>
+                                              ) : null}
+                                              <span>{gw.provider || serverMeta?.provider || ''}</span>
+                                            </>
+                                          )}
+                                        </div>
                                       </div>
-                                    )}
-                                    
-                                    {/* Протокол */}
-                                    <div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.85 : 1 }}>
-                                      {serverMeta?.provider || 'vless'}
                                     </div>
                                     
                                     {/* Метрика (пинг) */}
@@ -1055,21 +1090,62 @@ function EasySwitchManager() {
                                                     )}
                                                   </div>
                                                   
-                                                  {/* Название шлюза */}
-                                                  <div className={`fw-bold mb-1 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '0.85rem', lineHeight: '1.2' }}>
-                                                    {gw.name}
-                                                  </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 */}
+                                                  <div className="d-flex align-items-start gap-2 mb-1">
+                                                    <span
+                                                      className={`avatar avatar-sm ${
+                                                        isActive ? 'bg-white text-primary' : 'bg-primary-lt'
+                                                      }`}
+                                                    >
+                                                      {countryToFlag(gw.country || country || '')}
+                                                    </span>
+                                                    <div className="flex-grow-1 min-w-0">
+                                                      {/* Основное название — имя gateway */}
+                                                      <div
+                                                        className={`fw-bold text-truncate ${
+                                                          isActive ? 'text-white' : ''
+                                                        }`}
+                                                        style={{ fontSize: '0.85rem', lineHeight: '1.2' }}
+                                                      >
+                                                        {gw.name}
+                                                      </div>
+                                                      {/* IP шлюза под названием */}
+                                                      {gw.ip && (
+                                                        <div
+                                                          className={`small text-truncate ${
+                                                            isActive ? 'text-white-75' : 'text-muted'
+                                                          }`}
+                                                          style={{ fontSize: '0.7rem' }}
+                                                        >
+                                                          {gw.ip}
+                                                        </div>
+                                                      )}
+                                                      {/* Описание / провайдер */}
+                                                      <div
+                                                        className={`small text-truncate ${
+                                                          isActive ? 'text-white-75' : 'text-muted'
+                                                        }`}
+                                                        style={{ fontSize: '0.7rem' }}
+                                                      >
+                                                        {gw.comment && (
+                                                          <span className="me-1">{gw.comment}</span>
+                                                        )}
+                                                        {(gw.country ||
+                                                          serverMeta?.country ||
+                                                          serverMeta?.provider) && (
+                                                          <>
+                                                            {gw.country || serverMeta?.country ? (
+                                                              <span className="me-1">
+                                                                {countryToFlag(
+                                                                  gw.country || serverMeta?.country
+                                                                )}
+                                                              </span>
+                                                            ) : null}
+                                                            <span>{gw.provider || serverMeta?.provider || ''}</span>
+                                                          </>
+                                                        )}
+                                                      </div>
                                                     </div>
-                                                  )}
-                                                  
-                                                  {/* Протокол */}
-                                                  <div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.85 : 1 }}>
-                                                    {serverMeta?.provider || 'vless'}
                                                   </div>
                                                   
                                                   {/* Метрика (пинг) */}