Fix SplitButtonComponent

[nileshtrivedi]

We're now using view_component to organize UI components. We use TailwindCSS for styling and AlpineJS for dynamic/interactive behaviour (such as dropdowns). There is now a demo page for WIP components.

Here's the SplitButtonComponent that uses AJAX to change user's review status for an item:

The following fixes need to be made before this can be called complete:

• [x] Dropdown should be rendered with isopen=true if user clicked on a collection item in the dropdown, but isopen=false otherwise
• [x] After choosing a status, on hover, the tick mark should be replaced with a cross mark. As example, see how it works at GoodReads. However, relying on onhover events may not be a good idea for mobiles and touch screen devices.
• [ ] Show some kind of progress indicator ("saving..." or a spinner) while making AJAX calls. Similar to how OpenLibrary does it.
• [x] In-place form (like GoodReads) or a modal (like OpenLibrary) for creating a new collection rather than reloading the page and losing context.
• [ ] After creating a new collection, all SplitButtonDropdowns on the page should have that collection listed. This is going to be tricky because each instance of SplitButtonComponent is tied to an item and the collection name points to collections#toggle_item action via an AJAX post.
• [x] Fix styling

The code for this component can be found in https://github.com/learn-awesome/learn/blob/master/app/components/split_button_component.html.erb and https://github.com/learn-awesome/learn/blob/master/app/components/split_button_component.rb

[rajpratyush]

can i work on this??

[nileshtrivedi]

@rajpratyush This is mostly completed. If you want, you can take a stab at: https://github.com/learn-awesome/learn/issues/160

We can have a call tomorrow (Sunday) so I can walk you through the codebase and improvements needed urgently.

[rajpratyush]

Surely we can have a google meet call by evening