Add search and filter controls to tasks page (TF-1)

[Copilot]

Implements search and filter functionality for the /tasks page per TF-1 requirements.

Changes

New Components

• components/tasks-search-filter.tsx - Search input with clear button and filter dropdown
  • Status filters: Todo, In Progress, Review, Done
  • Priority filters: High, Medium, Low
  • All filters selected by default
• components/tasks-page-client.tsx - Client component managing filter state with useMemo for optimized re-renders

Modified

• app/(dashboard)/tasks/page.tsx - Replaced direct TaskList usage with TasksPageClient wrapper

Implementation

Client-side filtering for instant UX. Search operates on task name and description with null-safe handling:

const matchesSearch =
  searchQuery.trim() === "" ||
  task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
  (task.description?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false)

Empty state displays "No tasks match the current search and filter criteria" when no results found.

Screenshots

Search and filter UI:

Filter dropdown with status and priority sections:

Search filtering in action:

Original prompt

---

This section details on the original issue you should resolve

<issue_title>TF-1 Tasks: Search and Filter</issue_title>
<issue_description> Implement the work described in Jira ticket TF-1, 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 TF-1 Tasks: Search and Filter #247

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Copilot]

Pull Request Overview

This PR implements client-side search and filter functionality for the tasks page, allowing users to filter tasks by status, priority, and search by name/description. The implementation uses controlled components and React hooks for efficient state management.

Key Changes:

• Introduced TasksSearchFilter component with search input and dropdown filters for status and priority
• Created TasksPageClient wrapper component to manage filter state and apply filtering logic using useMemo
• Integrated the new components into the tasks page, replacing direct TaskList usage

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
components/tasks-search-filter.tsx	New component providing search input with clear button and filter dropdown UI for status and priority selection
components/tasks-page-client.tsx	Client component that manages filter state and applies search/filter logic to tasks with optimized re-renders
app/(dashboard)/tasks/page.tsx	Updated to use TasksPageClient wrapper instead of direct TaskList rendering, removed unused imports

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

[nitpick] The initial filter values are hardcoded here and duplicated from STATUS_OPTIONS and PRIORITY_OPTIONS in tasks-search-filter.tsx. Consider deriving these values from the constants to ensure consistency:

import { TasksSearchFilter, type FilterOptions } from "@/components/tasks-search-filter"

// At the top of the file after imports, export the constants from tasks-search-filter
// or define them in a shared location

const [filters, setFilters] = useState<FilterOptions>({
  statuses: STATUS_OPTIONS.map(o => o.value),
  priorities: PRIORITY_OPTIONS.map(o => o.value),
})

This ensures that if the filter options change, the defaults automatically stay in sync.