Paginated, Searchable Folder & Document-Type Sidebars with Clearer Tables
Executive summary
The folder and document-type navigation sidebars on the Inbox and Documents pages now load entries in small paged batches with Previous/Next controls, a one-click "Clear search" and "Clear filters" option, and hover tooltips on the collapse buttons. Data tables also got polish: long text (subjects, file names, notes) is truncated with full text on hover, unread inbox rows are visually highlighted, and the "showing X of Y" record counts are more accurate. This change reached the QA environment.
Why this was needed
The previous sidebars fetched up to 50 folders/document types at once and filtered them in the browser, which became cluttered and hard to scan as the lists grew. There was also no quick way to clear an active search or folder selection, and long values like email subjects and file names overflowed table cells, making grids hard to read.
Client / user impact
Users get a cleaner, faster navigation experience: sidebar sections show 5 items at a time with page controls and a dedicated paginated "Search Results" view, so large folder and document-type sets stay manageable. Clearing a search or an active filter is now a single click. In tables, long subjects, file names, and notes are neatly shortened (full text on hover), unread inbox messages stand out via row shading, and the displayed record range better reflects the rows actually shown.
Technical scope
- Added two custom hooks,
usePaginatedFoldersandusePaginatedDocumentTypes, that wrap the existing list queries with page state, page clamping, search-on-reset, andenabledgating (default page size 5). - Reworked Inbox (
inbox/page.tsx) and Documents (documents/page.tsx) to drive sidebar sections from these hooks, including separate server-side paginated "Search Results" sections that activate only while a search term is present. - Extended
PageSidebarwith apaginationconfig (Prev/Next chevron controls per section) and afiltersconfig exposing "Clear search" and "Clear filters" buttons; threadedsidebarFiltersthroughInboxPageLayout. DataGrid: added an optionalgetRowClassNameprop for per-row styling and reworked total-count estimation (estimatedTotalCount) for more stable totals when the backend omitstotalCount; passescurrentCountto pagination info.PaginationInforecalculates the displayed start/end range fromcurrentCountto avoid over-counting on partial pages.InboxGridhighlights unread rows (bg-muted) viagetRowClassName;TruncatedTextapplied tosubject/file_name(Mail, Inbox) andnotes(Batch contents) columns.- Added collapse/expand tooltips to the page sidebar toggle and the dashboard
AppSidebartrigger.
Risk & mitigation
Moderate. The change is frontend-only and touches shared components (DataGrid, PageSidebar, pagination) used across multiple pages, so regressions could surface beyond Inbox/Documents. Pagination relies on backend totalPages/totalCount fields, and the smaller page size (5) increases request frequency on navigation. Mitigation: logic includes page clamping and safe fallbacks for missing counts; risk is contained by keeping behavior opt-in (new props default to off) and by QA-stage validation before any production promotion.
QA validation focus
- Inbox and Documents sidebars: verify 5-per-page sections, Previous/Next controls enable/disable correctly at first/last page, and selecting a folder/type still works.
- Search: confirm typing switches to a paginated "Search Results" section, empty searches show base sections, and "Clear search" / "Clear filters" reset state as expected.
- Tables: check that subjects, file names, and notes truncate with full text shown on hover, and that empty values render "-".
- Inbox grid: confirm unread rows are visibly highlighted and reading a mail removes the highlight.
- Pagination footer: verify the "showing X of Y" range is correct on full and partial (last) pages and when the backend does not return a total count.
- Tooltips: hover the sidebar and dashboard collapse toggles to confirm Expand/Collapse labels appear.