From 804f132d4284391154d39cd489eb24a2cd47db8a Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Tue, 17 Feb 2026 10:57:46 +0700
Subject: [PATCH] refactor(ServerGroupCard): update layout and improve server
 information display in expanded view

---
 .../src/components/server/ServerGroupCard.jsx | 84 ++++++++++++-------
 1 file changed, 53 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/server/ServerGroupCard.jsx b/frontend/src/components/server/ServerGroupCard.jsx
index 98bfe4d..231b46c 100644
--- a/frontend/src/components/server/ServerGroupCard.jsx
+++ b/frontend/src/components/server/ServerGroupCard.jsx
@@ -38,7 +38,6 @@ export default function ServerGroupCard({
   const [expanded, setExpanded] = useState(false);
   const first = servers[0];
   const title = groupKey || (first?.dns?.split('.')[0] || 'Группа');
-  const provider = first?.provider || '';
   const tunnel = first?.tunnel;
   const wanCount = servers.length;
   const anySelected = servers.some((s) => selectedSet.has(s.ip));
@@ -81,7 +80,7 @@ export default function ServerGroupCard({
             </div>
           </div>
 
-          {/* Центр: флаг, название, провайдер; ниже DNS и теги */}
+          {/* Центр: в свёрнутом виде — все провайдеры и домены, чтобы было однозначно */}
           <div
             className="flex-grow-1 py-2 px-3"
             style={{ cursor: 'pointer' }}
@@ -91,21 +90,22 @@ export default function ServerGroupCard({
               <span className="me-2" style={{ fontSize: '1.25rem' }}>{countryToFlag(first?.country)}</span>
               <div>
                 <span className="fw-semibold">{title}</span>
-                {provider && (
-                  <>
-                    <span className="text-muted mx-2">•</span>
-                    <span className="text-muted">{provider}</span>
-                  </>
-                )}
+                <span className="text-muted ms-2">· мультиван</span>
               </div>
               <span className="badge bg-success-lt text-success ms-auto">
                 {wanCount} WAN
               </span>
             </div>
-            <div className="d-flex align-items-center gap-2">
-              <code className="text-muted" style={{ fontSize: '0.8rem' }}>
-                {first?.dns || first?.ip || ''}
-              </code>
+            <div className="d-flex flex-wrap align-items-center gap-2">
+              <span className="text-muted small">
+                {servers.map((s) => s.dns?.split('.')[0] || s.ip).join(', ')}
+              </span>
+              <span className="text-muted small">—</span>
+              {servers.map((s, i) => (
+                <code key={s.id || s.ip} className="text-muted" style={{ fontSize: '0.75rem' }}>
+                  {s.dns || s.ip}{i < servers.length - 1 ? ' · ' : ''}
+                </code>
+              ))}
               {tunnel && (
                 <span className="badge bg-secondary-lt text-secondary">
                   <IconNetwork size={12} className="me-1" />
@@ -147,9 +147,20 @@ export default function ServerGroupCard({
           </div>
         </div>
 
-        {/* Развёрнутый список WAN */}
+        {/* Развёрнутый список WAN: визуально отделённый блок, у каждой строки — бейдж HOME */}
         {expanded && (
-          <div className="border-top bg-light" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
+          <div
+            className="border-top border-start border-3 border-green bg-green-lt"
+            style={{
+              borderBottomLeftRadius: '7px',
+              borderBottomRightRadius: '7px',
+              borderLeftColor: 'var(--tblr-green)',
+              backgroundColor: 'rgba(34, 197, 94, 0.06)'
+            }}
+          >
+            <div className="small text-muted px-3 py-1 border-bottom bg-green-lt" style={{ fontSize: '0.7rem' }}>
+              WAN-подключения группы
+            </div>
             <div className="p-2">
               {servers.map((server) => {
                 const isSelected = selectedSet.has(server.ip);
@@ -157,26 +168,37 @@ export default function ServerGroupCard({
                 return (
                   <div
                     key={server.id || server.ip}
-                    className={`d-flex align-items-center rounded p-2 mb-1 ${isSelected ? 'bg-primary-lt' : ''}`}
+                    className={`d-flex align-items-stretch rounded mb-1 overflow-hidden ${isSelected ? 'bg-primary-lt' : 'bg-white'}`}
+                    style={{ boxShadow: '0 0 0 1px rgba(0,0,0,0.06)' }}
                   >
-                    <button
-                      type="button"
-                      className="btn btn-ghost-secondary btn-icon btn-sm p-0 me-2"
-                      onClick={() => onSelect?.(server)}
-                      title={isSelected ? 'Снять выбор' : 'Выбрать'}
+                    {/* Бейдж HOME у вложенного роутера */}
+                    <div
+                      className="d-flex align-items-center justify-content-center bg-green-lt text-green px-2"
+                      style={{ minWidth: '52px', fontSize: '0.6rem', fontWeight: 700, letterSpacing: '0.5px' }}
                     >
-                      {isSelected ? (
-                        <IconCircleCheck size={18} className="text-primary" />
-                      ) : (
-                        <IconSquare size={18} className="text-muted" />
-                      )}
-                    </button>
-                    <span className="me-2" style={{ fontSize: '1.1rem' }}>{countryToFlag(server.country)}</span>
-                    <div className="flex-grow-1 min-w-0">
-                      <span className="fw-medium">{serverName}</span>
-                      <span className="text-muted ms-2 small">{server.dns || server.ip}</span>
+                      <IconRouter size={14} className="me-1" />
+                      HOME
                     </div>
-                    <div className="btn-list gap-1">
+                    <div className="d-flex align-items-center flex-grow-1 py-2 px-2 min-w-0">
+                      <button
+                        type="button"
+                        className="btn btn-ghost-secondary btn-icon btn-sm p-0 me-2 flex-shrink-0"
+                        onClick={() => onSelect?.(server)}
+                        title={isSelected ? 'Снять выбор' : 'Выбрать'}
+                      >
+                        {isSelected ? (
+                          <IconCircleCheck size={18} className="text-primary" />
+                        ) : (
+                          <IconSquare size={18} className="text-muted" />
+                        )}
+                      </button>
+                      <span className="me-2 flex-shrink-0" style={{ fontSize: '1.1rem' }}>{countryToFlag(server.country)}</span>
+                      <div className="min-w-0">
+                        <span className="fw-medium">{serverName}</span>
+                        <span className="text-muted ms-2 small">{server.dns || server.ip}</span>
+                      </div>
+                    </div>
+                    <div className="d-flex align-items-center btn-list gap-1 px-2 border-start">
                       <button
                         type="button"
                         className="btn btn-outline-secondary btn-sm"