style(front): Queue track details links

front/src/components/Queue.vue

@@ -23,6 +23,8 @@ import VirtualList from '~/components/vui/list/VirtualList.vue'
 import QueueItem from '~/components/QueueItem.vue'
 
 import Button from '~/components/ui/Button.vue'
+import Link from '~/components/ui/Link.vue'
+import Pill from '~/components/ui/Pill.vue'
 
 const MilkDrop = defineAsyncComponent(() => import('~/components/audio/visualizer/MilkDrop.vue'))
 
@@ -274,41 +276,42 @@ if (!isWebGLSupported) {
             </div>
           </div>
           <h1 class="ui header">
-            <div class="content ellipsis">
+            <Link
-              <router-link
+              class="track"
-                class="small header discrete link track"
+              :to="{name: 'library.tracks.detail', params: {id: currentTrack.id }}"
-                :to="{name: 'library.tracks.detail', params: {id: currentTrack.id }}"
+            >
-              >
+              {{ currentTrack.title }}
-                {{ currentTrack.title }}
+            </Link>
-              </router-link>
-              <div class="sub header ellipsis">
-                <span>
-                  <template
-                    v-for="ac in currentTrack.artistCredit"
-                    :key="ac.artist.id"
-                  >
-                    <router-link
-                      class="discrete link"
-                      :to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
-                      @click.stop.prevent=""
-                    >
-                      {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
-                    </router-link>
-                    <span>{{ ac.joinphrase }}</span>
-                  </template>
-                </span>
-                <template v-if="currentTrack.albumId !== -1">
-                  <span class="middle slash symbol" />
-                  <router-link
-                    class="discrete link album"
-                    :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
-                  >
-                    {{ currentTrack.albumTitle ?? t('components.Queue.meta.unknownAlbum') }}
-                  </router-link>
-                </template>
-              </div>
-            </div>
           </h1>
+          <h2>
+            <template v-if="currentTrack.albumId !== -1">
+              <Link
+                class="album"
+                :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
+              >
+                {{ currentTrack.albumTitle ?? t('components.Queue.meta.unknownAlbum') }}
+              </Link>
+            </template>
+          </h2>
+          <span>
+            <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 v-if="ac.artist.attachment_cover">
+                    <img v-lazy="ac.artist.attachment_cover?.urls.medium_square_crop">
+                  </template>
+                  {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
+                </Pill>
+              </router-link>
+              <span>{{ ac.joinphrase }}</span>
+            </template>
+          </span>
           <div
             v-if="currentTrack && errored"
             class="ui small warning message"

front/src/style/components/_queue.scss

@@ -315,6 +315,21 @@
         max-width: 90%;
       }
 
+      h1 {
+        margin-bottom: 0px;
+        a.track {
+          font-size: 24px;
+          font-weight: 600;
+        }
+      }
+      h2 {
+        margin-top: 0px;
+        margin-bottom: 10px;
+        a {
+          font-size: 16px;
+        }
+      }
+
       .cover-container {
         width: 50vh;
         max-width: 90%;
@@ -345,6 +360,7 @@
           img {
             object-fit: contain;
             object-position: center;
+            box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);
           }
 
           &:hover .cover-buttons {