From ad14b2ec98698be31554bd4ff3891e3235d09695 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 31 Mar 2025 11:02:00 +0200
Subject: [PATCH] fix(front): tags display

---
 front/src/components/album/Widget.vue         |   2 +-
 front/src/components/artist/Widget.vue        |   1 +
 front/src/components/audio/ChannelsWidget.vue |   2 +-
 front/src/components/audio/track/Widget.vue   |   1 +
 front/src/components/library/TagDetail.vue    | 124 +++++++++---------
 front/src/components/library/TrackBase.vue    |   2 +-
 front/src/components/library/TrackDetail.vue  |   1 +
 front/src/components/tags/List.vue            |   3 +-
 front/src/locales/en_GB.json                  |  18 ++-
 9 files changed, 79 insertions(+), 75 deletions(-)

diff --git a/front/src/components/album/Widget.vue b/front/src/components/album/Widget.vue
index 13ef017a1..e16d6b059 100644
--- a/front/src/components/album/Widget.vue
+++ b/front/src/components/album/Widget.vue
@@ -78,7 +78,7 @@ watch(
   <Section
     align-left
     :h2="title"
-    :columns-per-item="3"
+    :columns-per-item="1"
   >
     <inline-search-bar
       v-if="search"
diff --git a/front/src/components/artist/Widget.vue b/front/src/components/artist/Widget.vue
index b064be707..a2e0c4458 100644
--- a/front/src/components/artist/Widget.vue
+++ b/front/src/components/artist/Widget.vue
@@ -79,6 +79,7 @@ watch(
 <template>
   <Section
     align-left
+    columns-per-item=1
     :h2="title"
   >
     <Loader
diff --git a/front/src/components/audio/ChannelsWidget.vue b/front/src/components/audio/ChannelsWidget.vue
index 0803cf801..397c76f6f 100644
--- a/front/src/components/audio/ChannelsWidget.vue
+++ b/front/src/components/audio/ChannelsWidget.vue
@@ -73,7 +73,7 @@ watch([() => props.filters, page],
 <template>
   <Section
     align-left
-    :columns-per-item="3"
+    :columns-per-item="1"
     :h2="title || undefined"
   >
     <Loader
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index 46a055b26..cc40b9cc6 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -186,6 +186,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
             <span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
           </span>
         </div>
+        <Spacer :size="8" />
         <TagsList
           label-classes="tiny"
           :truncate-size="20"
diff --git a/front/src/components/library/TagDetail.vue b/front/src/components/library/TagDetail.vue
index 76e652976..cc4b9105d 100644
--- a/front/src/components/library/TagDetail.vue
+++ b/front/src/components/library/TagDetail.vue
@@ -27,11 +27,6 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <Layout
-    v-title="labels.title"
-    main
-    stack
-  >
     <h1 class="ui header">
       <span class="funkwhale solid raised secondary pill">
         <span class="pill-content">
@@ -57,64 +52,71 @@ const labels = computed(() => ({
       </Button>
     </Layout>
 
-    <div class="ui hidden divider" />
-    <div class="ui row">
-      <artist-widget
-        :key="'artist' + id"
-        :controls="false"
-        :filters="{playable: true, ordering: '-creation_date', tag: id, include_channels: 'false'}"
-      >
-        <template #title>
-          <router-link :to="{name: 'library.artists.browse', query: {tag: id}}">
-            {{ t('components.library.TagDetail.link.artists') }}
-          </router-link>
-        </template>
-      </artist-widget>
-      <Spacer />
-      <h3 class="ui header">
-        {{ t('components.library.TagDetail.header.channels') }}
-      </h3>
-      <channels-widget
-        :key="'channels' + id"
-        :show-modification-date="true"
-        :limit="12"
-        :filters="{tag: id, ordering: '-creation_date'}"
-      />
-      <Spacer />
-      <album-widget
-        :key="'album' + id"
-        :show-count="true"
-        :controls="false"
-        :filters="{playable: true, ordering: '-creation_date', tag: id}"
-      >
-        <template #title>
-          <router-link :to="{name: 'library.albums.browse', query: {tag: id}}">
-            {{ t('components.library.TagDetail.link.albums') }}
-          </router-link>
-        </template>
-      </album-widget>
-      <Spacer />
-      <track-widget
-        :key="'track' + id"
-        :show-count="true"
-        :limit="12"
-        item-classes="track-item inline"
-        :url="'/tracks/'"
-        :is-activity="false"
-        :filters="{playable: true, ordering: '-creation_date', tag: id}"
-      >
-        <template #title>
-          {{ t('components.library.TagDetail.header.tracks') }}
-        </template>
-      </track-widget>
-    </div>
-  </Layout>
+    <Spacer :size=64 />
+    <artist-widget
+      :key="'artist' + id"
+      :controls="false"
+      :title="t('components.library.TagDetail.header.artists')"
+      :action="{
+        text: t('components.library.TagDetail.link.artists'),
+        to: {name: 'library.artists.browse', query: {tag: id}},
+        secondary: true,
+        solid: true
+      }"
+      :filters="{playable: true, ordering: '-creation_date', tag: id, include_channels: 'false'}"
+    >
+    </artist-widget>
+    <Spacer :size=64 />
+    <channels-widget
+      :key="'channels' + id"
+      :show-modification-date="true"
+      :limit="12"
+      :title="t('components.library.TagDetail.header.channels')"
+      :action="{
+        text: t('components.library.TagDetail.link.channels'),
+        to: {name: 'library.channels.browse', query: {tag: id}},
+        secondary: true,
+        solid: true
+      }"
+      :filters="{tag: id, ordering: '-creation_date'}"
+    />
+    <Spacer :size=64 />
+    <album-widget
+      :key="'album' + id"
+      :show-count="true"
+      :controls="false"
+      :filters="{playable: true, ordering: '-creation_date', tag: id}"
+      :title="t('components.library.TagDetail.header.albums')"
+      :action="{
+        text: t('components.library.TagDetail.link.albums'),
+        to: {name: 'library.albums.browse', query: {tag: id}},
+        secondary: true,
+        solid: true
+      }"
+    />
+    <Spacer :size=64 />
+    <track-widget
+      :key="'track' + id"
+      :show-count="true"
+      :limit="12"
+      item-classes="track-item inline"
+      :url="'/tracks/'"
+      :is-activity="false"
+      :filters="{playable: true, ordering: '-creation_date', tag: id}"
+      :title="t('components.library.TagDetail.header.tracks')"
+    />
 </template>
 
 <style lang="scss" scoped>
-  h1 > .pill > .pill-content {
-    font-size: 48px;
-    line-height: 48px;
-    padding: 20px 30px;
+  h1 > .pill {
+    border-radius: 100vh;
+    display: inline-block;
+    padding: 10px;
+
+    > .pill-content {
+      font-size: 48px;
+      line-height: 48px;
+      padding: 20px 30px;
+    }
   }
 </style>
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 3fa91ab50..8ed934b9b 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -354,7 +354,7 @@ watch(showDeleteModal, (newValue) => {
             {{ momentFormat(new Date(track.creation_date), 'LL') }}
           </time>
       </Layout>
-      <Spacer :size="32" />
+      <Spacer :size=16 />
 
       <Modal
         v-if="isEmbedable"
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 7ece05b09..c2f85c6ac 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -148,6 +148,7 @@ const trackDetails: {
       flex
       style="gap: 24px;"
     >
+    <Spacer />
       <Layout
         stack
         style="flex: 1; gap: 0;"
diff --git a/front/src/components/tags/List.vue b/front/src/components/tags/List.vue
index bd21bb1d7..68eb383ea 100644
--- a/front/src/components/tags/List.vue
+++ b/front/src/components/tags/List.vue
@@ -38,7 +38,7 @@ const tags = computed(() => {
 <template>
   <Layout
     flex
-    gap-8
+    gap-16
     class="component-tags-list"
   >
     <router-link
@@ -46,6 +46,7 @@ const tags = computed(() => {
       :key="tag"
       :to="{name: props.detailRoute, params: { id: tag } }"
       :class="props.labelClasses"
+      style="text-decoration: none;"
     >
       <Pill raised>
         {{ `#${truncate(tag, props.truncateSize)}` }}
diff --git a/front/src/locales/en_GB.json b/front/src/locales/en_GB.json
index 36deca5a2..97881409f 100644
--- a/front/src/locales/en_GB.json
+++ b/front/src/locales/en_GB.json
@@ -1866,13 +1866,18 @@
       },
       "TagDetail": {
         "header": {
+          "albums": "Albums",
+          "artists": "Artists",
           "channels": "Channels",
           "tracks": "Tracks"
         },
         "link": {
-          "albums": "Albums",
-          "artists": "Artists",
-          "moderation": "Open in moderation interface"
+          "albums": "View all Albums with this tag",
+          "artists": "View all Artists with this tag",
+          "channels": "View all Channels with this tag",
+          "django": "View in Django's admin",
+          "localProfile": "Open local profile",
+          "tracks": "View all Tracks with this tag"
         }
       },
       "TagSelector": {
@@ -3590,13 +3595,6 @@
             "audioContent": "Audio content",
             "tagData": "Tag data"
           },
-          "link": {
-            "albums": "Albums",
-            "artists": "Artists",
-            "django": "View in Django's admin",
-            "localProfile": "Open local profile",
-            "tracks": "Tracks"
-          },
           "modal": {
             "delete": {
               "content": {