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] 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 76e79543..f3693a5a 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 05be7614..73e8bbac 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 d5d1dbbd..00909c75 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 ddd821b0..456ba399 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 a94cccd9..65e66927 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 3f7f4d57..7fecd71c 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",