Build advanced invoice search engine with compiled filters, URL-persisted state, and keyboard-driven UI

[Kingsman-99]

Description

Extend /search into a full search engine page: compile filter criteria using the SDK FilterIndex, persist all filter state in URL query params, support keyboard-driven filter navigation, and render results with virtual scrolling for large lists.

Acceptance Criteria

• src/app/search/page.tsx supports filter controls: status (multi-select), token (autocomplete from known tokens), funded range (min/max bigint inputs), deadline range (date pickers), creator address, recipient address
• All filter state is serialised to URL query params on change and deserialised on page load (shareable URLs)
• Uses SDK compileFilter + FilterIndex.queryIndex for filtering — no manual .filter() calls
• Results list uses virtual scrolling (react-window or equivalent) — renders max 20 DOM nodes regardless of result count
• Keyboard navigation: Tab cycles through filters, Enter applies, Escape clears all filters
• Each filter control has a clear (×) button; a global Clear all resets URL and state simultaneously
• Empty state distinguishes between "No invoices found" (results exist but filtered out) and "No invoices yet" (no invoices at all)
• Debounce text inputs by 300ms to avoid re-filtering on every keystroke
• Unit tests: URL serialisation round-trip, keyboard navigation, empty state distinction, debounce behaviour

Context

• Existing search page: src/app/search/page.tsx
• SDK compileFilter and FilterIndex from split-sdk issue Implement optimistic UI updates #7
• bigint URL serialisation: store as decimal string, parse with BigInt()

[Smartdevs17]

can I work on this?

[Macnelson9]

Hi team, I'd like to take on this issue.

I specialize in Rust development, smart contract engineering, and frontend development with Next.js, React, and TypeScript. My experience allows me to bridge on-chain functionality with intuitive user experiences, ensuring both technical correctness and usability.

I'll follow the existing codebase conventions, communicate progress clearly, and deliver a high-quality solution within the expected timeline.

Thank you for your consideration.