feat(web): enhance lists UI and functionality

- Updated Toaster component to support rich colors and position.
- Added breadcrumb navigation for list detail pages.
- Removed deprecated ListsCatalog component to streamline the codebase.
- Refactored list detail page to improve entry management and user experience.
- Enhanced filtering and navigation features in the lists overview.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/layout/site-header.tsx

@@ -48,6 +48,13 @@ function getBreadcrumbs(
     ]
   }
 
+  if (pathname.match(/^\/lists\/[^/]+$/)) {
+    return [
+      { label: 'Списки', href: '/lists' },
+      { label: dynamicLabels[pathname] ?? 'Список', href: pathname },
+    ]
+  }
+
   const title = routeTitles[pathname]
   if (title) {
     return [{ label: title, href: pathname }]

apps/web/src/components/lists/lists-catalog.tsx

@@ -1,262 +0,0 @@
-import {
-  GlobeIcon,
-  LinkIcon,
-  ListIcon,
-  RefreshCwIcon,
-  SearchIcon,
-  Trash2,
-} from 'lucide-react'
-import { useMemo, useState } from 'react'
-import { CountedLineTabs } from '@/components/counted-line-tabs'
-import { EmptyState } from '@/components/empty-state'
-import {
-  Frame,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
-import { StatusBadge } from '@/components/status-badge'
-import { Button } from '@evofw/ui/components/button'
-import { Input } from '@evofw/ui/components/input'
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemMedia,
-  ItemTitle,
-} from '@evofw/ui/components/item'
-import { Separator } from '@evofw/ui/components/separator'
-import { Skeleton } from '@evofw/ui/components/skeleton'
-import { cn } from '@evofw/ui/lib/utils'
-import {
-  ipListSourceLabel,
-  isManualListType,
-  type IpList,
-} from '@evofw/shared'
-
-/**
- * Lists catalog — list-9 pattern (Frame + Item rows), not a full DataGrid.
- * Preview: https://reui.io/preview/base/list-9 · list-5 tabs
- */
-export function ListsCatalog({
-  items,
-  selectedId,
-  isLoading,
-  isError,
-  error,
-  onRetry,
-  onSelect,
-  onCreate,
-  onRefresh,
-  onDelete,
-  refreshPending,
-}: {
-  items: IpList[]
-  selectedId?: string
-  isLoading?: boolean
-  isError?: boolean
-  error?: Error | null
-  onRetry?: () => void
-  onSelect: (id: string) => void
-  onCreate: () => void
-  onRefresh: (id: string) => void
-  onDelete: (id: string) => void
-  refreshPending?: boolean
-}) {
-  const [activeTab, setActiveTab] = useState('all')
-  const [query, setQuery] = useState('')
-
-  const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase()
-    return items.filter((item) => {
-      if (activeTab === 'manual' && !isManualListType(item.type)) return false
-      if (
-        activeTab !== 'all' &&
-        activeTab !== 'manual' &&
-        item.type !== activeTab
-      ) {
-        return false
-      }
-      if (!q) return true
-      return item.name.toLowerCase().includes(q)
-    })
-  }, [items, activeTab, query])
-
-  const tabCounts = useMemo(() => {
-    const base = query.trim()
-      ? items.filter((i) =>
-          i.name.toLowerCase().includes(query.trim().toLowerCase()),
-        )
-      : items
-    return {
-      all: base.length,
-      manual: base.filter((i) => isManualListType(i.type)).length,
-      json_url: base.filter((i) => i.type === 'json_url').length,
-      evobgp_community: base.filter((i) => i.type === 'evobgp_community')
-        .length,
-    }
-  }, [items, query])
-
-  if (isLoading) {
-    return (
-      <Frame dense spacing="sm" className="w-full">
-        <FrameHeader>
-          <Skeleton className="h-5 w-24" />
-        </FrameHeader>
-        <FramePanel className="flex flex-col gap-2 p-3">
-          {Array.from({ length: 4 }).map((_, i) => (
-            <Skeleton key={i} className="h-12 w-full" />
-          ))}
-        </FramePanel>
-      </Frame>
-    )
-  }
-
-  if (isError) {
-    return (
-      <Frame dense spacing="sm" className="w-full">
-        <FramePanel className="flex flex-col gap-2 p-4">
-          <p className="text-destructive text-sm">
-            {error?.message ?? 'Не удалось загрузить списки'}
-          </p>
-          {onRetry ? (
-            <Button type="button" variant="outline" size="sm" onClick={onRetry}>
-              Повторить
-            </Button>
-          ) : null}
-        </FramePanel>
-      </Frame>
-    )
-  }
-
-  return (
-    <Frame dense spacing="sm" className="w-full">
-      <FrameHeader className="flex-row items-center justify-between gap-2">
-        <FrameTitle>Каталог</FrameTitle>
-        <span className="text-muted-foreground text-xs tabular-nums">
-          {filtered.length}
-        </span>
-      </FrameHeader>
-      <FramePanel className="flex flex-col gap-0 p-0">
-        <div className="px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
-          <CountedLineTabs
-            tabs={[
-              { id: 'all', label: 'Все', count: tabCounts.all },
-              { id: 'manual', label: 'Ручной', count: tabCounts.manual },
-              { id: 'json_url', label: 'JSON', count: tabCounts.json_url },
-              {
-                id: 'evobgp_community',
-                label: 'EvoBGP',
-                count: tabCounts.evobgp_community,
-              },
-            ]}
-            value={activeTab}
-            onValueChange={setActiveTab}
-          />
-        </div>
-        <Separator />
-        <div className="px-(--frame-panel-header-px) py-2">
-          <div className="relative">
-            <SearchIcon className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
-            <Input
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="Поиск…"
-              className="h-8 pl-8"
-              aria-label="Поиск списков"
-            />
-          </div>
-        </div>
-        <Separator />
-        {items.length === 0 ? (
-          <div className="p-4">
-            <EmptyState
-              title="Нет списков"
-              description="Создайте первый список."
-              centered={false}
-              action={
-                <Button size="sm" onClick={onCreate}>
-                  Новый список
-                </Button>
-              }
-            />
-          </div>
-        ) : filtered.length === 0 ? (
-          <p className="text-muted-foreground px-4 py-6 text-center text-sm">
-            Нет совпадений
-          </p>
-        ) : (
-          <ItemGroup className="max-h-[min(28rem,55svh)] gap-0 overflow-y-auto p-1">
-            {filtered.map((list) => {
-              const selected = selectedId === list.id
-              const Icon = isManualListType(list.type)
-                ? ListIcon
-                : list.type === 'json_url'
-                  ? LinkIcon
-                  : GlobeIcon
-              return (
-                <Item
-                  key={list.id}
-                  size="sm"
-                  variant={selected ? 'muted' : 'default'}
-                  className={cn(
-                    'cursor-pointer border-transparent',
-                    selected && 'bg-muted ring-border ring-1',
-                  )}
-                  onClick={() => onSelect(list.id)}
-                >
-                  <ItemMedia
-                    variant="icon"
-                    className="bg-background border-border size-8 rounded-md border"
-                  >
-                    <Icon aria-hidden />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle className="gap-2">
-                      <span className="truncate">{list.name}</span>
-                      <StatusBadge status={list.type} />
-                    </ItemTitle>
-                    <ItemDescription>
-                      {ipListSourceLabel(list.type)} ·{' '}
-                      <span className="tabular-nums">
-                        {list.entry_count ?? 0}
-                      </span>{' '}
-                      CIDR
-                    </ItemDescription>
-                  </ItemContent>
-                  <ItemActions
-                    onClick={(e) => e.stopPropagation()}
-                    className="gap-0.5"
-                  >
-                    {!isManualListType(list.type) ? (
-                      <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        aria-label="Refresh"
-                        disabled={refreshPending}
-                        onClick={() => onRefresh(list.id)}
-                      >
-                        <RefreshCwIcon className="size-3.5" />
-                      </Button>
-                    ) : null}
-                    <Button
-                      size="icon-sm"
-                      variant="ghost"
-                      className="text-destructive"
-                      aria-label="Удалить"
-                      onClick={() => onDelete(list.id)}
-                    >
-                      <Trash2 className="size-3.5" />
-                    </Button>
-                  </ItemActions>
-                </Item>
-              )
-            })}
-          </ItemGroup>
-        )}
-      </FramePanel>
-    </Frame>
-  )
-}

apps/web/src/components/lists/lists-columns.tsx

@@ -0,0 +1,165 @@
+import { Link } from '@tanstack/react-router'
+import type { ColumnDef } from '@tanstack/react-table'
+import { ListIcon, RefreshCwIcon, Trash2 } from 'lucide-react'
+import type { FilterFieldConfig } from '@/components/reui/filters'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import {
+  DataGridMutedCell,
+  DataGridPrimaryCell,
+} from '@/components/data-grid-cell'
+import { StatusBadge } from '@/components/status-badge'
+import { Button } from '@evofw/ui/components/button'
+import { isManualListType, type IpList } from '@evofw/shared'
+
+export const LIST_TABS = [
+  { id: 'all', label: 'Все' },
+  { id: 'manual', label: 'Ручные' },
+  { id: 'json_url', label: 'JSON' },
+  { id: 'evobgp_community', label: 'EvoBGP' },
+] as const
+
+export const listFilterFields: FilterFieldConfig[] = [
+  { key: 'name', label: 'Имя', type: 'text', placeholder: 'Поиск…' },
+  {
+    key: 'type',
+    label: 'Источник',
+    type: 'select',
+    options: [
+      { value: 'static', label: 'Ручной' },
+      { value: 'json_url', label: 'JSON по URL' },
+      { value: 'evobgp_community', label: 'EvoBGP community' },
+    ],
+  },
+]
+
+export function listFilterFieldValue(item: IpList, field: string): unknown {
+  if (field === 'name') return item.name
+  if (field === 'type') {
+    return isManualListType(item.type) ? 'static' : item.type
+  }
+  return undefined
+}
+
+export function listTabFilter(item: IpList, tabId: string): boolean {
+  if (tabId === 'all') return true
+  if (tabId === 'manual') return isManualListType(item.type)
+  return item.type === tabId
+}
+
+export function createListColumns(opts: {
+  onRefresh: (id: string) => void
+  onDelete: (id: string) => void
+  refreshPending?: boolean
+}): ColumnDef<IpList>[] {
+  return [
+    {
+      accessorKey: 'name',
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} title="Список" />
+      ),
+      cell: ({ row }) => (
+        <Link
+          to="/lists/$id"
+          params={{ id: row.original.id }}
+          className="flex min-w-0 items-center gap-2"
+        >
+          <ListIcon
+            className="text-muted-foreground size-4 shrink-0"
+            aria-hidden
+          />
+          <DataGridPrimaryCell
+            accent="primary"
+            title={row.original.name}
+            subtitle={
+              row.original.last_error
+                ? 'Ошибка обновления'
+                : row.original.refreshed_at
+                  ? `Обновлён ${new Date(row.original.refreshed_at).toLocaleString('ru-RU')}`
+                  : undefined
+            }
+          />
+        </Link>
+      ),
+      meta: { headerTitle: 'Список' },
+    },
+    {
+      accessorKey: 'type',
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} title="Источник" />
+      ),
+      cell: ({ row }) => <StatusBadge status={row.original.type} />,
+      meta: { headerTitle: 'Источник' },
+    },
+    {
+      id: 'entries',
+      accessorFn: (row) => row.entry_count ?? 0,
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} title="Записей" />
+      ),
+      cell: ({ row }) => (
+        <span className="tabular-nums">{row.original.entry_count ?? 0}</span>
+      ),
+      meta: { headerTitle: 'Записей' },
+    },
+    {
+      accessorKey: 'updated_at',
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} title="Обновлено" />
+      ),
+      cell: ({ row }) => (
+        <DataGridMutedCell>
+          {row.original.updated_at
+            ? new Date(row.original.updated_at).toLocaleString('ru-RU')
+            : '—'}
+        </DataGridMutedCell>
+      ),
+      meta: { headerTitle: 'Обновлено' },
+    },
+    {
+      id: 'actions',
+      enableSorting: false,
+      header: () => <span className="sr-only">Действия</span>,
+      cell: ({ row }) => (
+        <div className="flex justify-end gap-1">
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            aria-label="Обновить"
+            disabled={opts.refreshPending}
+            onClick={(e) => {
+              e.stopPropagation()
+              opts.onRefresh(row.original.id)
+            }}
+          >
+            <RefreshCwIcon
+              className={
+                opts.refreshPending ? 'size-3.5 animate-spin' : 'size-3.5'
+              }
+            />
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            render={
+              <Link to="/lists/$id" params={{ id: row.original.id }} />
+            }
+          >
+            Открыть
+          </Button>
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className="text-destructive"
+            aria-label="Удалить"
+            onClick={(e) => {
+              e.stopPropagation()
+              opts.onDelete(row.original.id)
+            }}
+          >
+            <Trash2 className="size-3.5" />
+          </Button>
+        </div>
+      ),
+    },
+  ]
+}

apps/web/src/main.tsx

@@ -31,7 +31,7 @@ createRoot(document.getElementById('root')!).render(
       <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
         <TooltipProvider>
           <RouterProvider router={router} />
-          <Toaster />
+          <Toaster richColors position="top-right" />
         </TooltipProvider>
       </ThemeProvider>
     </QueryClientProvider>

apps/web/src/routes/_auth/lists/$id.tsx

@@ -1,10 +1,570 @@
-import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import {
+  ArrowLeftIcon,
+  CircleAlertIcon,
+  HashIcon,
+  RefreshCwIcon,
+  TagIcon,
+  Trash2,
+} from 'lucide-react'
+import { useCallback, useMemo, useState } from 'react'
+import type { ColumnDef } from '@tanstack/react-table'
+import type { Filter, FilterFieldConfig } from '@/components/reui/filters'
+import {
+  DetailPanel,
+  PageHeader,
+  PageShell,
+  ResourcePage,
+} from '@/components/reui-kit'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/reui/alert'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import {
+  DataGridMutedCell,
+  DataGridPrimaryCell,
+} from '@/components/data-grid-cell'
+import { StatusBadge } from '@/components/status-badge'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { listQueryOptions, listsQueryOptions } from '@/queries'
+import { apiFetch } from '@/lib/api'
+import { Button } from '@evofw/ui/components/button'
+import { Field, FieldLabel } from '@evofw/ui/components/field'
+import { ScrollArea } from '@evofw/ui/components/scroll-area'
+import { Textarea } from '@evofw/ui/components/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@evofw/ui/components/select'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@evofw/ui/components/sheet'
+import { Skeleton } from '@evofw/ui/components/skeleton'
+import {
+  isManualListType,
+  type ListEntryKind,
+} from '@evofw/shared'
 
 export const Route = createFileRoute('/_auth/lists/$id')({
-  beforeLoad: ({ params }) => {
-    throw redirect({
-      to: '/lists',
-      search: { listId: params.id },
-    })
+  loader: async ({ context: { queryClient }, params }) => {
+    const detail = await queryClient.ensureQueryData(
+      listQueryOptions(params.id),
+    )
+    return { breadcrumb: detail.name }
   },
+  component: ListDetailPage,
 })
+
+type ListItem = {
+  kind: ListEntryKind
+  value: string
+  list_name?: string | null
+  resolved_count: number
+  resolved_cidrs: string[]
+}
+
+/**
+ * List detail — DetailPanel + KpiStatGrid + entries ResourcePage.
+ * KPI: https://reui.io/preview/base/stats-12
+ * Entries: https://reui.io/preview/base/data-grid-filtering-2
+ * Alert: https://reui.io/docs/components/base/alert
+ * Empty: https://reui.io/preview/base/empty-state-12
+ * Sheet: https://reui.io/preview/base/sheet-1 · sheet-8
+ */
+function ListDetailPage() {
+  const { id } = Route.useParams()
+  const navigate = useNavigate()
+  const qc = useQueryClient()
+  const listsQ = useQuery(listsQueryOptions())
+  const listQ = useQuery(listQueryOptions(id))
+
+  const [addOpen, setAddOpen] = useState(false)
+  const [addKind, setAddKind] = useState<ListEntryKind>('ip')
+  const [addValue, setAddValue] = useState('')
+  const [addListRef, setAddListRef] = useState('')
+  const [entryFilters, setEntryFilters] = useState<Filter[]>([])
+  const [deleteListOpen, setDeleteListOpen] = useState(false)
+  const [deleteValue, setDeleteValue] = useState<string | null>(null)
+
+  const refresh = useMutation({
+    mutationFn: () =>
+      apiFetch(`/api/v1/lists/${id}/refresh`, { method: 'POST' }),
+    onSuccess: () => {
+      toast.success('Обновлено')
+      void qc.invalidateQueries({ queryKey: ['lists'] })
+    },
+    onError: (e: Error) => toast.error(e.message),
+  })
+
+  const removeList = useMutation({
+    mutationFn: () => apiFetch(`/api/v1/lists/${id}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      toast.success('Удалён')
+      setDeleteListOpen(false)
+      void qc.invalidateQueries({ queryKey: ['lists'] })
+      void navigate({ to: '/lists' })
+    },
+    onError: (e: Error) => toast.error(e.message),
+  })
+
+  const addEntries = useMutation({
+    mutationFn: async () => {
+      if (addKind === 'list') {
+        if (!addListRef) throw new Error('Выберите список')
+        return apiFetch(`/api/v1/lists/${id}/entries`, {
+          method: 'POST',
+          body: JSON.stringify({
+            items: [{ kind: 'list', value: addListRef }],
+          }),
+        })
+      }
+      const text = addValue.trim()
+      if (!text) throw new Error('Введите значение')
+      const lines = text
+        .split(/[\n,;]+/)
+        .map((s) => s.trim())
+        .filter(Boolean)
+      if (lines.length === 1) {
+        return apiFetch(`/api/v1/lists/${id}/entries`, {
+          method: 'POST',
+          body: JSON.stringify({
+            items: [{ kind: addKind, value: lines[0]! }],
+          }),
+        })
+      }
+      return apiFetch(`/api/v1/lists/${id}/entries`, {
+        method: 'POST',
+        body: JSON.stringify({ values: [text] }),
+      })
+    },
+    onSuccess: () => {
+      toast.success('Добавлено')
+      setAddValue('')
+      setAddListRef('')
+      setAddKind('ip')
+      setAddOpen(false)
+      void qc.invalidateQueries({ queryKey: ['lists'] })
+    },
+    onError: (e: Error) => toast.error(e.message),
+  })
+
+  const removeEntry = useMutation({
+    mutationFn: (value: string) =>
+      apiFetch(`/api/v1/lists/${id}/entries`, {
+        method: 'DELETE',
+        body: JSON.stringify({ value }),
+      }),
+    onSuccess: () => {
+      toast.success('Удалено')
+      setDeleteValue(null)
+      void qc.invalidateQueries({ queryKey: ['lists'] })
+    },
+    onError: (e: Error) => toast.error(e.message),
+  })
+
+  const detail = listQ.data
+  const manual = detail ? isManualListType(detail.type) : false
+  const entryItems: ListItem[] = detail?.items ?? []
+  const allLists = listsQ.data?.items ?? []
+  const nestedCandidates = allLists.filter((l) => l.id !== id)
+
+  const entryFilterFields: FilterFieldConfig[] = useMemo(
+    () => [
+      {
+        key: 'value',
+        label: 'Значение',
+        type: 'text',
+        placeholder: 'Поиск…',
+      },
+      {
+        key: 'kind',
+        label: 'Вид',
+        type: 'select',
+        options: [
+          { value: 'ip', label: 'IP' },
+          { value: 'cidr', label: 'CIDR' },
+          { value: 'hostname', label: 'Домен' },
+          { value: 'list', label: 'Список' },
+        ],
+      },
+    ],
+    [],
+  )
+
+  const getEntryFilterValue = useCallback((item: ListItem, field: string) => {
+    if (field === 'value') {
+      return item.kind === 'list'
+        ? `${item.list_name ?? ''} ${item.value}`
+        : item.value
+    }
+    if (field === 'kind') return item.kind
+    return undefined
+  }, [])
+
+  const entryColumns: ColumnDef<ListItem>[] = useMemo(
+    () => [
+      {
+        accessorKey: 'value',
+        header: ({ column }) => (
+          <DataGridColumnHeader column={column} title="Значение" />
+        ),
+        cell: ({ row }) => (
+          <DataGridPrimaryCell
+            accent={row.original.kind === 'list' ? 'primary' : 'mono'}
+            title={
+              row.original.kind === 'list'
+                ? (row.original.list_name ?? row.original.value)
+                : row.original.value
+            }
+            subtitle={
+              row.original.kind === 'list'
+                ? row.original.value
+                : row.original.resolved_count > 0
+                  ? `${row.original.resolved_count} CIDR`
+                  : undefined
+            }
+          />
+        ),
+      },
+      {
+        accessorKey: 'kind',
+        header: ({ column }) => (
+          <DataGridColumnHeader column={column} title="Вид" />
+        ),
+        cell: ({ row }) => <StatusBadge status={row.original.kind} />,
+      },
+      {
+        id: 'resolved',
+        header: ({ column }) => (
+          <DataGridColumnHeader column={column} title="CIDR" />
+        ),
+        cell: ({ row }) => (
+          <DataGridMutedCell>
+            {row.original.resolved_count > 0
+              ? String(row.original.resolved_count)
+              : '—'}
+          </DataGridMutedCell>
+        ),
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: () => <span className="sr-only">Действия</span>,
+        cell: ({ row }) =>
+          manual ? (
+            <div className="flex justify-end">
+              <Button
+                size="icon-sm"
+                variant="ghost"
+                className="text-destructive"
+                aria-label="Удалить"
+                onClick={() => setDeleteValue(row.original.value)}
+              >
+                <Trash2 className="size-3.5" />
+              </Button>
+            </div>
+          ) : null,
+      },
+    ],
+    [manual],
+  )
+
+  const canAdd =
+    addKind === 'list' ? Boolean(addListRef) : Boolean(addValue.trim())
+
+  if (listQ.isLoading) {
+    return (
+      <PageShell>
+        <PageHeader title="Список" description="Загрузка…" />
+        <div className="flex flex-col gap-3">
+          <Skeleton className="h-10 w-64" />
+          <Skeleton className="h-20 w-full" />
+          <Skeleton className="h-48 w-full" />
+        </div>
+      </PageShell>
+    )
+  }
+
+  if (!detail) {
+    return (
+      <PageShell>
+        <PageHeader
+          title="Список не найден"
+          actions={
+            <Button
+              variant="outline"
+              size="sm"
+              render={<Link to="/lists" />}
+            >
+              К спискам
+            </Button>
+          }
+        />
+      </PageShell>
+    )
+  }
+
+  return (
+    <PageShell>
+      <PageHeader
+        title={detail.name}
+        description={
+          manual
+            ? 'IP, CIDR, домены и вложенные списки'
+            : 'Записи из внешнего источника (только чтение)'
+        }
+        actions={
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              render={<Link to="/lists" />}
+            >
+              <ArrowLeftIcon className="size-3.5" />
+              Списки
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={refresh.isPending}
+              onClick={() => refresh.mutate()}
+            >
+              <RefreshCwIcon
+                className={
+                  refresh.isPending ? 'size-3.5 animate-spin' : 'size-3.5'
+                }
+              />
+              Обновить
+            </Button>
+            {manual ? (
+              <Button size="sm" onClick={() => setAddOpen(true)}>
+                Добавить
+              </Button>
+            ) : null}
+            <Button
+              size="sm"
+              variant="outline"
+              className="text-destructive"
+              onClick={() => setDeleteListOpen(true)}
+            >
+              <Trash2 className="size-3.5" />
+              Удалить
+            </Button>
+          </>
+        }
+      />
+
+      <DetailPanel>
+        <DetailPanel.Header
+          title={detail.name}
+          description={
+            manual
+              ? 'Ручной список'
+              : detail.type === 'json_url'
+                ? 'JSON по URL'
+                : 'EvoBGP community'
+          }
+          actions={<StatusBadge status={detail.type} />}
+        />
+
+        <DetailPanel.Metrics
+          cards={[
+            {
+              id: 'count',
+              icon: <HashIcon aria-hidden />,
+              iconClassName: 'text-info',
+              label: 'Записей',
+              description: String(entryItems.length),
+              hint: manual ? 'ручной список' : 'внешний источник',
+            },
+            {
+              id: 'type',
+              icon: <TagIcon aria-hidden />,
+              iconClassName: 'text-primary',
+              label: 'Источник',
+              description:
+                detail.type === 'json_url'
+                  ? 'JSON'
+                  : detail.type === 'evobgp_community'
+                    ? 'EvoBGP'
+                    : 'Ручной',
+              hint:
+                detail.type === 'json_url'
+                  ? 'JSON по URL'
+                  : detail.type === 'evobgp_community'
+                    ? 'community prefixes'
+                    : 'IP / CIDR / домен / список',
+            },
+            {
+              id: 'cidrs',
+              icon: <RefreshCwIcon aria-hidden />,
+              iconClassName: 'text-success',
+              label: 'CIDR в политике',
+              description: String(
+                detail.entry_count ?? detail.entries.length,
+              ),
+              hint: 'materialized',
+            },
+          ]}
+        />
+
+        {detail.last_error ? (
+          <Alert variant="destructive">
+            <CircleAlertIcon />
+            <AlertTitle>Ошибка обновления</AlertTitle>
+            <AlertDescription>{detail.last_error}</AlertDescription>
+          </Alert>
+        ) : null}
+
+        <DetailPanel.Section title="Содержимое">
+          <ResourcePage
+            title="Entries"
+            hideHeader
+            data={entryItems}
+            columns={entryColumns}
+            getRowId={(r) => `${r.kind}:${r.value}`}
+            filterFields={entryFilterFields}
+            filters={entryFilters}
+            onFiltersChange={setEntryFilters}
+            onClearFilters={() => setEntryFilters([])}
+            getFilterFieldValue={getEntryFilterValue}
+            emptyState={{
+              title: 'Нет записей',
+              description: manual
+                ? 'Добавьте IP, CIDR, домен или другой список.'
+                : 'Нажмите Обновить или проверьте источник.',
+              action: manual ? (
+                <Button size="sm" onClick={() => setAddOpen(true)}>
+                  Добавить
+                </Button>
+              ) : undefined,
+            }}
+          />
+        </DetailPanel.Section>
+      </DetailPanel>
+
+      <ConfirmDialog
+        open={deleteListOpen}
+        onOpenChange={setDeleteListOpen}
+        title="Удалить список?"
+        description="Записи списка будут удалены. Ссылки из других списков нужно убрать вручную."
+        onConfirm={() => removeList.mutate()}
+        disabled={removeList.isPending}
+      />
+
+      <ConfirmDialog
+        open={deleteValue !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteValue(null)
+        }}
+        title="Удалить запись?"
+        description={
+          deleteValue
+            ? `Будет удалено: ${deleteValue}`
+            : 'Запись будет удалена из списка.'
+        }
+        onConfirm={() => {
+          if (deleteValue) removeEntry.mutate(deleteValue)
+        }}
+        disabled={removeEntry.isPending}
+      />
+
+      <Sheet open={addOpen} onOpenChange={setAddOpen}>
+        <SheetContent className="flex flex-col gap-0 overflow-hidden sm:max-w-md">
+          <SheetHeader className="shrink-0">
+            <SheetTitle>Добавить запись</SheetTitle>
+            <SheetDescription>
+              Выберите вид и значение. Для IP/CIDR/доменов можно вставить
+              несколько строк сразу.
+            </SheetDescription>
+          </SheetHeader>
+          <ScrollArea className="flex-1 px-4">
+            <div className="grid auto-rows-min gap-4 py-2 pb-4">
+              <Field>
+                <FieldLabel>Вид</FieldLabel>
+                <Select
+                  value={addKind}
+                  onValueChange={(v) => {
+                    if (v) setAddKind(v as ListEntryKind)
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ip">IP</SelectItem>
+                    <SelectItem value="cidr">CIDR / диапазон</SelectItem>
+                    <SelectItem value="hostname">Домен</SelectItem>
+                    <SelectItem value="list">Список</SelectItem>
+                  </SelectContent>
+                </Select>
+              </Field>
+              {addKind === 'list' ? (
+                <Field>
+                  <FieldLabel>Список</FieldLabel>
+                  <Select
+                    value={addListRef || null}
+                    onValueChange={(v) => {
+                      if (v) setAddListRef(v)
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Выберите список" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {nestedCandidates.map((l) => (
+                        <SelectItem key={l.id} value={l.id}>
+                          {l.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+              ) : (
+                <Field>
+                  <FieldLabel htmlFor="entry-value">Значение</FieldLabel>
+                  <Textarea
+                    id="entry-value"
+                    rows={5}
+                    value={addValue}
+                    placeholder={
+                      addKind === 'ip'
+                        ? '8.8.8.8'
+                        : addKind === 'cidr'
+                          ? '10.0.0.0/8'
+                          : 'bad.example.com'
+                    }
+                    onChange={(e) => setAddValue(e.target.value)}
+                  />
+                </Field>
+              )}
+            </div>
+          </ScrollArea>
+          <SheetFooter className="mt-0 shrink-0 flex-row flex-wrap gap-2 border-t">
+            <Button variant="outline" onClick={() => setAddOpen(false)}>
+              Отмена
+            </Button>
+            <Button
+              disabled={!canAdd || addEntries.isPending}
+              onClick={() => addEntries.mutate()}
+            >
+              Добавить
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </PageShell>
+  )
+}

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

@@ -1,41 +1,24 @@
-import {
-  createFileRoute,
-  useNavigate,
-} from '@tanstack/react-router'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
-import {
-  ArrowLeftIcon,
-  HashIcon,
-  RefreshCwIcon,
-  TagIcon,
-  Trash2,
-} from 'lucide-react'
+import { RefreshCwIcon } from 'lucide-react'
 import { useCallback, useMemo, useState } from 'react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { z } from 'zod'
-import type { Filter, FilterFieldConfig } from '@/components/reui/filters'
+import type { Filter } from '@/components/reui/filters'
+import { PageHeader, PageShell, ResourcePage } from '@/components/reui-kit'
 import {
-  DetailPanel,
-  PageHeader,
-  PageShell,
-  ResourcePage,
-} from '@/components/reui-kit'
-import { ListsCatalog } from '@/components/lists/lists-catalog'
-import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import {
-  DataGridMutedCell,
-  DataGridPrimaryCell,
-} from '@/components/data-grid-cell'
-import { StatusBadge } from '@/components/status-badge'
+  LIST_TABS,
+  createListColumns,
+  listFilterFieldValue,
+  listFilterFields,
+  listTabFilter,
+} from '@/components/lists/lists-columns'
 import { ConfirmDialog } from '@/components/confirm-dialog'
-import { listQueryOptions, listsQueryOptions } from '@/queries'
+import { listsQueryOptions } from '@/queries'
 import { apiFetch } from '@/lib/api'
 import { Button } from '@evofw/ui/components/button'
 import { Field, FieldLabel } from '@evofw/ui/components/field'
 import { Input } from '@evofw/ui/components/input'
 import { ScrollArea } from '@evofw/ui/components/scroll-area'
-import { Textarea } from '@evofw/ui/components/textarea'
 import {
   Select,
   SelectContent,
@@ -51,74 +34,33 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@evofw/ui/components/sheet'
-import { Skeleton } from '@evofw/ui/components/skeleton'
-import { cn } from '@evofw/ui/lib/utils'
-import {
-  guessListSourceFromInput,
-  isManualListType,
-  type ListEntryKind,
-} from '@evofw/shared'
-
-const listsSearchSchema = z.object({
-  listId: z.string().optional(),
-})
+import { guessListSourceFromInput } from '@evofw/shared'
 
 export const Route = createFileRoute('/_auth/lists/')({
-  validateSearch: (search) => listsSearchSchema.parse(search),
   component: ListsPage,
 })
 
 type CreateSource = 'static' | 'json_url' | 'evobgp_community'
 
-type ListItem = {
-  kind: ListEntryKind
-  value: string
-  list_name?: string | null
-  resolved_count: number
-  resolved_cidrs: string[]
-}
-
 /**
- * Lists — master-detail (ReUI PRO composition).
- * Catalog: https://reui.io/preview/base/list-9
- * Entries: https://reui.io/preview/base/data-grid-filtering-2
- * KPI: https://reui.io/preview/base/stats-12 (KpiStatGrid hybrid)
- * Sheet: https://reui.io/preview/base/sheet-1 · sheet-8
+ * Lists catalog — ResourcePage (Frame + tabs + Filters + DataGrid).
+ * Preview: https://reui.io/preview/base/data-grid-filtering-2
  * Empty: https://reui.io/preview/base/empty-state-12
+ * Create sheet: https://reui.io/preview/base/sheet-1 · sheet-8
+ * Docs: https://reui.io/blocks
  */
 function ListsPage() {
-  const navigate = useNavigate({ from: Route.fullPath })
-  const { listId } = Route.useSearch()
+  const navigate = useNavigate()
   const qc = useQueryClient()
   const listsQ = useQuery(listsQueryOptions())
-  const listQ = useQuery({
-    ...listQueryOptions(listId ?? ''),
-    enabled: Boolean(listId),
-  })
 
   const [createOpen, setCreateOpen] = useState(false)
   const [name, setName] = useState('')
   const [source, setSource] = useState<CreateSource>('static')
   const [extra, setExtra] = useState('')
-
-  const [addOpen, setAddOpen] = useState(false)
-  const [addKind, setAddKind] = useState<ListEntryKind>('ip')
-  const [addValue, setAddValue] = useState('')
-  const [addListRef, setAddListRef] = useState('')
-
-  const [entryFilters, setEntryFilters] = useState<Filter[]>([])
+  const [filters, setFilters] = useState<Filter[]>([])
+  const [activeTab, setActiveTab] = useState('all')
   const [deleteListId, setDeleteListId] = useState<string | null>(null)
-  const [deleteValue, setDeleteValue] = useState<string | null>(null)
-
-  const selectList = useCallback(
-    (id: string | undefined) => {
-      void navigate({
-        search: (prev) => ({ ...prev, listId: id }),
-        replace: true,
-      })
-    },
-    [navigate],
-  )
 
   const create = useMutation({
     mutationFn: async () => {
@@ -140,7 +82,7 @@ function ListsPage() {
       setSource('static')
       setCreateOpen(false)
       void qc.invalidateQueries({ queryKey: ['lists'] })
-      selectList(row.id)
+      void navigate({ to: '/lists/$id', params: { id: row.id } })
     },
     onError: (e: Error) => toast.error(e.message),
   })
@@ -158,378 +100,90 @@ function ListsPage() {
   const removeList = useMutation({
     mutationFn: (id: string) =>
       apiFetch(`/api/v1/lists/${id}`, { method: 'DELETE' }),
-    onSuccess: (_data, id) => {
+    onSuccess: () => {
       toast.success('Удалён')
       setDeleteListId(null)
-      if (listId === id) selectList(undefined)
-      void qc.invalidateQueries({ queryKey: ['lists'] })
-    },
-    onError: (e: Error) => toast.error(e.message),
-  })
-
-  const addEntries = useMutation({
-    mutationFn: async () => {
-      if (!listId) throw new Error('Список не выбран')
-      if (addKind === 'list') {
-        if (!addListRef) throw new Error('Выберите список')
-        return apiFetch(`/api/v1/lists/${listId}/entries`, {
-          method: 'POST',
-          body: JSON.stringify({
-            items: [{ kind: 'list', value: addListRef }],
-          }),
-        })
-      }
-      const text = addValue.trim()
-      if (!text) throw new Error('Введите значение')
-      const lines = text
-        .split(/[\n,;]+/)
-        .map((s) => s.trim())
-        .filter(Boolean)
-      if (lines.length === 1) {
-        return apiFetch(`/api/v1/lists/${listId}/entries`, {
-          method: 'POST',
-          body: JSON.stringify({
-            items: [{ kind: addKind, value: lines[0]! }],
-          }),
-        })
-      }
-      return apiFetch(`/api/v1/lists/${listId}/entries`, {
-        method: 'POST',
-        body: JSON.stringify({ values: [text] }),
-      })
-    },
-    onSuccess: () => {
-      toast.success('Добавлено')
-      setAddValue('')
-      setAddListRef('')
-      setAddKind('ip')
-      setAddOpen(false)
-      void qc.invalidateQueries({ queryKey: ['lists'] })
-    },
-    onError: (e: Error) => toast.error(e.message),
-  })
-
-  const removeEntry = useMutation({
-    mutationFn: (value: string) => {
-      if (!listId) throw new Error('Список не выбран')
-      return apiFetch(`/api/v1/lists/${listId}/entries`, {
-        method: 'DELETE',
-        body: JSON.stringify({ value }),
-      })
-    },
-    onSuccess: () => {
-      toast.success('Удалено')
-      setDeleteValue(null)
       void qc.invalidateQueries({ queryKey: ['lists'] })
     },
     onError: (e: Error) => toast.error(e.message),
   })
 
   const items = listsQ.data?.items ?? []
-  const detail = listQ.data
-  const manual = detail ? isManualListType(detail.type) : false
-  const entryItems: ListItem[] = detail?.items ?? []
 
-  const entryFilterFields: FilterFieldConfig[] = useMemo(
-    () => [
-      {
-        key: 'value',
-        label: 'Значение',
-        type: 'text',
-        placeholder: 'Поиск…',
-      },
-      {
-        key: 'kind',
-        label: 'Вид',
-        type: 'select',
-        options: [
-          { value: 'ip', label: 'IP' },
-          { value: 'cidr', label: 'CIDR' },
-          { value: 'hostname', label: 'Домен' },
-          { value: 'list', label: 'Список' },
-        ],
-      },
-    ],
-    [],
+  const columns = useMemo(
+    () =>
+      createListColumns({
+        onRefresh: (id) => refresh.mutate(id),
+        onDelete: setDeleteListId,
+        refreshPending: refresh.isPending,
+      }),
+    [refresh.isPending],
   )
 
-  const getEntryFilterValue = useCallback((item: ListItem, field: string) => {
-    if (field === 'value') {
-      return item.kind === 'list'
-        ? `${item.list_name ?? ''} ${item.value}`
-        : item.value
-    }
-    if (field === 'kind') return item.kind
-    return undefined
-  }, [])
-
-  const entryColumns: ColumnDef<ListItem>[] = useMemo(
-    () => [
-      {
-        accessorKey: 'value',
-        header: ({ column }) => (
-          <DataGridColumnHeader column={column} title="Значение" />
-        ),
-        cell: ({ row }) => (
-          <DataGridPrimaryCell
-            accent={row.original.kind === 'list' ? 'primary' : 'mono'}
-            title={
-              row.original.kind === 'list'
-                ? (row.original.list_name ?? row.original.value)
-                : row.original.value
-            }
-            subtitle={
-              row.original.kind === 'list'
-                ? row.original.value
-                : row.original.resolved_count > 0
-                  ? `${row.original.resolved_count} CIDR`
-                  : undefined
-            }
-          />
-        ),
-      },
-      {
-        accessorKey: 'kind',
-        header: ({ column }) => (
-          <DataGridColumnHeader column={column} title="Вид" />
-        ),
-        cell: ({ row }) => <StatusBadge status={row.original.kind} />,
-      },
-      {
-        id: 'resolved',
-        header: ({ column }) => (
-          <DataGridColumnHeader column={column} title="CIDR" />
-        ),
-        cell: ({ row }) => (
-          <DataGridMutedCell>
-            {row.original.resolved_count > 0
-              ? String(row.original.resolved_count)
-              : '—'}
-          </DataGridMutedCell>
-        ),
-      },
-      {
-        id: 'actions',
-        enableSorting: false,
-        header: () => <span className="sr-only">Действия</span>,
-        cell: ({ row }) =>
-          manual ? (
-            <div className="flex justify-end">
-              <Button
-                size="icon-sm"
-                variant="ghost"
-                className="text-destructive"
-                aria-label="Удалить"
-                onClick={() => setDeleteValue(row.original.value)}
-              >
-                <Trash2 className="size-3.5" />
-              </Button>
-            </div>
-          ) : null,
-      },
-    ],
-    [manual],
-  )
+  const getFilterFieldValue = useCallback(listFilterFieldValue, [])
+  const tabFilter = useCallback(listTabFilter, [])
 
   const canCreate =
     Boolean(name.trim()) &&
     (source === 'static' || Boolean(extra.trim()))
 
-  const canAdd =
-    addKind === 'list' ? Boolean(addListRef) : Boolean(addValue.trim())
-
-  const nestedCandidates = items.filter((l) => l.id !== listId)
-
-  const showCatalogOnMobile = !listId
-  const showDetailOnMobile = Boolean(listId)
-
   return (
     <PageShell>
       <PageHeader
         title="Списки"
-        description="Создайте список и заполните его IP, CIDR, доменами или другими списками"
+        description="Маршрутные списки: IP, CIDR, домены, JSON и EvoBGP community"
         actions={
-          <Button size="sm" onClick={() => setCreateOpen(true)}>
-            Новый список
-          </Button>
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => void listsQ.refetch()}
+              disabled={listsQ.isFetching}
+            >
+              <RefreshCwIcon
+                className={listsQ.isFetching ? 'animate-spin' : undefined}
+              />
+              Обновить
+            </Button>
+            <Button size="sm" onClick={() => setCreateOpen(true)}>
+              Создать
+            </Button>
+          </>
         }
       />
 
-      <div className="grid gap-4 lg:grid-cols-[minmax(280px,340px)_1fr] lg:items-start">
-        <div
-          className={cn(
-            'min-w-0',
-            showCatalogOnMobile ? 'block' : 'hidden lg:block',
-          )}
-        >
-          <ListsCatalog
-            items={items}
-            selectedId={listId}
-            isLoading={listsQ.isLoading}
-            isError={listsQ.isError}
-            error={listsQ.error}
-            onRetry={() => void listsQ.refetch()}
-            onSelect={selectList}
-            onCreate={() => setCreateOpen(true)}
-            onRefresh={(id) => refresh.mutate(id)}
-            onDelete={setDeleteListId}
-            refreshPending={refresh.isPending}
-          />
-        </div>
-
-        <div
-          className={cn(
-            'min-w-0',
-            showDetailOnMobile ? 'block' : 'hidden lg:block',
-          )}
-        >
-          {!listId ? (
-            <DetailPanel>
-              <DetailPanel.Header
-                title="Выберите список"
-                description="Кликните строку в каталоге слева, чтобы увидеть и редактировать содержимое."
-              />
-            </DetailPanel>
-          ) : listQ.isLoading ? (
-            <div className="flex flex-col gap-3">
-              <Skeleton className="h-10 w-64" />
-              <Skeleton className="h-20 w-full" />
-              <Skeleton className="h-48 w-full" />
-            </div>
-          ) : !detail ? (
-            <DetailPanel>
-              <DetailPanel.Header
-                title="Список не найден"
-                actions={
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => selectList(undefined)}
-                  >
-                    К каталогу
-                  </Button>
-                }
-              />
-            </DetailPanel>
-          ) : (
-            <DetailPanel>
-              <DetailPanel.Header
-                title={detail.name}
-                description={
-                  manual
-                    ? 'IP, CIDR, домены и вложенные списки'
-                    : 'Записи из внешнего источника (только чтение)'
-                }
-                actions={
-                  <>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="lg:hidden"
-                      onClick={() => selectList(undefined)}
-                    >
-                      <ArrowLeftIcon className="size-3.5" />
-                      Списки
-                    </Button>
-                    <StatusBadge status={detail.type} />
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      disabled={refresh.isPending}
-                      onClick={() => refresh.mutate(detail.id)}
-                    >
-                      <RefreshCwIcon
-                        className={
-                          refresh.isPending
-                            ? 'size-3.5 animate-spin'
-                            : 'size-3.5'
-                        }
-                      />
-                      Refresh
-                    </Button>
-                    {manual ? (
-                      <Button size="sm" onClick={() => setAddOpen(true)}>
-                        Добавить
-                      </Button>
-                    ) : null}
-                  </>
-                }
-              />
-
-              <DetailPanel.Metrics
-                cards={[
-                  {
-                    id: 'count',
-                    icon: <HashIcon aria-hidden />,
-                    iconClassName: 'text-info',
-                    label: 'Записей',
-                    description: String(entryItems.length),
-                    hint: manual ? 'ручной список' : 'внешний источник',
-                  },
-                  {
-                    id: 'type',
-                    icon: <TagIcon aria-hidden />,
-                    iconClassName: 'text-primary',
-                    label: 'Источник',
-                    description:
-                      detail.type === 'json_url'
-                        ? 'JSON'
-                        : detail.type === 'evobgp_community'
-                          ? 'EvoBGP'
-                          : 'Ручной',
-                    hint:
-                      detail.type === 'json_url'
-                        ? 'JSON по URL'
-                        : detail.type === 'evobgp_community'
-                          ? 'community prefixes'
-                          : 'IP / CIDR / домен / список',
-                  },
-                  {
-                    id: 'cidrs',
-                    icon: <RefreshCwIcon aria-hidden />,
-                    iconClassName: 'text-success',
-                    label: 'CIDR в политике',
-                    description: String(
-                      detail.entry_count ?? detail.entries.length,
-                    ),
-                    hint: 'materialized',
-                  },
-                ]}
-              />
-
-              <DetailPanel.Section title="Содержимое">
-                <ResourcePage
-                  title="Entries"
-                  hideHeader
-                  data={entryItems}
-                  columns={entryColumns}
-                  getRowId={(r) => `${r.kind}:${r.value}`}
-                  filterFields={entryFilterFields}
-                  filters={entryFilters}
-                  onFiltersChange={setEntryFilters}
-                  onClearFilters={() => setEntryFilters([])}
-                  getFilterFieldValue={getEntryFilterValue}
-                  emptyState={{
-                    title: 'Нет записей',
-                    description: manual
-                      ? 'Добавьте IP, CIDR, домен или другой список.'
-                      : 'Нажмите Refresh или проверьте источник.',
-                    action: manual ? (
-                      <Button size="sm" onClick={() => setAddOpen(true)}>
-                        Добавить
-                      </Button>
-                    ) : undefined,
-                  }}
-                />
-              </DetailPanel.Section>
-
-              {detail.last_error ? (
-                <p className="text-destructive text-sm">{detail.last_error}</p>
-              ) : null}
-            </DetailPanel>
-          )}
-        </div>
-      </div>
+      <ResourcePage
+        title="Все списки"
+        hideHeader
+        data={items}
+        columns={columns}
+        getRowId={(r) => r.id}
+        filterFields={listFilterFields}
+        filters={filters}
+        onFiltersChange={setFilters}
+        onClearFilters={() => setFilters([])}
+        getFilterFieldValue={getFilterFieldValue}
+        tabs={[...LIST_TABS]}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        tabFilter={tabFilter}
+        isLoading={listsQ.isLoading}
+        isError={listsQ.isError}
+        error={listsQ.error}
+        onRetry={() => void listsQ.refetch()}
+        onRowClick={(row) =>
+          void navigate({ to: '/lists/$id', params: { id: row.id } })
+        }
+        emptyState={{
+          title: 'Нет списков',
+          description: 'Создайте первый список для политики firewall.',
+          action: (
+            <Button size="sm" onClick={() => setCreateOpen(true)}>
+              Создать
+            </Button>
+          ),
+        }}
+      />
 
       <ConfirmDialog
         open={deleteListId !== null}
@@ -544,30 +198,12 @@ function ListsPage() {
         disabled={removeList.isPending}
       />
 
-      <ConfirmDialog
-        open={deleteValue !== null}
-        onOpenChange={(open) => {
-          if (!open) setDeleteValue(null)
-        }}
-        title="Удалить запись?"
-        description={
-          deleteValue
-            ? `Будет удалено: ${deleteValue}`
-            : 'Запись будет удалена из списка.'
-        }
-        onConfirm={() => {
-          if (deleteValue) removeEntry.mutate(deleteValue)
-        }}
-        disabled={removeEntry.isPending}
-      />
-
-      {/* sheet-1 / sheet-8: inset form + sticky footer */}
       <Sheet open={createOpen} onOpenChange={setCreateOpen}>
         <SheetContent className="flex flex-col gap-0 overflow-hidden sm:max-w-md">
           <SheetHeader className="shrink-0">
             <SheetTitle>Новый список</SheetTitle>
             <SheetDescription>
-              После создания заполните содержимое в таблице справа.
+              После создания откроется страница со содержимым списка.
             </SheetDescription>
           </SheetHeader>
           <ScrollArea className="flex-1 px-4">
@@ -642,91 +278,6 @@ function ListsPage() {
           </SheetFooter>
         </SheetContent>
       </Sheet>
-
-      <Sheet open={addOpen} onOpenChange={setAddOpen}>
-        <SheetContent className="flex flex-col gap-0 overflow-hidden sm:max-w-md">
-          <SheetHeader className="shrink-0">
-            <SheetTitle>Добавить запись</SheetTitle>
-            <SheetDescription>
-              Выберите вид и значение. Для IP/CIDR/доменов можно вставить
-              несколько строк сразу.
-            </SheetDescription>
-          </SheetHeader>
-          <ScrollArea className="flex-1 px-4">
-            <div className="grid auto-rows-min gap-4 py-2 pb-4">
-              <Field>
-                <FieldLabel>Вид</FieldLabel>
-                <Select
-                  value={addKind}
-                  onValueChange={(v) => {
-                    if (v) setAddKind(v as ListEntryKind)
-                  }}
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="ip">IP</SelectItem>
-                    <SelectItem value="cidr">CIDR / диапазон</SelectItem>
-                    <SelectItem value="hostname">Домен</SelectItem>
-                    <SelectItem value="list">Список</SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-              {addKind === 'list' ? (
-                <Field>
-                  <FieldLabel>Список</FieldLabel>
-                  <Select
-                    value={addListRef || null}
-                    onValueChange={(v) => {
-                      if (v) setAddListRef(v)
-                    }}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Выберите список" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {nestedCandidates.map((l) => (
-                        <SelectItem key={l.id} value={l.id}>
-                          {l.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </Field>
-              ) : (
-                <Field>
-                  <FieldLabel htmlFor="entry-value">Значение</FieldLabel>
-                  <Textarea
-                    id="entry-value"
-                    rows={5}
-                    value={addValue}
-                    placeholder={
-                      addKind === 'ip'
-                        ? '8.8.8.8'
-                        : addKind === 'cidr'
-                          ? '10.0.0.0/8'
-                          : 'bad.example.com'
-                    }
-                    onChange={(e) => setAddValue(e.target.value)}
-                  />
-                </Field>
-              )}
-            </div>
-          </ScrollArea>
-          <SheetFooter className="mt-0 shrink-0 flex-row flex-wrap gap-2 border-t">
-            <Button variant="outline" onClick={() => setAddOpen(false)}>
-              Отмена
-            </Button>
-            <Button
-              disabled={!canAdd || addEntries.isPending}
-              onClick={() => addEntries.mutate()}
-            >
-              Добавить
-            </Button>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
     </PageShell>
   )
 }