Add search functionality to tasks page with URL persistence

[Copilot]

Implements client-side task search with real-time filtering, debouncing, and URL state persistence as specified in TF-13.

Changes

• New component: tasks-page-with-search.tsx

  • Debounced search input (300ms) with magnifying glass icon
  • Case-insensitive partial match filtering on task names
  • URL persistence via pushState with ?search= query param
  • Conditional clear button (X icon) shown only when text present
  • Search query restoration from URL on mount via useSearchParams

• Modified: app/(dashboard)/tasks/page.tsx

  • Server component now only fetches data
  • Delegates UI and search to client component
  • Suspense boundary with loading fallback

Implementation

// Search state with debouncing
const [searchQuery, setSearchQuery] = useState("")
const [debouncedQuery, setDebouncedQuery] = useState("")

useEffect(() => {
  const timer = setTimeout(() => setDebouncedQuery(searchQuery), 300)
  return () => clearTimeout(timer)
}, [searchQuery])

// URL sync
useEffect(() => {
  const url = new URL(window.location.href)
  debouncedQuery ? url.searchParams.set("search", debouncedQuery) 
                 : url.searchParams.delete("search")
  window.history.pushState({}, "", url.toString())
}, [debouncedQuery])

// Client-side filtering
const filteredTasks = useMemo(() => 
  debouncedQuery 
    ? initialTasks.filter(t => t.name.toLowerCase().includes(debouncedQuery.toLowerCase()))
    : initialTasks
, [initialTasks, debouncedQuery])

Screenshots

Search input with filtering

Filtered results

Original prompt

---

This section details on the original issue you should resolve

<issue_title>TF-13 Display Task List with Search Input</issue_title>
<issue_description> Implement the work described in Jira ticket TF-13, 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-13 Display Task List with Search Input #257

---

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