fix(ui): заменить таблицы на карточки данных и улучшить функциональность поиска

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

@@ -10,12 +10,13 @@ import {
 import type { Backup } from "@/lib/data"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
-  DataGrid,
-  DataGridColumnHeader,
-  DataGridContainer,
-  DataGridTable,
-} from "@/components/reui/data-grid"
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { DownloadIcon, HardDriveIcon, RefreshCwIcon, Trash2Icon } from "lucide-react"
 
@@ -37,31 +38,46 @@ function BackupsDataGrid({
       {
         id: "filename",
         accessorKey: "filename",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Файл" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Файл" />,
         cell: ({ row }) => (
           <span className="font-mono text-xs font-medium">{row.original.filename}</span>
         ),
+        meta: {
+          headerTitle: "Файл",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
       },
       {
         id: "server",
         accessorKey: "server",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Сервер" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
         cell: ({ row }) => (
           <span className="text-sm text-muted-foreground">{row.original.server}</span>
         ),
+        meta: {
+          headerTitle: "Сервер",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "size",
         accessorKey: "size",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Размер" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Размер" />,
         cell: ({ row }) => (
           <span className="font-mono text-xs text-muted-foreground">{row.original.size}</span>
         ),
+        meta: {
+          headerTitle: "Размер",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "kind",
         accessorKey: "kind",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
         cell: ({ row }) => {
           const kind = row.original.kind
           return (
@@ -77,32 +93,47 @@ function BackupsDataGrid({
             </span>
           )
         },
+        meta: {
+          headerTitle: "Тип",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "notes",
         accessorKey: "notes",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Заметки" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Заметки" />,
         cell: ({ row }) => (
           <span className="text-xs text-muted-foreground max-w-[200px] truncate block">
             {row.original.notes || "—"}
           </span>
         ),
+        meta: {
+          headerTitle: "Заметки",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "created",
         accessorKey: "created",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Создан" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Создан" />,
         cell: ({ row }) => (
           <span className="text-xs text-muted-foreground">{row.original.created}</span>
         ),
+        meta: {
+          headerTitle: "Создан",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "actions",
-        header: () => null,
+        header: () => <span className="sr-only">Действия</span>,
         cell: ({ row }) => {
           const b = row.original
           return (
-            <div className="flex items-center gap-1 justify-end">
+            <div className="flex items-center gap-1 justify-end opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100">
               <Button
                 variant="ghost"
                 size="icon"
@@ -135,6 +166,10 @@ function BackupsDataGrid({
         },
         enableSorting: false,
         size: 120,
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
       },
     ],
     [onDelete, onDownload, onRestore],
@@ -159,13 +194,7 @@ function BackupsDataGrid({
     )
   }
 
-  return (
-    <DataGrid table={table} recordCount={backups.length} isLoading={false}>
-      <DataGridContainer>
-        <DataGridTable />
-      </DataGridContainer>
-    </DataGrid>
-  )
+  return <DataGridShell table={table} recordCount={backups.length} />
 }
 
 export { BackupsDataGrid, type BackupsDataGridProps }