Overview
Currently, the DevTools listing renders all tools at once with no pagination. This causes very long pages and poor navigation experience as the dataset grows. This issue tracks adding pagination across the listing — including when users filter by Category or Type from the left sidebar.
Reference style (simple, not heavy):
👉 https://21st.dev/community/components/ruixenui/sliding-pagination/default
##Requirements
- Add pagination to the DevTools listing
- Page size: 10 rows × 3 columns = 30 tools per page
- Pagination must work for:
- Default "all tools" view
- Filtered by Category
- Filtered by Type
- Combined filter states (if supported)
- On page change, tools should shift with a light, simple animation (no heavy transitions)
- Search results (when tools returned by search query exceed 9, pagination kicks in)
- Pagination UI stays at the bottom of the tools grid
Reset behavior:
When filters or search change, reset back to page 1.
Empty state:
If filtered result is 0, show an empty state and hide pagination controls entirely.
✔️ Acceptance Criteria
🛠️ Implementation Notes
- Keep pagination logic generic and reusable — props:
page, pageSize, total, onPageChange
- Compute
filteredTools first, then slice for the current page
- Only render pagination controls when
filteredTools.length > pageSize
- Render pagination controls when SearchResult > 9 (i.e. 10 or more tools for search based results)
- Follow existing design system/tokens, avoid adding heavy UI dependencies
Overview
Currently, the DevTools listing renders all tools at once with no pagination. This causes very long pages and poor navigation experience as the dataset grows. This issue tracks adding pagination across the listing — including when users filter by Category or Type from the left sidebar.
Reference style (simple, not heavy):
👉 https://21st.dev/community/components/ruixenui/sliding-pagination/default
##Requirements
Reset behavior:
When filters or search change, reset back to page 1.
Empty state:
If filtered result is 0, show an empty state and hide pagination controls entirely.
✔️ Acceptance Criteria
🛠️ Implementation Notes
page,pageSize,total,onPageChangefilteredToolsfirst, then slice for the current pagefilteredTools.length > pageSize