From 02a45fce71d02dd4edbb232368b5fefe07b05ddd Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Tue, 24 Feb 2026 11:46:30 +0700
Subject: [PATCH] feat(EasySwitch): enhance Easy Switch UI with new styles and
 layout adjustments for improved user experience

---
 frontend/src/App.css               |  76 +++++++++++
 frontend/src/EasySwitchManager.jsx | 203 ++++++-----------------------
 2 files changed, 119 insertions(+), 160 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 1fe739c..988f9fc 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -697,6 +697,82 @@ body.sidebar-overlay-open {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
+/* Easy Switch: bring visuals in line with Tabler pages */
+.easy-switch-page .card-tabs .nav-link {
+  font-weight: 500;
+}
+
+.easy-switch-server-header {
+  background-color: rgba(32, 107, 196, 0.05);
+  cursor: pointer;
+  user-select: none;
+}
+
+.easy-switch-flag {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.easy-switch-gateway-card {
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+  border: 1px solid var(--tblr-border-color);
+  position: relative;
+}
+
+.easy-switch-gateway-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 0.125rem 0.375rem rgba(32, 41, 57, 0.1);
+}
+
+.easy-switch-gateway-card-active {
+  border: 1px solid var(--tblr-primary) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(32, 107, 196, 0.25);
+}
+
+.easy-switch-active-check {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.easy-switch-fast-slot {
+  min-height: 18px;
+}
+
+.easy-switch-fast-badge {
+  font-size: 0.65rem;
+  padding: 2px 6px;
+}
+
+.easy-switch-gateway-flag {
+  width: 28px;
+  height: 28px;
+  font-size: 1.25rem;
+  line-height: 1;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+.easy-switch-gateway-flag-active {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+.easy-switch-gateway-title {
+  font-size: 0.85rem;
+  line-height: 1.2;
+  word-break: break-word;
+}
+
+.easy-switch-gateway-ip {
+  font-size: 0.75rem;
+}
+
+.easy-switch-gateway-ping {
+  font-size: 1.1rem;
+}
+
 /* Ripple effect для кнопок */
 @keyframes ripple {
   to {
diff --git a/frontend/src/EasySwitchManager.jsx b/frontend/src/EasySwitchManager.jsx
index 6ebb9a6..437fdeb 100644
--- a/frontend/src/EasySwitchManager.jsx
+++ b/frontend/src/EasySwitchManager.jsx
@@ -505,7 +505,7 @@ function EasySwitchManager() {
 
   if (loading && servers.length === 0) {
     return (
-      <div className="container-xl">
+      <div className="easy-switch-page">
         <PageHeader
           title="Easy Switch"
           icon={<IconWorld size={24} />}
@@ -525,7 +525,7 @@ function EasySwitchManager() {
   }
 
   return (
-    <div className="container-xl">
+    <div className="easy-switch-page">
       <PageHeader
         title="Easy Switch"
         icon={<IconWorld size={24} />}
@@ -554,7 +554,7 @@ function EasySwitchManager() {
       />
 
       {/* Вкладки */}
-      <div className="mb-3">
+      <div className="card card-tabs mb-3">
         <ul className="nav nav-tabs" role="tablist">
           <li className="nav-item" role="presentation">
             <button
@@ -599,8 +599,9 @@ function EasySwitchManager() {
       )}
 
       {/* Панель фильтров */}
-      <div className="mb-3">
-        <div className="row g-2 align-items-center">
+      <div className="card mb-3">
+        <div className="card-body py-3">
+          <div className="row g-2 align-items-center">
           {/* Переключатель "Только настроенные" */}
           <div className="col-auto">
             <label className="form-check form-switch mb-0">
@@ -679,17 +680,18 @@ function EasySwitchManager() {
             </button>
           </div>
           <div className="col-auto">
-            <button className="btn btn-icon" title="Настройки">
+            <button className="btn btn-outline-secondary btn-icon" title="Настройки">
               <IconSettings size={18} />
             </button>
           </div>
           <div className="col-auto">
-            <button className="btn btn-icon" title="Быстрые действия">
+            <button className="btn btn-outline-secondary btn-icon" title="Быстрые действия">
               <IconFilter size={18} />
             </button>
           </div>
         </div>
       </div>
+      </div>
 
       {/* Список серверов с communities и шлюзами */}
       {filteredServers.length === 0 ? (
@@ -726,12 +728,7 @@ function EasySwitchManager() {
               <div key={server.id} className="card mb-3">
                 {/* Заголовок сервера (кликабельный) */}
                 <div 
-                  className="card-header py-2" 
-                  style={{ 
-                    backgroundColor: 'rgba(32, 107, 196, 0.05)',
-                    cursor: 'pointer',
-                    userSelect: 'none'
-                  }}
+                  className="card-header py-2 easy-switch-server-header"
                   onClick={() => toggleServerExpanded(server.id)}
                 >
                   <div className="d-flex align-items-center">
@@ -742,7 +739,7 @@ function EasySwitchManager() {
                       <IconChevronDown size={20} className="me-2 text-muted" />
                     )}
                     
-                    {flag && <span className="me-2" style={{ fontSize: '1.5rem' }}>{flag}</span>}
+                    {flag && <span className="me-2 easy-switch-flag">{flag}</span>}
                     <IconServer size={20} className="me-2 text-primary" />
                     <h3 className="card-title mb-0 me-2">{server.name}</h3>
                     {server.description && (
@@ -793,7 +790,7 @@ function EasySwitchManager() {
                             <div key={tag} className="mb-4">
                               {/* Заголовок группы тегов */}
                               <div className="mb-2 pb-2 border-bottom">
-                                <span className="badge bg-purple-lt text-purple me-2" style={{ fontSize: '0.85rem', padding: '6px 10px' }}>
+                                <span className="badge bg-purple-lt text-purple me-2">
                                   {tag}
                                 </span>
                                 <span className="text-muted small">
@@ -813,12 +810,12 @@ function EasySwitchManager() {
                           <div className="mb-2">
                             {/* Заголовок community */}
                             <div className="mb-2">
-                              <span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
+                              <span className="badge bg-blue-lt text-blue me-2">
                                 {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 className="badge bg-green-lt text-green ms-2">
                                   настроен
                                 </span>
                               )}
@@ -842,50 +839,21 @@ function EasySwitchManager() {
                             return (
                               <div key={gw.name} className="col-12 col-sm-4">
                                 <div
-                                  className={`card cursor-pointer h-100 ${isActive ? 'bg-primary text-white' : ''}`}
-                                  style={{
-                                    cursor: 'pointer',
-                                    transition: 'all 0.15s ease',
-                                    border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
-                                    borderRadius: '6px',
-                                    boxShadow: isActive ? '0 3px 8px rgba(32, 107, 196, 0.3)' : 'none',
-                                    position: 'relative'
-                                  }}
+                                  className={`card h-100 easy-switch-gateway-card ${isActive ? 'easy-switch-gateway-card-active bg-primary text-white' : ''}`}
                                   onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
-                                  onMouseEnter={(e) => {
-                                    if (!isActive) {
-                                      e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
-                                      e.currentTarget.style.transform = 'translateY(-1px)';
-                                    }
-                                  }}
-                                  onMouseLeave={(e) => {
-                                    if (!isActive) {
-                                      e.currentTarget.style.boxShadow = 'none';
-                                      e.currentTarget.style.transform = 'translateY(0)';
-                                    }
-                                  }}
                                 >
                                   <div className="card-body p-2">
                                     {/* Галочка (абсолютное позиционирование) */}
                                     {isActive && (
-                                      <div 
-                                        className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
-                                        style={{ 
-                                          width: '20px', 
-                                          height: '20px',
-                                          position: 'absolute',
-                                          top: '8px',
-                                          right: '8px'
-                                        }}
-                                      >
+                                      <div className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center easy-switch-active-check">
                                         <IconCheck size={12} />
                                       </div>
                                     )}
                                     
                                     {/* Метка Fastest */}
-                                    <div className="mb-1" style={{ minHeight: '18px' }}>
+                                    <div className="mb-1 easy-switch-fast-slot">
                                       {isFastest && !isActive && (
-                                        <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.65rem', padding: '2px 6px' }}>
+                                        <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center easy-switch-fast-badge">
                                           <IconBolt size={10} className="me-1" />
                                           Fast
                                         </span>
@@ -895,22 +863,14 @@ function EasySwitchManager() {
                                     {/* Флаг и название (комментарий) шлюза */}
                                     <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)',
-                                        }}
+                                        className={`d-flex align-items-center justify-content-center flex-shrink-0 rounded easy-switch-gateway-flag ${isActive ? 'easy-switch-gateway-flag-active' : ''}`}
                                         title={gw.country || country || ''}
                                       >
                                         {countryToFlag(gw.country || country || '') || '🌐'}
                                       </span>
                                       <div className="flex-grow-1 min-w-0">
                                         <div
-                                          className={`fw-bold ${isActive ? 'text-white' : ''}`}
-                                          style={{ fontSize: '0.85rem', lineHeight: '1.2', wordBreak: 'break-word' }}
+                                          className={`fw-bold easy-switch-gateway-title ${isActive ? 'text-white' : ''}`}
                                         >
                                           {gw.comment || gw.name}
                                         </div>
@@ -919,17 +879,16 @@ function EasySwitchManager() {
                                     {/* IP шлюза ниже */}
                                     {gw.ip && (
                                       <div
-                                        className={`small text-truncate ${
+                                        className={`small text-truncate easy-switch-gateway-ip ${
                                           isActive ? 'text-white-75' : 'text-muted'
                                         }`}
-                                        style={{ fontSize: '0.75rem' }}
                                       >
                                         {gw.ip}
                                       </div>
                                     )}
                                     
                                     {/* Метрика (пинг) */}
-                                    <div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
+                                    <div className={`fw-bold mt-1 easy-switch-gateway-ping ${isActive ? 'text-white' : 'text-success'}`}>
                                       {ping != null ? ping : '—'}
                                     </div>
                                   </div>
@@ -952,7 +911,7 @@ function EasySwitchManager() {
                           <div className="mb-4">
                             {/* Заголовок группы без тегов */}
                             <div className="mb-2 pb-2 border-bottom">
-                              <span className="badge bg-gray-lt text-gray me-2" style={{ fontSize: '0.85rem', padding: '6px 10px' }}>
+                              <span className="badge bg-gray-lt text-gray me-2">
                                 Без тегов
                               </span>
                               <span className="text-muted small">
@@ -972,12 +931,12 @@ function EasySwitchManager() {
                                     <div className="mb-2">
                                       {/* Заголовок community */}
                                       <div className="mb-2">
-                                        <span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
+                              <span className="badge bg-blue-lt text-blue me-2">
                                           {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 className="badge bg-green-lt text-green ms-2">
                                             настроен
                                           </span>
                                         )}
@@ -1001,50 +960,21 @@ function EasySwitchManager() {
                                           return (
                                             <div key={gw.name} className="col-12 col-sm-4">
                                               <div
-                                                className={`card cursor-pointer h-100 ${isActive ? 'bg-primary text-white' : ''}`}
-                                                style={{
-                                                  cursor: 'pointer',
-                                                  transition: 'all 0.15s ease',
-                                                  border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
-                                                  borderRadius: '6px',
-                                                  boxShadow: isActive ? '0 3px 8px rgba(32, 107, 196, 0.3)' : 'none',
-                                                  position: 'relative'
-                                                }}
+                                                className={`card h-100 easy-switch-gateway-card ${isActive ? 'easy-switch-gateway-card-active bg-primary text-white' : ''}`}
                                                 onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
-                                                onMouseEnter={(e) => {
-                                                  if (!isActive) {
-                                                    e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
-                                                    e.currentTarget.style.transform = 'translateY(-1px)';
-                                                  }
-                                                }}
-                                                onMouseLeave={(e) => {
-                                                  if (!isActive) {
-                                                    e.currentTarget.style.boxShadow = 'none';
-                                                    e.currentTarget.style.transform = 'translateY(0)';
-                                                  }
-                                                }}
                                               >
                                                 <div className="card-body p-2">
                                                   {/* Галочка (абсолютное позиционирование) */}
                                                   {isActive && (
-                                                    <div 
-                                                      className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
-                                                      style={{ 
-                                                        width: '20px', 
-                                                        height: '20px',
-                                                        position: 'absolute',
-                                                        top: '8px',
-                                                        right: '8px'
-                                                      }}
-                                                    >
+                                                    <div className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center easy-switch-active-check">
                                                       <IconCheck size={12} />
                                                     </div>
                                                   )}
                                                   
                                                   {/* Метка Fastest */}
-                                                  <div className="mb-1" style={{ minHeight: '18px' }}>
+                                                  <div className="mb-1 easy-switch-fast-slot">
                                                     {isFastest && !isActive && (
-                                                      <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.65rem', padding: '2px 6px' }}>
+                                                      <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center easy-switch-fast-badge">
                                                         <IconBolt size={10} className="me-1" />
                                                         Fast
                                                       </span>
@@ -1054,22 +984,14 @@ function EasySwitchManager() {
                                                   {/* Флаг и название (комментарий) шлюза */}
                                                   <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)',
-                                                      }}
+                                                      className={`d-flex align-items-center justify-content-center flex-shrink-0 rounded easy-switch-gateway-flag ${isActive ? 'easy-switch-gateway-flag-active' : ''}`}
                                                       title={gw.country || country || ''}
                                                     >
                                                       {countryToFlag(gw.country || country || '') || '🌐'}
                                                     </span>
                                                     <div className="flex-grow-1 min-w-0">
                                                       <div
-                                                        className={`fw-bold ${isActive ? 'text-white' : ''}`}
-                                                        style={{ fontSize: '0.85rem', lineHeight: '1.2', wordBreak: 'break-word' }}
+                                                        className={`fw-bold easy-switch-gateway-title ${isActive ? 'text-white' : ''}`}
                                                       >
                                                         {gw.comment || gw.name}
                                                       </div>
@@ -1078,17 +1000,16 @@ function EasySwitchManager() {
                                                   {/* IP шлюза ниже */}
                                                   {gw.ip && (
                                                     <div
-                                                      className={`small text-truncate ${
+                                                      className={`small text-truncate easy-switch-gateway-ip ${
                                                         isActive ? 'text-white-75' : 'text-muted'
                                                       }`}
-                                                      style={{ fontSize: '0.75rem' }}
                                                     >
                                                       {gw.ip}
                                                     </div>
                                                   )}
                                                   
                                                   {/* Метрика (пинг) */}
-                                                  <div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
+                                                  <div className={`fw-bold mt-1 easy-switch-gateway-ping ${isActive ? 'text-white' : 'text-success'}`}>
                                                     {ping != null ? ping : '—'}
                                                   </div>
                                                 </div>
@@ -1120,12 +1041,12 @@ function EasySwitchManager() {
                             <div className="mb-2">
                               {/* Заголовок community */}
                               <div className="mb-2">
-                                <span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
+                                <span className="badge bg-blue-lt text-blue me-2">
                                   {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 className="badge bg-green-lt text-green ms-2">
                                     настроен
                                   </span>
                                 )}
@@ -1149,50 +1070,21 @@ function EasySwitchManager() {
                                   return (
                                     <div key={gw.name} className="col-12 col-sm-4">
                                       <div
-                                        className={`card cursor-pointer h-100 ${isActive ? 'bg-primary text-white' : ''}`}
-                                        style={{
-                                          cursor: 'pointer',
-                                          transition: 'all 0.15s ease',
-                                          border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
-                                          borderRadius: '6px',
-                                          boxShadow: isActive ? '0 3px 8px rgba(32, 107, 196, 0.3)' : 'none',
-                                          position: 'relative'
-                                        }}
+                                        className={`card h-100 easy-switch-gateway-card ${isActive ? 'easy-switch-gateway-card-active bg-primary text-white' : ''}`}
                                         onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
-                                        onMouseEnter={(e) => {
-                                          if (!isActive) {
-                                            e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
-                                            e.currentTarget.style.transform = 'translateY(-1px)';
-                                          }
-                                        }}
-                                        onMouseLeave={(e) => {
-                                          if (!isActive) {
-                                            e.currentTarget.style.boxShadow = 'none';
-                                            e.currentTarget.style.transform = 'translateY(0)';
-                                          }
-                                        }}
                                       >
                                         <div className="card-body p-2">
                                           {/* Галочка (абсолютное позиционирование) */}
                                           {isActive && (
-                                            <div 
-                                              className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
-                                              style={{ 
-                                                width: '20px', 
-                                                height: '20px',
-                                                position: 'absolute',
-                                                top: '8px',
-                                                right: '8px'
-                                              }}
-                                            >
+                                            <div className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center easy-switch-active-check">
                                               <IconCheck size={12} />
                                             </div>
                                           )}
                                           
                                           {/* Метка Fastest */}
-                                          <div className="mb-1" style={{ minHeight: '18px' }}>
+                                          <div className="mb-1 easy-switch-fast-slot">
                                             {isFastest && !isActive && (
-                                              <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.65rem', padding: '2px 6px' }}>
+                                              <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center easy-switch-fast-badge">
                                                 <IconBolt size={10} className="me-1" />
                                                 Fast
                                               </span>
@@ -1202,22 +1094,14 @@ function EasySwitchManager() {
                                           {/* Флаг и название (комментарий) шлюза */}
                                           <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)',
-                                              }}
+                                              className={`d-flex align-items-center justify-content-center flex-shrink-0 rounded easy-switch-gateway-flag ${isActive ? 'easy-switch-gateway-flag-active' : ''}`}
                                               title={gw.country || country || ''}
                                             >
                                               {countryToFlag(gw.country || country || '') || '🌐'}
                                             </span>
                                             <div className="flex-grow-1 min-w-0">
                                               <div
-                                                className={`fw-bold ${isActive ? 'text-white' : ''}`}
-                                                style={{ fontSize: '0.85rem', lineHeight: '1.2', wordBreak: 'break-word' }}
+                                                className={`fw-bold easy-switch-gateway-title ${isActive ? 'text-white' : ''}`}
                                               >
                                                 {gw.comment || gw.name}
                                               </div>
@@ -1226,15 +1110,14 @@ function EasySwitchManager() {
                                           {/* IP шлюза ниже */}
                                           {gw.ip && (
                                             <div
-                                              className={`small text-truncate mb-1 ${isActive ? 'text-white-75' : 'text-muted'}`}
-                                              style={{ fontSize: '0.75rem' }}
+                                              className={`small text-truncate mb-1 easy-switch-gateway-ip ${isActive ? 'text-white-75' : 'text-muted'}`}
                                             >
                                               {gw.ip}
                                             </div>
                                           )}
                                           
                                           {/* Метрика (пинг) */}
-                                          <div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
+                                          <div className={`fw-bold mt-1 easy-switch-gateway-ping ${isActive ? 'text-white' : 'text-success'}`}>
                                             {ping != null ? ping : '—'}
                                           </div>
                                         </div>