feat: shared list kit, settings search, rail order and ui consistency fixes

src/ui/tests/manage/EditorPane.test.tsx

@@ -0,0 +1,86 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import { EditorPane, EditorSection, LazySection } from "@/manage/EditorPane";
+import { Field } from "@/components/form-fields";
+import { HIDDEN_ATTR } from "@/settings/page-filter";
+
+afterEach(cleanup);
+
+function renderEditor() {
+  return render(
+    <EditorPane
+      bands={[
+        {
+          id: "main",
+          label: "Main",
+          items: [
+            { id: "general", label: "General" },
+            { id: "terminal", label: "Terminal" },
+          ],
+        },
+      ]}
+    >
+      <EditorSection id="general" label="General">
+        <Field label="Address">
+          <input />
+        </Field>
+        <Field label="Port">
+          <input />
+        </Field>
+      </EditorSection>
+      <EditorSection id="terminal" label="Terminal">
+        <LazySection>
+          <Field label="Font size">
+            <input />
+          </Field>
+        </LazySection>
+      </EditorSection>
+    </EditorPane>,
+  );
+}
+
+const hidden = (el: Element | null) => !!el?.closest(`[${HIDDEN_ATTR}]`);
+
+describe("EditorPane search", () => {
+  it("filters sections and fields, and hides their nav entries", async () => {
+    renderEditor();
+    fireEvent.change(screen.getByLabelText("manage.searchSettings"), {
+      target: { value: "port" },
+    });
+
+    await waitFor(() => {
+      expect(hidden(screen.getByText("Port"))).toBe(false);
+      expect(hidden(screen.getByText("Address"))).toBe(true);
+      expect(hidden(document.querySelector('[data-section="terminal"]'))).toBe(
+        true,
+      );
+    });
+    await waitFor(() =>
+      expect(screen.queryByRole("button", { name: "Terminal" })).toBeNull(),
+    );
+  });
+
+  it("mounts lazy sections so their fields can be found", async () => {
+    renderEditor();
+    fireEvent.change(screen.getByLabelText("manage.searchSettings"), {
+      target: { value: "font" },
+    });
+    await waitFor(() => {
+      expect(hidden(screen.getByText("Font size"))).toBe(false);
+      expect(hidden(document.querySelector('[data-section="general"]'))).toBe(
+        true,
+      );
+    });
+  });
+});