Implement "Quick Search" (aka command-palette)
Closes #262
We don't collect analytics but I have a strong suspicion that the "Search" page isn't used very frequently. (e.g. #262)
But it's extremely useful to be able to search exam content and answers (e.g. to check frequency of topics). Furthermore, Gen-Z and Gen-Alpha will more and more be used to just searching for what they want instead of navigating a deep hierarchy of pages manually (Article). Hence the proliferation of "command palette" or "quick search" menus in various apps and websites, triggered by hotkeys like "Ctrl+K" or "/".
This MR adds such quick search menu to ComSol! It does not replace the existing /search page, but compliments it by showing only the top results.
- (Requires !536 (merged) to be merged first)
- (Optionally requires !527 (merged) for answer/comment links to work)
- (Optionally requires !491 (merged) for [Object object] to be fixed)
Screenshot Gallery:
| Description | Screenshot |
|---|---|
| New search box in nav bar (it is actually a Button but sshhhhh, it looks like an input box) |  |
| Searching for categories (instant, local search) and exams, answers, comments (DB search) |
 
|
| Long results fade away above 150px |  |
| Filter to the category you are already in. If you are already on an Exam page, Category page, or Document page, you can choose to show results only from the same category. |  |
This feature was designed with the following (personally) non-negotiable requirements:
- Keyboard and mouse navigable
✔️ - Instantaneous for common usecase (search for a category)
✔️ - Somehow keep the old search page since it has a proper sharable URL
✔️ - Minimise React re-renders where possible
✔️ - Avoid clashing with existing browser shortcuts (ctrl+k can clash)
✔️ - Simplify the advanced usecases (search for a past paper topic in a single category)
✔️
Extra care was taken for a smooth user experience:
- Text input contents are selected when opening the menu, so you can type right away
- Results are retained after navigation, so you can visit multiple search results consecutively
- Selected search result is always kept in scroll viewport when navigating by keyboard
- Keyboard shortcuts clearly shown on screen
- All modifications to views_search.py are under optional query params, so /search page behaviour is unmodified
There is one problem where, because Exam Names, Exam Pages, Answers & Comments are all queried on the DB-side and not locally, queries like "eprog" will not show any matches except for the locally-searched Category result. You can see a demonstration below:
I have no good solution. PostgreSQL cannot do fuzzy/partial search, and transferring ALL exams, documents, summaries to client-side feels bad for client-side memory usage & processing power. So I left it as-is.
Other than that, this MR is ready for review.