From 2f8494b0130689e7893a707f45cbaa38200beecc Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Mon, 1 Jan 2024 12:08:15 -0600
Subject: [PATCH] Add:Tags to item page & allow wrapping to multiple lines
 #1014

---
 pages/item/_id/index.vue | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/pages/item/_id/index.vue b/pages/item/_id/index.vue
index ea37c3c6..f4d7a272 100644
--- a/pages/item/_id/index.vue
+++ b/pages/item/_id/index.vue
@@ -77,11 +77,11 @@
 
         <!-- metadata -->
         <div id="metadata" class="grid gap-2 my-2" style>
-          <div v-if="podcastAuthor || (bookAuthors && bookAuthors.length)" class="text-fg-muted uppercase text-sm">{{ $strings.LabelAuthor }}</div>
+          <div v-if="podcastAuthor || bookAuthors?.length" class="text-fg-muted uppercase text-sm">{{ $strings.LabelAuthor }}</div>
           <div v-if="podcastAuthor" class="text-sm">{{ podcastAuthor }}</div>
-          <div v-else-if="bookAuthors && bookAuthors.length" class="text-sm">
+          <div v-else-if="bookAuthors?.length" class="text-sm">
             <template v-for="(author, index) in bookAuthors">
-              <nuxt-link :key="author.id" :to="`/bookshelf/library?filter=authors.${$encode(author.id)}`" class="underline">{{ author.name }}</nuxt-link
+              <nuxt-link :key="author.id" :to="`/bookshelf/library?filter=authors.${$encode(author.id)}`" class="underline whitespace-nowrap">{{ author.name }}</nuxt-link
               ><span :key="`${author.id}-comma`" v-if="index < bookAuthors.length - 1">, </span>
             </template>
           </div>
@@ -89,10 +89,10 @@
           <div v-if="podcastType" class="text-fg-muted uppercase text-sm">{{ $strings.LabelType }}</div>
           <div v-if="podcastType" class="text-sm capitalize">{{ podcastType }}</div>
 
-          <div v-if="series && series.length" class="text-fg-muted uppercase text-sm">{{ $strings.LabelSeries }}</div>
-          <div v-if="series && series.length" class="truncate text-sm">
+          <div v-if="series?.length" class="text-fg-muted uppercase text-sm">{{ $strings.LabelSeries }}</div>
+          <div v-if="series?.length" class="text-sm">
             <template v-for="(series, index) in seriesList">
-              <nuxt-link :key="series.id" :to="`/bookshelf/series/${series.id}`" class="underline">{{ series.text }}</nuxt-link
+              <nuxt-link :key="series.id" :to="`/bookshelf/series/${series.id}`" class="underline whitespace-nowrap">{{ series.text }}</nuxt-link
               ><span :key="`${series.id}-comma`" v-if="index < seriesList.length - 1">, </span>
             </template>
           </div>
@@ -100,22 +100,30 @@
           <div v-if="numTracks" class="text-fg-muted uppercase text-sm">{{ $strings.LabelDuration }}</div>
           <div v-if="numTracks" class="text-sm">{{ $elapsedPretty(duration) }}</div>
 
-          <div v-if="narrators && narrators.length" class="text-fg-muted uppercase text-sm">{{ $strings.LabelNarrators }}</div>
-          <div v-if="narrators && narrators.length" class="truncate text-sm">
+          <div v-if="narrators?.length" class="text-fg-muted uppercase text-sm">{{ $strings.LabelNarrators }}</div>
+          <div v-if="narrators?.length" class="text-sm">
             <template v-for="(narrator, index) in narrators">
-              <nuxt-link :key="narrator" :to="`/bookshelf/library?filter=narrators.${$encode(narrator)}`" class="underline">{{ narrator }}</nuxt-link
+              <nuxt-link :key="narrator" :to="`/bookshelf/library?filter=narrators.${$encode(narrator)}`" class="underline whitespace-nowrap">{{ narrator }}</nuxt-link
               ><span :key="index" v-if="index < narrators.length - 1">, </span>
             </template>
           </div>
 
           <div v-if="genres.length" class="text-fg-muted uppercase text-sm">{{ $strings.LabelGenres }}</div>
-          <div v-if="genres.length" class="truncate text-sm">
+          <div v-if="genres.length" class="text-sm">
             <template v-for="(genre, index) in genres">
-              <nuxt-link :key="genre" :to="`/bookshelf/library?filter=genres.${$encode(genre)}`" class="underline">{{ genre }}</nuxt-link
+              <nuxt-link :key="genre" :to="`/bookshelf/library?filter=genres.${$encode(genre)}`" class="underline whitespace-nowrap">{{ genre }}</nuxt-link
               ><span :key="index" v-if="index < genres.length - 1">, </span>
             </template>
           </div>
 
+          <div v-if="tags.length" class="text-fg-muted uppercase text-sm">{{ $strings.LabelTags }}</div>
+          <div v-if="tags.length" class="text-sm">
+            <template v-for="(tag, index) in tags">
+              <nuxt-link :key="tag" :to="`/bookshelf/library?filter=tags.${$encode(tag)}`" class="underline whitespace-nowrap">{{ tag }}</nuxt-link
+              ><span :key="index" v-if="index < tags.length - 1">, </span>
+            </template>
+          </div>
+
           <div v-if="publishedYear" class="text-fg-muted uppercase text-sm">{{ $strings.LabelPublishYear }}</div>
           <div v-if="publishedYear" class="text-sm">{{ publishedYear }}</div>
         </div>
@@ -300,6 +308,9 @@ export default {
     media() {
       return this.libraryItem.media || {}
     },
+    tags() {
+      return this.media.tags || []
+    },
     mediaMetadata() {
       return this.media.metadata || {}
     },