fix(frontend/controller): improve match highlighting + split up the search component

[saihaj]

Summary of PR

The Results function was very huge and it was getting quite confusing to navigate around. Idea here is to split up the search component so that results becomes its own component and all highlighting is contained there. Search component will pass down all the necessary props.

I tried bringing context down to results (where it makes way much more sense and then we don't have to pass so many things down) but was not possible because it breaks react hooks rules. Later I realized it is also not so great because we are mapping though the list of results we get from backend and that might be too much work each time to get context from the hook.

@Harjot1Singh you probably have some better way because this has reached very high levels of prop drilling.

• [x] Reolve => highlighting of a search results when keyboard keys are pressed to select an item

Fixes

Fixes #567 Fixes #569

TTR

@saihaj - unsure @Harjot1Singh - 2 hours

[saihaj]

Now I have moved all the result related things to Result component. We pass down necessary props to Result component and it will take care of mapping through and highlighting of each search result. It is a first step towards simplifying the search component so that we can start working on #511.

[saihaj]

@Harjot1Singh I need help, I messed up highlighting of a search results when keyboard keys are pressed to select an item.

[Harjot1Singh]

Please check this still works well @bhajneet @saihaj.

I ended up fixing some search highlighting issues, and refactoring the logic into a separate file.

[saihaj]

✅ LGTM This also fixes #567 #569

[Harjot1Singh]

This serves as a very good basis and the preliminary work required by #221, which will serve as one of our biggest performance improvements.