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

2026-02-16 19:17:13 +07:00
parent 700e6674e5
commit 75d2366462
2 changed files with 107 additions and 47 deletions
@@ -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 */}
-          {!sidebarCollapsed && (
-            <ServerSidebar
-              servers={servers}
-              filters={filters}
-              onFiltersChange={(newFilters) => { setFilters(newFilters); setCurrentPage(1); }}
-              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 ? 'Показать фильтры' : 'Скрыть фильтры'}
+        <>
+          <div
+            className="offcanvas offcanvas-start"
+            id="server-filters-offcanvas"
+            tabIndex={-1}
+            aria-labelledby="server-filters-offcanvas-label"
+            style={{ width: '280px', maxWidth: '85vw' }}
          >
-            <IconChevronRight size={16} style={{ transform: sidebarCollapsed ? 'rotate(0deg)' : 'rotate(180deg)', transition: '0.2s' }} />
-          </button>
+            <div className="offcanvas-header border-bottom">
+              <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"