[MBL-19179][Parent] - Implement search in Grades page

[kdeakinstructure]

Summary

This PR implements a real-time search feature for the Parent app Grades page, allowing users to filter assignments by name. The search functionality includes automatic filtering as the user types (with a minimum of 3 characters) and provides instant visual feedback.

Test plan

1. Open the Parent app and navigate to the Grades page
2. Verify a magnifying glass icon appears next to the filter icon in the Grades card
3. Click the magnifying glass icon and verify the search field appears below the "Based on graded assignments" section
4. Type 1-2 characters and verify no filtering occurs (all assignments remain visible)
5. Type 3 or more characters and verify:
   • Assignments are filtered in real-time as you type
   • Only assignments matching the search query are displayed (case-insensitive)
   • Empty assignment groups are hidden
   • No need to press enter for filtering to apply
6. Clear the search (delete characters to <3) and verify all assignments are restored
7. Click the magnifying glass icon again to collapse the search field
8. Verify the full assignment list is restored when search is closed

refs: MBL-19179
affects: Parent
release note: Added search functionality to Grades page

Changes

UI Components

• Added search icon next to filter icon in Grades card
• Implemented collapsible search field that appears below "Based on graded assignments" section
• Search field uses existing SearchBar component with enhanced functionality

Search Behavior

• Real-time filtering activates when search query reaches 3 characters
• Case-insensitive search across assignment names
• Empty assignment groups automatically hidden from filtered results
• Toggling search icon restores full unfiltered list

Technical Implementation

• Enhanced SearchBar component with new onQueryChange callback for keystroke-level updates
• Added search state management in GradesUiState (searchQuery, isSearchExpanded)
• Added search actions in GradesAction (ToggleSearch, SearchQueryChanged)
• ViewModel caches unfiltered items and applies filtering dynamically
• Filter logic in ViewModel removes empty groups after filtering

Screenshots

Before	After
No search functionality available	Search icon and collapsible search field with real-time filtering

Note: Screenshots should be added showing the search icon, expanded search field, and filtered results

Checklist

• Follow-up e2e test ticket created or not needed
• Run E2E test suite
• Tested in dark mode
• Tested in light mode
• Test in landscape mode and/or tablet
• A11y checked
• Approve from product

🤖 Generated with Claude Code

[claude]

Review Summary

This PR adds search functionality to the Grades screen, which is a valuable feature addition. The implementation follows the project's MVVM architecture and Compose patterns well. Here are my findings:

✅ Strengths

• Clean separation of concerns with proper action handling
• Good use of existing SearchBar component with an appropriate extension
• Proper state management through UiState
• Accessibility considerations (touch target sizes, content descriptions)
• Test tags added for UI testing

🔍 Key Recommendations

Performance: Consider debouncing the search input to avoid filtering on every keystroke, especially for large assignment lists.

Code Quality: Extract the magic number 3 (minimum search length) into a named constant.

UX Enhancement: Consider auto-focusing the search field when expanded to improve user experience.

State Management: The allItems field could be moved into UiState for better encapsulation, though the current approach works.

📋 Testing Considerations

• Verify search works correctly with special characters and various locales
• Test performance with large assignment lists (100+ items)
• Ensure state is properly restored on configuration changes
• Verify search behaves correctly when combined with sorting/filtering options

Overall, this is solid work! The inline comments provide specific suggestions for improvement. Nice job maintaining consistency with the project's architecture and patterns.

[github-actions]

📊 Code Coverage Report

✅ Student

• PR Coverage: 43.53%
• Master Coverage: 43.53%
• Delta: +0.00%

⚠️ Teacher

• PR Coverage: 25.52%
• Master Coverage: 25.52%
• Delta: -0.00%

⚠️ Pandautils

• PR Coverage: 22.40%
• Master Coverage: 22.44%
• Delta: -0.03%

---

📈 Overall Average

• PR Coverage: 30.49%
• Master Coverage: 30.50%
• Delta: -0.01%

[inst-danger]

Parent Install Page

[inst-danger]

Teacher Install Page

[inst-danger]

Student Install Page

[adamNagy56]

QA +1

[tamaskozmer]

• I would add a better animation for the search view, already described it in an other comment.
• Consider modifying the empty message when the search query is not empty, currently it just says we have no assignments. See the screenshot:

[inst-danger]

Parent Install Page

[inst-danger]

Teacher Install Page

[github-actions]

Parent Install Page

[inst-danger]

Teacher Install Page

[inst-danger]

Student Install Page

[inst-danger]

Parent Install Page

[inst-danger]

Teacher Install Page

[inst-danger]

Student Install Page

[adamNagy56]

I checked the search functionality in another app as well, and I’d suggest two improvements:

• After orientation change, if the keyboard wasn’t open before, it shouldn’t open automatically.
• After orientation change, the cursor jumps to the beginning of the search bar, but it should stay at the end.

See attached video.

Screen_Recording_20251111_112137_Canvas.Parent.mp4

[inst-danger]

Parent Install Page

[inst-danger]

Teacher Install Page

[inst-danger]

Student Install Page

[adamNagy56]

QA +1