-
Notifications
You must be signed in to change notification settings - Fork 16
Open
Copy link
Labels
apertre3.0easygood first issueGood for newcomersGood for newcomershelp wantedExtra attention is neededExtra attention is needed
Description
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
- Tools list is limited to 30 items per page
- Pagination updates total pages based on current filtered result
- Changing page updates visible tools correctly
- Applying/removing Category or Type filters recalculates pagination correctly
- Page transition animation is smooth and lightweight
- No noticeable performance drop on large datasets
🛠️ Implementation Notes
- Keep pagination logic generic and reusable — props:
page,pageSize,total,onPageChange - Compute
filteredToolsfirst, 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
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
apertre3.0easygood first issueGood for newcomersGood for newcomershelp wantedExtra attention is neededExtra attention is needed