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

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

@@ -1,12 +1,13 @@
 "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 } from "react"
+import { useEffect, useMemo } from "react"
 import {
   type ColumnDef,
   useTable,
 } from "@tanstack/react-table"
+import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
@@ -81,6 +82,7 @@ function CommunitiesDataGrid({
     () => [
       {
         id: "value",
+        size: 192,
         accessorKey: "value",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Community" className="ml-1" />
@@ -93,7 +95,7 @@ function CommunitiesDataGrid({
               data-community-disabled={!c.enabled ? true : undefined}
             >
               <TagIcon className="size-3.5 text-muted-foreground shrink-0" />
-              <span className="font-mono text-xs font-medium bg-muted px-1.5 py-0.5 rounded">
+              <span className="font-mono text-xs font-medium break-all bg-muted px-1.5 py-0.5 rounded">
                 {c.value}
               </span>
               <button
@@ -102,7 +104,8 @@ function CommunitiesDataGrid({
                   e.stopPropagation()
                   onCopy(c.value)
                 }}
-                className="text-muted-foreground/40 hover:text-muted-foreground transition-colors"
+                className="size-11 shrink-0 inline-flex items-center justify-center rounded text-muted-foreground hover:bg-muted"
+                aria-label={`Скопировать community: ${c.value}`}
               >
                 {copiedValue === c.value ? (
                   <CheckIcon className="size-3" />
@@ -121,6 +124,7 @@ function CommunitiesDataGrid({
       },
       {
         id: "name",
+        size: 240,
         accessorKey: "name",
         header: ({ column }) => <DataGridSortHeader column={column} title="Имя / описание" />,
         cell: ({ row }) => (
@@ -137,6 +141,7 @@ function CommunitiesDataGrid({
       },
       {
         id: "type",
+        size: 128,
         accessorKey: "type",
         header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
         cell: ({ row }) => (
@@ -152,6 +157,7 @@ function CommunitiesDataGrid({
       },
       {
         id: "action",
+        size: 128,
         accessorKey: "action",
         header: ({ column }) => <DataGridSortHeader column={column} title="Действие" />,
         cell: ({ row }) => {
@@ -171,6 +177,7 @@ function CommunitiesDataGrid({
       },
       {
         id: "prefixCount",
+        size: 112,
         accessorKey: "prefixCount",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Маршрутов" className="ml-auto" />
@@ -188,6 +195,7 @@ function CommunitiesDataGrid({
       },
       {
         id: "serverCount",
+        size: 104,
         accessorKey: "serverCount",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Серверов" className="ml-auto" />
@@ -210,15 +218,19 @@ function CommunitiesDataGrid({
         id: "chevron",
         header: () => <span className="sr-only">Детали</span>,
         enableSorting: false,
-        cell: () => <ChevronRightIcon className="size-4 text-muted-foreground/40" />,
-        size: 40,
+        cell: ({ row }) => (
+          <Button type="button" variant="ghost" size="icon" className="size-11" aria-label={`Детали community: ${row.original.value}`} onClick={event => { event.stopPropagation(); onSelect(row.original) }}>
+            <ChevronRightIcon aria-hidden="true" className="size-4 text-muted-foreground" />
+          </Button>
+        ),
+        size: 64,
         meta: {
           headerClassName: DATA_GRID_CELL_PAD_LAST,
           cellClassName: DATA_GRID_CELL_PAD_LAST,
         },
       },
     ],
-    [copiedValue, onCopy],
+    [copiedValue, onCopy, onSelect],
   )
 
   const rowSelection = useMemo(
@@ -228,7 +240,9 @@ function CommunitiesDataGrid({
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["value"], end: [] } },
     data: communities,
     columns,
     getRowId: (row) => row.id,
@@ -236,6 +250,12 @@ function CommunitiesDataGrid({
     state: { rowSelection },
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(communities.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [communities.length, pageIndex, pageSize, table])
+
   if (communities.length === 0) {
     return (
       <EmptyState
@@ -250,6 +270,8 @@ function CommunitiesDataGrid({
     <DataGridShell
       table={table}
       recordCount={communities.length}
+      pagination={communities.length > 50 || pageSize !== 50}
+      tableLayout={{ dense: true, columnsPinnable: true }}
       onRowClick={(row) => onSelect(row)}
       tableClassNames={{
         headerRow: "border-b border-border",
@@ -259,7 +281,11 @@ function CommunitiesDataGrid({
           "[&:has([data-community-disabled=true])]:opacity-50",
         ),
       }}
-    />
+    >
+      <DataGridContainer border={false} className="w-full rounded-none border-0">
+        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
   )
 }