fix(front): Actorlink and ArtistLinks consistency.

front/src/components/Queue.vue

@@ -18,6 +18,7 @@ import { useI18n } from 'vue-i18n'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import PlayerControls from '~/components/audio/PlayerControls.vue'
+import ActorLink from '~/components/audio/ArtistCreditLabel.vue'
 
 import VirtualList from '~/components/vui/list/VirtualList.vue'
 import QueueItem from '~/components/QueueItem.vue'
@@ -27,6 +28,7 @@ import Spacer from '~/components/ui/Spacer.vue'
 import Link from '~/components/ui/Link.vue'
 import Button from '~/components/ui/Button.vue'
 import Pill from '~/components/ui/Pill.vue'
+import ArtistCreditLabel from '~/components/audio/ArtistCreditLabel.vue'
 
 const MilkDrop = defineAsyncComponent(() => import('~/components/audio/visualizer/MilkDrop.vue'))
 
@@ -296,35 +298,9 @@ if (!isWebGLSupported) {
             </template>
           </h2>
           <span>
-            <Layout
+            <ArtistCreditLabel
-              flex
+              :artist-credit="currentTrack.artistCredit || undefined"
-              gap-8
+            />
-            >
-              <template
-                v-for="ac in currentTrack.artistCredit"
-                :key="ac.artist.id"
-              >
-                <router-link
-                  :to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
-                  @click.stop.prevent=""
-                >
-                  <Pill>
-                    <template #image>
-                      <img
-                        v-if="ac.artist.cover"
-                        v-lazy="ac.artist.cover?.urls.small_square_crop"
-                      >
-                      <i
-                        v-else
-                        class="bi bi-person-circle"
-                      />
-                    </template>
-                    {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
-                  </Pill>
-                </router-link>
-                <span>{{ ac.joinphrase }}</span>
-              </template>
-            </Layout>
           </span>
           <div
             v-if="currentTrack && errored"

front/src/components/audio/ArtistCreditLabel.vue

@@ -13,6 +13,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
+// TODO: Fix getRoute
 const getRoute = (ac: ArtistCredit) => {
   return {
     name: ac.artist.channel ? 'channels.detail' : 'library.artists.detail',
@@ -32,6 +33,7 @@ const getRoute = (ac: ArtistCredit) => {
       <router-link
         :to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
         @click.stop.prevent=""
+        class="username"
       >
         <Pill>
           <template #image>
@@ -53,3 +55,9 @@ const getRoute = (ac: ArtistCredit) => {
     </template>
   </Layout>
 </template>
+
+<style lang="scss" scoped>
+a.username {
+  text-decoration: none;
+}
+</style>

front/src/components/common/ActorLink.vue

@@ -6,6 +6,7 @@ import { computed } from 'vue'
 import { truncate } from '~/utils/filters'
 
 import Link from '~/components/ui/Link.vue'
+import Pill from '~/components/ui/Pill.vue'
 
 interface Props {
   actor: Actor
@@ -54,29 +55,30 @@ const url = computed(() => {
 </script>
 
 <template>
-  <Link
+  <router-link
     :to="url"
-    :title="actor?.full_username"
     class="username"
-    :solid="!discrete"
+    @click.stop.prevent=""
-    :secondary="!discrete"
-    :round="!discrete"
   >
-    <span class="center">
+    <Pill>
-      <actor-avatar
+      <template #image>
-        v-if="avatar"
+        <actor-avatar
-        :actor="actor"
+          v-if="avatar"
-      />
+          :actor="actor"
-      <slot>{{ repr }}</slot>
+        />
-    </span>
+        <i
-  </Link>
+          v-else
+          class="bi bi-person-circle"
+          style="font-size: 24px;"
+        />
+      </template>
+      {{ repr }}
+    </Pill>
+  </router-link>
 </template>
 
 <style lang="scss" scoped>
 a.username {
-  span.center {
+  text-decoration: none;
-    display: flex;
-    align-items: center;
-  }
 }
 </style>

front/src/components/library/TrackBase.vue

@@ -334,8 +334,7 @@ watch(showDeleteModal, (newValue) => {
       </Layout>
 
       <hr>
-      <Layout flex>
+      <Layout flex gap-8>
-        <div>
           <span v-if="track.attributed_to">
             {{ t('components.library.TrackBase.subtitle.with-uploader') }}
           </span>
@@ -354,8 +353,8 @@ watch(showDeleteModal, (newValue) => {
           >
             {{ momentFormat(new Date(track.creation_date), 'LL') }}
           </time>
-        </div>
       </Layout>
+      <Spacer :size="32" />
 
       <Modal
         v-if="isEmbedable"

front/src/components/playlists/Card.vue

@@ -12,6 +12,7 @@ import { useI18n } from 'vue-i18n'
 import moment from 'moment'
 
 import Card from '~/components/ui/Card.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import ActorLink from '~/components/common/ActorLink.vue'
 
 interface Props {
@@ -59,7 +60,7 @@ const goToPlaylist = () => {
 
 const updatedTitle = computed(() => {
   const date = momentFormat(new Date(props.playlist.modification_date ?? '1970-01-01'))
-  return t('components.audio.PlaylistCard.title', { date })
+  return t('components.playlists.Card.title', { date })
 })
 const updatedAgo = computed(() => moment(props.playlist.modification_date).fromNow())
 </script>
@@ -93,6 +94,7 @@ const updatedAgo = computed(() => moment(props.playlist.modification_date).fromN
     <template #default>
       <div class="playlist-meta">
         <span>{{ t('vui.by-user') }}</span>
+        <Spacer :size="8" />
         <ActorLink
           :actor="playlist.actor"
           :avatar="false"

front/src/components/ui/Pill.vue

@@ -358,7 +358,8 @@ const current = computed(() => (
     display: block;
     appearance: none;
     background: transparent;
-    outline: transparent;
+    outline: 0px transparent;
+    border: 0px;
 
     font-size: 12px;
     line-height: 16px;
@@ -366,8 +367,8 @@ const current = computed(() => (
     border-radius: 100vh;
 
     // Negative margins for increased interactive area; visual correction for rounded shape
-    margin: -5px -7px;
+    margin: -4px -4px;
-    padding: 5px;
+    padding: 0px;
 
     border-radius: 100vh;
 

front/src/locales/en_GB.json

@@ -4,11 +4,12 @@
   },
   "vui": {
     "radio": "Radio",
-    "by-user": "by {'@'}{username}",
+    "by-user": "by {username}",
     "go-to": "Go to",
     "pagination": {
-      "previous": "Previous",
+      "label": "Pagination",
-      "next": "Next"
+      "previous": "Previous page",
+      "next": "Next page"
     },
     "albums": "{n} album | {n} albums",
     "tracks": "{n} track | {n} tracks",
@@ -2812,6 +2813,7 @@
     },
     "playlists": {
       "Card": {
+        "title": "Updated on {date}",
         "meta": {
           "tracks": "No tracks | {n} track | {n} tracks"
         }
@@ -2946,13 +2948,6 @@
           "more": "Show 1 more tag | Show {n} more tags"
         }
       }
-    },
-    "vui": {
-      "Pagination": {
-        "label": "Pagination",
-        "next": "Next Page",
-        "previous": "Previous Page"
-      }
     }
   },
   "composables": {

front/src/locales/en_US.json

@@ -529,9 +529,6 @@
           "previous": "Previous track"
         }
       },
-      "PlaylistCard": {
-        "title": "Updated on {date}"
-      },
       "Search": {
         "empty": {
           "noAlbums": "No album matched your query",