[PR #5128] Add favorite property to library items #4439

Open
opened 2026-04-25 00:19:45 +02:00 by adam · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/5128
Author: @Rapha149
Created: 3/16/2026
Status: 🔄 Open

Base: masterHead: favorites


📝 Commits (3)

  • a5999fb Add favorite property for items and associated filters.
  • 81201ef Add shadow behind star icon on cover.
  • ac84185 Hide favorites in get all users api call.

📊 Changes

15 files changed (+310 additions, -12 deletions)

View changed files

📝 client/components/cards/LazyBookCard.vue (+35 -0)
📝 client/components/controls/LibraryFilterSelect.vue (+10 -0)
📝 client/pages/item/_id/index.vue (+22 -0)
📝 client/pages/library/_library/podcast/latest.vue (+22 -4)
📝 client/store/user.js (+4 -0)
📝 client/strings/de.json (+2 -0)
📝 client/strings/en-us.json (+2 -0)
📝 server/Database.js (+6 -0)
📝 server/controllers/MeController.js (+61 -0)
📝 server/controllers/UserController.js (+1 -1)
📝 server/models/User.js (+49 -5)
server/models/UserFavorite.js (+66 -0)
📝 server/routers/ApiRouter.js (+2 -0)
📝 server/utils/queries/libraryItemsBookFilters.js (+14 -1)
📝 server/utils/queries/libraryItemsPodcastFilters.js (+14 -1)

📄 Description

Brief summary

This pr adds the ability to mark podcasts (and other library items) as favorite and allows to filter for favorite items in the library page and the latest episodes page.

Which issue is fixed?

#2968 and #4816

In-depth Description

Added features:

  • Star icon next to the title in the item page, clickable to toggle.
  • Star icon in the bottom left corner of item covers, when not favorite only visible on hover, also toggles on click.
  • Filter by favorite in audiobook and podcasts libraries.
  • Filter by episodes of favorite podcasts in the latest episodes page (implemented via checkbox, the state is saved in the cookies like the library filters).

In the database I implemented it by adding a new table with the columns libraryItemId and userId.
I added two new strings: LabelFavorite (en: "Favorite") and LabelOnlyFavorites (en: "Only Favorites"), but I only added them in English and German.
I also implemented these changes in the apps: https://github.com/advplyr/audiobookshelf-app/pull/1826

How have you tested this?

I tested the desktop and mobile version:

  • The star icon appears correctly in the item page and in the cover, if present it's also positioned above the ebook format.
  • Adding and removing an item from the favorites works.
  • Filtering in the library page as well as the latest page also works as expected.

Screenshots

Desktop

Cover:
grafik grafik

Item page:
grafik
grafik

Filter menu:
grafik

Latest page:
grafik
grafik

Mobile

Cover:
grafik grafik

Item page:

Filter menu:

Latest page:


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/5128 **Author:** [@Rapha149](https://github.com/Rapha149) **Created:** 3/16/2026 **Status:** 🔄 Open **Base:** `master` ← **Head:** `favorites` --- ### 📝 Commits (3) - [`a5999fb`](https://github.com/advplyr/audiobookshelf/commit/a5999fb9df566656cd00c35dcee7e4cc12134130) Add favorite property for items and associated filters. - [`81201ef`](https://github.com/advplyr/audiobookshelf/commit/81201efd441aa49ce4956989784fcf3071d1c189) Add shadow behind star icon on cover. - [`ac84185`](https://github.com/advplyr/audiobookshelf/commit/ac841856df420625303e117c6f302dab1b0a36d1) Hide favorites in get all users api call. ### 📊 Changes **15 files changed** (+310 additions, -12 deletions) <details> <summary>View changed files</summary> 📝 `client/components/cards/LazyBookCard.vue` (+35 -0) 📝 `client/components/controls/LibraryFilterSelect.vue` (+10 -0) 📝 `client/pages/item/_id/index.vue` (+22 -0) 📝 `client/pages/library/_library/podcast/latest.vue` (+22 -4) 📝 `client/store/user.js` (+4 -0) 📝 `client/strings/de.json` (+2 -0) 📝 `client/strings/en-us.json` (+2 -0) 📝 `server/Database.js` (+6 -0) 📝 `server/controllers/MeController.js` (+61 -0) 📝 `server/controllers/UserController.js` (+1 -1) 📝 `server/models/User.js` (+49 -5) ➕ `server/models/UserFavorite.js` (+66 -0) 📝 `server/routers/ApiRouter.js` (+2 -0) 📝 `server/utils/queries/libraryItemsBookFilters.js` (+14 -1) 📝 `server/utils/queries/libraryItemsPodcastFilters.js` (+14 -1) </details> ### 📄 Description <!-- For Work In Progress Pull Requests, please use the Draft PR feature, see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details. If you do not follow this template, the PR may be closed without review. Please ensure all checks pass. If you are a new contributor, the workflows will need to be manually approved before they run. --> ## Brief summary <!-- Please provide a brief summary of what your PR attempts to achieve. --> This pr adds the ability to mark podcasts (and other library items) as favorite and allows to filter for favorite items in the library page and the latest episodes page. ## Which issue is fixed? #2968 and #4816 ## In-depth Description <!-- Describe your solution in more depth. How does it work? Why is this the best solution? Does it solve a problem that affects multiple users or is this an edge case for your setup? --> Added features: - Star icon next to the title in the item page, clickable to toggle. - Star icon in the bottom left corner of item covers, when not favorite only visible on hover, also toggles on click. - Filter by favorite in audiobook and podcasts libraries. - Filter by episodes of favorite podcasts in the latest episodes page (implemented via checkbox, the state is saved in the cookies like the library filters). In the database I implemented it by adding a new table with the columns libraryItemId and userId. I added two new strings: `LabelFavorite` (en: "Favorite") and `LabelOnlyFavorites` (en: "Only Favorites"), but I only added them in English and German. I also implemented these changes in the apps: https://github.com/advplyr/audiobookshelf-app/pull/1826 ## How have you tested this? <!-- Please describe in detail with reproducible steps how you tested your changes. --> I tested the desktop and mobile version: - The star icon appears correctly in the item page and in the cover, if present it's also positioned above the ebook format. - Adding and removing an item from the favorites works. - Filtering in the library page as well as the latest page also works as expected. ## Screenshots <!-- If your PR includes any changes to the web client, please include screenshots or a short video from before and after your changes. --> <details> <summary><h4>Desktop</h4></summary> Cover: <img width="208" height="263" alt="grafik" src="https://github.com/user-attachments/assets/e3293a14-fb97-408a-a211-c8f4fee492d1" /> <img width="213" height="263" alt="grafik" src="https://github.com/user-attachments/assets/657f5b3b-fd59-465a-bf36-a46e76531f0d" /> Item page: <img width="654" height="257" alt="grafik" src="https://github.com/user-attachments/assets/b860532a-049f-4942-b6fe-1c2d129e0ae4" /> <img width="634" height="244" alt="grafik" src="https://github.com/user-attachments/assets/e15f353a-a3f0-49cf-b8f0-81d30b5e6068" /> Filter menu: <img width="233" height="352" alt="grafik" src="https://github.com/user-attachments/assets/b495ea41-80cf-4f29-a484-6c4bf875e11a" /> Latest page: <img width="782" height="515" alt="grafik" src="https://github.com/user-attachments/assets/51cecd7f-62aa-4994-bc98-d713be8a98e8" /> <img width="771" height="249" alt="grafik" src="https://github.com/user-attachments/assets/1792835d-d100-4e26-9586-12774bb56540" /> </details> <details> <summary><h4>Mobile</h4></summary> Cover: <img width="300" alt="grafik" src="https://github.com/user-attachments/assets/3b118b72-29ca-43dc-b9d7-73ac193b218d" /> <img width="300" alt="grafik" src="https://github.com/user-attachments/assets/1760dbb7-ae5a-4ca5-a317-d2c6763e03e9" /> Item page: <img height="500" src="https://github.com/user-attachments/assets/2db309ee-1718-49ea-a325-8993fe6af0a2"> <img height="500" src="https://github.com/user-attachments/assets/3f08bd45-0122-4099-b486-01ae236fa7b9"> Filter menu: <img height="500" src="https://github.com/user-attachments/assets/9cb86504-5def-4522-8da5-60361739b40c9"> Latest page: <img height="500" src="https://github.com/user-attachments/assets/a7824637-0a6c-4eb3-b6d2-51adea25f00c"> <img height="300" src="https://github.com/user-attachments/assets/10be44f2-dbd6-4b00-a200-7dcc320fc953"> </details> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:19:45 +02:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#4439