Выравнивание UI с vps-tracker: тема b2fA, ReUI DataGrid и shell

Синхронизированы тема и layout (ModeToggle, sticky header), списки переведены на DataGridCard, дашборд на компактные SectionCards.

Co-authored-by: Cursor <[email protected]>

apps/web/src/routes/_auth/domains/index.tsx

@@ -16,12 +16,12 @@ import {
 import { PageHeader } from '@/components/page-header'
 import { PageShell } from '@/components/page-shell'
 import { QueryState } from '@/components/query-state'
-import { DataTableCard } from '@/components/data-table-card'
-import { DomainsDataTable, type DomainTableRow } from '@/components/domains-data-table'
+import { DomainsDataGrid, type DomainTableRow } from '@/components/domains-data-grid'
 import { FormSheet } from '@/components/form-sheet'
 import { FormFieldSimple } from '@/components/form-field'
 import { LoadingButton } from '@/components/loading-button'
-import { TableSkeleton } from '@/components/table-skeleton'
+import { TableSkeleton } from '@/components/skeletons'
+import { EmptyState } from '@/components/empty-state'
 import { AppButton } from '@/components/app-button'
 import { AppInput } from '@/components/app-input'
 import { AppFieldGroup } from '@/components/app-field'
@@ -46,6 +46,7 @@ function DomainsPage() {
   const [sheetOpen, setSheetOpen] = useState(false)
   const [importGroupId, setImportGroupId] = useState('')
   const [filterGroupId, setFilterGroupId] = useState('')
+  const [search, setSearch] = useState('')
   const listGroupId =
     filterGroupId && filterGroupId !== 'none' ? Number(filterGroupId) : undefined
   const queryClient = useQueryClient()
@@ -138,6 +139,14 @@ function DomainsPage() {
   const isZeroResults = hasActiveFilter && tableData.length === 0 && (domains?.length ?? 0) > 0
   const isTrulyEmpty = tableData.length === 0 && !hasActiveFilter
 
+  const emptyAction = isZeroResults ? (
+    <AppButton variant="outline" onClick={() => setFilterGroupId('')}>
+      Сбросить фильтр
+    </AppButton>
+  ) : (
+    <AppButton onClick={() => setSheetOpen(true)}>Импортировать домен</AppButton>
+  )
+
   return (
     <PageShell>
       <PageHeader
@@ -160,40 +169,31 @@ function DomainsPage() {
         onRetry={refetch}
         skeleton={<TableSkeleton />}
       >
-        <DataTableCard
-          title="Список доменов"
-          description="Импортированные зоны Cloudflare"
-          isEmpty={isTrulyEmpty || isZeroResults}
-          emptyTitle={
-            isZeroResults ? 'Ничего не найдено' : 'Домены не импортированы'
-          }
-          emptyDescription={
-            isZeroResults
-              ? 'По выбранному фильтру группы нет подходящих зон'
-              : 'Импортируйте зону из аккаунта Cloudflare'
-          }
-          emptyIcon={GlobeIcon}
-          emptyAction={
-            isZeroResults ? (
-              <AppButton variant="outline" onClick={() => setFilterGroupId('')}>
-                Сбросить фильтр
-              </AppButton>
-            ) : (
-              <AppButton onClick={() => setSheetOpen(true)}>Импортировать домен</AppButton>
-            )
-          }
-        >
-          {!isTrulyEmpty && !isZeroResults && (
-            <DomainsDataTable
-              data={tableData}
-              groupFilterItems={groupItems}
-              groupFilterValue={filterGroupId || 'all'}
-              onGroupFilterChange={handleFilterGroupChange}
-              onDelete={handleDeleteDomain}
-              isDeleting={deleteMutation.isPending}
-            />
-          )}
-        </DataTableCard>
+        {isTrulyEmpty || isZeroResults ? (
+          <EmptyState
+            icon={GlobeIcon}
+            title={isZeroResults ? 'Ничего не найдено' : 'Домены не импортированы'}
+            description={
+              isZeroResults
+                ? 'По выбранному фильтру группы нет подходящих зон'
+                : 'Импортируйте зону из аккаунта Cloudflare'
+            }
+            action={emptyAction}
+          />
+        ) : (
+          <DomainsDataGrid
+            data={tableData}
+            totalCount={tableData.length}
+            groupFilterItems={groupItems}
+            groupFilterValue={filterGroupId || 'all'}
+            onGroupFilterChange={handleFilterGroupChange}
+            search={search}
+            onSearchChange={setSearch}
+            onDelete={handleDeleteDomain}
+            isDeleting={deleteMutation.isPending}
+            emptyAction={emptyAction}
+          />
+        )}
       </QueryState>
 
       <FormSheet