From 4a3426e04fc7e0dcf059c17612152f726a2102f7 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Sun, 7 Dec 2025 12:56:41 +0700
Subject: [PATCH] refactor: Update EasySwitchManager layout for improved
 community and gateway display, enhancing visual structure and user
 interaction with better card organization and positioning.

---
 frontend/src/EasySwitchManager.jsx | 103 +++++++++++++++++------------
 1 file changed, 61 insertions(+), 42 deletions(-)

diff --git a/frontend/src/EasySwitchManager.jsx b/frontend/src/EasySwitchManager.jsx
index c6dfbf7..5e20ce7 100644
--- a/frontend/src/EasySwitchManager.jsx
+++ b/frontend/src/EasySwitchManager.jsx
@@ -432,32 +432,34 @@ function EasySwitchManager() {
                 </div>
                 
                 <div className="card-body p-3">
-                  {/* ВСЕ Communities для этого сервера */}
-                  {filteredCommunitiesForServer.map((comm) => {
-                    const activeKey = `${server.id}:${comm.value}`;
-                    const activeGw = activeGateways[activeKey];
-                    const hasFilterForComm = server.filtersMap.has(comm.value);
-                    
-                    return (
-                      <div key={comm.value} className="mb-3">
-                        {/* Заголовок community */}
-                        <div className="mb-2">
-                          <span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
-                            {comm.value}
-                          </span>
-                          <span className="fw-medium">{comm.name || comm.description || ''}</span>
-                          {hasFilterForComm && (
-                            <span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}>
-                              настроен
-                            </span>
-                          )}
-                          <span className="text-muted small ms-2">
-                            ({server.gateways.length})
-                          </span>
-                        </div>
-                        
-                        {/* Сетка карточек ВСЕх шлюзов сервера */}
-                        <div className="row g-3">
+                  {/* Сетка Communities для этого сервера */}
+                  <div className="row g-3">
+                    {filteredCommunitiesForServer.map((comm) => {
+                      const activeKey = `${server.id}:${comm.value}`;
+                      const activeGw = activeGateways[activeKey];
+                      const hasFilterForComm = server.filtersMap.has(comm.value);
+                      
+                      return (
+                        <div key={comm.value} className="col-12 col-xl-6">
+                          <div className="mb-2">
+                            {/* Заголовок community */}
+                            <div className="mb-2">
+                              <span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
+                                {comm.value}
+                              </span>
+                              <span className="fw-medium">{comm.name || comm.description || ''}</span>
+                              {hasFilterForComm && (
+                                <span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}>
+                                  настроен
+                                </span>
+                              )}
+                              <span className="text-muted small ms-2">
+                                ({server.gateways.length})
+                              </span>
+                            </div>
+                            
+                            {/* Сетка карточек шлюзов для этого community */}
+                            <div className="row g-3">
                           {server.gateways.map((gw, idx) => {
                             const isActive = activeGw === gw.name;
                             const isFastest = idx === 0;
@@ -472,7 +474,8 @@ function EasySwitchManager() {
                                     transition: 'all 0.15s ease',
                                     border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
                                     borderRadius: '8px',
-                                    boxShadow: isActive ? '0 4px 12px rgba(32, 107, 196, 0.3)' : 'none'
+                                    boxShadow: isActive ? '0 4px 12px rgba(32, 107, 196, 0.3)' : 'none',
+                                    position: 'relative'
                                   }}
                                   onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
                                   onMouseEnter={(e) => {
@@ -489,30 +492,44 @@ function EasySwitchManager() {
                                   }}
                                 >
                                   <div className="card-body p-3">
-                                    {/* Галочка и метка Fastest */}
-                                    <div className="d-flex align-items-start justify-content-between mb-2">
+                                    {/* Галочка (абсолютное позиционирование) */}
+                                    {isActive && (
+                                      <div 
+                                        className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
+                                        style={{ 
+                                          width: '24px', 
+                                          height: '24px',
+                                          position: 'absolute',
+                                          top: '12px',
+                                          right: '12px'
+                                        }}
+                                      >
+                                        <IconCheck size={16} />
+                                      </div>
+                                    )}
+                                    
+                                    {/* Метка Fastest */}
+                                    <div className="mb-2" style={{ minHeight: '24px' }}>
                                       {isFastest && !isActive && (
                                         <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.75rem', padding: '4px 8px' }}>
                                           <IconBolt size={14} className="me-1" />
                                           Fast
                                         </span>
                                       )}
-                                      {!isFastest && <span></span>}
-                                      {isActive && (
-                                        <div 
-                                          className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
-                                          style={{ width: '24px', height: '24px' }}
-                                        >
-                                          <IconCheck size={16} />
-                                        </div>
-                                      )}
                                     </div>
                                     
                                     {/* Название шлюза */}
-                                    <div className={`fw-bold mb-2 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '1rem' }}>
+                                    <div className={`fw-bold mb-1 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '1rem' }}>
                                       {gw.name}
                                     </div>
                                     
+                                    {/* Описание шлюза */}
+                                    {gw.comment && (
+                                      <div className={`small mb-2 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.8rem', opacity: isActive ? 0.8 : 1 }}>
+                                        {gw.comment}
+                                      </div>
+                                    )}
+                                    
                                     {/* Протокол */}
                                     <div className={`small mb-2 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.85rem', opacity: isActive ? 0.85 : 1 }}>
                                       {serverMeta?.provider || 'vless / xudp'}
@@ -527,10 +544,12 @@ function EasySwitchManager() {
                               </div>
                             );
                           })}
+                            </div>
+                          </div>
                         </div>
-                      </div>
-                    );
-                  })}
+                      );
+                    })}
+                  </div>
                 </div>
               </div>
             );