refactor(fron): Tag detail page

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,25 +27,28 @@ 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">
+  <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">
@@ -57,8 +63,7 @@ const labels = computed(() => ({
           </router-link>
         </template>
       </artist-widget>
-        <div class="ui hidden divider" />
-        <div class="ui hidden divider" />
+      <Spacer />
       <h3 class="ui header">
         {{ t('components.library.TagDetail.header.channels') }}
       </h3>
@@ -68,8 +73,7 @@ const labels = computed(() => ({
         :limit="12"
         :filters="{tag: id, ordering: '-creation_date'}"
       />
-        <div class="ui hidden divider" />
-        <div class="ui hidden divider" />
+      <Spacer />
       <album-widget
         :key="'album' + id"
         :show-count="true"
@@ -82,8 +86,7 @@ const labels = computed(() => ({
           </router-link>
         </template>
       </album-widget>
-        <div class="ui hidden divider" />
-        <div class="ui hidden divider" />
+      <Spacer />
       <track-widget
         :key="'track' + id"
         :show-count="true"
@@ -97,8 +100,14 @@ const labels = computed(() => ({
           {{ t('components.library.TagDetail.header.tracks') }}
         </template>
       </track-widget>
-        <div class="ui clearing hidden divider" />
     </div>
-    </section>
-  </main>
+  </Layout>
 </template>
+
+<style lang="scss" scoped>
+  h1 > .pill > .pill-content {
+    font-size: 48px;
+    line-height: 48px;
+    padding: 20px 30px;
+  }
+</style>