Suggestions for some small UI/UX changes in the web interface

[muchtea]

The UI works very well as it currently is, so these suggestions aren't important, but I think they might be nice to have.

• Make the book thumbnail clickable and open the book on click like the "Read Book"-icon currently does, since, so far, I seem to expect that to work this way and click on it before I remember to use the read icon.

• Add text to the "Download"- and "Read Book"-icons and put them in a button, maybe like so:
  
  Those are the two actions in the book view a user can take and should therefore be a bit more emphasized, with the "Read Book"-button being the primary action.

• Put the page number in book view under the download and read actions like the other metadata (currently size, format and file). Also maybe remove the icon, since clicking it doesn't do anything unlike the other icons in the UI.

• Add a top margin of a few pixels to the horizontal divider in the side navigation to make it line up with the search bar.

• Make the Komga logo (including the name) in the upper left clickable and open the home view, since most websites seem to work like that.

• Similar to e.g. YouTube, set the burger menu to the left of the Komga logo and have the burger menu and Komga logo always displayed in the top bar, whether or not the side navigation is collapsed or not.

• Add a dark mode option for the UI. I assume there are probably a few CSS styles that can be used or are already present in the currently used CSS files, but I don't know if they work out of the box or need a lot of changes to work with the UI, text colors, icons, etc.

• Add a simple list view of the books and series'.

[gotson]

Thanks for the suggestions.

To give you some general information about the UI:

• The UI is not the main focus at the moment. I want it to be usable, nice, but I don't have time to make it pixel perfect.
• I am adding features incrementally, and almost every new feature needs a UI counterpart, meaning I need to adjust things constantly.
• I am following the Material Designs guidelines, so everything must be aligned to that as much as possible.
• The UI framework is Vuetify, all components are Vuetify components that follow Material Design guidelines.
• I am using Plex as inspiration. Most of the menus, buttons placement, icons, etc, are mimicking Plex in one way or another.
• I am no designer, i try my best :)

[gotson]

One more thing, the website is responsive and should work on all screen sizes, and also touch screens.

[gotson]

Closing this as some have been implemented, and some is outdated with the many recent changes.