v0.8.3 - The UX Refresh

[majora2007]

It's finally here, the UX Refresh. Robbie and I have been dreaming and planning this for over a year now and we've grinded for 2 months (with my trip to Norway/Finland between) to bring it to you. The feedback from the nightly testers has been fantastic! Everyone is in love. We have poured over the UX, both on mobile and on desktop, to bring what we think is a consistent and killer experience. We took a lot of inspiration from Plex and if anyone knows, I'm trying to make Kavita the Plex for reading. So let's get into the nitty gritty of what makes this release.

Colorscape

When I browse Plex, I'm always blown away by the accent colors on movie detail pages. Contrast that to Kavita, I felt it was sorely lacking. So I brought it to Kavita and let me tell you, it was no easy feat. Hours wasted on css gradients before realizing the complex system Plex has. Kavita now will show a nice gradient in the background of any page that has a cover (except reading lists and collections, these will likely follow in the future). What's even cooler is the system is able to be turned on/off with a custom theme or even customized by theme creators. This is the feature I'm most proud of with this release.

Individual Pages

This is a big thing for Book and Comic users, the ability to view individual volume/chapter metadata. This not only brings dedicated pages (and the ability to update metadata for individual chapters/books), but also the ability to read a series/chapter/volume from any card. No longer do you need to open the series detail page.

Settings Overhaul

Again taking inspiration from Plex, we updated the settings pages to bring tooltip information front and center and make changes to any field instant (no more pressing save). All settings, from admin to user preferences, are now on one screen. Some flows have been moved to dedicated pages, like CBL Import or MAL Interest Stack import. This should help with bringing visibility to some of the features Kavita has.

Publisher Images

Lastly, we added a new system similar to favicons for publisher images. This new system allows for users to submit or edit publisher images on our kavita repo and these images will be downloaded dynamically and displayed on the detail pages. Some images may not look good. I am counting on the community to add new or edit images to bring the best UX to all users.

All in all, I'm really proud of this release. Next up is an overhaul to the UX surrounding Kavita+ including reworking some of the systems and laying more foundation for future feature releases. I am also working on building out the test cases for the Scanner to allow me to continue working on the elusive Foreign Key constraint issue still plaguing us and working on bringing more optimizations into the Scan Loop to make Kavita faster.

Lastly, I want to make a big thank you to those that contribute on Weblate. This release was massive and many localization strings were changed. The localizers were on top of it and as of this release, we are shipping Kavita in 10 languages with full support.

Added

• Added: Added ability to upload a volume cover for Komf users
• Added: Added a lot of ability to theme the login screen, including the background image.
• Added: Added ColorScapes. ColorScapes is a new dynamic tinting system for Kavita. During cover generation, Kavita will pick primary colors from the image and apply them to the background on pages where the image is a primary element (series detail for now). These are configurable via the theming system. (Light themes do not look good with this system, it should be disabled)
• Added: Added a new actionable for Library to generate colorscapes (which is a soft refresh covers)
• Added: Library Settings and Edit Series Modal now has a tasks tab that shows appropriate tasks that can be done on the library/series along with information about what the task does.
• Added: Added a Volume/Chapter detail page. From any card you can click and open the detail page.
• Added: Added the ability to directly read a card/volume/series/readinglist from the card or open their details page.
• Added: Added the ability to edit chapter metadata directly within Kavita, lock the fields, This includes Sort order which will allow comic users with unique issue numbers to be ordered on the series detail in any order and the readers will respect it.
• Added: Added a new API and UI to allow setting just a volume cover (and locking it). Komf has already updated with support. (Thanks @Snd-R)
• Added: Added the ability to have publisher images (that are managed on Kavita's site, like favicons). There is no extra styling, this is pretty rough but I want to see from users if there is any interest.
• Added: Added a new metadata filter called 'is empty'. This will check against fields like Writers, Tags, Genres, etc to explicitly see if there are no links. (Feature Request)
• Added: .yacreaderlibrary directories will be ignored by the scanner
• Added: Made it so when a new version of Kavita is released, the UI will automatically refresh and bust locale cache since non-admins can't actually run the bust cache task.
• Added: Admins can now trigger Sync Theme job from Tasks page
• Added: Added a link to the CBL Repo from CBL Import for those that are unaware of the project

Changed

• Changed: Passwords can now be up to 256 characters long
• Changed: Changed some headers, spacing, and positioning to make things more uniform across the app.
• Changed: Revamped how settings/preferences work in the app. Following Plex' style, they are all on one page (RBS applies) with a dedicated left nav menu that groups based on functionality. (Sorry localizers, lots of string updates)
• Changed: When navigating away from library/collection/bookmark/etc-detail, instead of just restoring position when interacting with a jumpkey, Kavita will now restore position down to the location of jump point in all cases.
• Changed: Jump keys now show an animation instead of a tooltip to show number of series
• Changed: Filter icon now shows an animation when actively configuring it
• Changed: Moved some screens around to dedicated sections and most of Kavita+ screens are now on a new Scrobbling page
• Changed: Moved the customize modal into a dedicated settings item to make discovery of the feature easier.
• Changed: Lots of small consistency issues and QoL tweaks on different pages to bring a better UX and interaction. A lot of functionality has been moved to drive a consistent experience and discovery of features.
• Changed: Cast and Reviews are in their own tab
• Changed: Tabs on Series Detail now report card count
• Changed: All preferences (except those in account) now just save automatically after interaction
• Changed: Removed library setting 'Include in Recommendations' as Kavita no longer has those flows
• Changed: On mobile view ports, remove the dropdown button and scroll to top. Dropdown button links are now visible in a modal to make clicking much easier.
• Changed: Added a customize button on the Side nav when you move into 'More', so you know you can tweak it if you haven't visited settings yet.
• Changed: Series cards will now show the localized name on hover if present
• Changed: Chapter cards will now show the title on hover if present.
• Changed: Cover Artists is now Artists in the application.
• Changed: After selecting a tab, a refresh of the browser will resume you back on the same tab on series/volume/chapter detail pages.
• Changed: Folder watching is now moved to a separate background thread so it doesn't block startup for users with massive libraries
• Changed: After we update a metadata filter, rescroll to the top as results change
• Changed: Cleaned up some registration error output to look nicer
• Changed: Reorganized edit user modal to better handle users with large amounts of libraries.
• Changed: When mass creating libraries, ensure we enqueue the scans. Also don't restart folder watching if folder watching isn't on.
• Changed: Tweaked some backend code around when we restart library watching and make sure it's always done in a background thread.
• Changed: Sync Themes job now runs daily instead of weekly
• Changed: Lots of small improvements to the UX of theme manager
• Changed: Actionable menu (...) on mobile will now load a modal, rather than the normal desktop view. From testing, the menu was easy to misclick on mobile.

Fixed

• Fixed: Fixed an issue where long passwords would truncate on autofill.
• Fixed: Fixed a side-nav css var that was inappropriately assigned.
• Fixed: Fixed a bug in theme manager where the active pill wouldn't have the correct color for non-dark themes
• Fixed: Fixed a bug where reading list cards wouldn't promote/unpromote from actionables
• Fixed: Fixed a bug where OPDS reading list feeds were missing pagination
• Fixed: Fixed an edge case where busting Kavita+ cache in edit series then hitting close wasn't refreshing screen.
• Fixed: A ton of localization changes across the board (Thank you to the Translators for promptly updating language support to 100%)
• Fixed a bug where busting locale cache wouldn't refresh the new translations
• Fixed: Fixed some logic around disabling scrobbling on the UI side for library type selections
• Fixed: Fixed a bug where pinned smart filters on the side nav would all show an active highlight (Thanks @Fesaa for the help fixing)
• Fixed: Fixed a bug where there could be a duplicate key in OPDS for some unique configurations.
• Fixed: Don't allow users to add series to smart collections
• Fixed: Fixed CBL Import flow and a bad localization string when the reading list already exists
• Fixed: (Kavita+) MAL Interest stacks didn't handle pagination correctly, but now it does. You can now import all your stacks.
• Fixed: Fixed duplicate Dark theme issue
• Fixed: Fixed a bug with utc to local time not respecting null date
• Fixed: Fixed a bug where user was unable to save manga reader preferences due to a missing field
• Fixed: Ensure that any smart filter bound to the dashboard load in the correct Context and respect libraries that have opted out of showing on the Dashboard. (FR [Kavita] Smart filters opened from dashboard should respect dashboard restrictions. #3149)
• Fixed: Fixed duplicate Dark theme issue
• Fixed: Fixed a bug where user was unable to save manga reader preferences due to a missing field
• Fixed: Ensure that any smart filter bound to the dashboard load in the correct Context and respect libraries that have opted out of showing on the Dashboard.
• Fixed: Fixed an issue where user rating was using a float (0-1) but users were expecting to put in a percentage given that's always how the UI shows it. Now, Kavita will translate from percentage to float behind the scenes.
• Fixed: Fixed CBL import breaking again due to swagger
• Fixed: Fixed an issue where a user with no reading progress would throw an exception on loading stats page
• Fixed: Fixed an issue where after downloading a theme, the theme would be unselected.
• Fixed: Fixed some exceptions being thrown when downloading or fetching themes.
• Fixed: Fixed an error when trying to save settings from the manga reader
• Fixed: Fixed a bug where the manga reader could prefetch all files in the archive
• Fixed: Fixed a weird state where a book series with a volume 0 and being marked as special would trick series detail into rendering 0 out on card title instead of title.

Theme

• Tables are now themeable
• There were a ton of changes and new css variables. Wiki has been updated with extra documentation around colorscape system.

API

• Updated how resetting cover image field works on the API. All update APIs now accept a LockCover field which will force the lock or not. Defaults to true. Can still reset the cover by passing an empty string and false. In addition, the code is more streamlined to ensure after a reset, a regeneration task is queued.

---

This discussion was created from the release v0.8.3 - The UX Refresh.

[darthrater78]

[DieselTech]

All these issues are due to the caching of locale file. You can solve it with the following steps:

1. Force refresh the browser - Ctrl-F5 (this should make a new request for data when version doesn't match)
2. Try to run the bust locale task if you are an admin
3. Open dev tools (right click -> inspect) and delete all the keys in Application localstorage: "@transloco/translations" and refresh browser to get the new version
4. Delete local cache for the site as a last resort

[therobbiedavis]

Are my settings suppsoed to look like this ater upgrading?

No, this is a browser cache issue. There are a few ways to fix this issue:

1. Hard refresh browser. (Shift + Refresh) This should make a new request for data when version doesn't match.
2. Try to run the bust locale task if you are an admin
3. Open dev tools (right click -> inspect) and delete the following key in Application localstorage: "@transloco/translations" and refresh browser to get the new version
4. In the dev tools, go to the network tab and check disable cache. Then refresh
   
5. Delete all browser cache, cookies, and any other data related to your kavita domain within your browser.

[gitmotion]

just pulled the latest image and amazing UI refresh! has a great look and feel to it, especially with the themes. also love how the gradient fades in! great job on this 👏

[alx-xlx]

glad to see the roadmap in design, I very much like the idea of "make Kavita the Plex for reading"

[Hamuko]

I think I'm using a different Plex since this doesn't really look anything like Plex. The information density on the settings page is poor and it uses those useless "toggle buttons" instead of the tried and true checkboxes (which Plex also uses), making it look more like a bad mobile app. However, what is really bad are the series pages, as these (supposedly Plex inspired?) gradients are awful and doesn't even seem to go away with the pre-overhaul theme.

The text is also tiny and has extremely poor contrast with the eye-searing gradient backgrounds to the point that Kavita would fail every single accessibility test there is. For example, here the contrast for the description is in the 1.9:1 to 2.3:1 range, which is even below the 3:1 target for large text, let alone the higher target for tiny text like this.

The volume texts too are poor contrast, although at least in some parts they would qualify for good enough contrast for large text, which they arguably are not. Volume 5 has like 2.33:1 contrast and the best is probably volume 1 with 3.68:1 when text of this size should probably get at least 4.5:1.

[DieselTech]

If you want your feedback to be taken seriously, you need to change your tone. The way you come out of the gate attacking the work done by the dev team isn't going to make them want to even read anything you have to say. Even if you are raising valid points, the way you went about it invalidates everything you said.

We did 2 full months of user testing on the nightly channel for this release since it was so much work involved and close to 60k lines of code changed. We asked for user input at every step of the process and had daily communication with users on problems. Tons of changes were made to get where we are today with this release.

I'm not even going to address the technical aspects of your post until it's written in a way that respects the humans that spent countless hours of their free time to make this release possible.

[maximo1984]

As a monthly contributor, I am happy to see that this project is moving along. Really great. Thanks.