refactor(CommunitiesManager): update tab navigation style to improve layout and user interaction

frontend/src/CommunitiesManager.jsx

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