Implement search and filter functionality for tasks page

[Copilot]

This PR adds comprehensive search and filter functionality to the tasks page, allowing users to easily find and organize tasks based on their needs.

Key Features Added

Search Functionality:

• Added a search input with a magnifying glass icon on the left
• Searches through both task names and descriptions using case-insensitive matching
• Clear button (X icon) appears on the right when text is entered and clears the search when clicked

Filter Functionality:

• Filter dropdown accessible via a filter icon button to the right of the search bar
• Two filter sections:
  • Status: Todo, In progress, Review, Done
  • Priority: High, Medium, Low
• All filter options are selected by default, allowing users to progressively narrow down results
• Checkbox-based selection with visual indicators

No Results State:

• When no tasks match the current search and filter criteria, displays a helpful message: "No tasks match your current search and filter criteria. Try adjusting your search terms or filter settings"
• Includes a search icon to reinforce the context

Technical Implementation

The implementation uses a clean component architecture:

• SearchAndFilter component handles the UI for search input and filter dropdown
• TaskListWithSearch wrapper component manages the filtering logic and renders either the filtered task list or the no-results state
• Client-side filtering for responsive user experience
• Integrates seamlessly with existing task list functionality

The search performs live filtering as users type, and the filter dropdown uses checkboxes to allow multiple selections within each category. All filtering is done client-side for immediate responsiveness.

UI/UX Details

The interface maintains consistency with the existing design system, using shadcn/ui components and following the established visual patterns. The search and filter controls are positioned prominently at the top of the tasks list for easy discoverability.

Fixes #7.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• binaries.prisma.sh
  • Triggering command: node /home/REDACTED/work/taskflow/taskflow/node_modules/.bin/prisma -v (dns block)
  • Triggering command: node scripts/postinstall.js (dns block)
  • Triggering command: node /home/REDACTED/work/taskflow/taskflow/node_modules/.bin/prisma db push (dns block)
• checkpoint.prisma.io
  • Triggering command: /usr/local/bin/node /home/REDACTED/work/taskflow/taskflow/node_modules/prisma/build/child {"product":"prisma","version":"6.13.0","cli_install_type":"local","information":"","local_timestamp":"2025-08-19T05:15:49Z","project_hash":"cbb74e2f","cli_path":"/home/REDACTED/work/taskflow/taskflow/node_modules/.bin/prisma","cli_path_hash":"ca93a627","endpoint":"REDACTED","disable":false,"arch":"x64","os":"linux","node_version":"v20.19.4","ci":true,"ci_name":"GitHub Actions","command":"db push","schema_providers":["sqlite"],"schema_preview_features":[],"schema_generators_providers":["prisma-client-js"],"cache_file":"/home/REDACTED/.cache/checkpoint-nodejs/prisma-ca93a627","cache_duration":43200000,"remind_duration":172800000,"force":false,"timeout":5000,"unref":true,"child_path":"/home/REDACTED/work/taskflow/taskflow/node_modules/prisma/build/child","client_event_id":"","previous_client_event_id":"","check_if_update_available":true} (dns block)
• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node /home/REDACTED/work/taskflow/taskflow/node_modules/next/dist/compiled/jest-worker/processChild.js (dns block)
  • Triggering command: next-server (v15.4.6) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

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