From c1ed0112bca9e67b2d47be26b56aba9e1d53a0fe Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 20 Feb 2025 16:05:50 +0100
Subject: [PATCH] fix(style): show tags in detail pages

---
 front/src/components/library/AlbumBase.vue    | 6 ------
 front/src/components/library/AlbumDetail.vue  | 6 ++++++
 front/src/components/library/ArtistBase.vue   | 5 -----
 front/src/components/library/ArtistDetail.vue | 2 +-
 front/src/components/library/TrackBase.vue    | 5 -----
 front/src/components/library/TrackDetail.vue  | 8 +++++---
 6 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index 3efc44c2b..311342164 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -15,7 +15,6 @@ import ArtistCreditLabel from '~/components/audio/ArtistCreditLabel.vue'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
-import TagsList from '~/components/tags/List.vue'
 import AlbumDropdown from './AlbumDropdown.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
@@ -204,12 +203,7 @@ const remove = async () => {
                 v-if="totalDuration > 0"
                 :duration="totalDuration"
               />
-              <i v-if="object.tags && object.tags.length > 0" class="bi bi-dot" />
               <!--TODO: License -->
-              <TagsList
-                v-if="object.tags && object.tags.length > 0"
-                :tags="object.tags"
-              />
             </div>
             <Layout flex>
               <rendered-description
diff --git a/front/src/components/library/AlbumDetail.vue b/front/src/components/library/AlbumDetail.vue
index a0c15ecd6..b6555a883 100644
--- a/front/src/components/library/AlbumDetail.vue
+++ b/front/src/components/library/AlbumDetail.vue
@@ -5,6 +5,7 @@ import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import ChannelEntries from '~/components/audio/ChannelEntries.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
+import TagsList from '~/components/tags/List.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -79,6 +80,11 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
     <Loader v-if="isLoadingTracks" />
 
     <template v-else>
+      <TagsList
+        v-if="object.tags && object.tags.length > 0"
+        style="margin-top: -16px;"
+        :tags="object.tags"
+      />
       <template v-if="discCount > 1">
         <div
           v-for="tracks, index in paginatedDiscs"
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
index f7b8df75d..269d4403b 100644
--- a/front/src/components/library/ArtistBase.vue
+++ b/front/src/components/library/ArtistBase.vue
@@ -21,7 +21,6 @@ import PlayButton from '~/components/audio/PlayButton.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
-import TagsList from '~/components/tags/List.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Modal from '~/components/ui/Modal.vue'
 import Spacer from '~/components/ui/Spacer.vue'
@@ -148,10 +147,6 @@ watch(() => props.id, fetchData, { immediate: true })
                 :duration="totalDuration"
               />
             </div>
-            <TagsList
-              v-if="object.tags && object.tags.length > 0"
-              :tags="object.tags"
-            />
           </Layout>
           <Spacer />
           <Layout flex>
diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue
index eeb10fccb..1c0e56fd0 100644
--- a/front/src/components/library/ArtistDetail.vue
+++ b/front/src/components/library/ArtistDetail.vue
@@ -14,7 +14,6 @@ import TrackTable from '~/components/audio/track/Table.vue'
 import TagsList from '~/components/tags/List.vue'
 import AlbumCard from '~/components/album/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Section from '~/components/ui/Section.vue'
 import Heading from "~/components/ui/Heading.vue";
 import Loader from '~/components/ui/Loader.vue'
 import Link from '~/components/ui/Link.vue'
@@ -73,6 +72,7 @@ const loadMoreAlbums = async () => {
   <Layout stack v-if="object">
     <TagsList
       v-if="object.tags && object.tags.length > 0"
+      style="margin-top: -16px;"
       :tags="object.tags"
     />
     <Alert blue
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index bd41fab6c..c35ef0324 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -15,7 +15,6 @@ import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import HumanDuration from '~/components/common/HumanDuration.vue'
-import TagsList from '~/components/tags/List.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Modal from '~/components/ui/Modal.vue'
@@ -314,10 +313,6 @@ watch(showDeleteModal, (newValue) => {
         </time>
       </div>
     </Layout>
-    <TagsList
-      v-if="track.tags && track.tags.length > 0"
-      :tags="track.tags"
-    />
 
     <Modal
       v-if="isEmbedable"
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 9dc976645..768e4dc0f 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -136,9 +136,11 @@ const track_details: {
 
 <template>
   <Layout stack v-if="track">
-    <template v-if="track.tags && track.tags.length > 0">
-      <TagsList :tags="track.tags" />
-    </template>
+    <TagsList
+      v-if="track.tags && track.tags.length > 0"
+      style="margin-top: -16px;"
+      :tags="track.tags"
+    />
 
     <Layout flex style="gap: 24px;">
       <Layout stack style="flex: 1; gap: 0;">