A deprecated layout component for list-based pages in OpenFrame, providing a standardized structure with a title header, full-width search bar with debouncing, optional mobile filter modal, and a main content area for tables or grids. ## Key Components ### `ListPageLayoutProps` | Prop | Type | Description | |------|------|-------------| | `title` | `string` | Page title displayed in the header | | `searchPlaceholder` | `string` | Placeholder text for the search input | | `searchValue` | `string` | Controlled search input value | | `onSearch` | `(term: string) => void` | Callback fired after 500ms debounce | | `headerActions` | `React.ReactNode` | Optional content rendered right-aligned in the header | | `actions` | `PageActionButton[]` | Action buttons passed to the page container | | `mobileFilterGroups` | `FilterGroup[]` | Filter groups shown in the mobile filter modal | | `mobileSortConfig` | `SortConfig` | Sort columns available in the mobile filter modal | | `stickyHeader` | `boolean` | Makes the search bar sticky on scroll | | `error` | `string \| null` | Renders a `PageError` instead of the layout | | `padding` | `'none' \| 'sm' \| 'md' \| 'lg'` | Inner padding size (default: `'sm'`) | | `background` | `'default' \| 'card' \| 'transparent'` | Background style (default: `'default'`) | ### `ListPageLayout` The main exported function component. Internally manages: - **Local search state** synced with the controlled `searchValue` prop - **Debounced search** — `onSearch` fires 500ms after the user stops typing - **Mobile filter visibility** — a `Filter02Icon` button toggling a `FilterModal` overlay, rendered only when `mobileFilterGroups` or `mobileSortConfig` are provided ## Usage Example ```typescript import { ListPageLayout } from './list-page-layout' import { Button } from '../ui' function DevicesPage() { const [search, setSearch] = useState('') const [filters, setFilters] = useState({}) return ( Refresh} mobileFilterGroups={[ { id: 'status', label: 'Status', options: [{ value: 'online', label: 'Online' }] }, ]} onMobileFilterChange={setFilters} currentMobileFilters={filters} stickyHeader > ) } ``` > **Deprecated** — Use `PageLayout` from `'../layout/page-layout'` instead.