diff --git a/web/src/components/ListPager.tsx b/web/src/components/ListPager.tsx index c68aed9..03574be 100644 --- a/web/src/components/ListPager.tsx +++ b/web/src/components/ListPager.tsx @@ -1,5 +1,5 @@ import { Button, Input } from "@heroui/react"; -import { useEffect, useState } from "react"; +import { useEffect, useState, type ReactNode } from "react"; import { useI18n } from "../i18n"; import { FieldSelect } from "./ui/FieldSelect"; @@ -13,6 +13,8 @@ export type ListPagerProps = { onPageSizeChange?: (size: number) => void; disabled?: boolean; className?: string; + /** Extra status shown after the totals (e.g. selection count), so pages need no separate row. */ + meta?: ReactNode; }; /** Shared denser pager: meta + prev/next + jump + optional page size. */ @@ -26,6 +28,7 @@ export function ListPager({ onPageSizeChange, disabled = false, className = "", + meta, }: ListPagerProps) { const { t } = useI18n(); const safePages = Math.max(1, pages || 1); @@ -54,6 +57,7 @@ export function ListPager({ page: String(page), pages: String(safePages), })} + {meta}
-
- ) : null} - {listQuery.isFetching ?

{t("common.refreshing")}

: null} {listQuery.isError ? (

{t("managedNe.loadFailed", { error: errText(listQuery.error) })}

) : null} @@ -832,6 +823,19 @@ export function NePage() { setPage(1); }} disabled={listQuery.isLoading} + meta={ + <> + {selected.length ? ( + + · {t("managedNe.selectedCount", { n: selected.length })} + + + ) : null} + {listQuery.isFetching ? · {t("common.refreshing")} : null} + + } /> diff --git a/web/src/styles/pages/ne-ume-system.css b/web/src/styles/pages/ne-ume-system.css index ed19584..70b26ab 100644 --- a/web/src/styles/pages/ne-ume-system.css +++ b/web/src/styles/pages/ne-ume-system.css @@ -115,9 +115,27 @@ button.ne-tag-card.is-active { .ne-selection-meta { display: inline-flex; align-items: center; - gap: 6px; + gap: 8px; + margin-left: 6px; color: var(--nx-text-muted); - font-size: 12px; +} + +.ne-page .ne-selection-meta__clear { + padding: 0; + border: 0; + background: transparent; + color: var(--nx-accent); + cursor: pointer; + font: inherit; +} + +.ne-page .ne-selection-meta__clear:hover { + text-decoration: underline; +} + +.ne-page .ne-selection-meta__clear:focus-visible { + outline: 2px solid var(--nx-accent); + outline-offset: 2px; } .ne-import-failures {