From 4c1388af5dddcbd2920272ac808c20f782c40873 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 24 Mar 2025 14:34:37 +0100
Subject: [PATCH] fix(front): use artistCredit for admin pages, display artist
 credits in one line

---
 front/src/components/album/Card.vue           |  1 -
 .../components/audio/ArtistCreditLabel.vue    | 49 ++++++++++---------
 front/src/components/common/ActorLink.vue     | 10 ++--
 .../components/manage/library/AlbumsTable.vue |  8 +--
 .../components/manage/library/TracksTable.vue |  8 +--
 front/src/views/admin/library/TrackDetail.vue |  8 +--
 6 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/front/src/components/album/Card.vue b/front/src/components/album/Card.vue
index 66ea2ab47..b70d006a4 100644
--- a/front/src/components/album/Card.vue
+++ b/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
diff --git a/front/src/components/audio/ArtistCreditLabel.vue b/front/src/components/audio/ArtistCreditLabel.vue
index a4d35c65d..5a3eae81c 100644
--- a/front/src/components/audio/ArtistCreditLabel.vue
+++ b/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,28 +24,30 @@ const getRoute = (ac: ArtistCredit) => {
 </script>
 
 <template>
-  <template
-    v-for="ac in props.artistCredit"
-    :key="ac.artist.id"
-  >
-    <router-link
-      :to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
-      @click.stop.prevent=""
+  <Layout flex>
+    <template
+      v-for="ac in props.artistCredit"
+      :key="ac.artist.id"
     >
-      <Pill>
-        <template #image>
-          <img
-            v-if="ac.artist.cover && ac.artist.cover.urls.original"
-            v-lazy="store.getters['instance/absoluteUrl'](ac.artist.cover.urls.small_square_crop)"
-            :alt="ac.artist.name"
-          >
-          <i
-            v-else
-            class="bi bi-person-circle"
-          />
-        </template>
-        {{ ac.credit }}
-      </Pill>
-    </router-link>
-  </template>
+      <router-link
+        :to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
+        @click.stop.prevent=""
+      >
+        <Pill>
+          <template #image>
+            <img
+              v-if="ac.artist.cover && ac.artist.cover.urls.original"
+              v-lazy="store.getters['instance/absoluteUrl'](ac.artist.cover.urls.small_square_crop)"
+              :alt="ac.artist.name"
+            >
+            <i
+              v-else
+              class="bi bi-person-circle"
+            />
+          </template>
+          {{ ac.credit }}
+        </Pill>
+      </router-link>
+    </template>
+  </Layout>
 </template>
diff --git a/front/src/components/common/ActorLink.vue b/front/src/components/common/ActorLink.vue
index 002145b05..eecba8d01 100644
--- a/front/src/components/common/ActorLink.vue
+++ b/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) {
-    return { name: 'profile.overview', params: { username: actor.value.preferred_username } }
+  if (actor.value?.is_local) {
+    return { name: 'profile.overview', params: { username: actor.value?.preferred_username } }
   }
 
   return {
     name: 'profile.full.overview',
     params: {
-      username: actor.value.preferred_username,
-      domain: actor.value.domain
+      username: actor.value?.preferred_username,
+      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"
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index 93592a8de..ede39e21b 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/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"
-          @click.prevent="addSearchToken('artist', scope.obj.artist.name)"
-        >{{ scope.obj.artist.name }}</a>
+          :title="scope.obj.artist_credit[0].artist.name"
+          @click.prevent="addSearchToken('artist', scope.obj.artist_credit[0].artist.name)"
+        >{{ scope.obj.artist_credit[0].artist.name }}</a>
       </td>
       <td>
         <template v-if="!scope.obj.is_local">
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index 116f8d863..8067f62ff 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/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"
-          @click.prevent="addSearchToken('artist_id', scope.obj.artist.id)"
-        >{{ scope.obj.artist.name }}</a>
+          :title="scope.obj.artist_credit[0].artist.name"
+          @click.prevent="addSearchToken('artist_id', scope.obj.artist_credit[0].artist.id)"
+        >{{ scope.obj.artist_credit[0].artist.name }}</a>
       </td>
       <td>
         <template v-if="!scope.obj.is_local">
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index 59d5b91b1..01c5fba67 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/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>