Build global search UI with results across pages (mock index)

[Abidoyesimze]

Epic

Page Design Issues (Dummy Data Only)

Description

• Implement search bar component visible in header on desktop, in overlay on mobile
• Use a mock search index to return results for pages, actions, and records
• Provide result groups (Pages, Actions, Records) with keyboard navigation
• Design spec (must use; measurable):
  • Tokens per Issue 3
  • Input height 44px; clear icon; debounce 250–400ms
  • Result rows min-height 44px; active row visually distinct and announced
  • Empty state with guidance copy

Acceptance criteria

• Search opens, filters, and navigates via keyboard
• Grouped results from mock index
• Empty and error states implemented
• PR includes screenshots and short demo GIF

Suggested GitHub labels

frontend, search, ux, priority-medium

---

[OluwapelumiElisha]

Hello,

I would like to work on this issue.

[lawalajose]

@lawalajose has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

i would love to work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @lawalajose to this issue.

[Kaybee973]

@Kaybee973 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello maintainer, I am qualified to resolve this issue and would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Kaybee973 to this issue.

[directorfloo]

@directorfloo has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I LOVE TO WORK ON THIS ISSUE PROFESSIONALLY, PLEASE ASSIGN IT TO ME

ℹ️ Repo Maintainers: To accept this application, review their application or assign @directorfloo to this issue.

[udoyechinenyevictoria]

@udoyechinenyevictoria has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi Maintainer , please can I work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @udoyechinenyevictoria to this issue.

[dedukpe]

@dedukpe has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi! I’m a full-stack developer. I’d love to handle this issue and can deliver a clean, reliable solution. Kindly assign it to me.
I understand that the goal is to implement a global search experience in the frontend using a mock index, with grouped results and full keyboard accessibility.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @dedukpe to this issue.

[binayyub4211]

@binayyub4211 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

hey maintainer,
kindly assign me to work on this issue, thank you

ℹ️ Repo Maintainers: To accept this application, review their application or assign @binayyub4211 to this issue.

[Michealshodipo56]

@Michealshodipo56 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this kindly assign me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Michealshodipo56 to this issue.

[Pressergrey]

@Pressergrey has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Gm maintainer, allow me to jump on this.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Pressergrey to this issue.