Add module box enhancements

[ZhangYiJiang]

• Add FAB on mobile which will focus the add module box when selected

• Remove hint text (Try ...) and only show module count when text is entered

• Automatically select first item so that hitting enter will immediately add the first item to timetable

• Make it more noticeable on desktop by using v2's input group format

• Highlight search term in results - currently with 500 results this is too slow on mobile. Either find a way to virtualize the list, render the list async, or reduce the number of results (dangerous)

Also consider if it is a good idea to open upwards so that it doesn't cover the list of already selected modules on desktop.

[li-kai]

For point 4, what do you think of this approach instead?

[ZhangYiJiang]

Do you mean we should try to teach the user what the add module box looks like when they first use the app, like an onboarding process, when the timetable is first empty? I like the idea, but you do need to add some text to the effect of 'get started by adding your first module', because otherwise it would be a bit weird to see a text box in the middle of the timetable.

The other problems I see is that

• This won't work for existing users who already have a timetable
• This doesn't necessarily teach the user where the add module box is, since it's not in the usual position