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/ui/input/row-input.tsx

@@ -10,6 +10,7 @@ import type {
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 
 import { useAutoFocus, useAutoSelect } from '../../hooks';
+import { useDebounceCallback } from '../../hooks/use-debounce-callback';
 
 export type RowInputProps = {
   disabled?: boolean;
@@ -21,6 +22,7 @@ export type RowInputProps = {
   style?: CSSProperties;
   onEnter?: (value: string) => void;
   [key: `data-${string}`]: string;
+  debounce?: number;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'onBlur'>;
 
 // RowInput component that is used in the selector layout for search input
@@ -37,6 +39,7 @@ export const RowInput = forwardRef<HTMLInputElement, RowInputProps>(
       onBlur,
       autoFocus,
       autoSelect,
+      debounce,
       ...otherProps
     }: RowInputProps,
     upstreamRef: ForwardedRef<HTMLInputElement>
@@ -66,7 +69,7 @@ export const RowInput = forwardRef<HTMLInputElement, RowInputProps>(
       if (!onBlur) return;
       selectRef.current?.addEventListener('blur', onBlur as any);
       return () => {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
         selectRef.current?.removeEventListener('blur', onBlur as any);
       };
     }, [onBlur, selectRef]);
@@ -77,6 +80,7 @@ export const RowInput = forwardRef<HTMLInputElement, RowInputProps>(
       },
       [propsOnChange]
     );
+    const debounceHandleChange = useDebounceCallback(handleChange, debounce);
 
     const handleKeyDown = useCallback(
       (e: KeyboardEvent<HTMLInputElement>) => {
@@ -105,7 +109,7 @@ export const RowInput = forwardRef<HTMLInputElement, RowInputProps>(
         ref={inputRef}
         disabled={disabled}
         style={style}
-        onChange={handleChange}
+        onChange={debounce ? debounceHandleChange : handleChange}
         onKeyDown={handleKeyDown}
         onCompositionStart={handleCompositionStart}
         onCompositionEnd={handleCompositionEnd}