From bff56220c212b3152203abde0b48cd40aea380e2 Mon Sep 17 00:00:00 2001
From: mikiher <mikiher@gmail.com>
Date: Sun, 21 Jul 2024 11:10:05 +0300
Subject: [PATCH 1/5] Adds genres to gloabl search

---
 client/components/cards/GenreSearchCard.vue   |  34 +++++
 client/components/controls/GlobalSearch.vue   |  18 ++-
 .../utils/queries/libraryItemsBookFilters.js  |  21 ++-
 .../queries/libraryItemsPodcastFilters.js     | 123 ++++++++++--------
 4 files changed, 135 insertions(+), 61 deletions(-)
 create mode 100644 client/components/cards/GenreSearchCard.vue

diff --git a/client/components/cards/GenreSearchCard.vue b/client/components/cards/GenreSearchCard.vue
new file mode 100644
index 0000000000..05be761449
--- /dev/null
+++ b/client/components/cards/GenreSearchCard.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <div class="w-10 h-10 flex items-center justify-center">
+      <span class="material-symbols text-2xl text-gray-200">category</span>
+    </div>
+    <div class="flex-grow px-2 tagSearchCardContent h-full">
+      <p class="truncate text-sm">{{ genre }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    genre: String
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.tagSearchCardContent {
+  width: calc(100% - 40px);
+  height: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>
diff --git a/client/components/controls/GlobalSearch.vue b/client/components/controls/GlobalSearch.vue
index e20732d5df..d9cc6787f9 100644
--- a/client/components/controls/GlobalSearch.vue
+++ b/client/components/controls/GlobalSearch.vue
@@ -59,13 +59,22 @@
 
           <p v-if="tagResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelTags }}</p>
           <template v-for="item in tagResults">
-            <li :key="item.name" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+            <li :key="`tag.${item.name}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(item.name)}`">
                 <cards-tag-search-card :tag="item.name" />
               </nuxt-link>
             </li>
           </template>
 
+          <p v-if="genreResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelGenres }}</p>
+          <template v-for="item in genreResults">
+            <li :key="`genre.${item.name}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(item.name)}`">
+                <cards-genre-search-card :genre="item.name" />
+              </nuxt-link>
+            </li>
+          </template>
+
           <p v-if="narratorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelNarrators }}</p>
           <template v-for="narrator in narratorResults">
             <li :key="narrator.name" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
@@ -95,6 +104,7 @@ export default {
       authorResults: [],
       seriesResults: [],
       tagResults: [],
+      genreResults: [],
       narratorResults: [],
       searchTimeout: null,
       lastSearch: null
@@ -105,7 +115,7 @@ export default {
       return this.$store.state.libraries.currentLibraryId
     },
     totalResults() {
-      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.podcastResults.length + this.narratorResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.genreResults.length + this.podcastResults.length + this.narratorResults.length
     }
   },
   methods: {
@@ -126,6 +136,7 @@ export default {
       this.authorResults = []
       this.seriesResults = []
       this.tagResults = []
+      this.genreResults = []
       this.narratorResults = []
       this.showMenu = false
       this.isFetching = false
@@ -168,6 +179,7 @@ export default {
       this.authorResults = searchResults.authors || []
       this.seriesResults = searchResults.series || []
       this.tagResults = searchResults.tags || []
+      this.genreResults = searchResults.genres || []
       this.narratorResults = searchResults.narrators || []
 
       this.isFetching = false
@@ -203,4 +215,4 @@ export default {
 .globalSearchMenu {
   max-height: calc(100vh - 75px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/server/utils/queries/libraryItemsBookFilters.js b/server/utils/queries/libraryItemsBookFilters.js
index c2b2a9df17..f81aef5b30 100644
--- a/server/utils/queries/libraryItemsBookFilters.js
+++ b/server/utils/queries/libraryItemsBookFilters.js
@@ -1079,7 +1079,7 @@ module.exports = {
 
     // Search tags
     const tagMatches = []
-    const [tagResults] = await Database.sequelize.query(`SELECT value, count(*) AS numItems FROM books b, libraryItems li, json_each(b.tags) WHERE json_valid(b.tags) AND json_each.value LIKE :query AND b.id = li.mediaId AND li.libraryId = :libraryId GROUP BY value LIMIT :limit OFFSET :offset;`, {
+    const [tagResults] = await Database.sequelize.query(`SELECT value, count(*) AS numItems FROM books b, libraryItems li, json_each(b.tags) WHERE json_valid(b.tags) AND json_each.value LIKE :query AND b.id = li.mediaId AND li.libraryId = :libraryId GROUP BY value ORDER BY numItems DESC LIMIT :limit OFFSET :offset;`, {
       replacements: {
         query: `%${query}%`,
         libraryId: oldLibrary.id,
@@ -1095,6 +1095,24 @@ module.exports = {
       })
     }
 
+    // Search genres
+    const genreMatches = []
+    const [genreResults] = await Database.sequelize.query(`SELECT value, count(*) AS numItems FROM books b, libraryItems li, json_each(b.genres) WHERE json_valid(b.genres) AND json_each.value LIKE :query AND b.id = li.mediaId AND li.libraryId = :libraryId GROUP BY value ORDER BY numItems DESC LIMIT :limit OFFSET :offset;`, {
+      replacements: {
+        query: `%${query}%`,
+        libraryId: oldLibrary.id,
+        limit,
+        offset
+      },
+      raw: true
+    })
+    for (const row of genreResults) {
+      genreMatches.push({
+        name: row.value,
+        numItems: row.numItems
+      })
+    }
+
     // Search series
     const allSeries = await Database.seriesModel.findAll({
       where: {
@@ -1140,6 +1158,7 @@ module.exports = {
       book: itemMatches,
       narrators: narratorMatches,
       tags: tagMatches,
+      genres: genreMatches,
       series: seriesMatches,
       authors: authorMatches
     }
diff --git a/server/utils/queries/libraryItemsPodcastFilters.js b/server/utils/queries/libraryItemsPodcastFilters.js
index 3e6e337c8d..3fb297614b 100644
--- a/server/utils/queries/libraryItemsPodcastFilters.js
+++ b/server/utils/queries/libraryItemsPodcastFilters.js
@@ -1,4 +1,3 @@
-
 const Sequelize = require('sequelize')
 const Database = require('../../Database')
 const Logger = require('../../Logger')
@@ -7,7 +6,7 @@ const { asciiOnlyToLowerCase } = require('../index')
 module.exports = {
   /**
    * User permissions to restrict podcasts for explicit content & tags
-   * @param {import('../../objects/user/User')} user 
+   * @param {import('../../objects/user/User')} user
    * @returns {{ podcastWhere:Sequelize.WhereOptions, replacements:object }}
    */
   getUserPermissionPodcastWhereQuery(user) {
@@ -23,9 +22,11 @@ module.exports = {
       if (user.permissions.selectedTagsNotAccessible) {
         podcastWhere.push(Sequelize.where(Sequelize.literal(`(SELECT count(*) FROM json_each(tags) WHERE json_valid(tags) AND json_each.value IN (:userTagsSelected))`), 0))
       } else {
-        podcastWhere.push(Sequelize.where(Sequelize.literal(`(SELECT count(*) FROM json_each(tags) WHERE json_valid(tags) AND json_each.value IN (:userTagsSelected))`), {
-          [Sequelize.Op.gte]: 1
-        }))
+        podcastWhere.push(
+          Sequelize.where(Sequelize.literal(`(SELECT count(*) FROM json_each(tags) WHERE json_valid(tags) AND json_each.value IN (:userTagsSelected))`), {
+            [Sequelize.Op.gte]: 1
+          })
+        )
       }
     }
     return {
@@ -36,8 +37,8 @@ module.exports = {
 
   /**
    * Get where options for Podcast model
-   * @param {string} group 
-   * @param {[string]} value 
+   * @param {string} group
+   * @param {[string]} value
    * @returns {object} { Sequelize.WhereOptions, string[] }
    */
   getMediaGroupQuery(group, value) {
@@ -63,8 +64,8 @@ module.exports = {
 
   /**
    * Get sequelize order
-   * @param {string} sortBy 
-   * @param {boolean} sortDesc 
+   * @param {string} sortBy
+   * @param {boolean} sortDesc
    * @returns {Sequelize.order}
    */
   getOrder(sortBy, sortDesc) {
@@ -94,15 +95,15 @@ module.exports = {
 
   /**
    * Get library items for podcast media type using filter and sort
-   * @param {string} libraryId 
+   * @param {string} libraryId
    * @param {oldUser} user
-   * @param {[string]} filterGroup 
-   * @param {[string]} filterValue 
-   * @param {string} sortBy 
-   * @param {string} sortDesc 
+   * @param {[string]} filterGroup
+   * @param {[string]} filterValue
+   * @param {string} sortBy
+   * @param {string} sortDesc
    * @param {string[]} include
-   * @param {number} limit 
-   * @param {number} offset 
+   * @param {number} limit
+   * @param {number} offset
    * @returns {object} { libraryItems:LibraryItem[], count:number }
    */
   async getFilteredLibraryItems(libraryId, user, filterGroup, filterValue, sortBy, sortDesc, include, limit, offset) {
@@ -130,7 +131,7 @@ module.exports = {
       ]
     } else if (filterGroup === 'recent') {
       libraryItemWhere['createdAt'] = {
-        [Sequelize.Op.gte]: new Date(new Date() - (60 * 24 * 60 * 60 * 1000)) // 60 days ago
+        [Sequelize.Op.gte]: new Date(new Date() - 60 * 24 * 60 * 60 * 1000) // 60 days ago
       }
     }
 
@@ -154,10 +155,7 @@ module.exports = {
       replacements,
       distinct: true,
       attributes: {
-        include: [
-          [Sequelize.literal(`(SELECT count(*) FROM podcastEpisodes pe WHERE pe.podcastId = podcast.id)`), 'numEpisodes'],
-          ...podcastIncludes
-        ]
+        include: [[Sequelize.literal(`(SELECT count(*) FROM podcastEpisodes pe WHERE pe.podcastId = podcast.id)`), 'numEpisodes'], ...podcastIncludes]
       },
       include: [
         {
@@ -199,14 +197,14 @@ module.exports = {
 
   /**
    * Get podcast episodes filtered and sorted
-   * @param {string} libraryId 
-   * @param {oldUser} user 
-   * @param {[string]} filterGroup 
-   * @param {[string]} filterValue 
-   * @param {string} sortBy 
-   * @param {string} sortDesc 
-   * @param {number} limit 
-   * @param {number} offset 
+   * @param {string} libraryId
+   * @param {oldUser} user
+   * @param {[string]} filterGroup
+   * @param {[string]} filterValue
+   * @param {string} sortBy
+   * @param {string} sortDesc
+   * @param {number} limit
+   * @param {number} offset
    * @param {boolean} isHomePage for home page shelves
    * @returns {object} {libraryItems:LibraryItem[], count:number}
    */
@@ -251,7 +249,7 @@ module.exports = {
       }
     } else if (filterGroup === 'recent') {
       podcastEpisodeWhere['createdAt'] = {
-        [Sequelize.Op.gte]: new Date(new Date() - (60 * 24 * 60 * 60 * 1000)) // 60 days ago
+        [Sequelize.Op.gte]: new Date(new Date() - 60 * 24 * 60 * 60 * 1000) // 60 days ago
       }
     }
 
@@ -305,10 +303,10 @@ module.exports = {
   /**
    * Search podcasts
    * @param {import('../../objects/user/User')} oldUser
-   * @param {import('../../objects/Library')} oldLibrary 
-   * @param {string} query 
-   * @param {number} limit 
-   * @param {number} offset 
+   * @param {import('../../objects/Library')} oldLibrary
+   * @param {string} query
+   * @param {number} limit
+   * @param {number} offset
    * @returns {{podcast:object[], tags:object[]}}
    */
   async search(oldUser, oldLibrary, query, limit, offset) {
@@ -386,7 +384,7 @@ module.exports = {
 
     // Search tags
     const tagMatches = []
-    const [tagResults] = await Database.sequelize.query(`SELECT value, count(*) AS numItems FROM podcasts p, libraryItems li, json_each(p.tags) WHERE json_valid(p.tags) AND json_each.value LIKE :query AND p.id = li.mediaId AND li.libraryId = :libraryId GROUP BY value LIMIT :limit OFFSET :offset;`, {
+    const [tagResults] = await Database.sequelize.query(`SELECT value, count(*) AS numItems FROM podcasts p, libraryItems li, json_each(p.tags) WHERE json_valid(p.tags) AND json_each.value LIKE :query AND p.id = li.mediaId AND li.libraryId = :libraryId GROUP BY value ORDER BY numItems DESC LIMIT :limit OFFSET :offset;`, {
       replacements: {
         query: `%${query}%`,
         libraryId: oldLibrary.id,
@@ -402,18 +400,37 @@ module.exports = {
       })
     }
 
+    // Search genres
+    const genreMatches = []
+    const [genreResults] = await Database.sequelize.query(`SELECT value, count(*) AS numItems FROM podcasts p, libraryItems li, json_each(p.genres) WHERE json_valid(p.genres) AND json_each.value LIKE :query AND p.id = li.mediaId AND li.libraryId = :libraryId GROUP BY value ORDER BY numItems DESC LIMIT :limit OFFSET :offset;`, {
+      replacements: {
+        query: `%${query}%`,
+        libraryId: oldLibrary.id,
+        limit,
+        offset
+      },
+      raw: true
+    })
+    for (const row of genreResults) {
+      genreMatches.push({
+        name: row.value,
+        numItems: row.numItems
+      })
+    }
+
     return {
       podcast: itemMatches,
-      tags: tagMatches
+      tags: tagMatches,
+      genres: genreMatches
     }
   },
 
   /**
    * Most recent podcast episodes not finished
-   * @param {import('../../objects/user/User')} oldUser 
-   * @param {import('../../objects/Library')} oldLibrary 
-   * @param {number} limit 
-   * @param {number} offset 
+   * @param {import('../../objects/user/User')} oldUser
+   * @param {import('../../objects/Library')} oldLibrary
+   * @param {number} limit
+   * @param {number} offset
    * @returns {Promise<object[]>}
    */
   async getRecentEpisodes(oldUser, oldLibrary, limit, offset) {
@@ -446,9 +463,7 @@ module.exports = {
           required: false
         }
       ],
-      order: [
-        ['publishedAt', 'DESC']
-      ],
+      order: [['publishedAt', 'DESC']],
       subQuery: false,
       limit,
       offset
@@ -469,7 +484,7 @@ module.exports = {
 
   /**
    * Get stats for podcast library
-   * @param {string} libraryId 
+   * @param {string} libraryId
    * @returns {Promise<{ totalSize:number, totalDuration:number, numAudioFiles:number, totalItems:number}>}
    */
   async getPodcastLibraryStats(libraryId) {
@@ -491,7 +506,7 @@ module.exports = {
 
   /**
    * Genres with num podcasts
-   * @param {string} libraryId 
+   * @param {string} libraryId
    * @returns {{genre:string, count:number}[]}
    */
   async getGenresWithCount(libraryId) {
@@ -513,17 +528,13 @@ module.exports = {
 
   /**
    * Get longest podcasts in library
-   * @param {string} libraryId 
-   * @param {number} limit 
+   * @param {string} libraryId
+   * @param {number} limit
    * @returns {Promise<{ id:string, title:string, duration:number }[]>}
    */
   async getLongestPodcasts(libraryId, limit) {
     const podcasts = await Database.podcastModel.findAll({
-      attributes: [
-        'id',
-        'title',
-        [Sequelize.literal(`(SELECT SUM(json_extract(pe.audioFile, '$.duration')) FROM podcastEpisodes pe WHERE pe.podcastId = podcast.id)`), 'duration']
-      ],
+      attributes: ['id', 'title', [Sequelize.literal(`(SELECT SUM(json_extract(pe.audioFile, '$.duration')) FROM podcastEpisodes pe WHERE pe.podcastId = podcast.id)`), 'duration']],
       include: {
         model: Database.libraryItemModel,
         attributes: ['id', 'libraryId'],
@@ -531,12 +542,10 @@ module.exports = {
           libraryId
         }
       },
-      order: [
-        ['duration', 'DESC']
-      ],
+      order: [['duration', 'DESC']],
       limit
     })
-    return podcasts.map(podcast => {
+    return podcasts.map((podcast) => {
       return {
         id: podcast.libraryItem.id,
         title: podcast.title,
@@ -544,4 +553,4 @@ module.exports = {
       }
     })
   }
-}
\ No newline at end of file
+}

From ec395bed7282c975f80c18cd77df495c606704c4 Mon Sep 17 00:00:00 2001
From: mikiher <mikiher@gmail.com>
Date: Sun, 21 Jul 2024 13:53:10 +0300
Subject: [PATCH 2/5] fix: Encode search query parameter in GlobalSearch.vue

---
 client/components/controls/GlobalSearch.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/components/controls/GlobalSearch.vue b/client/components/controls/GlobalSearch.vue
index d9cc6787f9..a94cccd9e8 100644
--- a/client/components/controls/GlobalSearch.vue
+++ b/client/components/controls/GlobalSearch.vue
@@ -126,7 +126,7 @@ export default {
       if (!this.search) return
       var search = this.search
       this.clearResults()
-      this.$router.push(`/library/${this.currentLibraryId}/search?q=${search}`)
+      this.$router.push(`/library/${this.currentLibraryId}/search?q=${encodeURIComponent(search)}`)
     },
     clearResults() {
       this.search = null
@@ -166,7 +166,7 @@ export default {
       }
       this.isFetching = true
 
-      const searchResults = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/search?q=${value}&limit=3`).catch((error) => {
+      const searchResults = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/search?q=${encodeURIComponent(value)}&limit=3`).catch((error) => {
         console.error('Search error', error)
         return []
       })

From 0476b685850d70762c2a3d3f14a9d379c91dcd2f Mon Sep 17 00:00:00 2001
From: mikiher <mikiher@gmail.com>
Date: Sun, 21 Jul 2024 14:00:55 +0300
Subject: [PATCH 3/5] fix: Encode search query parameter in search.vue

---
 client/pages/library/_library/search.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/pages/library/_library/search.vue b/client/pages/library/_library/search.vue
index 2f43d202e6..653fc3de14 100644
--- a/client/pages/library/_library/search.vue
+++ b/client/pages/library/_library/search.vue
@@ -16,7 +16,7 @@ export default {
     if (!library) {
       return redirect('/oops?message=Library not found')
     }
-    let results = await app.$axios.$get(`/api/libraries/${libraryId}/search?q=${query.q}`).catch((error) => {
+    let results = await app.$axios.$get(`/api/libraries/${libraryId}/search?q=${encodeURIComponent(query.q)}`).catch((error) => {
       console.error('Failed to search library', error)
       return null
     })
@@ -55,7 +55,7 @@ export default {
   },
   methods: {
     async search() {
-      const results = await this.$axios.$get(`/api/libraries/${this.libraryId}/search?q=${this.query}`).catch((error) => {
+      const results = await this.$axios.$get(`/api/libraries/${this.libraryId}/search?q=${encodeURIComponent(this.query)}`).catch((error) => {
         console.error('Failed to search library', error)
         return null
       })

From 3223011b138320dd38e5f7885df5e6b32ed6c824 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 21 Jul 2024 10:52:23 -0500
Subject: [PATCH 4/5] Fix:Switching libraries on search page losing q query
 string

---
 client/components/ui/LibrariesDropdown.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/components/ui/LibrariesDropdown.vue b/client/components/ui/LibrariesDropdown.vue
index 22abb301ce..7fea2dcb71 100644
--- a/client/components/ui/LibrariesDropdown.vue
+++ b/client/components/ui/LibrariesDropdown.vue
@@ -92,12 +92,13 @@ export default {
 
       if (this.$route.name.startsWith('config')) {
         // No need to refresh
-      } else if (this.$route.name.startsWith('library') && this.$route.name !== 'library-library-series-id') {
-        const newRoute = this.$route.path.replace(currLibraryId, library.id)
-        this.$router.push(newRoute)
       } else if (this.$route.name === 'library-library-series-id' && library.mediaType === 'book') {
         // For series item page redirect to root series page
         this.$router.push(`/library/${library.id}/bookshelf/series`)
+      } else if (this.$route.name === 'library-library-search') {
+        this.$router.push(this.$route.fullPath.replace(currLibraryId, library.id))
+      } else if (this.$route.name.startsWith('library')) {
+        this.$router.push(this.$route.path.replace(currLibraryId, library.id))
       } else {
         this.$router.push(`/library/${library.id}`)
       }

From a191dab359e950a9b4cc3ea372caa606bdff1cd7 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 21 Jul 2024 11:07:54 -0500
Subject: [PATCH 5/5] Show numItems and numBooks on search cards

---
 client/components/cards/AuthorSearchCard.vue   | 8 ++++++--
 client/components/cards/GenreSearchCard.vue    | 6 ++++--
 client/components/cards/NarratorSearchCard.vue | 8 +++++---
 client/components/cards/TagSearchCard.vue      | 8 +++++---
 client/components/controls/GlobalSearch.vue    | 6 +++---
 client/strings/en-us.json                      | 2 ++
 6 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/client/components/cards/AuthorSearchCard.vue b/client/components/cards/AuthorSearchCard.vue
index 76e7954398..f3693a5a8b 100644
--- a/client/components/cards/AuthorSearchCard.vue
+++ b/client/components/cards/AuthorSearchCard.vue
@@ -5,6 +5,7 @@
     </div>
     <div class="flex-grow px-2 authorSearchCardContent h-full">
       <p class="truncate text-sm">{{ name }}</p>
+      <p class="text-xs text-gray-400">{{ $getString('LabelXBooks', [numBooks]) }}</p>
     </div>
   </div>
 </template>
@@ -23,6 +24,9 @@ export default {
   computed: {
     name() {
       return this.author.name
+    },
+    numBooks() {
+      return this.author.numBooks
     }
   },
   methods: {},
@@ -33,9 +37,9 @@ export default {
 <style>
 .authorSearchCardContent {
   width: calc(100% - 80px);
-  height: 40px;
+  height: 44px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/components/cards/GenreSearchCard.vue b/client/components/cards/GenreSearchCard.vue
index 05be761449..73e8bbacf8 100644
--- a/client/components/cards/GenreSearchCard.vue
+++ b/client/components/cards/GenreSearchCard.vue
@@ -5,6 +5,7 @@
     </div>
     <div class="flex-grow px-2 tagSearchCardContent h-full">
       <p class="truncate text-sm">{{ genre }}</p>
+      <p class="text-xs text-gray-400">{{ $getString('LabelXItems', [numItems]) }}</p>
     </div>
   </div>
 </template>
@@ -12,7 +13,8 @@
 <script>
 export default {
   props: {
-    genre: String
+    genre: String,
+    numItems: Number
   },
   data() {
     return {}
@@ -26,7 +28,7 @@ export default {
 <style>
 .tagSearchCardContent {
   width: calc(100% - 40px);
-  height: 40px;
+  height: 44px;
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/client/components/cards/NarratorSearchCard.vue b/client/components/cards/NarratorSearchCard.vue
index d5d1dbbd26..00909c752a 100644
--- a/client/components/cards/NarratorSearchCard.vue
+++ b/client/components/cards/NarratorSearchCard.vue
@@ -5,6 +5,7 @@
     </div>
     <div class="flex-grow px-2 narratorSearchCardContent h-full">
       <p class="truncate text-sm">{{ narrator }}</p>
+      <p class="text-xs text-gray-400">{{ $getString('LabelXBooks', [numBooks]) }}</p>
     </div>
   </div>
 </template>
@@ -12,7 +13,8 @@
 <script>
 export default {
   props: {
-    narrator: String
+    narrator: String,
+    numBooks: Number
   },
   data() {
     return {}
@@ -26,9 +28,9 @@ export default {
 <style scoped>
 .narratorSearchCardContent {
   width: calc(100% - 40px);
-  height: 40px;
+  height: 44px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/components/cards/TagSearchCard.vue b/client/components/cards/TagSearchCard.vue
index ddd821b0f0..456ba39917 100644
--- a/client/components/cards/TagSearchCard.vue
+++ b/client/components/cards/TagSearchCard.vue
@@ -5,6 +5,7 @@
     </div>
     <div class="flex-grow px-2 tagSearchCardContent h-full">
       <p class="truncate text-sm">{{ tag }}</p>
+      <p class="text-xs text-gray-400">{{ $getString('LabelXItems', [numItems]) }}</p>
     </div>
   </div>
 </template>
@@ -12,7 +13,8 @@
 <script>
 export default {
   props: {
-    tag: String
+    tag: String,
+    numItems: Number
   },
   data() {
     return {}
@@ -26,9 +28,9 @@ export default {
 <style>
 .tagSearchCardContent {
   width: calc(100% - 40px);
-  height: 40px;
+  height: 44px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/components/controls/GlobalSearch.vue b/client/components/controls/GlobalSearch.vue
index a94cccd9e8..65e66927b9 100644
--- a/client/components/controls/GlobalSearch.vue
+++ b/client/components/controls/GlobalSearch.vue
@@ -61,7 +61,7 @@
           <template v-for="item in tagResults">
             <li :key="`tag.${item.name}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(item.name)}`">
-                <cards-tag-search-card :tag="item.name" />
+                <cards-tag-search-card :tag="item.name" :num-items="item.numItems" />
               </nuxt-link>
             </li>
           </template>
@@ -70,7 +70,7 @@
           <template v-for="item in genreResults">
             <li :key="`genre.${item.name}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(item.name)}`">
-                <cards-genre-search-card :genre="item.name" />
+                <cards-genre-search-card :genre="item.name" :num-items="item.numItems" />
               </nuxt-link>
             </li>
           </template>
@@ -79,7 +79,7 @@
           <template v-for="narrator in narratorResults">
             <li :key="narrator.name" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(narrator.name)}`">
-                <cards-narrator-search-card :narrator="narrator.name" />
+                <cards-narrator-search-card :narrator="narrator.name" :num-books="narrator.numBooks" />
               </nuxt-link>
             </li>
           </template>
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 3f7f4d57a3..7fecd71ce2 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -611,6 +611,8 @@
   "LabelViewQueue": "View player queue",
   "LabelVolume": "Volume",
   "LabelWeekdaysToRun": "Weekdays to run",
+  "LabelXBooks": "{0} books",
+  "LabelXItems": "{0} items",
   "LabelYearReviewHide": "Hide Year in Review",
   "LabelYearReviewShow": "See Year in Review",
   "LabelYourAudiobookDuration": "Your audiobook duration",