fix(ui): завершить основу таблиц и фильтров серверов

components/data-grids/server-filters.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { Filters } from "@/components/reui/filters/filters"
+import type { FilterQuery } from "@/components/reui/filters/filters-types"
+import { SERVER_FILTER_FIELDS } from "@/lib/data-filters/server-filter-fields"
+import { FILTER_LABELS_RU, FILTER_OPERATOR_LABELS_RU } from "@/lib/data-filters/filter-labels-ru"
+
+export function ServerFilters({ query, onQueryChange }: {
+  query: FilterQuery
+  onQueryChange: (query: FilterQuery) => void
+}) {
+  return <Filters fields={SERVER_FILTER_FIELDS} query={query} onQueryChange={onQueryChange}
+    size="sm" showClear labels={FILTER_LABELS_RU} operatorLabels={FILTER_OPERATOR_LABELS_RU} />
+}

components/data-grids/servers-data-grid.tsx

@@ -163,6 +163,7 @@ function ServerRowActions({
 }
 
 interface ServersDataGridProps {
+  hasUnfilteredRows?: boolean
   busy?: boolean
   servers: Server[]
   isLive: boolean
@@ -174,6 +175,7 @@ interface ServersDataGridProps {
 }
 
 function ServersDataGrid({
+  hasUnfilteredRows = false,
   busy = false,
   servers,
   isLive,
@@ -196,9 +198,14 @@ function ServersDataGrid({
           const expanded = row.getIsExpanded()
           return (
             <div className="flex items-start gap-2 min-w-0">
+              <Button type="button" variant="ghost" size="icon-xs"
+                aria-label={`${expanded ? "Свернуть" : "Раскрыть"}: ${s.name}`}
+                aria-expanded={expanded}
+                onClick={event => { event.stopPropagation(); row.toggleExpanded() }}>
               {expanded
-                ? <ChevronDownIcon className="size-3.5 mt-0.5 shrink-0 text-muted-foreground" />
-                : <ChevronRightIcon className="size-3.5 mt-0.5 shrink-0 text-muted-foreground/40" />}
+                ? <ChevronDownIcon aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground" />
+                : <ChevronRightIcon aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground/40" />}
+              </Button>
               <div className="min-w-0">
                 <p className="font-medium truncate">{s.name}</p>
                 <p className="text-xs font-mono text-muted-foreground">{s.host}</p>
@@ -374,8 +381,8 @@ function ServersDataGrid({
     return (
       <EmptyState
         icon={<ServerIcon className="size-4" />}
-        title="Нет серверов"
-        description="Добавьте первый MikroTik-сервер для мониторинга"
+        title={hasUnfilteredRows ? "Нет совпадений" : "Нет серверов"}
+        description={hasUnfilteredRows ? "Измените поиск или сбросьте фильтры" : "Добавьте первый MikroTik-сервер для мониторинга"}
         className="border-0 py-12"
       />
     )

components/data-grids/shared/data-grid-sort-header.tsx

@@ -32,18 +32,18 @@ function DataGridSortHeader<TData extends object>({
       type="button"
       className={cn(
         "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground",
-        "hover:text-foreground transition-colors rounded-md -ml-1 px-1 py-0.5",
+        "hover:text-foreground transition-colors rounded-md -ml-1 px-1 py-0.5 focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2",
         className,
       )}
       onClick={column.getToggleSortingHandler()}
     >
       {title}
       {sorted === "asc" ? (
-        <ArrowUpIcon className="size-3 text-foreground" />
+        <ArrowUpIcon aria-hidden="true" className="size-3 text-foreground" />
       ) : sorted === "desc" ? (
-        <ArrowDownIcon className="size-3 text-foreground" />
+        <ArrowDownIcon aria-hidden="true" className="size-3 text-foreground" />
       ) : (
-        <ArrowUpDownIcon className="size-3 opacity-35" />
+        <ArrowUpDownIcon aria-hidden="true" className="size-3 opacity-35" />
       )}
     </button>
   )