Redesign filtering/sorting navigation

[rdbende]

It seems that a lot of feature requests (#795, #740, #656, #628, #452, #434, #427, #350, #233) come down to three things: sorting, better filtering and some way of managing categories/collections.

I think we can agree that the current navigation isn't particularly optimal. Not many people buy audiobooks based on the reader, and having to go to "Author" or "Reader" and then select "All" in the side panel in order to list all the audiobooks you've added is quite confusing.

So I've been thinking about this, and I've come up with a layout that I've tried to incorporate all the requests into, and I think it would work well for each use case.
First, I added a button to sort the books in the current view by alphabetical or date order.
Second, I removed the "Author" and "Reader" views and added "Library" and "Collections" views instead. "Library" lists all available books, and "Collections" displays collections of books sorted by author, reader, genre, or custom tags.
The author and reader would behave the same as before, with the genre tab very similar. However, the custom tag handling would need to be implemented in Cozy itself and saved in Cozy's database (or there may be a standard tag we can use for this, but I don't think that the albumartist tag as said in #427 is appropriate)

Where the read/unread filtering (#233) would fit in remains an open question, but I don't think they should be in "Collections". Perhaps a "Hide finished books" option in the primary menu would be sufficient?

@geigi It looks like you've already had some plans for improving filtering, so I'd love to hear your thoughts on this redesign.

Here are my initial mockups for this design

[geigi]

Thanks for creating a issue to discuss your UI ideas!

I quite like your mockups, I think they are a good idea and a step in the right direction. Some of my thoughts:

• The presentation of the collections by displaying 4 covers in a square looks very nice and I think it is easily understandable and a popular pattern
• I like the name collection for this functionality a lot. I think it works great for describing the collections of an author but also for user created lists of books
• Lifting "Author" and "Reader" out from the top bar into a dropdown or some kind of other place seems like a good idea
• The dropdown looks indeed a bit out of place. Maybe it is a little bit better if it's on the left side?
• An idea instead of "Custom": "My collections"

Another possibility to solve this problem instead of an dropdown could be a pane to the left of the main content similar to the pane in gtk3 but with different content. On mobile this pane could be a separate page where you can navigate back to. On this pane we could list all the different views on the library. Maybe similar to Lollypop, but only the top part of the left hand side pane:

My feeling is that using a pane on the left could maybe be a little bit better to understand for users because some might not find the dropdown immediately or maybe don't understand the functionality of it right away, as it is just by itself above all the collections without an explanation.
But this propably also has some downsides: if the window is large the left pane would propably look quite empty with only a few items on the top like Author, Reader, Genre, My Collections ...

To prevent this we could fill it with some content like recent books. spotify on desktop does something like this:

But however we might display the different types of collections I think it is a very good idea to group and filter the audiobooks by the idea of "collections" :)
What do you think?

[rdbende]

Thanks for your thoughts!

Another possibility to solve this problem instead of an dropdown could be a pane to the left of the main content similar to the pane in gtk3 but with different content. On mobile this pane could be a separate page where you can navigate back to. On this pane we could list all the different views on the library. Maybe similar to Lollypop, but only the top part of the left hand side pane:

For some reason I didn't realize, that a sidebar would be the most optimal solution here :D
But yeah, it's absolutely the most logical solution, and scales well, if we decide to add more filters in the future.

An idea instead of "Custom": "My collections"

I love it!