v0.8.3 - The UX Refresh
Published on September 18, 2024 by Joseph Milazzo
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.
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 #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.