refactor(ServerManager): implement offcanvas for filters and update ServerSidebar for embedded usage to enhance UI flexibility and user experience

frontend/src/ServerManager.jsx

@@ -57,7 +57,6 @@ function ServerManager() {
   // === UI State ===
   const [activeTab, setActiveTab] = useState('servers'); // 'servers' | 'connections'
   const [viewMode, setViewMode] = useState('cards'); // 'table' | 'cards'
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
 
   // === Фильтры и поиск ===
   const [filters, setFilters] = useState({
@@ -630,38 +629,86 @@ function ServerManager() {
         </div>
       </div>
 
-      {/* Main content with sidebar */}
+      {/* Offcanvas: фильтры (только для вкладки «Серверы») */}
       {activeTab === 'servers' && (
-        <div className="d-flex" style={{ gap: '1rem' }}>
+        <>
-          {/* Sidebar */}
+          <div
-          {!sidebarCollapsed && (
+            className="offcanvas offcanvas-start"
-            <ServerSidebar
+            id="server-filters-offcanvas"
-              servers={servers}
+            tabIndex={-1}
-              filters={filters}
+            aria-labelledby="server-filters-offcanvas-label"
-              onFiltersChange={(newFilters) => { setFilters(newFilters); setCurrentPage(1); }}
+            style={{ width: '280px', maxWidth: '85vw' }}
-              searchTerm={searchTerm}
-              onSearch={(term) => { setSearchTerm(term); setCurrentPage(1); }}
-              onReset={handleResetFilters}
-            />
-          )}
-
-          {/* Toggle sidebar button */}
-          <button
-            className="btn btn-ghost-secondary btn-icon position-absolute"
-            style={{ left: sidebarCollapsed ? 10 : 290, top: 200, zIndex: 100 }}
-            onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-            title={sidebarCollapsed ? 'Показать фильтры' : 'Скрыть фильтры'}
           >
-            <IconChevronRight size={16} style={{ transform: sidebarCollapsed ? 'rotate(0deg)' : 'rotate(180deg)', transition: '0.2s' }} />
+            <div className="offcanvas-header border-bottom">
-          </button>
+              <h5 className="offcanvas-title d-flex align-items-center" id="server-filters-offcanvas-label">
+                <IconFilter size={18} className="text-primary me-2" />
+                Фильтры
+                {(Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)) > 0 && (
+                  <span className="badge bg-primary-lt text-primary ms-2">
+                    {Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)}
+                  </span>
+                )}
+              </h5>
+              <div className="d-flex align-items-center gap-1">
+                {(Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)) > 0 && (
+                  <button
+                    type="button"
+                    className="btn btn-ghost-secondary btn-sm"
+                    onClick={handleResetFilters}
+                    title="Сбросить фильтры"
+                  >
+                    Сбросить
+                  </button>
+                )}
+                <button
+                  type="button"
+                  className="btn-close"
+                  data-bs-dismiss="offcanvas"
+                  aria-label="Закрыть"
+                />
+              </div>
+            </div>
+            <div className="offcanvas-body px-3 py-0 d-flex flex-column overflow-hidden">
+              <ServerSidebar
+                servers={servers}
+                filters={filters}
+                onFiltersChange={(newFilters) => { setFilters(newFilters); setCurrentPage(1); }}
+                searchTerm={searchTerm}
+                onSearch={(term) => { setSearchTerm(term); setCurrentPage(1); }}
+                onReset={handleResetFilters}
+                embedded
+              />
+            </div>
+          </div>
+        </>
+      )}
 
-          {/* Servers list */}
+      {/* Main content */}
+      {activeTab === 'servers' && (
+        <div>
           <div className="flex-grow-1">
             {/* Toolbar */}
             <div className="card mb-3">
               <div className="card-body py-2">
                 <div className="d-flex align-items-center justify-content-between">
                   <div className="d-flex align-items-center gap-2">
+                    {/* Открыть фильтры (offcanvas) */}
+                    <button
+                      type="button"
+                      className="btn btn-outline-secondary btn-sm d-flex align-items-center"
+                      data-bs-toggle="offcanvas"
+                      data-bs-target="#server-filters-offcanvas"
+                      aria-controls="server-filters-offcanvas"
+                      title="Фильтры"
+                    >
+                      <IconFilter size={16} className="me-1" />
+                      Фильтры
+                      {(Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)) > 0 && (
+                        <span className="badge bg-primary-lt text-primary ms-1">
+                          {Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)}
+                        </span>
+                      )}
+                    </button>
                     {/* Select all */}
                     <button
                       className="btn btn-outline-secondary btn-sm d-flex align-items-center"

frontend/src/components/server/ServerSidebar.jsx

@@ -71,7 +71,9 @@ export default function ServerSidebar({
   onFiltersChange,
   onSearch,
   searchTerm = '',
-  onReset
+  onReset,
+  /** В режиме true рендерится только контент без обёртки card (для использования внутри offcanvas) */
+  embedded = false
 }) {
   const [expandedSections, setExpandedSections] = useState({
     country: true,
@@ -106,30 +108,32 @@ export default function ServerSidebar({
   const activeFiltersCount = Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0);
   const typeLabels = { jumphost: 'Jumphost', exit: 'Выходная нода' };
 
-  return (
+  const content = (
-    <div className="server-sidebar card flex-shrink-0 mb-0">
+    <>
-      <div className="card-header py-3 d-flex align-items-center justify-content-between">
+      {!embedded && (
-        <div className="d-flex align-items-center">
+        <div className="card-header py-3 d-flex align-items-center justify-content-between">
-          <IconFilter size={18} className="text-primary me-2" />
+          <div className="d-flex align-items-center">
-          <span className="fw-semibold">Фильтры</span>
+            <IconFilter size={18} className="text-primary me-2" />
+            <span className="fw-semibold">Фильтры</span>
+            {activeFiltersCount > 0 && (
+              <span className="badge bg-primary-lt text-primary ms-2">{activeFiltersCount}</span>
+            )}
+          </div>
           {activeFiltersCount > 0 && (
-            <span className="badge bg-primary-lt text-primary ms-2">{activeFiltersCount}</span>
+            <button
+              type="button"
+              className="btn btn-ghost-secondary btn-icon btn-sm"
+              onClick={onReset}
+              title="Сбросить фильтры"
+              aria-label="Сбросить фильтры"
+            >
+              <IconX size={16} />
+            </button>
           )}
         </div>
-        {activeFiltersCount > 0 && (
+      )}
-          <button
-            type="button"
-            className="btn btn-ghost-secondary btn-icon btn-sm"
-            onClick={onReset}
-            title="Сбросить фильтры"
-            aria-label="Сбросить фильтры"
-          >
-            <IconX size={16} />
-          </button>
-        )}
-      </div>
 
-      <div className="card-body py-2 border-bottom">
+      <div className={embedded ? 'py-2' : 'card-body py-2 border-bottom'}>
         <div className="input-icon">
           <span className="input-icon-addon">
             <IconSearch size={16} className="text-muted" />
@@ -145,7 +149,7 @@ export default function ServerSidebar({
         </div>
       </div>
 
-      <div className="server-sidebar-body overflow-auto">
+      <div className={embedded ? 'overflow-auto flex-grow-1 min-h-0' : 'server-sidebar-body overflow-auto'}>
         <FilterSection
           title="Страны"
           icon={IconWorld}
@@ -243,7 +247,7 @@ export default function ServerSidebar({
         </FilterSection>
       </div>
 
-      <div className="card-footer py-3 bg-secondary-lt">
+      <div className={embedded ? 'py-3 mt-2 pt-3 border-top' : 'card-footer py-3 bg-secondary-lt'}>
         <div className="d-flex align-items-center mb-2">
           <IconDatabase size={16} className="text-muted me-2" />
           <span className="text-muted small fw-medium">Статистика</span>
@@ -261,6 +265,15 @@ export default function ServerSidebar({
           <span className="fw-semibold text-primary">{stats.byType['jumphost'] || 0}</span>
         </div>
       </div>
+    </>
+  );
+
+  if (embedded) {
+    return <div className="d-flex flex-column h-100">{content}</div>;
+  }
+  return (
+    <div className="server-sidebar card flex-shrink-0 mb-0">
+      {content}
     </div>
   );
 }