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

components/data-grids/wireguard-peers-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,
@@ -57,6 +57,7 @@ function WireguardPeersGrid({
     const cols: ColumnDef<DataGridFeatures, WgPeerRow>[] = [
       {
         id: "peer",
+        size: 144,
         accessorKey: "publicKey",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Пир" className="ml-1" />
@@ -80,6 +81,7 @@ function WireguardPeersGrid({
       },
       {
         id: "iface",
+        size: 120,
         accessorKey: "ifaceName",
         header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
         cell: ({ row }) => (
@@ -96,6 +98,7 @@ function WireguardPeersGrid({
     if (!compactServer) {
       cols.push({
         id: "server",
+        size: 128,
         accessorKey: "serverName",
         header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
         cell: ({ row }) => (
@@ -115,6 +118,7 @@ function WireguardPeersGrid({
     cols.push(
       {
         id: "allowedIps",
+        size: 136,
         accessorFn: (row) => row.allowedIps.join(", "),
         header: ({ column }) => <DataGridSortHeader column={column} title="Allowed IPs" />,
         cell: ({ row }) => (
@@ -130,6 +134,7 @@ function WireguardPeersGrid({
       },
       {
         id: "handshake",
+        size: 144,
         accessorKey: "latestHandshake",
         header: ({ column }) => <DataGridSortHeader column={column} title="Handshake" />,
         cell: ({ row }) => (
@@ -150,6 +155,7 @@ function WireguardPeersGrid({
       },
       {
         id: "transfer",
+        size: 160,
         header: () => (
           <span className="text-xs font-medium text-muted-foreground">RX / TX</span>
         ),
@@ -174,6 +180,7 @@ function WireguardPeersGrid({
       },
       {
         id: "endpoint",
+        size: 144,
         accessorKey: "endpoint",
         header: ({ column }) => <DataGridSortHeader column={column} title="Endpoint" />,
         cell: ({ row }) => (
@@ -191,7 +198,7 @@ function WireguardPeersGrid({
         id: "actions",
         header: () => <span className="sr-only">Действия</span>,
         enableSorting: false,
-        size: 72,
+        size: 112,
         cell: ({ row }) => {
           const peer = row.original
           return (
@@ -201,7 +208,7 @@ function WireguardPeersGrid({
                   type="button"
                   variant="ghost"
                   size="icon"
-                  className="size-7"
+                  className="size-11"
                   aria-label="Экспорт peer .conf"
                   onClick={() => onExportPeer(peer)}
                 >
@@ -213,7 +220,7 @@ function WireguardPeersGrid({
                   type="button"
                   variant="ghost"
                   size="icon"
-                  className="size-7 text-destructive"
+                  className="size-11 text-destructive"
                   aria-label="Удалить пира"
                   onClick={() => onDeletePeer(peer)}
                 >
@@ -235,12 +242,20 @@ function WireguardPeersGrid({
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["peer"], end: [] } },
     data: peers,
     columns,
     getRowId: (row) => JSON.stringify([row.serverId, row.ifaceId, row.id]),
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(peers.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [peers.length, pageIndex, pageSize, table])
+
   if (peers.length === 0) {
     return (
       <EmptyState
@@ -257,11 +272,17 @@ function WireguardPeersGrid({
     <DataGridShell
       table={table}
       recordCount={peers.length}
+      pagination={peers.length > 50 || pageSize !== 50}
+      tableLayout={{ dense: true, columnsPinnable: true }}
       tableClassNames={{
         headerRow: "border-b border-border",
         bodyRow: cn("group/row"),
       }}
-    />
+    >
+      <DataGridContainer border={false} className="w-full rounded-none border-0">
+        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
   )
 }