Recipient message search pagination

[kentcdodds]

This PR introduces search and pagination functionality to the past messages view for a recipient. Users can now filter messages by content using a search bar and navigate through messages in pages of up to 100, significantly improving usability and performance for recipients with a large message history.

Test Plan

1. Navigate to a recipient's past messages page (e.g., /recipients/some-recipient-id/past).
2. Verify Search:
   • Enter text into the "Search messages..." input field.
   • Observe that the message list filters dynamically as you type (with a debounce).
   • Verify the message count display updates to reflect the filtered results (e.g., "Showing 1-3 of 3 messages matching 'grateful'").
   • Clear the search field and confirm all messages are displayed again.
3. Verify Pagination (if more than 100 messages exist for a recipient):
   • Confirm that "Previous" and "Next" buttons are visible.
   • Click "Next" to navigate to the next page of messages.
   • Click "Previous" to return to the previous page.
   • Verify the page indicator (e.g., "Page 1 of X") updates correctly.
   • Ensure the search query is preserved when navigating between pages.
   • Verify the message count display (e.g., "Showing 1-100 of 250 messages") is accurate for the current page and total.
4. Edge Cases:
   • Test with a recipient having fewer than 100 messages (pagination controls should not appear).
   • Test with a search query that yields no results ("No messages match your search.").
   • Test with a recipient having no past messages ("No past messages yet.").

Checklist

• Tests updated
• Docs updated

Screenshots

Past messages page with search bar and pagination info:

Search filtering results:

---

 

---

Note

Medium Risk
Changes query semantics and data fetching for message history (new filtering, ordering, and pagination), which could impact correctness/performance on large datasets; otherwise it’s a contained UI/loader update.

Overview
Adds server-backed search and pagination to the recipient past-messages page: the loader now reads search/page, filters messages by content, counts total results, and fetches a paged slice (100 per page) ordered by newest first.

Updates the UI to include an auto-submitting SearchBar, a new Pagination control that preserves query params across page navigation, and pending-state/empty-state messaging to reflect filtered and paged results.

Generalizes SearchBar by adding an optional action prop so it can submit GET searches to routes beyond /users.

^{Written by Cursor Bugbot for commit 3ca2030. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[cursor]

Bugbot Autofix resolved the bug found in the latest run.

• ✅ Fixed: Unused loader data recomputed in component
  • Removed unused hasNextPage and hasPrevPage from the loader response, as these values were never accessed by the client and were redundantly recomputed in the Pagination component.

[cursor]

Bugbot Autofix resolved the bug found in the latest run.

• ✅ Fixed: Duplicated search bar pattern from existing component
  • Refactored SearchBar to accept an optional action prop and removed the duplicated MessageSearchBar component, reducing code duplication and improving maintainability.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is ON. A Cloud Agent has been kicked off to fix the reported issue.}

[cursor]

Bugbot Autofix resolved the bug found in the latest run.

• ✅ Fixed: SearchBar pending state checks incorrect form action
  • Removed the '/users' fallback from useIsPending formAction to match the Form's contextual routing behavior when action is undefined.