From f380be5d2167fed11a6e2d836b5166cdde8f26b0 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Mon, 16 Feb 2026 22:12:23 +0700
Subject: [PATCH] refactor(CommunitiesManager): update tab navigation style to
 improve layout and user interaction

---
 frontend/src/CommunitiesManager.jsx | 71 +++++++++++++++++------------
 1 file changed, 41 insertions(+), 30 deletions(-)

diff --git a/frontend/src/CommunitiesManager.jsx b/frontend/src/CommunitiesManager.jsx
index 85a0595..652ac3e 100644
--- a/frontend/src/CommunitiesManager.jsx
+++ b/frontend/src/CommunitiesManager.jsx
@@ -386,36 +386,47 @@ function CommunitiesManager() {
         </div>
       )}
 
-      {/* Вкладки: Список / Статистика в стиле Tabler */}
-      <div className="card card-flat mb-3">
-        <div className="card-header border-0 pb-0">
-          <ul className="nav nav-tabs card-header-tabs" role="tablist">
-            <li className="nav-item" role="presentation">
-              <button
-                className={`nav-link ${activeTab === 'list' ? 'active' : ''}`}
-                onClick={() => setActiveTab('list')}
-                type="button"
-                role="tab"
-                aria-selected={activeTab === 'list'}
-              >
-                <IconList className="me-2" size={18} />
-                Список communities
-                <span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
-              </button>
-            </li>
-            <li className="nav-item" role="presentation">
-              <button
-                className={`nav-link ${activeTab === 'stats' ? 'active' : ''}`}
-                onClick={() => setActiveTab('stats')}
-                type="button"
-                role="tab"
-                aria-selected={activeTab === 'stats'}
-              >
-                <IconChartBar className="me-2" size={18} />
-                Статистика использования
-              </button>
-            </li>
-          </ul>
+      {/* Табы в стиле NetworkConfigManager (как на скрине) */}
+      <div className="mb-3">
+        <div className="btn-group" role="tablist" aria-label="Переключение режимов страницы">
+          <button
+            type="button"
+            className={`btn ${activeTab === 'list' ? 'btn-primary' : 'btn-outline-primary'}`}
+            onClick={() => setActiveTab('list')}
+            role="tab"
+            aria-pressed={activeTab === 'list'}
+          >
+            <IconList size={16} className="me-1 d-none d-sm-inline" />
+            Список
+            <span
+              className={`badge ms-1 ${
+                activeTab === 'list'
+                  ? 'bg-white text-primary'
+                  : 'bg-primary-lt text-primary'
+              }`}
+            >
+              {filtered.length}
+            </span>
+          </button>
+          <button
+            type="button"
+            className={`btn ${activeTab === 'stats' ? 'btn-primary' : 'btn-outline-primary'}`}
+            onClick={() => setActiveTab('stats')}
+            role="tab"
+            aria-pressed={activeTab === 'stats'}
+          >
+            <IconChartBar size={16} className="me-1 d-none d-sm-inline" />
+            Статистика
+            <span
+              className={`badge ms-1 ${
+                activeTab === 'stats'
+                  ? 'bg-white text-primary'
+                  : 'bg-primary-lt text-primary'
+              }`}
+            >
+              {items.length}
+            </span>
+          </button>
         </div>
       </div>