Make lists refreshable

[Venefilyn]

This can be a pull to refresh and a button for refreshing. Button can probably be disabled for anything below md to not clutter

[Venefilyn]

@Geo1088 @SayakMukhopadhyay I'm not sure what way would be the better option.

I was thinking of putting up a refresh button where once clicked it would spin and repopulate the list. Though, the header will then have 3 buttons on it instead of 2 distinguished once which might be a bit too crowded.

Then I was thinking of doing a pull to refresh like many other apps have, and then have a refresh button for higher resolutions. Though, pretty much every pull to refresh out there is either limited in customizability or doesn't work at all.

Another option is to have a floating button which would constantly be in bottom right above the bottom navigation.

Thoughts? Should we pursue the pull to refresh and refresh button combo in the second paragraph?

[SayakMukhopadhyay]

I feel the second option is the best one

[eritbh]

Agreed, pull to refresh would be optimal for small screens and the button can be added on larger interface sizes.

[Venefilyn]

It seems like https://github.com/stackjie/vue-pull-to is the best choice. It has slots for both the content list itself as well as the pull down item.

It does not work out of the box and we need to modify the code of the package to work (as per stackjie/vue-pull-to#54). The package seems largely ignored by the author so I will clone it, make changes, and publish it on npm. Their published package is also uncompressed.

Edit: This will need some work. A lot of the deps on the vue-pull-to are vulnerable. Most of the fixes are on major semVer versions.

Might be worth changing it to a more modern deployment config.