feat(ui): search ui flow

[davidlhw]

~blocked by #150, #151~

partially addresses #140, specifically the ui portion, without any search logic

changes

• add SearchCmdk Modal overlay (/ is used instead of cmd+k for universality)
• add SearchPage
• add SearchResult components
• add Searcg result page to auth middleware exceptions

implementation

user flow

there are 2 ways to open the search modal:

1. using Cdmk - press / key
2. click on search input in sidebar

the typical user flow

1. search modal opens
2. enter search term
3. press Enter OR click search button
4. sees search result page
5. scrolls if too many results
6. select on filter to filter results (filter toggle is sticky)

the q search query is used to track search terms. navigating to /search?q=SEARCH_TERMS will also trigger a search

note: the No results found card is intentionally unimplemented as displaying that on the UI will depend on the search logic

note: functionality is intentionally skipping the mobile experience

preview

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
afterclass-io-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 10, 2024 3:10pm