feat(core): new doc list for editing collection docs and rules (#12320)

close AF-2626

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added support for debounced input changes in input fields, improving performance for rapid typing scenarios.
  - Enhanced document explorer with dynamic visibility controls for drag handles and "more" menu options.
  - Introduced a new filter for searching documents by title, enabling more precise filtering in collections.
  - Added a direct search method for document titles to improve search accuracy and speed.

- **Bug Fixes**
  - Improved layout and centering of icons in document list items.
  - Updated border styles across collection editor components for a more consistent appearance.

- **Refactor**
  - Simplified page selection and rule-matching logic in collection and selector components by consolidating state management and leveraging context-driven rendering.
  - Removed deprecated and redundant hooks for page list configuration.

- **Chores**
  - Updated code to use new theme variables for border colors, ensuring visual consistency with the latest design standards.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/component/src/hooks/use-debounce-callback.ts

@@ -0,0 +1,27 @@
+import { debounce } from 'lodash-es';
+import { useEffect, useMemo, useRef } from 'react';
+
+export const useDebounceCallback = <T extends (...args: any[]) => any>(
+  callback: T,
+  delay?: number,
+  options?: Parameters<typeof debounce>[2]
+) => {
+  const callbackRef = useRef(callback);
+
+  const debouncedCallback = useMemo(
+    () => debounce(callbackRef.current, delay, options),
+    [delay, options]
+  );
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    return () => {
+      debouncedCallback.cancel();
+    };
+  }, [debouncedCallback]);
+
+  return debouncedCallback;
+};