fix(ui): ограничить отображение каталога интерфейсов WireGuard

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

@@ -1,8 +1,8 @@
 "use client"
 
-import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
 
-import { useMemo, type ReactNode } from "react"
+import { useEffect, useMemo, type ReactNode } from "react"
 import {
   type ColumnDef,
   useTable,
@@ -74,6 +74,7 @@ function WireguardDataGrid({
     () => [
       {
         id: "name",
+        size: 176,
         accessorKey: "name",
         header: ({ column }) => (
           <DataGridSortHeader
@@ -88,11 +89,9 @@ function WireguardDataGrid({
           const onlinePeers = iface.peers.filter((p) => !!p.latestHandshake).length
           return (
             <div className="flex items-start gap-2 min-w-0">
-              {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" />
-              )}
+              <Button type="button" variant="ghost" size="icon" className="size-11 shrink-0" aria-label={"Пиры: " + iface.name} aria-expanded={expanded} onClick={event => { event.stopPropagation(); row.toggleExpanded() }}>
+                {expanded ? <ChevronDownIcon aria-hidden="true" className="size-3.5" /> : <ChevronRightIcon aria-hidden="true" className="size-3.5" />}
+              </Button>
               <div className="min-w-0">
                 <div className="flex items-center gap-2">
                   <span
@@ -101,7 +100,7 @@ function WireguardDataGrid({
                       iface.status === "up" ? "bg-success animate-pulse" : "bg-destructive",
                     )}
                   />
-                  <span className="font-mono font-semibold text-sm">{iface.name}</span>
+                  <span className="min-w-0 break-all font-mono font-semibold text-sm">{iface.name}</span>
                 </div>
                 {!compactServer ? (
                   <div className="flex items-center gap-1.5 mt-0.5 text-[11px] text-muted-foreground font-mono">
@@ -131,6 +130,7 @@ function WireguardDataGrid({
       },
       {
         id: "listenPort",
+        size: 100,
         accessorKey: "listenPort",
         header: ({ column }) => <DataGridSortHeader column={column} title="Порт" />,
         cell: ({ row }) => (
@@ -144,6 +144,7 @@ function WireguardDataGrid({
       },
       {
         id: "mtu",
+        size: 80,
         accessorKey: "mtu",
         header: ({ column }) => <DataGridSortHeader column={column} title="MTU" />,
         cell: ({ row }) => <span className="font-mono text-sm">{row.original.mtu}</span>,
@@ -155,6 +156,7 @@ function WireguardDataGrid({
       },
       {
         id: "peers",
+        size: 80,
         header: () => (
           <span className="text-xs font-medium text-muted-foreground">Пиры</span>
         ),
@@ -177,6 +179,7 @@ function WireguardDataGrid({
       },
       {
         id: "status",
+        size: 104,
         accessorKey: "status",
         header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
         cell: ({ row }) => (
@@ -213,8 +216,8 @@ function WireguardDataGrid({
                       variant="outline"
                       size="icon"
                       className={cn(
-                        "size-8 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
-                        "opacity-0 transition-[opacity,background-color,color,border-color]",
+                        "size-11 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
+                        "transition-[background-color,color,border-color]",
                         "group-hover/row:opacity-100 focus-visible:opacity-100",
                         "data-popup-open:opacity-100 data-popup-open:bg-muted",
                       )}
@@ -260,7 +263,7 @@ function WireguardDataGrid({
           )
         },
         enableSorting: false,
-        size: 56,
+        size: 72,
         meta: {
           headerClassName: DATA_GRID_CELL_PAD_LAST,
           cellClassName: DATA_GRID_CELL_PAD_LAST,
@@ -272,13 +275,22 @@ function WireguardDataGrid({
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    autoResetExpanded: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["name"], end: [] } },
     data: interfaces,
     columns,
     getRowId: (row) => JSON.stringify([row.serverId, row.id]),
     getRowCanExpand: () => true,
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(interfaces.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [interfaces.length, pageIndex, pageSize, table])
+
   if (interfaces.length === 0) {
     return (
       <EmptyState
@@ -295,12 +307,18 @@ function WireguardDataGrid({
     <DataGridShell
       table={table}
       recordCount={interfaces.length}
+      pagination={interfaces.length > 50 || pageSize !== 50}
+      tableLayout={{ dense: true, columnsPinnable: true }}
       onRowClick={(row) => table.getRow(JSON.stringify([row.serverId, row.id])).toggleExpanded()}
       tableClassNames={{
         headerRow: "border-b border-border",
         bodyRow: cn("group/row", "[&[data-disabled=true]]:opacity-50"),
       }}
-    />
+    >
+      <DataGridContainer border={false} className="w-full rounded-none border-0">
+        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
   )
 }