fix(front): use artistCredit for admin pages, display artist credits in one line

front/src/components/album/Card.vue

@@ -26,7 +26,6 @@ const props = defineProps<Props>()
 const { album } = props
 
 const artistCredit = album.artist_credit || []
-const firstArtist = artistCredit.length > 0 ? artistCredit[0].artist : null
 
 const store = useStore()
 const imageUrl = computed(() => props.album.cover?.urls.original

front/src/components/audio/ArtistCreditLabel.vue

@@ -2,6 +2,7 @@
 import type { ArtistCredit } from '~/types'
 import { useStore } from '~/store'
 
+import Layout from '~/components/ui/Layout.vue'
 import Pill from '~/components/ui/Pill.vue'
 
 const store = useStore()
@@ -23,6 +24,7 @@ const getRoute = (ac: ArtistCredit) => {
 </script>
 
 <template>
+  <Layout flex>
     <template
       v-for="ac in props.artistCredit"
       :key="ac.artist.id"
@@ -47,4 +49,5 @@ const getRoute = (ac: ArtistCredit) => {
         </Pill>
       </router-link>
     </template>
+  </Layout>
 </template>

front/src/components/common/ActorLink.vue

@@ -39,15 +39,15 @@ const url = computed(() => {
     return { name: 'manage.moderation.accounts.detail', params: { id: actor.value.full_username } }
   }
 
-  if (actor.value.is_local) {
+  if (actor.value?.is_local) {
-    return { name: 'profile.overview', params: { username: actor.value.preferred_username } }
+    return { name: 'profile.overview', params: { username: actor.value?.preferred_username } }
   }
 
   return {
     name: 'profile.full.overview',
     params: {
-      username: actor.value.preferred_username,
+      username: actor.value?.preferred_username,
-      domain: actor.value.domain
+      domain: actor.value?.domain
     }
   }
 })
@@ -56,7 +56,7 @@ const url = computed(() => {
 <template>
   <Link
     :to="url"
-    :title="actor.full_username"
+    :title="actor?.full_username"
     class="username"
     :solid="!discrete"
     :secondary="!discrete"

front/src/components/manage/library/AlbumsTable.vue

@@ -194,16 +194,16 @@ const labels = computed(() => ({
         </router-link>
       </td>
       <td>
-        <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist.id }}">
+        <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist_credit[0].artist.id }}">
           <i class="wrench icon" />
           <span class="visually-hidden">{{ labels.openModeration }}</span>
         </router-link>
         <a
           href=""
           class="discrete link"
-          :title="scope.obj.artist.name"
+          :title="scope.obj.artist_credit[0].artist.name"
-          @click.prevent="addSearchToken('artist', scope.obj.artist.name)"
+          @click.prevent="addSearchToken('artist', scope.obj.artist_credit[0].artist.name)"
-        >{{ scope.obj.artist.name }}</a>
+        >{{ scope.obj.artist_credit[0].artist.name }}</a>
       </td>
       <td>
         <template v-if="!scope.obj.is_local">

front/src/components/manage/library/TracksTable.vue

@@ -205,15 +205,15 @@ const labels = computed(() => ({
         </template>
       </td>
       <td>
-        <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist.id }}">
+        <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist_credit[0].artist.id }}">
           <i class="wrench icon" />
         </router-link>
         <a
           href=""
           class="discrete link"
-          :title="scope.obj.artist.name"
+          :title="scope.obj.artist_credit[0].artist.name"
-          @click.prevent="addSearchToken('artist_id', scope.obj.artist.id)"
+          @click.prevent="addSearchToken('artist_id', scope.obj.artist_credit[0].artist.id)"
-        >{{ scope.obj.artist.name }}</a>
+        >{{ scope.obj.artist_credit[0].artist.name }}</a>
       </td>
       <td>
         <template v-if="!scope.obj.is_local">

front/src/views/admin/library/TrackDetail.vue

@@ -246,22 +246,22 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
 
                   <tr>
                     <td>
-                      <router-link :to="{name: 'manage.library.artists.detail', params: {id: track.artist.id }}">
+                      <router-link :to="{name: 'manage.library.artists.detail', params: {id: track.artist_credit[0].artist.id }}">
                         {{ t('views.admin.library.TrackDetail.link.artist') }}
                       </router-link>
                     </td>
                     <td>
-                      {{ track.artist.name }}
+                      {{ track.artist_credit[0].artist.name }}
                     </td>
                   </tr>
                   <tr v-if="track.album">
                     <td>
-                      <router-link :to="{name: 'manage.library.artists.detail', params: {id: track.album.artist.id }}">
+                      <router-link :to="{name: 'manage.library.artists.detail', params: {id: track.album.artist_credit[0].artist.id }}">
                         {{ t('views.admin.library.TrackDetail.link.albumArtist') }}
                       </router-link>
                     </td>
                     <td>
-                      {{ track.album.artist.name }}
+                      {{ track.album.artist_credit[0].artist.name }}
                     </td>
                   </tr>
                   <tr>