Skip to content

[V2 200pts] Build global search overlay — pages, transactions, and currency rates searchable via Cmd+K #348

Description

@portableDD

Summary

Build a global search feature accessible from the topbar that lets users quickly find transactions, navigate to pages, or look up currency rates — all from one place. This is a major UX improvement for power users.

What Needs to Be Done

1. components/shared/global-search.tsx

  • Search icon button in topbar → opens a full-width search overlay
  • Keyboard shortcut: Ctrl+K / Cmd+K to open
  • Close on Escape or clicking outside

2. Search categories and results

Pages (instant, no API call):

  • Match against a static list of routes: Dashboard, Transactions, Convert, Deposit, Withdraw, Settings, Support
  • Show page icon + name + path
  • Click → navigate to page

Transactions (search GET /transactions?search={query}):

  • Show up to 5 matching transactions: type badge, amount, currency, date
  • Click → open transaction detail modal

Currency rates (search against known currency pairs):

  • If query matches a currency code (e.g. "USD", "EUR", "NGN") → show current rate card inline
  • e.g. searching "USD" → shows "1 USD = 1,721 NGN" directly in the results

3. Search UX

  • Results grouped by category: Pages / Transactions / Rates
  • Keyboard navigable: arrow keys to move through results, Enter to select
  • "No results found for [query]" empty state
  • Debounce: 300ms before firing API call
  • Loading spinner during transaction search

4. Recent searches

  • Store last 5 searches in localStorage
  • Show "Recent" section when search input is empty
  • "Clear recent" button

Acceptance Criteria

  • Cmd+K / Ctrl+K opens search overlay
  • Page results navigate correctly
  • Transaction search calls correct API endpoint
  • Currency rate shows inline when searching a currency code
  • Keyboard navigation works through results
  • Recent searches shown when input is empty
  • Escape closes the overlay
  • npm run build and npm run lint pass

⚠️ IMPORTANT — READ BEFORE SUBMITTING YOUR PR
Your pull request MUST target the v2 branch.
PRs targeting main or any other branch will not be reviewed and will not be merged.

Base branch: v2   ✅
Base branch: main ❌  → will be closed without review

Complexity: High — 200 points

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions