Implement search and filter functionality for tasks page (TF-1)

[Copilot]

This PR implements comprehensive search and filter functionality for the tasks page as specified in Jira ticket TF-1.

Overview

The tasks page now includes a search bar and filter dropdown that allow users to quickly find specific tasks based on text content, status, and priority. The implementation provides real-time filtering with immediate visual feedback.

Key Features

Search Functionality:

• Search bar with search icon on the left side
• Clear button (X icon) that appears when text is entered
• Real-time search across task names and descriptions
• Case-insensitive text matching

Filter Functionality:

• Filter dropdown with filter icon positioned to the right of the search bar
• Two filter sections: Status (Todo, In Progress, Review, Done) and Priority (High, Medium, Low)
• All filter options start selected by default
• Checkbox-based selection with immediate filtering

Combined Experience:

• Search and filters work together to provide precise task filtering
• "No tasks match the current search and filter criteria" message when no results are found
• Smooth transitions and responsive UI updates

Technical Implementation

The implementation follows the existing project patterns:

• New TaskSearchFilter component: Handles the search input and filter dropdown UI using shadcn/ui components
• Enhanced server actions: Added searchAndFilterTasks function with typed Prisma queries for efficient database filtering
• Updated TaskList component: Now supports filtered results and displays appropriate messaging for empty states
• Client-side architecture: Split the tasks page into server and client components to enable real-time filtering while maintaining SSR benefits

Screenshots

Before Implementation:

After Implementation:

Search Results with Active Filtering:

The search functionality shown above demonstrates filtering for "mobile" tasks with the "Done" status filter unchecked, showing only the "Fix mobile responsive issues" task which has "review" status.

Testing

• ✅ Search functionality tested with various terms and edge cases
• ✅ Filter combinations tested across all status and priority options
• ✅ Clear button behavior verified
• ✅ "No results" scenario confirmed
• ✅ Real-time updates working correctly
• ✅ Build passes and lint issues resolved

Fixes #166.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.