fix(ui): ограничить каталог пользователей и добавить поиск

components/data-grids/users-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 } from "react"
+import { useMemo, useEffect } from "react"
 import {
   type ColumnDef,
   useTable,
@@ -15,6 +15,7 @@ import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
+  DEFAULT_DATA_GRID_LAYOUT,
 } from "@/components/data-grids/shared/data-grid-layout"
 import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { UsersExpandedDetail } from "@/components/data-grids/users-expanded-detail"
@@ -33,7 +34,7 @@ function AvatarCircle({ avatar, active }: { avatar: string; active: boolean }) {
   return (
     <div aria-hidden="true"
       className={cn(
-        "size-8 rounded-full flex items-center justify-center text-foreground text-[10px] font-semibold shrink-0 bg-muted",
+        "size-8 rounded-full hidden sm:flex items-center justify-center text-foreground text-[10px] font-semibold shrink-0 bg-muted",
         !active && "opacity-50",
       )}
     >
@@ -48,6 +49,8 @@ interface UsersDataGridProps {
   allSectionsCount?: number
   isLoading?: boolean
   actionsDisabled?: boolean
+  emptyTitle?: string
+  emptyDescription?: string
   onEdit: (user: AppUser) => void
   onDelete: (user: AppUser) => void
 }
@@ -58,6 +61,8 @@ function UsersDataGrid({
   allSectionsCount = ALL_SECTIONS.length,
   isLoading,
   actionsDisabled,
+  emptyTitle = "Нет пользователей",
+  emptyDescription = "Добавьте пользователя, чтобы привязать интерфейсы и учитывать трафик",
   onEdit,
   onDelete,
 }: UsersDataGridProps) {
@@ -66,6 +71,7 @@ function UsersDataGrid({
       {
         id: "name",
         accessorKey: "name",
+        size: 180,
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Пользователь" className="ml-1" />
         ),
@@ -83,8 +89,8 @@ function UsersDataGrid({
               </Button>
               <AvatarCircle avatar={u.avatar} active={u.active} />
               <div className="min-w-0">
-                <p className="text-sm font-medium truncate">{u.name}</p>
-                <p className="text-xs font-mono text-muted-foreground truncate">{u.email || u.login}</p>
+                <p className="text-sm font-medium truncate" title={u.name}>{u.name}</p>
+                <p className="text-xs font-mono text-muted-foreground truncate" title={u.email || u.login}>{u.email || u.login}</p>
               </div>
             </div>
           )
@@ -171,6 +177,7 @@ function UsersDataGrid({
       },
       {
         id: "actions",
+        size: 106,
         enableSorting: false,
         header: () => <span className="sr-only">Действия</span>,
         cell: ({ row }) => {
@@ -220,19 +227,28 @@ function UsersDataGrid({
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    autoResetExpanded: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["name"], end: [] } },
     data: users,
     columns,
     getRowId: (row) => row.id,
     getRowCanExpand: () => true,
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(users.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [users.length, pageSize, pageIndex, table])
+
   if (!isLoading && users.length === 0) {
     return (
       <EmptyState
         icon={<UsersIcon aria-hidden="true" className="size-4" />}
-        title="Нет пользователей"
-        description="Добавьте пользователя, чтобы привязать интерфейсы и учитывать трафик"
+        title={emptyTitle}
+        description={emptyDescription}
         className="border-0 py-12"
       />
     )
@@ -242,10 +258,16 @@ function UsersDataGrid({
     <DataGridShell
       table={table}
       recordCount={users.length}
+      pagination={users.length > 50 || pageSize !== 50}
+      tableLayout={{ ...DEFAULT_DATA_GRID_LAYOUT, columnsPinnable: true }}
       isLoading={isLoading}
       loadingMode="skeleton"
       onRowClick={(row) => table.getRow(row.id).toggleExpanded()}
-    />
+    >
+      <DataGridContainer border={false} className="w-full rounded-none border-0">
+        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
   )
 }