From b0ef62498d7faaeac03841634ed543e80c740aab Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sun, 26 Jan 2025 00:47:52 +0100
Subject: [PATCH] refactor(fron): Tag detail page

---
 front/src/components/library/TagDetail.vue | 143 +++++++++++----------
 1 file changed, 76 insertions(+), 67 deletions(-)

diff --git a/front/src/components/library/TagDetail.vue b/front/src/components/library/TagDetail.vue
index 1e7823a00..19f5c92d6 100644
--- a/front/src/components/library/TagDetail.vue
+++ b/front/src/components/library/TagDetail.vue
@@ -8,6 +8,9 @@ import TrackWidget from '~/components/audio/track/Widget.vue'
 import AlbumWidget from '~/components/album/Widget.vue'
 import ArtistWidget from '~/components/artist/Widget.vue'
 import RadioButton from '~/components/radios/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 interface Props {
   id: string
@@ -24,81 +27,87 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <main v-title="labels.title">
-    <section class="ui vertical stripe segment">
-      <h2 class="ui header">
-        <span class="ui circular huge hashtag label component-label">
-          {{ labels.title }}
+  <Layout main stack v-title="labels.title">
+    <h1 class="ui header">
+      <span class="funkwhale solid raised secondary pill">
+      <span class="pill-content">
+        {{ labels.title }}
         </span>
-      </h2>
+      </span>
+    </h1>
+    <Layout flex class="buttons">
       <radio-button
         type="tag"
         :object-id="id"
       />
-      <router-link
+      <Button
         v-if="store.state.auth.availablePermissions['library']"
-        class="ui right floated button"
+        icon="bi-wrench"
+        secondary
         :to="{name: 'manage.library.tags.detail', params: {id: id}}"
       >
-        <i class="wrench icon" />
         {{ t('components.library.TagDetail.link.moderation') }}
-      </router-link>
+      </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>
-        <div class="ui hidden divider" />
-        <div class="ui hidden divider" />
-        <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'}"
-        />
-        <div class="ui hidden divider" />
-        <div class="ui hidden divider" />
-        <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>
-        <div class="ui hidden divider" />
-        <div class="ui hidden divider" />
-        <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 class="ui clearing hidden divider" />
-      </div>
-    </section>
-  </main>
+    <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>
 </template>
+
+<style lang="scss" scoped>
+  h1 > .pill > .pill-content {
+    font-size: 48px;
+    line-height: 48px;
+    padding: 20px 30px;
+  }
+</style>