From 0ecff329cf4e5ed7f5efdd3f6f5d5649f4ad68d1 Mon Sep 17 00:00:00 2001
From: oliver <zhoutianjun127@126.com>
Date: Tue, 13 Oct 2026 00:41:37 +0800
Subject: [PATCH] Fold NE selection and refresh status into the shared list
 pager.

Add an optional ListPager meta slot so Managed NE no longer needs a separate selection row above the table.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/components/ListPager.tsx       |  6 +++++-
 web/src/features/managed-ne/NePage.tsx | 22 +++++++++++++---------
 web/src/styles/pages/ne-ume-system.css | 22 ++++++++++++++++++++--
 3 files changed, 38 insertions(+), 12 deletions(-)

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}
       </div>
       <div className="pager__controls btn-row">
         <Button
diff --git a/web/src/features/managed-ne/NePage.tsx b/web/src/features/managed-ne/NePage.tsx
index ea6fd4e..cc7fc78 100644
--- a/web/src/features/managed-ne/NePage.tsx
+++ b/web/src/features/managed-ne/NePage.tsx
@@ -671,15 +671,6 @@ export function NePage() {
         </div>
 
         <div className="pt-list">
-          {selected.length ? (
-            <div className="ne-selection-meta">
-              <span>{t("managedNe.selectedCount", { n: selected.length })}</span>
-              <Button size="sm" variant="ghost" onPress={() => setSelected([])}>
-                {t("managedNe.clearSelection")}
-              </Button>
-            </div>
-          ) : null}
-          {listQuery.isFetching ? <p className="muted">{t("common.refreshing")}</p> : null}
           {listQuery.isError ? (
             <p className="error-text">{t("managedNe.loadFailed", { error: errText(listQuery.error) })}</p>
           ) : null}
@@ -832,6 +823,19 @@ export function NePage() {
               setPage(1);
             }}
             disabled={listQuery.isLoading}
+            meta={
+              <>
+                {selected.length ? (
+                  <span className="ne-selection-meta">
+                    · {t("managedNe.selectedCount", { n: selected.length })}
+                    <button type="button" className="ne-selection-meta__clear" onClick={() => setSelected([])}>
+                      {t("managedNe.clearSelection")}
+                    </button>
+                  </span>
+                ) : null}
+                {listQuery.isFetching ? <span className="ne-selection-meta"> · {t("common.refreshing")}</span> : null}
+              </>
+            }
           />
         </div>
       </section>
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 {