From 3a7578ce2624b0524d1dafe12d60a031af296e99 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Mon, 16 Feb 2026 16:03:28 +0700
Subject: [PATCH] refactor(ServerSidebar): implement new filter section and
 sidebar styling for improved user interaction and organization

---
 frontend/src/App.css                          |  36 ++
 .../src/components/server/ServerSidebar.jsx   | 493 ++++++------------
 2 files changed, 203 insertions(+), 326 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 66c196e..ccea005 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -256,6 +256,42 @@
 /* Убрали глобальную перекраску .badge, чтобы работали текстовые цвета Tabler
    (например, badge bg-blue-lt text-blue) */
 
+/* --- Server sidebar (фильтры на /servers) — Tabler card + list-group --- */
+.server-sidebar {
+  width: 280px;
+  min-width: 280px;
+  max-height: calc(100vh - 180px);
+  display: flex;
+  flex-direction: column;
+}
+.server-sidebar .card-header {
+  flex-shrink: 0;
+}
+.server-sidebar .card-body.border-bottom,
+.server-sidebar .card-footer {
+  flex-shrink: 0;
+}
+.server-sidebar-body {
+  flex: 1;
+  min-height: 0;
+  max-height: 50vh;
+}
+.server-sidebar .filter-section .list-group-header {
+  cursor: pointer;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-transform: none;
+  color: var(--tblr-body-color);
+}
+.server-sidebar .filter-section .list-group-header:hover {
+  background-color: var(--tblr-bg-surface-tertiary);
+}
+.server-sidebar .list-group-item {
+  font-size: 0.8125rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
 /* Responsive navbar */
 @media (max-width: 991.98px) {
   .navbar-collapse {
diff --git a/frontend/src/components/server/ServerSidebar.jsx b/frontend/src/components/server/ServerSidebar.jsx
index edcc282..01f6037 100644
--- a/frontend/src/components/server/ServerSidebar.jsx
+++ b/frontend/src/components/server/ServerSidebar.jsx
@@ -6,29 +6,63 @@ import {
   IconNetwork,
   IconChevronDown,
   IconChevronRight,
-  IconX,
-  IconSearch,
   IconFilter,
-  IconDatabase
+  IconSearch,
+  IconDatabase,
+  IconX
 } from '@tabler/icons-react';
 
-// Преобразование кода страны в emoji-флаг
 function countryToFlag(isoCode) {
   if (!isoCode) return '';
   const codeMap = {
-    'SWE': 'SE',
-    'RUS': 'RU', 
-    'USA': 'US',
-    'GER': 'DE',
-    'FIN': 'FI',
-    'NLD': 'NL'
+    SWE: 'SE',
+    RUS: 'RU',
+    USA: 'US',
+    GER: 'DE',
+    FIN: 'FI',
+    NLD: 'NL'
   };
   const code = codeMap[isoCode?.toUpperCase()] || isoCode?.toUpperCase();
   if (!code || code.length !== 2) return isoCode;
-  return code
-    .replace(/./g, char =>
-      String.fromCodePoint(127397 + char.charCodeAt())
-    );
+  return code.replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt()));
+}
+
+function FilterSection({ title, icon: Icon, iconColor, expanded, onToggle, children }) {
+  return (
+    <div className="filter-section border-bottom">
+      <button
+        type="button"
+        className="list-group-header d-flex align-items-center justify-content-between w-100 border-0 bg-transparent py-2 px-3 text-start"
+        onClick={onToggle}
+        aria-expanded={expanded}
+      >
+        <span className="d-flex align-items-center">
+          <Icon size={16} className={`me-2 ${iconColor || 'text-muted'}`} />
+          <span>{title}</span>
+        </span>
+        {expanded ? <IconChevronDown size={16} className="text-muted" /> : <IconChevronRight size={16} className="text-muted" />}
+      </button>
+      {expanded && <div className="list-group list-group-flush list-group-transparent">{children}</div>}
+    </div>
+  );
+}
+
+function FilterItem({ label, count, active, onClick, leftAddon }) {
+  return (
+    <button
+      type="button"
+      className={`list-group-item list-group-item-action d-flex align-items-center justify-content-between py-2 px-3 text-start ${active ? 'active' : ''}`}
+      onClick={onClick}
+    >
+      <span className="d-flex align-items-center text-truncate">
+        {leftAddon}
+        <span className="text-truncate">{label}</span>
+      </span>
+      <span className={`badge ms-2 flex-shrink-0 ${active ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}>
+        {count}
+      </span>
+    </button>
+  );
 }
 
 export default function ServerSidebar({
@@ -46,378 +80,185 @@ export default function ServerSidebar({
     tunnel: false
   });
 
-  // Подсчёт серверов по категориям
   const stats = useMemo(() => {
     const byCountry = {};
     const byProvider = {};
     const byType = {};
     const byTunnel = {};
-
     servers.forEach(srv => {
       byCountry[srv.country] = (byCountry[srv.country] || 0) + 1;
       byProvider[srv.provider] = (byProvider[srv.provider] || 0) + 1;
       byType[srv.type] = (byType[srv.type] || 0) + 1;
       byTunnel[srv.tunnel] = (byTunnel[srv.tunnel] || 0) + 1;
     });
-
     return { byCountry, byProvider, byType, byTunnel };
   }, [servers]);
 
-  const toggleSection = (section) => {
-    setExpandedSections(prev => ({
-      ...prev,
-      [section]: !prev[section]
-    }));
+  const toggleSection = section => {
+    setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }));
   };
 
   const handleFilterClick = (category, value) => {
-    const currentValue = filters[category];
-    const newValue = currentValue === value ? '' : value;
-    onFiltersChange({ ...filters, [category]: newValue });
+    const current = filters[category];
+    onFiltersChange({ ...filters, [category]: current === value ? '' : value });
   };
 
   const activeFiltersCount = Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0);
-
-  const typeLabels = {
-    'jumphost': 'Jumphost',
-    'exit': 'Выходная нода'
-  };
+  const typeLabels = { jumphost: 'Jumphost', exit: 'Выходная нода' };
 
   return (
-    <div 
-      className="server-sidebar d-flex flex-column"
-      style={{
-        width: '260px',
-        minWidth: '260px',
-        background: '#fff',
-        borderRadius: '12px',
-        boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
-        height: 'fit-content',
-        maxHeight: 'calc(100vh - 200px)',
-        overflow: 'hidden'
-      }}
-    >
-      {/* Заголовок */}
-      <div 
-        className="d-flex align-items-center justify-content-between px-3 py-3"
-        style={{ borderBottom: '1px solid rgba(0,0,0,0.06)' }}
-      >
+    <div className="server-sidebar card flex-shrink-0 mb-0">
+      <div className="card-header py-3 d-flex align-items-center justify-content-between">
         <div className="d-flex align-items-center">
           <IconFilter size={18} className="text-primary me-2" />
           <span className="fw-semibold">Фильтры</span>
           {activeFiltersCount > 0 && (
-            <span 
-              className="badge bg-primary ms-2"
-              style={{ fontSize: '0.7rem', padding: '3px 6px' }}
-            >
-              {activeFiltersCount}
-            </span>
+            <span className="badge bg-primary-lt text-primary ms-2">{activeFiltersCount}</span>
           )}
         </div>
         {activeFiltersCount > 0 && (
           <button
+            type="button"
             className="btn btn-ghost-secondary btn-icon btn-sm"
             onClick={onReset}
-            title="Сбросить"
-            style={{ width: 28, height: 28 }}
+            title="Сбросить фильтры"
+            aria-label="Сбросить фильтры"
           >
-            <IconX size={14} />
+            <IconX size={16} />
           </button>
         )}
       </div>
 
-      {/* Поиск */}
-      <div className="px-3 py-2" style={{ borderBottom: '1px solid rgba(0,0,0,0.06)' }}>
+      <div className="card-body py-2 border-bottom">
         <div className="input-icon">
           <span className="input-icon-addon">
-            <IconSearch size={14} className="text-muted" />
+            <IconSearch size={16} className="text-muted" />
           </span>
           <input
             type="text"
             className="form-control form-control-sm"
             placeholder="Поиск..."
             value={searchTerm}
-            onChange={(e) => onSearch(e.target.value)}
-            style={{ 
-              background: 'rgba(0,0,0,0.02)',
-              border: '1px solid rgba(0,0,0,0.06)',
-              borderRadius: '8px',
-              fontSize: '0.85rem'
-            }}
+            onChange={e => onSearch(e.target.value)}
+            aria-label="Поиск серверов"
           />
         </div>
       </div>
 
-      {/* Скроллируемый контент */}
-      <div style={{ overflowY: 'auto', flex: 1 }}>
-        {/* Секция: Страны */}
-        <div className="filter-section">
-          <div
-            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
-            onClick={() => toggleSection('country')}
-            style={{ 
-              background: 'rgba(0,0,0,0.02)',
-              borderBottom: '1px solid rgba(0,0,0,0.04)'
-            }}
-          >
-            <div className="d-flex align-items-center">
-              <IconWorld size={15} className="me-2" style={{ color: '#3b82f6' }} />
-              <span className="fw-medium small">Страны</span>
-            </div>
-            {expandedSections.country ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
-          </div>
-          {expandedSections.country && (
-            <div className="p-2">
-              {Object.entries(stats.byCountry)
-                .sort((a, b) => b[1] - a[1])
-                .map(([country, count]) => (
-                  <button
-                    key={country}
-                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
-                      filters.country === country ? 'btn-primary' : ''
-                    }`}
-                    onClick={() => handleFilterClick('country', country)}
-                    style={{
-                      background: filters.country === country ? undefined : 'transparent',
-                      border: 'none',
-                      borderRadius: '8px',
-                      padding: '8px 10px',
-                      transition: 'background 0.15s'
-                    }}
-                    onMouseEnter={(e) => {
-                      if (filters.country !== country) {
-                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      if (filters.country !== country) {
-                        e.currentTarget.style.background = 'transparent';
-                      }
-                    }}
-                  >
-                    <span className="d-flex align-items-center">
-                      <span className="me-2" style={{ fontSize: '1.1rem' }}>{countryToFlag(country)}</span>
-                      <span className={filters.country === country ? 'text-white' : ''}>{country}</span>
-                    </span>
-                    <span 
-                      className={`badge ${filters.country === country ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
-                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
-                    >
-                      {count}
-                    </span>
-                  </button>
-                ))}
-            </div>
-          )}
-        </div>
+      <div className="server-sidebar-body overflow-auto">
+        <FilterSection
+          title="Страны"
+          icon={IconWorld}
+          iconColor="text-blue"
+          expanded={expandedSections.country}
+          onToggle={() => toggleSection('country')}
+        >
+          {Object.entries(stats.byCountry)
+            .sort((a, b) => b[1] - a[1])
+            .map(([country, count]) => (
+              <FilterItem
+                key={country}
+                label={country}
+                count={count}
+                active={filters.country === country}
+                onClick={() => handleFilterClick('country', country)}
+                leftAddon={
+                  <span className="me-2" style={{ fontSize: '1rem' }} aria-hidden>
+                    {countryToFlag(country)}
+                  </span>
+                }
+              />
+            ))}
+        </FilterSection>
 
-        {/* Секция: Провайдеры */}
-        <div className="filter-section">
-          <div
-            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
-            onClick={() => toggleSection('provider')}
-            style={{ 
-              background: 'rgba(0,0,0,0.02)',
-              borderBottom: '1px solid rgba(0,0,0,0.04)'
-            }}
-          >
-            <div className="d-flex align-items-center">
-              <IconBuildingSkyscraper size={15} className="me-2" style={{ color: '#8b5cf6' }} />
-              <span className="fw-medium small">Провайдеры</span>
-            </div>
-            {expandedSections.provider ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
-          </div>
-          {expandedSections.provider && (
-            <div className="p-2">
-              {Object.entries(stats.byProvider)
-                .sort((a, b) => b[1] - a[1])
-                .map(([provider, count]) => (
-                  <button
-                    key={provider}
-                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
-                      filters.provider === provider ? 'btn-primary' : ''
-                    }`}
-                    onClick={() => handleFilterClick('provider', provider)}
-                    style={{
-                      background: filters.provider === provider ? undefined : 'transparent',
-                      border: 'none',
-                      borderRadius: '8px',
-                      padding: '8px 10px'
-                    }}
-                    onMouseEnter={(e) => {
-                      if (filters.provider !== provider) {
-                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      if (filters.provider !== provider) {
-                        e.currentTarget.style.background = 'transparent';
-                      }
-                    }}
-                  >
-                    <span className={filters.provider === provider ? 'text-white' : ''}>{provider}</span>
-                    <span 
-                      className={`badge ${filters.provider === provider ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
-                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
-                    >
-                      {count}
-                    </span>
-                  </button>
-                ))}
-            </div>
-          )}
-        </div>
+        <FilterSection
+          title="Провайдеры"
+          icon={IconBuildingSkyscraper}
+          iconColor="text-purple"
+          expanded={expandedSections.provider}
+          onToggle={() => toggleSection('provider')}
+        >
+          {Object.entries(stats.byProvider)
+            .sort((a, b) => b[1] - a[1])
+            .map(([provider, count]) => (
+              <FilterItem
+                key={provider}
+                label={provider}
+                count={count}
+                active={filters.provider === provider}
+                onClick={() => handleFilterClick('provider', provider)}
+              />
+            ))}
+        </FilterSection>
 
-        {/* Секция: Типы */}
-        <div className="filter-section">
-          <div
-            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
-            onClick={() => toggleSection('type')}
-            style={{ 
-              background: 'rgba(0,0,0,0.02)',
-              borderBottom: '1px solid rgba(0,0,0,0.04)'
-            }}
-          >
-            <div className="d-flex align-items-center">
-              <IconServer size={15} className="me-2" style={{ color: '#10b981' }} />
-              <span className="fw-medium small">Тип сервера</span>
-            </div>
-            {expandedSections.type ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
-          </div>
-          {expandedSections.type && (
-            <div className="p-2">
-              {Object.entries(stats.byType)
-                .sort((a, b) => b[1] - a[1])
-                .map(([type, count]) => (
-                  <button
-                    key={type}
-                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
-                      filters.type === type ? 'btn-primary' : ''
-                    }`}
-                    onClick={() => handleFilterClick('type', type)}
+        <FilterSection
+          title="Тип сервера"
+          icon={IconServer}
+          iconColor="text-green"
+          expanded={expandedSections.type}
+          onToggle={() => toggleSection('type')}
+        >
+          {Object.entries(stats.byType)
+            .sort((a, b) => b[1] - a[1])
+            .map(([type, count]) => (
+              <FilterItem
+                key={type}
+                label={typeLabels[type] || type}
+                count={count}
+                active={filters.type === type}
+                onClick={() => handleFilterClick('type', type)}
+                leftAddon={
+                  <span
+                    className="rounded-circle me-2 flex-shrink-0"
                     style={{
-                      background: filters.type === type ? undefined : 'transparent',
-                      border: 'none',
-                      borderRadius: '8px',
-                      padding: '8px 10px'
+                      width: 8,
+                      height: 8,
+                      background: type === 'exit' ? 'var(--tblr-red)' : 'var(--tblr-primary)'
                     }}
-                    onMouseEnter={(e) => {
-                      if (filters.type !== type) {
-                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      if (filters.type !== type) {
-                        e.currentTarget.style.background = 'transparent';
-                      }
-                    }}
-                  >
-                    <span className="d-flex align-items-center">
-                      <span 
-                        className="rounded-circle me-2"
-                        style={{ 
-                          width: 8, 
-                          height: 8, 
-                          background: type === 'exit' ? '#ef4444' : '#3b82f6'
-                        }}
-                      />
-                      <span className={filters.type === type ? 'text-white' : ''}>
-                        {typeLabels[type] || type}
-                      </span>
-                    </span>
-                    <span 
-                      className={`badge ${filters.type === type ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
-                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
-                    >
-                      {count}
-                    </span>
-                  </button>
-                ))}
-            </div>
-          )}
-        </div>
+                    aria-hidden
+                  />
+                }
+              />
+            ))}
+        </FilterSection>
 
-        {/* Секция: Туннели */}
-        <div className="filter-section">
-          <div
-            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
-            onClick={() => toggleSection('tunnel')}
-            style={{ 
-              background: 'rgba(0,0,0,0.02)',
-              borderBottom: '1px solid rgba(0,0,0,0.04)'
-            }}
-          >
-            <div className="d-flex align-items-center">
-              <IconNetwork size={15} className="me-2" style={{ color: '#f59e0b' }} />
-              <span className="fw-medium small">Туннель</span>
-            </div>
-            {expandedSections.tunnel ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
-          </div>
-          {expandedSections.tunnel && (
-            <div className="p-2">
-              {Object.entries(stats.byTunnel)
-                .sort((a, b) => b[1] - a[1])
-                .map(([tunnel, count]) => (
-                  <button
-                    key={tunnel}
-                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
-                      filters.tunnel === tunnel ? 'btn-primary' : ''
-                    }`}
-                    onClick={() => handleFilterClick('tunnel', tunnel)}
-                    style={{
-                      background: filters.tunnel === tunnel ? undefined : 'transparent',
-                      border: 'none',
-                      borderRadius: '8px',
-                      padding: '8px 10px'
-                    }}
-                    onMouseEnter={(e) => {
-                      if (filters.tunnel !== tunnel) {
-                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      if (filters.tunnel !== tunnel) {
-                        e.currentTarget.style.background = 'transparent';
-                      }
-                    }}
-                  >
-                    <span className={filters.tunnel === tunnel ? 'text-white' : ''}>{tunnel}</span>
-                    <span 
-                      className={`badge ${filters.tunnel === tunnel ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
-                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
-                    >
-                      {count}
-                    </span>
-                  </button>
-                ))}
-            </div>
-          )}
-        </div>
+        <FilterSection
+          title="Туннель"
+          icon={IconNetwork}
+          iconColor="text-orange"
+          expanded={expandedSections.tunnel}
+          onToggle={() => toggleSection('tunnel')}
+        >
+          {Object.entries(stats.byTunnel)
+            .sort((a, b) => b[1] - a[1])
+            .map(([tunnel, count]) => (
+              <FilterItem
+                key={tunnel}
+                label={tunnel}
+                count={count}
+                active={filters.tunnel === tunnel}
+                onClick={() => handleFilterClick('tunnel', tunnel)}
+              />
+            ))}
+        </FilterSection>
       </div>
 
-      {/* Статистика внизу */}
-      <div 
-        className="px-3 py-3"
-        style={{ 
-          borderTop: '1px solid rgba(0,0,0,0.06)',
-          background: 'rgba(0,0,0,0.01)'
-        }}
-      >
+      <div className="card-footer py-3 bg-secondary-lt">
         <div className="d-flex align-items-center mb-2">
-          <IconDatabase size={14} className="text-muted me-2" />
-          <span className="text-muted small">Статистика</span>
+          <IconDatabase size={16} className="text-muted me-2" />
+          <span className="text-muted small fw-medium">Статистика</span>
         </div>
-        <div className="d-flex justify-content-between mb-1">
-          <span className="small text-muted">Всего серверов</span>
-          <span className="small fw-bold">{servers.length}</span>
+        <div className="d-flex justify-content-between small mb-1">
+          <span className="text-muted">Всего серверов</span>
+          <span className="fw-semibold">{servers.length}</span>
         </div>
-        <div className="d-flex justify-content-between mb-1">
-          <span className="small text-muted">Выходных нод</span>
-          <span className="small fw-bold" style={{ color: '#ef4444' }}>{stats.byType['exit'] || 0}</span>
+        <div className="d-flex justify-content-between small mb-1">
+          <span className="text-muted">Выходных нод</span>
+          <span className="fw-semibold text-danger">{stats.byType['exit'] || 0}</span>
         </div>
-        <div className="d-flex justify-content-between">
-          <span className="small text-muted">Jumphosts</span>
-          <span className="small fw-bold" style={{ color: '#3b82f6' }}>{stats.byType['jumphost'] || 0}</span>
+        <div className="d-flex justify-content-between small">
+          <span className="text-muted">Jumphosts</span>
+          <span className="fw-semibold text-primary">{stats.byType['jumphost'] || 0}</span>
         </div>
       </div>
     </div>