feat(users): add search box for user lookup by username or email

[Arul1998]

Adds a search input next to the sort options on the User page, allowing admins to quickly find users by typing their username or email address. Uses the existing API q parameter for server-side filtering. Search state is debounced (300ms) and persisted in localStorage.

Fixes #2465

Description

Adds a search box on the User page next to the sort options so admins can quickly find users by username or email. The search uses the existing GET /api/v1/user?q=... parameter for server-side filtering. The search input is debounced (300ms) to limit API calls, and the search state is stored in localStorage so it persists across page reloads.

How Has This Been Tested?

• Manually tested on the /users page with multiple users
• Verified search filters by username, email, plexUsername, and jellyfinUsername
• Confirmed debounce behavior and localStorage persistence
• Ran pnpm build successfully

Screenshots / Logs (if applicable)

1. User List with search box next to sort options

2. Search by username – filtering by "admin" shows only the admin user

3. Search by email – filtering by "friend@seerr.dev" shows only the friend user

Checklist:

• I have read and followed the contribution guidelines.
• Disclosed any use of AI (see our policy)
• I have updated the documentation accordingly.
• All new and existing tests passed.
• Successful build (pnpm build)
• Translation keys (pnpm i18n:extract)
• Database migration (if required)

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduces a debounced search feature to the UserList component enabling users to filter by username or email. Implements state persistence via localStorage, automatic pagination reset when searching, and localized UI messaging. Changes isolated to one component file.

Changes

Cohort / File(s)	Summary
User Search Feature src/components/UserList/index.tsx	Adds debounced search input (300ms delay) with MagnifyingGlassIcon; integrates search query into API URL; persists search state and pagination settings to localStorage; resets to page 1 when search query changes; adds localized message searchUsers for placeholder/aria text.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A search box hops into the list,
Users found with just a twist,
Debounce delays the rapid pounce,
LocalStorage keeps each bounce,
From warren to profile, swift and spry,
Filtering users as they fly! 🔍

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main feature: adding a search box for user lookup by username or email, which directly matches the primary change in the changeset.
Linked Issues check	✅ Passed	The PR implementation fully addresses issue #2465 by adding a search box next to sort options that enables lookup by username or email with debounced search and persistence.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the search feature: debounced search input, state persistence, pagination reset on search, and UI layout adjustments are all necessary and in-scope for the requested functionality.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/UserList/index.tsx`:
- Around line 159-163: The effect that resets pagination only triggers when
searchQuery is truthy, so clearing the search doesn’t reset page; update the
useEffect (the one depending on searchQuery) to reset page whenever the query
changes by checking page instead of searchQuery (e.g., in the useEffect
referencing searchQuery, page and updateQueryParams, call
updateQueryParams('page','1') when page > 1 regardless of whether searchQuery is
empty or non-empty) so any change to searchQuery resets pagination.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Reset page when the search is cleared as well.
Right now the reset runs only when searchQuery is truthy, so clearing the search on page > 1 won’t return to page 1, which conflicts with the requirement that any query change resets pagination.

🔧 Suggested fix

-useEffect(() => {
-  if (searchQuery && page > 1) {
-    updateQueryParams('page', '1');
-  }
-}, [searchQuery]);
+useEffect(() => {
+  if (page > 1) {
+    updateQueryParams('page', '1');
+  }
+}, [searchQuery, page, updateQueryParams]);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	useEffect(() => {
	if (searchQuery && page > 1) {
	updateQueryParams('page', '1');
	}
	}, [searchQuery]);
	useEffect(() => {
	if (page > 1) {
	updateQueryParams('page', '1');
	}
	}, [searchQuery, updateQueryParams]);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/UserList/index.tsx` around lines 159 - 163, The effect that
resets pagination only triggers when searchQuery is truthy, so clearing the
search doesn’t reset page; update the useEffect (the one depending on
searchQuery) to reset page whenever the query changes by checking page instead
of searchQuery (e.g., in the useEffect referencing searchQuery, page and
updateQueryParams, call updateQueryParams('page','1') when page > 1 regardless
of whether searchQuery is empty or non-empty) so any change to searchQuery
resets pagination.

[fallenbagel]

Please use the PR template in the pr description.

[Arul1998]

Done. I've updated the PR description with the full template.