Implement TF-2 Tasks: Search and Filter functionality

[Copilot]

Implements comprehensive search and filter functionality for the /tasks page as specified in Jira ticket TF-2 and matching the provided Figma designs.

Features Added

Search Functionality

• Search input with icons: Added search icon on the left and dynamic clear (X) icon on the right
• Real-time search: Searches through task names and descriptions with instant filtering
• Clear functionality: Click the X icon to clear search and reset results

Filter Functionality

• Filter dropdown: Added filter button with dropdown containing Status and Priority sections
• Status filters: Todo, In Progress, Review, Done (all selected by default)
• Priority filters: High, Medium, Low (all selected by default)
• Filter badge: Shows count of active filters when filters are applied
• Real-time filtering: Instant filtering as checkboxes are toggled

Combined Search & Filter

• Seamless integration: Search and filters work together to narrow results
• No results state: Shows helpful message when no tasks match criteria
• Persistent state: Filter selections and search terms are maintained during user interaction

Technical Implementation

New Components:

• TaskSearchFilter - Reusable search and filter component using shadcn/ui components

Enhanced Server Actions:

• getFilteredTasks() - New server action with SQLite-compatible filtering for search terms, status, and priority

Updated Pages:

• Converted /tasks page to client-side component for real-time search and filtering
• Added proper error handling and loading states

Database Integration:

• Efficient filtering at the database level using Prisma queries
• Case-sensitive search implementation compatible with SQLite

UI/UX Matching Figma Designs

The implementation precisely matches the provided Figma designs:

• Search bar styling and icon placement
• Filter dropdown structure and content
• Badge styling for active filter count
• No results messaging and layout

Testing Verified

• Search functionality works across task names and descriptions
• Filter combinations work correctly (status + priority)
• Clear button removes search text and refreshes results
• Filter badge accurately shows active filter count
• No results state displays appropriate messaging
• All interactions are responsive and accessible


Screenshot showing the "no tasks match" state with search term and active filters applied

The implementation follows the project's established patterns using server actions, Prisma ORM, shadcn/ui components, and maintains accessibility standards throughout.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>TF-2 Tasks: Search and Filter</issue_title>
<issue_description> Implement the work described in Jira ticket TF-2, including looking at any Figma files mentioned. When finished, transition the ticket to "In Reivew".

To do the work use the following prompt chain which describes steps for best implementing the feature:

1. Open the repository on GitHub: https://github.com/bitovi/ai-enablement-prompts.
2. Execute the prompt writing-code/generate-feature/generate-feature.md</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #222

---

💡 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.